feat: create experience section

package.json

@@ -38,6 +38,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50.0",
+    "react-vertical-timeline-component": "^3.6.0",
     "tailwind-merge": "^2.2.1",
     "zod": "^3.22.4"
   },
@@ -47,6 +48,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-vertical-timeline-component": "^3.3.6",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
     "autoprefixer": "^10.0.1",

src/app/layout.tsx

@@ -4,8 +4,8 @@ import { PropsWithChildren } from 'react';
 import type { Metadata } from 'next';
 
 import { ThemeProvider } from '@/components/theme-provider';
-import { siteConfig } from '@/lib/constant';
 import { fonts } from '@/lib/fonts';
+import { siteConfig } from '@/lib/site-config';
 import { cn } from '@/lib/utils';
 
 export const metadata: Metadata = {

src/app/page.tsx

@@ -1,4 +1,5 @@
 import { About } from '@/components/about';
+import { Experience } from '@/components/experience';
 import { Intro } from '@/components/intro';
 import { Projects } from '@/components/projects';
 import { ThemeToggle } from '@/components/theme-toggle';
@@ -11,6 +12,7 @@ const Home = () => {
         <div className="bg-muted h-16 w-1 rounded-full sm:my-5" />
         <About />
         <Projects />
+        <Experience />
       </div>
       <div className="fixed bottom-5 right-5 sm:bottom-8 sm:right-8">
         <ThemeToggle />

src/components/about.tsx

@@ -4,7 +4,7 @@ import { SectionHeading } from '@/components/section-heading';
 export const About = () => {
   return (
     <section className="my-8 flex w-full flex-col items-center sm:my-10">
-      <SectionHeading heading="About me" />
+      <SectionHeading heading="About Me" />
       <div className="max-w-2xl text-center leading-7">
         <p className="mb-4">
           After graduating with a degree in Accounting, I decided to pursue my

src/components/experience.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import 'react-vertical-timeline-component/style.min.css';
+
+import React from 'react';
+import {
+  VerticalTimeline,
+  VerticalTimelineElement,
+} from 'react-vertical-timeline-component';
+
+import { Icons } from '@/components/icons';
+import { SectionHeading } from '@/components/section-heading';
+import { experiencesData } from '@/lib/data';
+
+export const Experience = () => {
+  return (
+    <section className="my-8 sm:my-10">
+      <SectionHeading
+        heading="My Experience"
+        content="Projects I worked on. Due to nature of internet businesses not all of them are still online."
+      />
+      <VerticalTimeline lineColor="hsl(var(--muted))">
+        {experiencesData.map(({ title, description, location, date }) => (
+          <VerticalTimelineElement
+            key={title}
+            visible
+            contentStyle={{
+              background: 'hsl(var(--secondary))',
+              boxShadow: 'none',
+              padding: '20px',
+            }}
+            contentArrowStyle={{ display: 'none' }}
+            date={date}
+            dateClassName="!font-medium text-muted-foreground"
+            icon={<Icons.briefcase />}
+            iconStyle={{
+              boxShadow: 'none',
+              border: '2px solid hsl(var(--foreground)',
+            }}
+          >
+            <h3 className="font-medium">{title}</h3>
+            <p className="!mt-0 !font-normal">{location}</p>
+            <p className="text-muted-foreground !mt-1 !font-normal">
+              {description}
+            </p>
+          </VerticalTimelineElement>
+        ))}
+      </VerticalTimeline>
+    </section>
+  );
+};

src/components/icons.tsx

@@ -1,5 +1,6 @@
 import {
   ArrowRight,
+  Briefcase,
   Download,
   ExternalLink,
   Github,
@@ -31,6 +32,7 @@ export const Icons = {
       />
     </svg>
   ),
+  briefcase: Briefcase,
   html: (props: LucideProps) => (
     <svg viewBox="0 0 50 50" {...props}>
       <path

src/components/project.tsx

@@ -2,14 +2,9 @@ import Image from 'next/image';
 
 import { Button } from '@/components/button';
 import { Icons } from '@/components/icons';
+import { projectsData } from '@/lib/data';
 
-type TProject = {
-  image: string;
-  title: string;
-  description: string;
-  technologies: string[];
-  links: { preview: string; github: string };
-};
+type TProject = (typeof projectsData)[number];
 
 export const Project = (project: TProject) => {
   const { image, title, description, technologies, links } = project;

src/components/projects.tsx

@@ -1,48 +1,16 @@
 import { Project } from '@/components/project';
 import { SectionHeading } from '@/components/section-heading';
-
-const projects = [
-  {
-    image: '/project-image.jpg',
-    title: 'Audiophile',
-    description:
-      'Browser extension that records everything happening in application.',
-    technologies: ['Next.js', 'TypeScript', 'Tailwind', 'Zod', 'Supabase'],
-    links: { preview: 'https://github.com/', github: 'https://github.com/' },
-  },
-  {
-    image: '/project-image.jpg',
-    title: 'Monito',
-    description:
-      'Browser extension that records everything happening in application.',
-    technologies: [
-      'React',
-      'Styled-components',
-      'TypeScript',
-      'Yup',
-      'Firebase',
-    ],
-    links: { preview: 'https://github.com/', github: 'https://github.com/' },
-  },
-  {
-    image: '/project-image.jpg',
-    title: 'SocialHub',
-    description:
-      'Browser extension that records everything happening in application.',
-    technologies: ['Next.js', 'TypeScript', 'Tailwind', 'Zod', 'Supabase'],
-    links: { preview: 'https://github.com/', github: 'https://github.com/' },
-  },
-];
+import { projectsData } from '@/lib/data';
 
 export const Projects = () => {
   return (
     <section className="my-8 sm:my-10">
       <SectionHeading
-        heading="My projects"
+        heading="My Projects"
         content="Projects I worked on. Due to nature of internet businesses not all of them are still online."
       />
       <div className="flex flex-col gap-8 md:flex-row">
-        {projects.map((project) => (
+        {projectsData.map((project) => (
           <Project key={project.title} {...project} />
         ))}
       </div>

src/lib/data.ts

@@ -0,0 +1,56 @@
+export const projectsData = [
+  {
+    image: '/project-image.jpg',
+    title: 'Audiophile',
+    description:
+      'Browser extension that records everything happening in application.',
+    technologies: ['Next.js', 'TypeScript', 'Tailwind', 'Zod', 'Supabase'],
+    links: { preview: 'https://github.com/', github: 'https://github.com/' },
+  },
+  {
+    image: '/project-image.jpg',
+    title: 'Monito',
+    description:
+      'Browser extension that records everything happening in application.',
+    technologies: [
+      'React',
+      'Styled-components',
+      'TypeScript',
+      'Yup',
+      'Firebase',
+    ],
+    links: { preview: 'https://github.com/', github: 'https://github.com/' },
+  },
+  {
+    image: '/project-image.jpg',
+    title: 'SocialHub',
+    description:
+      'Browser extension that records everything happening in application.',
+    technologies: ['Next.js', 'TypeScript', 'Tailwind', 'Zod', 'Supabase'],
+    links: { preview: 'https://github.com/', github: 'https://github.com/' },
+  },
+] as const;
+
+export const experiencesData = [
+  {
+    title: 'Graduated bootcamp',
+    location: 'Miami, FL',
+    description:
+      'I graduated after 6 months of studying. I immediately found a job as a front-end developer.',
+    date: '2019',
+  },
+  {
+    title: 'Front-End Developer',
+    location: 'Orlando, FL',
+    description:
+      'I worked as a front-end developer for 2 years in 1 job and 1 year in another job. I also upskilled to the full stack.',
+    date: '2019 - 2021',
+  },
+  {
+    title: 'Full-Stack Developer',
+    location: 'Houston, TX',
+    description:
+      "I'm now a full-stack developer working as a freelancer. My stack includes React, Next.js, TypeScript, Tailwind, Prisma and MongoDB. I'm open to full-time opportunities.",
+    date: '2021 - present',
+  },
+] as const;