// ============================================================ // Rick Chen Profile — React Components (Sections) // ============================================================ /* ---------- Navigation ---------- */ function SiteNav({ darkMode, onToggleDark, lang, onToggleLang }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return (
{PROFILE.name.split(" ").map(n => n[0]).join("")} {PROFILE.name}
); } /* ---------- Hero ---------- */ function HeroSection() { return (

{PROFILE.role}

{PROFILE.headline}

{PROFILE.summary}

{PROFILE.keywords.map(k => ( {k} ))}
{/* Metrics */}
{METRICS.map((m, i) => ( ))}
); } /* ---------- MetricCard ---------- */ function MetricCard({ metric }) { const [hover, setHover] = React.useState(false); const m = metric; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: "22px 22px", borderRadius: 20, border: `1px solid ${hover ? "var(--accent)" : "var(--line)"}`, background: hover ? "var(--accent-soft)" : "var(--surface)", transform: hover ? "translateY(-4px)" : "none", boxShadow: hover ? "0 12px 36px rgba(60,50,40,0.10)" : "none", transition: "all 0.22s ease", cursor: "default", }} >
{m.value}{m.unit}
{m.label}

{m.note}

); } /* ---------- TraitCardA ---------- */ function TraitCardA({ trait, index }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: "28px 24px", borderRadius: 20, border: `1px solid ${hover ? "var(--accent)" : "var(--line)"}`, background: hover ? "var(--accent-soft)" : "var(--surface)", display: "flex", flexDirection: "column", gap: 10, transform: hover ? "translateY(-4px)" : "none", boxShadow: hover ? "0 12px 36px rgba(60,50,40,0.10)" : "none", transition: "all 0.22s ease", cursor: "default", }} > 0{index + 1}

{trait.title}

{trait.description}

); } /* ---------- Traits ---------- */ function TraitsSection({ variant = "A" }) { if (variant === "A") return ; if (variant === "B") return ; return ; } /* Variant A: Large quote + horizontal cards */ function TraitsVariantA() { return (

{UI.traitsEyebrow}

"{PROFILE.tagline}"
{TRAITS.map((t, i) => ( ))}
); } /* Variant B: Full-width warm band with centered layout */ function TraitsVariantB() { return (

{UI.traitsEyebrow}

"{PROFILE.tagline}"
{TRAITS.map((t, i) => (

{t.title}

{t.description}

))}
); } /* Variant C: Left quote column + right stacked list */ function TraitsVariantC() { return (

{UI.traitsEyebrow}

"{PROFILE.tagline}"
{TRAITS.map((t, i) => (
0{i + 1}

{t.title}

{t.description}

))}
); } /* ---------- Career Timeline ---------- */ function CareerSection() { const [expanded, setExpanded] = React.useState(new Set([2])); // latest open by default const toggle = (i) => { setExpanded(prev => { const next = new Set(prev); next.has(i) ? next.delete(i) : next.add(i); return next; }); }; return (
{/* Vertical line */}
{CAREER.map((stage, i) => { const isOpen = expanded.has(i); return (
{/* Node */}

{stage.period}

{stage.title}

{stage.subtitle}

{stage.summary}

{stage.tags.map(t => ( {t} ))}
{isOpen && (
    {stage.highlights.map((h, j) =>
  • {h}
    • )}
)}
); })}
); } /* ---------- Projects ---------- */ function ProjectsSection() { const categories = ["All", ...Array.from(new Set(PROJECTS.map(p => p.category)))]; const [filter, setFilter] = React.useState("All"); const filtered = filter === "All" ? PROJECTS : PROJECTS.filter(p => p.category === filter); return (
{categories.map(c => ( ))}
{filtered.map((p, i) => ( ))}
); } function ProjectCard({ project }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ borderRadius: 20, overflow: "hidden", border: "1px solid var(--line)", background: "var(--surface)", boxShadow: hover ? "0 16px 48px rgba(60,50,40,0.12)" : "0 4px 20px rgba(60,50,40,0.04)", transform: hover ? "translateY(-4px)" : "none", transition: "transform 0.2s ease, box-shadow 0.2s ease", }} >

{project.category} · {project.period}

{project.title}

{project.summary}

    {project.impact.map((im, j) =>
  • {im}
    • )}
{project.tags.map(t => ( {t} ))}
); } /* ---------- SkillCard ---------- */ function SkillCard({ skill }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: "22px 22px 18px", borderRadius: 20, border: "1px solid var(--line)", background: "var(--surface)", transform: hover ? "translateY(-4px)" : "none", boxShadow: hover ? "0 16px 48px rgba(60,50,40,0.12)" : "0 4px 20px rgba(60,50,40,0.04)", transition: "transform 0.2s ease, box-shadow 0.2s ease", cursor: "default", }} >

{skill.group}

{skill.description}

{skill.items.map(item => ( {item} ))}
); } /* ---------- Skills ---------- */ function SkillsSection() { return (
{SKILLS.map((s, i) => ( ))}
); } /* ---------- Contact ---------- */ function ContactSection() { return (

{UI.contactEyebrow}

{UI.contactTitle}

{UI.contactDesc}

{PROFILE.name}

{PROFILE.subheadline}

{PROFILE.email ? Email : {UI.contactEmailPlaceholder}} {PROFILE.linkedinUrl ? LinkedIn : {UI.contactLinkedinPlaceholder}} {PROFILE.githubUrl ? GitHub : {UI.contactGithubPlaceholder}}
); } const contactLinkStyle = { padding: "10px 14px", borderRadius: 12, border: "1px solid var(--line)", background: "var(--bg)", fontSize: 14, color: "var(--muted)", textDecoration: "none", }; /* ---------- Footer ---------- */ function SiteFooter() { return (
{UI.footerCopyright} {PROFILE.name} {PROFILE.location}
); } /* ---------- Section Heading (shared) ---------- */ function SectionHeading({ eyebrow, title, desc }) { return (
{eyebrow &&

{eyebrow}

}

{title}

{desc &&

{desc}

}
); } // Export all Object.assign(window, { SiteNav, HeroSection, TraitsSection, CareerSection, ProjectsSection, SkillsSection, ContactSection, SiteFooter, SectionHeading, ProjectCard, });