From 69211436b5abd465041962a0694930501ff91f24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Wed, 14 Feb 2024 17:02:13 +0100 Subject: [PATCH] feat: create experience section --- package-lock.json | 40 ++++++++++++++++-- package.json | 2 + src/app/layout.tsx | 2 +- src/app/page.tsx | 2 + src/components/about.tsx | 2 +- src/components/experience.tsx | 51 ++++++++++++++++++++++ src/components/icons.tsx | 2 + src/components/project.tsx | 9 +--- src/components/projects.tsx | 38 ++--------------- src/lib/data.ts | 56 +++++++++++++++++++++++++ src/lib/{constant.ts => site-config.ts} | 0 11 files changed, 156 insertions(+), 48 deletions(-) create mode 100644 src/components/experience.tsx create mode 100644 src/lib/data.ts rename src/lib/{constant.ts => site-config.ts} (100%) diff --git a/package-lock.json b/package-lock.json index 09a0f77..6014495 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,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" }, @@ -28,6 +29,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", @@ -2403,6 +2405,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-vertical-timeline-component": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@types/react-vertical-timeline-component/-/react-vertical-timeline-component-3.3.6.tgz", + "integrity": "sha512-OUvyPXRjXvUD/SNLO0CW0GbIxVF32Ios5qHecMSfw6kxnK1cPULD9NV80EuqZ3WmS/s6BgbcwmN8k4ISb3akhQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", @@ -3403,6 +3414,11 @@ "node": ">=6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/cli-cursor": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz", @@ -7878,7 +7894,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -8488,7 +8503,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -8587,11 +8601,29 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-intersection-observer": { + "version": "8.34.0", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz", + "integrity": "sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-vertical-timeline-component": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/react-vertical-timeline-component/-/react-vertical-timeline-component-3.6.0.tgz", + "integrity": "sha512-l9zulqjIGlRuaQeplGzV4r/tG2RYBpYt84Il8w4IxnJze2cDIGI04MKo3F7f1sHT0Sih1ohEFts8UV23AJS15Q==", + "hasInstallScript": true, + "dependencies": { + "classnames": "^2.2.6", + "prop-types": "^15.7.2", + "react-intersection-observer": "^8.26.2" + } }, "node_modules/read-cache": { "version": "1.0.0", diff --git a/package.json b/package.json index 5bfa28e..a2765f1 100644 --- a/package.json +++ b/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", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index bda0b89..b5eff5a 100644 --- a/src/app/layout.tsx +++ b/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 = { diff --git a/src/app/page.tsx b/src/app/page.tsx index eb2c397..8bbeb1a 100644 --- a/src/app/page.tsx +++ b/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 = () => {
+
diff --git a/src/components/about.tsx b/src/components/about.tsx index f2fec46..7cc7980 100644 --- a/src/components/about.tsx +++ b/src/components/about.tsx @@ -4,7 +4,7 @@ import { SectionHeading } from '@/components/section-heading'; export const About = () => { return (
- +

After graduating with a degree in Accounting, I decided to pursue my diff --git a/src/components/experience.tsx b/src/components/experience.tsx new file mode 100644 index 0000000..c0b319e --- /dev/null +++ b/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 ( +

+ + + {experiencesData.map(({ title, description, location, date }) => ( + } + iconStyle={{ + boxShadow: 'none', + border: '2px solid hsl(var(--foreground)', + }} + > +

{title}

+

{location}

+

+ {description} +

+ + ))} + +
+ ); +}; diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 34dbfb7..0ba5b18 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -1,5 +1,6 @@ import { ArrowRight, + Briefcase, Download, ExternalLink, Github, @@ -31,6 +32,7 @@ export const Icons = { /> ), + briefcase: Briefcase, html: (props: LucideProps) => ( { const { image, title, description, technologies, links } = project; diff --git a/src/components/projects.tsx b/src/components/projects.tsx index 9656528..f14a317 100644 --- a/src/components/projects.tsx +++ b/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 (
- {projects.map((project) => ( + {projectsData.map((project) => ( ))}
diff --git a/src/lib/data.ts b/src/lib/data.ts new file mode 100644 index 0000000..d5015a3 --- /dev/null +++ b/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; diff --git a/src/lib/constant.ts b/src/lib/site-config.ts similarity index 100% rename from src/lib/constant.ts rename to src/lib/site-config.ts