Colophon
Personal site of Abraham Garcia — designer, founder of Workhorse, writing at the seam where design and AI meet. Three things at once: a portfolio of work, a place to write, and a working test bed for an AI-native delivery stack a designer can own end to end. Live at thehonestape.com.
Framework
Astro 5 with server-side rendering. Static surfaces stay static; dynamic pages render at the edge. React 19 for the few interactive islands. TypeScript throughout. Vite under the hood. Build pipeline includes the Astro MDX, React, Sitemap, RSS, and Partytown integrations.
Visual language
Tailwind CSS v3 with the Typography and Animate plugins. shadcn/ui primitives vendored into the repo, sitting on Radix UI for the accessible behavior layer. Lucide for icons. class-variance-authority + clsx + tailwind-merge for variant glue.
Design tokens live in two places. Colors are HSL CSS variables in
src/styles/globals.css. Spacing, typography, container,
and gap scales are TypeScript constants in
src/lib/design-tokens.ts, imported with
cn() at the call site. The same tokens drive every
surface: web pages, printable PDFs, dossier documents.
Typography
Five families. The four public-site fonts are wired through Astro's
Fonts API, which fetches the woff2 files from Google at build time
and serves them from this origin — so there are no third-party font
requests at runtime. Each family is exposed as a CSS variable
(--font-fraunces, --font-plex-mono, and
friends) with platform-default fallbacks behind it.
- Fraunces — display and body. Variable font, weights 300 through 700, both upright and italic. Preloaded so it paints with the first frame. Fallback: Libre Caslon Text → Georgia → ui-serif.
- IBM Plex Mono — code blocks, terminal UI, eyebrows, meta lines, and the dock. Weights 400, 500, 600, 700. Preloaded. Fallback: ui-monospace → SFMono-Regular → Menlo.
- Libre Caslon Display — select editorial display contexts (dossier headings, document chrome). Single weight at 400. Loaded on demand. Fallback: Libre Caslon Text → Georgia → ui-serif.
- Libre Caslon Text — long-form editorial bodies where Caslon's contrast suits the surface. 400 and 700, both styles. Loaded on demand. Fallback: Georgia → ui-serif.
- Maison Neue and Maison Neue Mono
— used only on the resume and dossier surfaces. Self-hosted as
woff2from/assets/fonts/maison-neue/via@font-facewithfont-display: swap.
Content
Long-form content — posts, case studies, work pages — is
MDX in the repo at
src/content/blog/*.md. The schema is defined in
src/content/config.ts. Writing is just files and
frontmatter, versioned with the rest of the site.
Payload CMS v3 runs alongside as the data layer for visitor messages — contact submissions and newsletter subscribers. Collections live in the same TypeScript repo, sharing the schema with the runtime that reads it.
Forms and motion
React Hook Form with Zod via
@hookform/resolvers for validation.
react-day-picker for date inputs.
Framer Motion, GSAP, and
Swiper for motion and carousel work where the page
earns it.
Edge runtime
Cloudflare Pages on the Workers runtime. Production
data lives in Cloudflare D1 — a SQLite-on-the-edge
primitive the Payload adapter speaks to natively. Local dev uses a
SQLite file on disk;
npm run db:pull brings prod data down for debugging.
Transactional email via Resend through
@payloadcms/email-resend. Booking via the
Cal.com embed.
Build and tooling
Astro CLI for build and dev, Wrangler for Cloudflare deploys, tsx for TypeScript scripts, concurrently for parallel dev processes, Playwright to render the resume and cover-letter PDFs at build time.
The loop
Claude Code, every day. The model proposes the route, the data shape, the component, the styles. I read the diff, push back where it is wrong, accept where it is right. Then I run it. Patterns survive two or three uses before they get lifted into reusable components.
A longer field note on the loop and the stack lives in The Honest Ape Stack.
Search, feeds, and discovery
MiniSearch for client-side search across the writing index. RSS feed at /rss.xml. Sitemap generated at build time. Open Graph and structured data emitted per page.
Analytics and privacy
Google Analytics 4 and Microsoft Clarity for traffic and session analytics. No third-party trackers beyond those. Email is collected only through the contact form and newsletter subscription, both stored in Payload, never sold or shared.
Newsletter
The Meaning Layer ships from Substack at meaninglayer.substack.com.
Source
The repository is private. The patterns are not — the field note at The Honest Ape Stack walks through the build in detail. The Workhorse studio platform is the same shape, scaled up to a multi-tenant content pipeline with agentic generation in the middle.
Contact
Email hello@thehonestape.com, send a message, or schedule a call.
