resume and project btn added

EthanBlake00 · Aug 15, 2024 · 74fbcb8 · 74fbcb8
1 parent d506b22
commit 74fbcb8
Show file tree

Hide file tree

Showing 26 changed files with 6,525 additions and 10 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/hewagenkm.github.io.iml b/.idea/hewagenkm.github.io.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+
+# Portfolio
+
+Portfolio for demonstrate my skills and projects I have worked on.
+
+[Live Demo](https://hewagenkm.github.io)
+
+## Technologies
+
+- Reactjs
+- TypeScript
+- Tailwind CSS
+
+## Authors
+
+- [@Nadun Kawishika](https://www.github.com/HewageNKM)
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import {Lato} from "next/font/google";
+import "../styles/globals.css";
+import {GlobalProvider} from "@/context/GlobalProvider";
+
+const lato =Lato({weight: "400", subsets: ["latin"]});
+
+export const metadata: Metadata = {
+  title: "Nadun's Portfolio",
+  description: "Nadun's Portfolio. A place to showcase my work and projects.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={lato.className}>
+      <GlobalProvider>
+        {children}
+      </GlobalProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,13 @@
+import Header from "@/components/Header";
+import Hero from "@/components/Hero";
+import Footer from "@/components/ui/Footer";
+
+export default function Home() {
+    return (
+        <main className="relative border rounded-lg border-gray-900 min-h-[97vh] m-2">
+            <Header/>
+            <Hero/>
+            <Footer/>
+        </main>
+    );
+}
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Page = () => {
+    return (
+        <div>
+            <h1>Page</h1>
+        </div>
+    );
+};
+
+export default Page;
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -1,18 +1,43 @@
 "use client";
 import React from "react";
 import {motion} from "framer-motion";
+import Link from "next/link";
 
 const Hero = () => {
-    return (
-        <div className="px-10 mt-10 md:mt-20 pb-10 w-full flex justify-center items-center">
-            <motion.div>
+    const [projectAnimation, setProjectAnimation] = React.useState(false);
+    const [resumeAnimation, setResumeAnimation] = React.useState(false);
 
-            </motion.div>
-            <motion.div initial={{opacity:0,y:'2vh'}} transition={{ delay:.9}} animate={{opacity:1,y:0}} className="flex flex-col transition-all flex-wrap justify-center items-center">
-                <h1 className="lg:text-[7rem] xl:text-[10rem] transition-all duration-500 text-[3rem] md:text-[5rem] text-center xl:line-clamp-1 tracking-wider font-bold text-gray-900">Hello, I&apos;m Nadun</h1>
-                <p className="lg:text-xl mt-3 text-[1.1rem] md:text-[1.5rem] duration-500 xl:text-2xl transition-all text-center capitalize font-medium text-gray-500">A Passionate Mobile and Web Developer base in Sri Lanka.</p>
-            </motion.div>
-        </div>
+    return (
+        <motion.div initial={{opacity: 0, y: '2vh'}}
+                    transition={{delay: .9, type: 'spring', stiffness: 100, damping: 10}} animate={{opacity: 1, y: 0}}
+                    className="px-10 mt-10 md:mt-20 pb-10 w-full flex-col flex justify-center items-center">
+            <div className="flex flex-col transition-all flex-wrap justify-center items-center">
+                <h1 className="lg:text-[7rem] xl:text-[10rem] transition-all duration-500 text-[3rem] md:text-[5rem] text-center tracking-wider font-bold text-gray-900">Hello,
+                    I&apos;m Nadun</h1>
+                <p className="lg:text-xl mt-3 text-[1.1rem] md:text-[1.5rem] duration-500 xl:text-2xl transition-all text-center capitalize font-medium text-gray-500">A
+                    Passionate Mobile and Web Developer base in Sri Lanka.</p>
+            </div>
+            <div className="mt-8 flex justify-center items-center gap-20">
+                <div>
+                    <Link onMouseLeave={() => setResumeAnimation(false)} onMouseEnter={() => setResumeAnimation(true)}
+                          href="/contact"
+                          className="flex hover:translate-x-2 transition-all duration-500 justify-center items-center">
+                        <h2 className="border-b-[1.5px] text-gray-700 font-bold uppercase w-[5rem] text-lg md:text-xl border-b-gray-900">
+                            résumé
+                        </h2>
+                    </Link>
+                </div>
+                <div>
+                    <Link onMouseEnter={() => setProjectAnimation(true)} onMouseLeave={() => setProjectAnimation(false)}
+                          href="/projects"
+                          className="flex hover:translate-x-2 transition-all duration-500 justify-center items-center">
+                        <h2 className="border-b-[1.5px] uppercase text-gray-700 font-bold text-lg md:text-xl border-b-gray-900">
+                            Projécts
+                        </h2>
+                    </Link>
+                </div>
+            </div>
+        </motion.div>
     );
 }
 

diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
@@ -8,6 +8,7 @@ import {useGlobalContext} from "@/context/GlobalProvider";
 
 const Footer = () => {
     const {play, setPlay} = useGlobalContext();
+
     return (
         <motion.footer  initial={{opacity:0,y:'2vh'}}  transition={{ duration:.5,delay: .5,type:"spring", damping:10, stiffness:200}} animate={{opacity:1,y:0}} className="w-full pt-5 flex flex-col px-4 gap-5 md:flex-row justify-between items-center pb-4 absolute bottom-0 md:px-10">
             <p className="font-light text-gray-900 text-base md:text-xl">Copyright © {new Date().getFullYear()} HewageNKM</p>

diff --git a/context/GlobalProvider.tsx b/context/GlobalProvider.tsx
@@ -0,0 +1,14 @@
+"use client";
+import React, {createContext, useContext, useState} from "react";
+
+const GlobalContext = createContext({});
+export const useGlobalContext = ()=> useContext(GlobalContext)
+
+export const GlobalProvider = ({children}:{children:React.ReactNode}) => {
+    const [play,setPlay] = useState(false);
+    return (
+        <GlobalContext.Provider value={{play,setPlay}}>
+            {children}
+        </GlobalContext.Provider>
+    );
+};
diff --git a/data/downloadArrow.json b/data/downloadArrow.json
@@ -0,0 +1 @@
+{"v":"5.7.8","fr":25,"ip":0,"op":24,"w":500,"h":500,"nm":"arrow2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.087,"y":1},"o":{"x":0.865,"y":0},"t":0,"s":[247.5,316,0],"to":null,"ti":null},{"i":{"x":0.087,"y":0.087},"o":{"x":0.167,"y":0.167},"t":6,"s":[247.125,354.988,0],"to":null,"ti":null},{"i":{"x":0,"y":0.944},"o":{"x":0.167,"y":0},"t":9,"s":[247.125,354.988,0],"to":null,"ti":null},{"i":{"x":0,"y":0},"o":{"x":0.78,"y":0.78},"t":18,"s":[247.5,304,0],"to":null,"ti":null},{"i":{"x":0.48,"y":1},"o":{"x":0.78,"y":0},"t":22,"s":[247.5,304,0],"to":null,"ti":null},{"t":23,"s":[247.5,316,0]}],"ix":2,"l":2},"a":{"a":0,"k":[121.547,258.364,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.12,0.833,0.833],"y":[1.198,1.111,1]},"o":{"x":[0.152,0.333,0.333],"y":[0.007,0.159,0]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.944,0.944,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.012,0.028,0]},"t":6,"s":[90,110,100]},{"i":{"x":[0.81,0.864,0.833],"y":[2.418,-0.307,1]},"o":{"x":[0.167,0.167,0.167],"y":[1.667,-2.222,0]},"t":9,"s":[105,90,100]},{"i":{"x":[0.675,0.798,0.833],"y":[0.915,1.003,13.5]},"o":{"x":[0.335,0.259,0.167],"y":[0.251,0.124,0]},"t":15,"s":[105,90,100]},{"t":18,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[87.562,228.5],[120.624,257.562],[152.562,228.505]],"o":[[87.562,228.5],[120.624,257.562],[152.562,228.505]],"v":[[87.562,228.5],[120.624,257.562],[152.562,228.505]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.1216,0.1608,0.2157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[121.013,258.472],"ix":2},"a":{"a":0,"k":[120.088,257.812],"ix":1},"s":{"a":0,"k":[100.301,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[120.5,155.5],[121.5,257.5]],"o":[[120.5,155.5],[121.5,257.5]],"v":[[120.5,155.5],[121.5,257.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.1216,0.1608,0.2157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,-5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,99.945],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":24,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}
diff --git a/data/index.ts b/data/index.ts
@@ -1,6 +1,8 @@
 import {git, linkedin, x} from "../assets";
 import arrow from "./arrow.json";
 import party from "./party.json";
+import downloadArrow from "./downloadArrow.json";
+import projectArrow from "./projectArrow.json";
 export const socialMedia = [
     {
         id: 1,
@@ -19,4 +21,4 @@ export const socialMedia = [
     },
 ];
 
-export {arrow,party};
+export {arrow,party,downloadArrow,projectArrow};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"v":"5.7.8","fr":25,"ip":0,"op":24,"w":500,"h":500,"nm":"arrow2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.087,"y":1},"o":{"x":0.865,"y":0},"t":0,"s":[247.5,316,0],"to":null,"ti":null},{"i":{"x":0.087,"y":0.087},"o":{"x":0.167,"y":0.167},"t":6,"s":[247.125,354.988,0],"to":null,"ti":null},{"i":{"x":0,"y":0.944},"o":{"x":0.167,"y":0},"t":9,"s":[247.125,354.988,0],"to":null,"ti":null},{"i":{"x":0,"y":0},"o":{"x":0.78,"y":0.78},"t":18,"s":[247.5,304,0],"to":null,"ti":null},{"i":{"x":0.48,"y":1},"o":{"x":0.78,"y":0},"t":22,"s":[247.5,304,0],"to":null,"ti":null},{"t":23,"s":[247.5,316,0]}],"ix":2,"l":2},"a":{"a":0,"k":[121.547,258.364,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.12,0.833,0.833],"y":[1.198,1.111,1]},"o":{"x":[0.152,0.333,0.333],"y":[0.007,0.159,0]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.944,0.944,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.012,0.028,0]},"t":6,"s":[90,110,100]},{"i":{"x":[0.81,0.864,0.833],"y":[2.418,-0.307,1]},"o":{"x":[0.167,0.167,0.167],"y":[1.667,-2.222,0]},"t":9,"s":[105,90,100]},{"i":{"x":[0.675,0.798,0.833],"y":[0.915,1.003,13.5]},"o":{"x":[0.335,0.259,0.167],"y":[0.251,0.124,0]},"t":15,"s":[105,90,100]},{"t":18,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[87.562,228.5],[120.624,257.562],[152.562,228.505]],"o":[[87.562,228.5],[120.624,257.562],[152.562,228.505]],"v":[[87.562,228.5],[120.624,257.562],[152.562,228.505]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.1216,0.1608,0.2157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[121.013,258.472],"ix":2},"a":{"a":0,"k":[120.088,257.812],"ix":1},"s":{"a":0,"k":[100.301,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[120.5,155.5],[121.5,257.5]],"o":[[120.5,155.5],[121.5,257.5]],"v":[[120.5,155.5],[121.5,257.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.1216,0.1608,0.2157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,-5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,99.945],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":24,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}