Add experience section

using react-vertical-timeline-component library

note: stephane-monnot/react-vertical-timeline#166

Had to set
							visible={true}, thus no animation

app/globals.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+	--line-color: #e5e7eb;
+}

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 SectionDivider from '@/components/section-divider';
@@ -13,6 +14,7 @@ export default function Home() {
 			<Projects />
 			<SectionDivider />
 			<Skills />
+			<Experience />
 		</main>
 	);
 }

components/experience.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import React from 'react';
+import SectionHeading from './section-heading';
+import {
+	VerticalTimeline,
+	VerticalTimelineElement,
+} from 'react-vertical-timeline-component';
+import 'react-vertical-timeline-component/style.min.css';
+import { experiencesData } from '@/lib/data';
+
+export default function Experience() {
+	return (
+		<section id="experience">
+			<SectionHeading>My Experience</SectionHeading>
+
+			<VerticalTimeline lineColor="">
+				{experiencesData.map((item, index) => (
+					<React.Fragment key={index}>
+						<VerticalTimelineElement
+							visible={true}
+							contentStyle={{
+								background: '#f3f4f6',
+								boxShadow: 'none',
+								border: '1px solid rgba(0, 0, 0, 0.05)',
+								textAlign: 'left',
+								padding: '1.3rem 2rem',
+							}}
+							contentArrowStyle={{
+								borderRight: '0.4rem solid #9ca3af',
+							}}
+							date={item.date}
+							icon={item.icon}
+							iconStyle={{
+								background: 'white',
+								fontSize: '1.5rem',
+							}}
+						>
+							<h3 className="font-semibold capitalize">
+								{item.title}
+							</h3>
+							<p className="font-normal !mt-0">
+								{item.institution}
+							</p>
+							<p className="!mt-1 !font-normal text-gray-700">
+								{item.description}
+							</p>
+						</VerticalTimelineElement>
+					</React.Fragment>
+				))}
+			</VerticalTimeline>
+		</section>
+	);
+}

components/project.tsx

@@ -29,7 +29,7 @@ export default function Project({
 			}}
 			className="group mb-3 sm:mb-8 last:mb-0"
 		>
-			<section className="bg-gray-100 max-w-[42rem] border border-black/5 rounded-lg overflow-hidden sm:pr-8 relative sm:h-[20rem] group-even:pl-8 hover:bg-gray-200 transition">
+			<section className="bg-gray-100 max-w-[42rem] border border-black/5 rounded-lg overflow-hidden sm:pr-8 relative h-[20rem] group-even:pl-8 hover:bg-gray-200 transition">
 				<div className="pt-4 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[50%] flex flex-col h-full group-even:ml-[18rem]">
 					<h3 className="text-2xl font-semibold">{title}</h3>
 					<p className="mt-2 leading-relaxed text-gray-700">

components/skills.tsx

@@ -21,7 +21,7 @@ const fadeInAnimationVariants = {
 };
 
 export default function Skills() {
-	const { ref } = useSectionInView('Skills');
+	const { ref } = useSectionInView('Skills', 0.85);
 
 	return (
 		<section

lib/data.ts

@@ -1,3 +1,7 @@
+import React from 'react';
+import { FaReact } from 'react-icons/fa';
+import { LuGraduationCap } from 'react-icons/lu';
+import { PiCursorClick } from 'react-icons/pi';
 import reventeImg from '@/public/revente.png';
 import viiickyImg from '@/public/viiicky.png';
 
@@ -28,6 +32,33 @@ export const links = [
 	},
 ] as const;
 
+export const experiencesData = [
+	{
+		title: 'Self start',
+		institution: 'edX - Harvard University & Udemy',
+		description:
+			'During my national service, I successfully completed the renowned CS50x course. I then delved into frontend fundamentals and successfully finished The Complete Web Development Bootcamp by Dr Angela Yu.',
+		icon: React.createElement(PiCursorClick),
+		date: '2021-2022',
+	},
+	{
+		title: 'Bachelor of Science (Information Systems)',
+		institution: 'Singapore Management University',
+		description:
+			"I'm currently studying Information Systems, with a dual track in Fintech and Cloud Solutions",
+		icon: React.createElement(LuGraduationCap),
+		date: '2022 - present',
+	},
+	{
+		title: 'Software Engineer Intern',
+		institution: 'Activate Interactive, Singapore',
+		description:
+			'During my internship, I refined my React Native skills while deeply engaging in enhancing and debugging our client-facing mobile application. I played a critical role in integrating new features and gained valuable insights into wearable technology.',
+		icon: React.createElement(FaReact),
+		date: '2023',
+	},
+] as const;
+
 export const projectsData = [
 	{
 		title: 'Reventé',

package.json

@@ -16,12 +16,14 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.1.0",
-    "react-intersection-observer": "^9.8.2"
+    "react-intersection-observer": "^9.8.2",
+    "react-vertical-timeline-component": "^3.6.0"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-vertical-timeline-component": "^3.3.6",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",