added about page changes, animation for page changes

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^11.2.10",
     "next": "^14.2.3",
     "react": "18",
     "react-dom": "18"

src/app/about/page.jsx

@@ -1,7 +1,133 @@
+"use client"
+import {motion} from "framer-motion"
+
 const AboutPage = () => {
     return (
-        <div className='about-page'>AboutPage</div>
-    )
-}
+        <motion.div 
+            className="h-full" 
+            initial={{ y: "-200vh" }} 
+            animate={{ y: "0%" }} 
+            transition={{ duration: 1 }}
+            >
+                {/* CONTAINER */}
+                <div className="h-full overflow-scroll">
+                    {/* TEXT CONTAINER */}
+                    <div className="p-4 sm:p-8 md:p-12 lg:p-20 xl:p-48 flex flex-col gap-24 md:gap-32 lg:gap-48 xl:gap-64">
+                        {/* BIOGRAPHY CONTAINER */}
+                        <div className="flex flex-col gap-12 justify-center">
+                            {/* BIOGRAPHY TITLE */}
+                            <h1 className="font-bold text-2xl">BIOGRAPHY</h1>
+                            {/* BIOGRAPHY DESC */}
+                            <p className="text-lg">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                            </p>
+                            {/* BIOGRAPHY QUOTE */}
+                            <span className="italic">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                            </span>
+                            {/* BIOGRAPHY SIGN SVG */}
+                            <div className="self-end">
+                                <svg
+                                    width="185"
+                                    height="77"
+                                    viewBox="0 0 370 114"
+                                    fill="none"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                >
+                                    <path
+                                    d="M66 2C66 29.4851 68.6687 64.5118 49.3333 87.4444C42.4997 95.5495 35.7683 97.6796 26.2222 101C20.002 103.164 8.87322 103.873 4 99C-0.260934 94.7391 2.94804 88.1756 8.22222 86.2222C13.7053 84.1915 17.942 84 23.7778 84C33.359 84 41.3193 83.5602 50.2222 87C56.6125 89.469 63.5773 91.9131 69.5555 95.5C75.4778 99.0533 87.1838 104.357 93.5 99.4444C96.1292 97.3995 96.2752 92.5118 96.9444 89.5C97.9646 84.9092 92.6432 83.2024 89 83C84.472 82.7484 82.3397 81.8856 82 88C81.8025 91.5554 83.5627 94.4193 86 97C88.9648 100.139 92.0717 100.96 96 98.7778C99.3106 96.9386 98 90.7299 98 87.5C98 85.0327 98.4365 83.1348 99.2222 80.7778C100.357 77.3743 99.2311 78.4486 101.5 77.9444C105.352 77.0886 108 76.4766 108 81.5C108 85.6646 109 89.3473 109 93.5C109 100.142 108.863 95.0454 110.5 91.4444C112.765 86.4616 116.631 81.205 121.5 78.5C127.057 75.4129 126 82.1509 126 85.5C126 92.5532 124.42 102 134 102C142.932 102 153 102.569 153 91.2222C153 87.1735 153.772 81.3206 148 81C141.934 80.663 142.107 81.8068 139.5 86.5C134.378 95.7204 137.972 105 149.5 105C153.589 105 153.996 99.8977 155.5 96.8889C157.902 92.0843 161 85.4067 161 80C161 74.0547 158.407 82.7413 157.222 84.2222C155.194 86.7574 155 92.5718 155 95.7778C155 99.9302 153.8 104.999 158 107.222C161.954 109.316 164.884 106.382 167.778 103.778C171.15 100.743 175.896 99.1107 180 97C186.143 93.8409 191.659 91.4099 198.222 89.2222C206.505 86.4614 214.839 87 223.5 87C230.613 87 231.628 104 222.5 104C216.954 104 199.251 107.814 207 95.2222C211.456 87.9805 214.484 80.6007 220 73.7778C229.781 61.6805 242.696 50.8197 256.222 43C264.769 38.0591 274.192 34.6264 283 30.2222C286.55 28.4473 280.07 32.3343 278.5 33.5556C271.707 38.8391 266.609 45.3914 260.556 51.4444C255.356 56.6444 250.682 61.459 246.5 67.5C242.917 72.6757 239.364 77.3825 236.556 83C233.829 88.4524 231.82 94.3142 228.556 99.4444C226.693 102.371 225.518 107.823 222.5 109.5C214.795 113.78 217.517 100.438 218.056 95.0556C218.678 88.8318 227.982 85.7572 233.056 88.6111C239.614 92.3003 245.506 97.7883 252 101.778C254.886 103.551 259.46 107 263 107C271.267 107 273.32 81.9392 268.778 77.2222C264.112 72.3774 261.206 80.5039 261 84C260.576 91.2135 257.836 96.9269 264.778 102C272.242 107.454 285.041 112.276 292.111 104.833C298.002 98.6323 304.301 90.8902 308.556 83.4444C310.355 80.295 310.132 84.6251 309.444 86C305.387 94.1158 303 102.264 303 111.5C303 116.021 337.534 99.1863 340.5 98C347.33 95.2679 355.47 93.8299 361.778 90C363.935 88.6902 365.473 88 368 88"
+                                    stroke="black"
+                                    strokeWidth="2"
+                                    />
+                                </svg>
+                            </div>
+                        </div>
+                        {/* SKILLS CONTAINER */}
+                        <div className="flex flex-col gap-12 justify-center">
+                            {/* SKILLS TITLE */}
+                            <h1 className="font-bold text-2xl">SKILLS</h1>
+                            {/* SKILL LIST */}
+                            <div className="flex gap-4 flex-wrap">
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Java
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Selenium
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Ruby
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Rails
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    JavaScript
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Tailwind CSS
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Test Automation: API, Web, Mobile
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Postman
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Appium
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Git: GitHub, Command Line Proficiency
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    MySQL
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Postgres
+                                </div>
+                                <div className="rounded  p-2 text-sm cursor-pointer bg-black text-white hover:bg-white hover:text-black">
+                                    Japanese - conversational
+                                </div>
+                            </div>
+                            {/* SKILL SCROLL SVG */}
+                        </div>
+                        {/* EXPERIENCE CONTAINER */}
+                        <div className="flex flex-col gap-12 justify-center pb-48">
+                            {/* EXPERIENCE TITLE */}
+                            <h1 className="font-bold text-2xl">EXPERIENCE</h1>
+                            {/* EXPERIENCE LIST */}
+                            <div className="">
+                                {/* EXPERIENCE LIST ITEM */}
+                                <div className="flex justify-between h-48">
+                                    {/* LEFT */}
+                                    <div className="w-1/3">
+                                        {/* JOB TITLE */}
+                                        <div className="bg-white p-3 font-semibold rounded-b-lg rounded-s-lg ">Full-Stack Software Development Apprentice</div>
+                                        {/* JOB DESC */}
+                                        <div className="p-3 text-sm italic">Full-Stack development with Ruby on Rails</div>
+                                        {/* JOB DATE */}
+                                        <div className="p-3 text-red-400 text-sm font-semibold">Nov 2023 - May 2024</div>
+                                        {/* JOB COMPANY */}
+                                        <div className="p-1 rounded bg-white text-sm font-semibold w-fit">Discovery Partners Institute</div>
+                                    </div>
+                                    {/* CENTER */}
+                                    <div className="w-1/6">
+                                        {/* LINE */}
+                                        <div className="">
+                                            {/* CIRCLE */}
+                                            <div className=""></div>
+                                        </div>
+                                    </div>
+                                    {/* RIGHT */}
+                                    <div className="w-1/3"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {/* SVG CONTAINER */}
+                    <div className="hidden"></div>
+                </div>
+            </motion.div>
+    );
+};
 
-export default AboutPage
+export default AboutPage;

src/app/contact/page.jsx

@@ -1,7 +1,17 @@
+"use client"
+import {motion} from "framer-motion"
+
 const ContactPage = () => {
     return (
-        <div className='contact-page'>ContactPage</div>
-    )
-}
+        <motion.div 
+            className="h-full" 
+            initial={{ y: "-200vh" }} 
+            animate={{ y: "0%" }} 
+            transition={{ duration: 1 }}
+            >
+                Contact
+            </motion.div>
+    );
+};
 
-export default ContactPage
+export default ContactPage;

src/app/layout.js

@@ -1,6 +1,6 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Navbar from "@/components/navbar";
+import TransitionProvider from "@/components/transitionProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -13,15 +13,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div className="w-screen h-screen bg-gradient-to-b from-blue-200 to-violet-300">
-          <div className="h-24">
-            <Navbar/>
-            <div className="h-[calc(100vh - 6rem)]">
-              {children}
-            </div>
-          </div>
-
-        </div>       
+        <TransitionProvider>{children}</TransitionProvider>
       </body>
     </html>
   );

src/app/page.jsx

@@ -1,5 +1,36 @@
+"use client"
+
+import Image from "next/image";
+import {motion} from "framer-motion";
+
 const Homepage = () => {
-  return <div>Hello World</div>;
+  return (
+  <motion.div 
+    className="h-full" 
+    initial={{ y: "-200vh" }} 
+    animate={{ y: "0%" }} 
+    transition={{ duration: 1 }}
+    >
+    <div className="h-full flex flex-col lg:flex-row px-4 sm:px-8 md:px-12 lg:px-20 xl:px-48 text-xl">
+      {/* IMAGE CONTAINER */}
+      <div className="h-1/2 lg:h-full lg:w-1/2 relative">
+        <Image src="/hero.png" alt="" fill className="object-contain"/>
+      </div>
+      {/* TEXT CONTAINER */}
+      <div className="h-1/2 lg:h-full lg:w-1/2 flex flex-col gap-8 items-center justify-center">
+        {/* TITLE */}
+        <h1 className="text-4xl md:text-6xl font-bold">Crafting Digital Experiences, Designing Tomorrow.</h1>
+        {/* DESC */}
+        <p className="md:text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        {/* BUTTONS */}
+        <div className="w-full flex gap-4">
+          <button className="p-4 rounded-lg ring-1 ring-black bg-black text-white">View My Work</button>
+          <button className="p-4 rounded-lg ring-1 ring-black">Contact Me</button>
+        </div>
+      </div>
+    </div>
+  </motion.div>
+  );
 };
 
 export default Homepage;

src/app/portfolio/page.jsx

@@ -1,7 +1,17 @@
+"use client"
+import {motion} from "framer-motion"
+
 const PortfolioPage = () => {
     return (
-        <div className='portfolio-page'>PortfolioPage</div>
-    )
-}
+        <motion.div 
+            className="h-full" 
+            initial={{ y: "-200vh" }} 
+            animate={{ y: "0%" }} 
+            transition={{ duration: 1 }}
+            >
+                Portfolio
+            </motion.div>
+    );
+};
 
-export default PortfolioPage
+export default PortfolioPage;

src/components/navLink.jsx

@@ -0,0 +1,18 @@
+"use client"
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NavLink = ({ link }) => {
+    const pathName = usePathname();
+
+    console.log(pathName);
+
+    return (
+        <Link className={`rounded p-1 ${pathName == link.url && "bg-black text-white"}`} href={link.url}>
+            {link.title}
+        </Link>
+    );
+};
+
+export default NavLink;