feat: Add about page

package.json

@@ -16,7 +16,8 @@
     "@react-three/fiber": "^8.15.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0"
+    "react-router-dom": "^6.22.0",
+    "react-vertical-timeline-component": "^3.6.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",

src/App.jsx

@@ -6,7 +6,7 @@ const App = () => {
   {/* The app contains the routes to all the pages in the website. The navigation is handle by the navbar component. Each
   route has a prop that contains its corresponding page */}
   return (
-    <main className='bg-slate-300/20'>
+    <main className='bg-slate-300/20 h-[100vh]'>
         <Router>
             <Navbar />
             <Routes>

src/components/CTA.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const CTA = () => {
+    return (
+        <section className='cta'>
+            <p className='cta-text'>Have a project in mind? <br className='sm:block hidden'/>
+            Let's build something together! </p>
+            <Link to='/contact' className='btn'>
+                Contact
+            </Link>
+        </section>
+    )
+}
+
+export default CTA

src/components/HomeInfo.jsx

@@ -25,7 +25,7 @@ const renderContent = {
     ),
     2: (
         <InfoBox
-            text="Graduated from the university Tecnologico de Monterrey and 
+            text="Graduated from the university Tecnológico de Monterrey and 
             picked up a passion for software development"
             link="/about"
             btnText="Learn more"

src/constants/index.js

@@ -0,0 +1,228 @@
+import { meta, shopify, starbucks, tesla } from "../assets/images";
+import {
+    car,
+    contact,
+    css,
+    estate,
+    express,
+    git,
+    github,
+    html,
+    javascript,
+    linkedin,
+    mongodb,
+    motion,
+    mui,
+    nextjs,
+    nodejs,
+    pricewise,
+    react,
+    redux,
+    sass,
+    snapgram,
+    summiz,
+    tailwindcss,
+    threads,
+    typescript
+} from "../assets/icons";
+
+export const skills = [
+    {
+        imageUrl: css,
+        name: "CSS",
+        type: "Frontend",
+    },
+    {
+        imageUrl: express,
+        name: "Express",
+        type: "Backend",
+    },
+    {
+        imageUrl: git,
+        name: "Git",
+        type: "Version Control",
+    },
+    {
+        imageUrl: github,
+        name: "GitHub",
+        type: "Version Control",
+    },
+    {
+        imageUrl: html,
+        name: "HTML",
+        type: "Frontend",
+    },
+    {
+        imageUrl: javascript,
+        name: "JavaScript",
+        type: "Frontend",
+    },
+    {
+        imageUrl: mongodb,
+        name: "MongoDB",
+        type: "Database",
+    },
+    {
+        imageUrl: motion,
+        name: "Motion",
+        type: "Animation",
+    },
+    {
+        imageUrl: mui,
+        name: "Material-UI",
+        type: "Frontend",
+    },
+    {
+        imageUrl: nextjs,
+        name: "Next.js",
+        type: "Frontend",
+    },
+    {
+        imageUrl: nodejs,
+        name: "Node.js",
+        type: "Backend",
+    },
+    {
+        imageUrl: react,
+        name: "React",
+        type: "Frontend",
+    },
+    {
+        imageUrl: redux,
+        name: "Redux",
+        type: "State Management",
+    },
+    {
+        imageUrl: sass,
+        name: "Sass",
+        type: "Frontend",
+    },
+    {
+        imageUrl: tailwindcss,
+        name: "Tailwind CSS",
+        type: "Frontend",
+    },
+    {
+        imageUrl: typescript,
+        name: "TypeScript",
+        type: "Frontend",
+    }
+];
+
+export const experiences = [
+    {
+        title: "React.js Developer",
+        company_name: "Starbucks",
+        icon: starbucks,
+        iconBg: "#accbe1",
+        date: "March 2020 - April 2021",
+        points: [
+            "Developing and maintaining web applications using React.js and other related technologies.",
+            "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+            "Implementing responsive design and ensuring cross-browser compatibility.",
+            "Participating in code reviews and providing constructive feedback to other developers.",
+        ],
+    },
+    {
+        title: "React Native Developer",
+        company_name: "Tesla",
+        icon: tesla,
+        iconBg: "#fbc3bc",
+        date: "Jan 2021 - Feb 2022",
+        points: [
+            "Developing and maintaining web applications using React.js and other related technologies.",
+            "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+            "Implementing responsive design and ensuring cross-browser compatibility.",
+            "Participating in code reviews and providing constructive feedback to other developers.",
+        ],
+    },
+    {
+        title: "Web Developer",
+        company_name: "Shopify",
+        icon: shopify,
+        iconBg: "#b7e4c7",
+        date: "Jan 2022 - Jan 2023",
+        points: [
+            "Developing and maintaining web applications using React.js and other related technologies.",
+            "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+            "Implementing responsive design and ensuring cross-browser compatibility.",
+            "Participating in code reviews and providing constructive feedback to other developers.",
+        ],
+    },
+    {
+        title: "Full stack Developer",
+        company_name: "Meta",
+        icon: meta,
+        iconBg: "#a2d2ff",
+        date: "Jan 2023 - Present",
+        points: [
+            "Developing and maintaining web applications using React.js and other related technologies.",
+            "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
+            "Implementing responsive design and ensuring cross-browser compatibility.",
+            "Participating in code reviews and providing constructive feedback to other developers.",
+        ],
+    },
+];
+
+export const socialLinks = [
+    {
+        name: 'Contact',
+        iconUrl: contact,
+        link: '/contact',
+    },
+    {
+        name: 'GitHub',
+        iconUrl: github,
+        link: 'https://github.com/YourGitHubUsername',
+    },
+    {
+        name: 'LinkedIn',
+        iconUrl: linkedin,
+        link: 'https://www.linkedin.com/in/YourLinkedInUsername',
+    }
+];
+
+export const projects = [
+    {
+        iconUrl: pricewise,
+        theme: 'btn-back-red',
+        name: 'Amazon Price Tracker',
+        description: 'Developed a web application that tracks and notifies users of price changes for products on Amazon, helping users find the best deals.',
+        link: 'https://github.com/adrianhajdin/pricewise',
+    },
+    {
+        iconUrl: threads,
+        theme: 'btn-back-green',
+        name: 'Full Stack Threads Clone',
+        description: 'Created a full-stack replica of the popular discussion platform "Threads," enabling users to post and engage in threaded conversations.',
+        link: 'https://github.com/adrianhajdin/threads',
+    },
+    {
+        iconUrl: car,
+        theme: 'btn-back-blue',
+        name: 'Car Finding App',
+        description: 'Designed and built a mobile app for finding and comparing cars on the market, streamlining the car-buying process.',
+        link: 'https://github.com/adrianhajdin/project_next13_car_showcase',
+    },
+    {
+        iconUrl: snapgram,
+        theme: 'btn-back-pink',
+        name: 'Full Stack Instagram Clone',
+        description: 'Built a complete clone of Instagram, allowing users to share photos and connect with friends in a familiar social media environment.',
+        link: 'https://github.com/adrianhajdin/social_media_app',
+    },
+    {
+        iconUrl: estate,
+        theme: 'btn-back-black',
+        name: 'Real-Estate Application',
+        description: 'Developed a web application for real estate listings, facilitating property searches and connecting buyers with sellers.',
+        link: 'https://github.com/adrianhajdin/projects_realestate',
+    },
+    {
+        iconUrl: summiz,
+        theme: 'btn-back-yellow',
+        name: 'AI Summarizer Application',
+        description: 'App that leverages AI to automatically generate concise & informative summaries from lengthy text content, or blogs.',
+        link: 'https://github.com/adrianhajdin/project_ai_summarizer',
+    }
+];

src/models/Island.jsx

@@ -81,11 +81,13 @@ const Island = ({ isRotating, setIsRotating, setCurrentStage, ...props }) => {
             }
 
             islandRef.current.rotation.y += 0.01 * Math.PI;
+            rotationSpeed.current = 0.0125;
         } else if (e.key === 'ArrowRight') {
             if (!isRotating) {
                 setIsRotating(true);
             }
             islandRef.current.rotation.y -= 0.01 * Math.PI;
+            rotationSpeed.current = -0.0125;
         }
     }