Portfolio template

1"use client";
2 
3import { ArrowUpRight, ChevronDown, Mail } from "lucide-react";
4 
5import { Button } from "@/components/ui/button";
6 
7const TEMPLATE_THEME =
8  "[color-scheme:light] [--background:#fff0dc] [--secondary-background:#fff] [--foreground:#000] [--main-foreground:#000] [--main:#ff7b07] [--border:#000] [--ring:#000] [--box-shadow-x:4px] [--box-shadow-y:4px] [--reverse-box-shadow-x:-4px] [--reverse-box-shadow-y:-4px] [--shadow:4px_4px_0px_0px_var(--border)] [--border-radius:5px] [--base-font-weight:500] [--heading-font-weight:700] dark:[color-scheme:dark] dark:[--background:#2c304c] dark:[--secondary-background:#222] dark:[--foreground:#ececec] dark:[--main:#ff7b07] dark:[--ring:#fff]";
9 
10const NAV_ITEMS = [
11  { label: "Work", href: "#work" },
12  { label: "Contact", href: "#contact" },
13] as const;
14 
15const PROJECTS = [
16  {
17    title: "Wayline",
18    type: "Product design and front-end",
19    year: "2026",
20    summary: "A dispatch planning workspace that turns route changes into clear next actions.",
21  },
22  {
23    title: "Ledgerline",
24    type: "Product design",
25    year: "2025",
26    summary: "A calm reporting system for finance teams reviewing a busy monthly close.",
27  },
28  {
29    title: "Open Index",
30    type: "Web design and development",
31    year: "2025",
32    summary: "An accessible public directory for shared tools, datasets, and practical guides.",
33  },
34] as const;
35 
36export default function PortfolioTemplate() {
37  return (
38    <div
39      id="top"
40      className={`min-h-dvh flex flex-col bg-background text-foreground selection:bg-main selection:text-main-foreground ${TEMPLATE_THEME}`}
41    >
42      <header className="border-b-2 border-border">
43        <div className="mx-auto flex h-12 w-full max-w-3xl items-center justify-between gap-4 px-4 sm:px-6">
44          <a href="#top" className="font-heading text-sm" aria-label="Sora Han home">
45            Sora Han
46          </a>
47 
48          <nav aria-label="Primary navigation" className="flex items-center gap-4 text-sm">
49            {NAV_ITEMS.map((item) => (
50              <a key={item.href} href={item.href} className="hover:underline">
51                {item.label}
52              </a>
53            ))}
54          </nav>
55        </div>
56      </header>
57 
58      <main className="flex-1">
59        <div className="mx-auto w-full max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
60          <section aria-labelledby="portfolio-title">
61            <h1 id="portfolio-title" className="font-heading text-4xl sm:text-5xl">
62              Sora Han
63// … truncated