import React, { useEffect, useRef, useState } from "react"; import { Check, Code, GitBranch, Star, Rocket } from "lucide-react"; const timelineItems = [ { year: "2026", title: "Present", description: "Building domain-specific languages, diving deep into the Salesforce ecosystem, and writing production Java and Python daily. The craft keeps evolving.", technologies: ["Java", "Python", "Salesforce", "DSLs"], icon: , }, { year: "2024", title: "Shipping & Scaling", description: "The wisdom of past ventures now flows through my work, whether crafting elegant CRUD applications or embarking on bold projects that expand my limits.", technologies: ["Rust", "Typescript", "Go", "Postgres"], icon: , }, { year: "2022", title: "Diving Deeper", description: "The worlds of systems programming and scalable infrastructure collided as I explored low-level C++ graphics programming and containerization with Docker.", technologies: ["C++", "Cmake", "Docker", "Docker Compose"], icon: , }, { year: "2020", title: "Exploring the Stack", description: "Starting with pure HTML and CSS, I explored the foundations of web development, gradually venturing into JavaScript and React to bring my static pages to life.", technologies: ["Javascript", "Tailwind", "React", "Express"], icon: , }, { year: "2018", title: "Starting the Journey", description: "An elective Python class in 8th grade transformed my keen interest in programming into a relentless obsession, one that drove me to constantly explore new depths.", technologies: ["Python", "Discord.py", "Asyncio", "Sqlite"], icon: , }, ]; function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; index: number }) { const ref = useRef(null); const [visible, setVisible] = useState(false); const [skip, setSkip] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const inView = rect.top < window.innerHeight && rect.bottom > 0; const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload"; if (inView && isReload) { setSkip(true); setVisible(true); return; } if (inView) { requestAnimationFrame(() => setVisible(true)); return; } const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } }, { threshold: 0.2 } ); observer.observe(el); return () => observer.disconnect(); }, []); const isLeft = index % 2 === 0; return (
{/* Node */}
{item.icon}
{/* Card */}
{item.year}

{item.title}

{item.description}

{item.technologies.map((tech) => ( {tech} ))}
); } export default function Timeline() { const lineRef = useRef(null); const containerRef = useRef(null); const [lineHeight, setLineHeight] = useState(0); useEffect(() => { const container = containerRef.current; if (!container) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { // Animate line to full height over time const el = lineRef.current; if (el) { setLineHeight(100); } observer.disconnect(); } }, { threshold: 0.1 } ); observer.observe(container); return () => observer.disconnect(); }, []); return (

My Journey Through Code

{/* Animated vertical line */}
{timelineItems.map((item, index) => ( ))}
); }