Career Timeline.

pnpm add motion lucide-react motion

"use client";
import { cn } from "@/lib/utils";
import {
  IconBriefcase,
  IconBuildingSkyscraper,
  IconCertificate,
  IconMoon,
  IconSchool,
  IconSun,
} from "@tabler/icons-react";
import React from "react";
const THEME_COLORS = {
  rose: { bg: "bg-rose-500", text: "text-white", hex: "#f43f5e" },
  indigo: { bg: "bg-indigo-500", text: "text-white", hex: "#6366f1" },
  amber: { bg: "bg-amber-400", text: "text-black", hex: "#fbbf24" },
  purple: { bg: "bg-purple-500", text: "text-white", hex: "#a855f7" },
  blue: { bg: "bg-blue-500", text: "text-white", hex: "#3b82f6" },
  emerald: { bg: "bg-emerald-500", text: "text-white", hex: "#10b981" },
} as const;
type ThemeColorKey = keyof typeof THEME_COLORS;
interface TimelineEvent {
  id: string;
  title: string;
  institution: string;
  date: string;
  icon: React.ReactNode;
  color: ThemeColorKey;
  index: string;
  heightClass: string;
}
const careerEvents: TimelineEvent[] = [
  {
    id: "4",
    title: "B.E. in Information Technology",
    institution: "Mumbai University",
    date: "2023-2026",
    icon: <IconBuildingSkyscraper className="h-5 w-5" />,
    color: "rose",
    index: "04",
    heightClass: "h-40",
  },
  {
    id: "3",
    title: "Diploma in Computer Engineering",
    institution: "VESP",
    date: "2020 – 2023",
    icon: <IconCertificate className="h-5 w-5" />,
    color: "blue",
    index: "03",
    heightClass: "h-32",
  },
  {
    id: "2",
    title: "Web Dev Training",
    institution: "Insys Technologies",
    date: "May - June 2022",
    icon: <IconBriefcase className="h-5 w-5" />,
    color: "purple",
    index: "02",
    heightClass: "h-24",
  },
  {
    id: "1",
    title: "Completed 10th Grade",
    institution: "Vani Vidyalaya School",
    date: "2020",
    icon: <IconSchool className="h-5 w-5" />,
    color: "emerald",
    index: "01",
    heightClass: "h-28",
  },
];
const CareerTimeline = () => {
  return (
    <div className="mx-auto p-4 transition-colors duration-300">
      <div className="relative pl-8">
        <div className="absolute top-0 bottom-0 left-[3.25rem] w-[2px] bg-zinc-200 dark:bg-zinc-800" />
        <div className="relative z-10 mb-0">
          <div className="flex w-10 flex-col items-center justify-center">
            <div className="z-20 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-900">
              <IconSun className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
            </div>
            <div className="h-4 w-[2px] bg-zinc-200 dark:bg-zinc-800" />
          </div>
        </div>
        <div className="flex flex-col">
          {careerEvents.map((event, i) => {
            const theme = THEME_COLORS[event.color];
            const nextEvent = careerEvents[i + 1];
            const nextTheme = nextEvent ? THEME_COLORS[nextEvent.color] : null;
            return (
              <div key={event.id} className="group relative flex gap-6">
                <div className="relative flex w-10 shrink-0 flex-col items-center">
                  <span className="absolute top-2 -left-10 z-0 hidden font-mono text-3xl font-bold text-zinc-200 transition-colors select-none md:block dark:text-zinc-800">
                    {event.index}
                  </span>
                  {i !== careerEvents.length - 1 && nextTheme && (
                    <div
                      className="absolute top-24 bottom-[-2px] left-1/2 z-0 w-1 -translate-x-1/2"
                      style={{
                        background: `linear-gradient(to bottom, ${theme.hex} 0%, ${nextTheme.hex} 100%)`,
                      }}
                    />
                  )}
                  <div
                    className={cn(
                      "relative z-10 flex w-8 flex-col items-center overflow-hidden rounded-[2rem] pt-4 shadow-lg transition-all",
                      event.heightClass,
                      theme.bg,
                      theme.text,
                    )}
                  >
                    {i === 0 && (
                      <div className="absolute top-0 right-0 left-0 z-0 h-[2.5rem] bg-zinc-200 dark:bg-zinc-800" />
                    )}
                    <div className="relative z-10">{event.icon}</div>
                  </div>
                </div>
                <div className="relative flex-1 pb-4">
                  {i === 0 && (
                    <div className="pointer-events-none absolute top-[2.4rem] -left-[6rem] z-30 flex w-[calc(100%+6rem)] items-center">
                      <span className="mr-2 text-[10px] font-bold text-emerald-500">
                        PRESENT
                      </span>
                      <div className="h-[2px] flex-1 bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]"></div>
                    </div>
                  )}
                  <div
                    className={cn(
                      "flex flex-col justify-start rounded-xl bg-zinc-100 p-5 transition-colors hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800/80",
                      event.heightClass,
                    )}
                  >
                    <div className="flex flex-col space-y-0.5">
                      <h3 className="text-md line-clamp-2 leading-tight font-bold text-zinc-900 dark:text-zinc-100">
                        {event.title}
                      </h3>
                      <div className="line-clamp-1 text-sm/6 font-medium text-zinc-600 dark:text-zinc-400">
                        {event.institution}
                      </div>
                      <div className="mt-1 text-xs font-medium text-zinc-500">
                        {event.date}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="relative z-10">
          <div className="flex w-10 flex-col items-center justify-center">
            <div className="h-4 w-[2px] bg-zinc-200 dark:bg-zinc-800" />
            <div className="z-20 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-900">
              <IconMoon className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default CareerTimeline;