Color

All colors are defined as CSS custom properties in tokens.css. Nothing in this project uses a hardcoded hex value — every color reference points back to one of these tokens.

Brand palette

Surfaces

Typography

All type is set in Fraunces — a variable serif with optical sizes and a warm, editorial character. Sizes come from a base-16 scale defined in global.css.

Astro Components

Every component below uses the same HTML and class names as the live portfolio. There is no separate "demo" version — what you see here is the real component.

import Button from '../components/Button.astro';

<!-- Primary (default) -->
<Button label="LinkedIn" href="https://linkedin.com/in/..." variant="primary" />

<!-- Secondary -->
<Button label="Download Resume" href="/resume.pdf" variant="secondary" download={true} />

<!-- Disabled -->
<Button label="Coming Soon" href="#" variant="primary" disabled={true} />

<!-- Icon left (no href = renders as <button>, not <a>) -->
<Button label="Reset" variant="secondary" icon='<svg ...>...</svg>' />

<!-- Apply .text-link to any <a> tag -->
<a href="/some-page" class="text-link">Link label</a>

<!-- In a navigation list -->
<ul>
  <li><a href="#color" class="text-link">Color</a></li>
  <li><a href="#typography" class="text-link">Typography</a></li>
</ul>

import SectionLabel from '../components/SectionLabel.astro';

<SectionLabel label="Selected Work" />

import Nav from '../components/Nav.astro';

<Nav />

import ProjectCard from '../components/ProjectCard.astro';

<ProjectCard title="Project title goes here" />

import ThemeToggle from '../components/ThemeToggle.astro';

<ThemeToggle />

import Carousel from '../components/Carousel.astro';

<Carousel />

import Footer from '../components/Footer.astro';

<Footer />

shadcn Components

shadcn/ui is an open-source component library used by teams at Vercel, Linear, and Resend. Components are not installed as a dependency — the source code lives in src/components/ui/ so it can be edited directly. Styling is driven entirely by CSS variables, which means a single token change propagates to every component at once.

The token pipeline

Every color decision starts in Figma as a variable and ends up in a live component through a four-layer chain. Nothing is hardcoded at any step — a brand update touches one value and cascades everywhere.

Step 1 — Figma variable (designer's source of truth)
         color/navy = #081F5D

Step 2 — Brand token in tokens.css
         --color-navy: #081F5D;

Step 3 — Semantic mapping in global.css (the bridge layer)
         --primary: var(--color-navy);    /* "primary" is shadcn's name for it */
         --ring:    var(--color-royal-blue);

Step 4 — shadcn component in button.tsx
         bg-primary   → reads --color-primary → reads --primary → reads --color-navy
         hover:bg-ring → shifts to royal-blue on hover

What each variant controls

Each shadcn variant maps to a different semantic token. Changing the token value updates the variant everywhere it is used — no per-component overrides needed.

Default   → --primary         (navy fill, white text)
Outline   → --border          (border stroke color, currently slate)
Secondary → --secondary       (subtle surface background)
Ghost     → --muted           (hover-only background, invisible at rest)

import { Button } from '@/components/ui/button';

<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>

import { Badge } from '@/components/ui/badge';

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>