feat: added timeline feature to Experiences section & updated ExperienceTile

Author: steadyfall

src/components/Experiences.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile'
 
@@ -11,9 +13,12 @@ export function Experiences({ arr }: ExperiencesProps) {
         <section id="experience" className="mb-12">
             <h2 className="text-2xl font-bold mb-4">Experience</h2>
             {experiences && experiences.length > 0 ? (
-            <div className="space-y-6">
+            <div className="relative space-y-6">
+                <div 
+                    className="z-1 absolute md:left-20 top-0 bottom-0 w-1 md:bg-emerald-500 md:dark:bg-emerald-200 bg-pink-500 dark:bg-red-300 rounded-full"
+                ></div>
                 {experiences.map((experience, index) => (
-                <ExperienceTile key={index} {...experience} />
+                    <ExperienceTile key={index} {...experience} />
                 ))}
             </div>
             ) : (

src/components/Tiles/ExperienceTile.tsx

@@ -1,3 +1,5 @@
+import { Briefcase } from 'lucide-react'
+import { useMediaQuery } from '@/hooks/useMediaQuery'
 import Image from 'next/image'
 
 export type ExperienceTileProps = {
@@ -8,31 +10,46 @@ export type ExperienceTileProps = {
   responsibilities: string[]
 }
 
+
+
 export function ExperienceTile({ companyLogo, companyName, position, period, responsibilities }: ExperienceTileProps) {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
   return (
-    <div className="bg-sushi-200 dark:bg-sushi-900 p-6 rounded-lg shadow-md">
-      <div className="flex flex-col sm:flex-row items-center sm:items-start mb-4">
-        <div className="mb-4 sm:mb-0 sm:mr-4 flex-shrink-0">
-          <img
-            src={companyLogo}
-            alt={`${companyName} logo`}
-            width={150}
-            height={75}
-            className="rounded-lg"
-          />
-        </div>
-        <div className="sm:text-left">
-          <h3 className="text-xl font-semibold mb-2">{position}</h3>
-          <p className="text-gray-600 dark:text-gray-400">{companyName} | {period}</p>
+    <div className="mb-8 flex items-center">
+        <div className="relative flex-grow md:pl-28">
+            {isDesktop ? (
+              <div className="bg-white absolute left-[5px] top-3 p-1 rounded-full">
+                  {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
+                  <img
+                      src={companyLogo}
+                      alt={`${companyName} logo`}
+                      width={150}
+                      height={75}
+                      className="rounded-md"
+                  />
+              </div>
+            ) : (
+              <div className="absolute left-[-10px] top-5">
+                <Briefcase className="bg-neutral-100 dark:bg-neutral-950 rounded-md w-6 h-6"/>
+              </div>
+            )}
+            <div className="pl-8 md:pl-16 py-3"> 
+                <div className="flex flex-col md:items-center sm:flex-row mb-4">
+                    <div>
+                      <h2 className="text-xl font-bold">{position}</h2>
+                      <h3 className="text-lg font-semibold">{companyName}</h3>
+                      <h3 className="text-gray-600 italic dark:text-gray-400">{period}</h3>
+                    </div>
+                </div>
+                <div className="mt-4">
+                    <ul className="list-inside text-gray-700 dark:text-gray-300 space-y-1">
+                    {responsibilities.map((responsibility, index) => (
+                        <li key={index}>- {responsibility}</li>
+                    ))}
+                    </ul>
+                </div>
+            </div>
         </div>
-      </div>
-      <div className="mt-4">
-        <ul className="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-1">
-          {responsibilities.map((responsibility, index) => (
-            <li key={index}>{responsibility}</li>
-          ))}
-        </ul>
-      </div>
     </div>
   )
 }

src/hooks/useMediaQuery.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => setMatches(media.matches)
+    window.addEventListener('resize', listener)
+    return () => window.removeEventListener('resize', listener)
+  }, [matches, query])
+
+  return matches
+}