Colophon

How this thing got made.

The story:

This site exists because portfolios that look like everyone else's don't get you the job you actually want. It was built in-house — meaning, by me — over too many late nights, with obsessive attention to the things most people skip: type hierarchy, token discipline, accessible contrast, and whether the hover states feel right.

No Webflow. No template with the serial numbers filed off. Just a well-reasoned design system and the stubborn belief that the craft of the artifact should match the craft being advertised. If I'm going to claim I sweat the details, the details had better hold up to a right-click.

Specifications:

  1. Framework: Astro v5 — static output, zero JavaScript shipped by default.
  2. Language: TypeScript, strict mode. No any, no exceptions.
  3. Content: Three Zod-validated collections (résumé, work, thinking). The frontmatter is the contract; a missing field fails the build instead of shipping undefined.
  4. Styling: CSS custom properties — a hand-rolled design-token system. No Tailwind, no CSS-in-JS, no utility soup.
  5. Type scale: A fixed 11→40px step table on a 4px spacing unit. Headings use clamp() so they breathe between phone and desktop.
  6. Color: Warm-paper palette in light and dark, defined as hex tokens; OKLCH does the alpha mixing for subtle accents and shadows. Not one hardcoded color outside the token blocks.
  7. Typefaces: Instrument Serif (italic) for anything above ~24px; DM Sans (variable, 300–600) for everything else. Served from Google Fonts.
  8. Accessibility: WCAG 2.2 AA as the floor: semantic HTML, real focus rings, keyboard-operable everything, and prefers-reduced-motion honored throughout.
  9. Icons: Drawn by hand as inline SVG — including the bow tie, which is non-negotiable. No icon-font dependency.
  10. The résumé PDF: A real PDF upload will replace the previous client-side generator. The client-side jsPDF approach was removed because it did not produce consistent output across browsers.
  11. Build tooling: Chrome headless plus ImageMagick render the social card and the entire favicon set from HTML sources. A post-build script asserts guardrails on every build.
  12. Design & assist: Figma for layout and component thinking. Cursor and Codebuff for implementation; Claude and Perplexity for research and sharpening the copy. The opinions are mine.
  13. Hosting: A folder of static files that runs on any host — Netlify, Vercel, Cloudflare Pages all work without changes.
  14. Built & designed by: Griffin Kelton, in Clayton, North Carolina.
  15. No templates were harmed in the making of this site.

What you can do about it:

If something feels off — a contrast ratio that's a hair short, a layout that buckles at some unusual viewport, a typo in these very specs — I genuinely want to know. Send it to . There's no handsome reward waiting, but you'll have my sincere appreciation and a fix on the next build.