jjswigut.com

My personal site — an atmospheric, editorial home built with Astro + TypeScript.

Visual system: "Refined Charcoal" — a cool monochrome ink ramp with a single signature coral→aquamarine gradient accent, Rubik Mono One (wordmark) + Nunito (body)

• JetBrains Mono (technical labels).

Stack

• Astro 5 (static output) + TypeScript (strict)
• Plain CSS with design tokens (no UI framework)
• Content as typed TS data modules in src/data/
• Deploy target: Cloudflare Pages (add @astrojs/cloudflare when wiring deploys)
• API platform lives separately on api.jjswigut.com (Railway)

Scripts

npm install      # install deps
npm run dev      # local dev server (http://localhost:4321)
npm run build    # production build → dist/
npm run preview  # preview the production build
npm run check    # astro + TypeScript diagnostics

Structure

src/
  data/            # typed content: site copy, projects, experiments, socials
  styles/          # tokens.css (design system) + global.css
  layouts/         # BaseLayout.astro (meta, fonts, reveal/header scripts)
  components/
    chrome/        # SiteHeader, SiteFooter
    home/          # Hero, SelectedWork, PointOfView, Experiments, Closing
    ui/            # SocialLinks
  pages/
    index.astro    # homepage
public/            # static assets (profile photo, favicon)
docs/mockups/      # original standalone HTML design mockup

Content

• Work / case studies — src/content/work/*.mdx (typed via src/content.config.ts). Frontmatter drives the cards and meta; the MDX body is the case-study narrative. Set featured: true to surface a project on the homepage.
• Writings — src/content/writings/*.mdx. Copy hello-world.mdx, flip draft: false, and write.
• Experiments / socials / homepage copy — typed TS in src/data/.

Design tokens

All colors, type, spacing, and motion live in src/styles/tokens.css as CSS custom properties. Change the system there and it propagates everywhere.

Deployment (Render — static site)

The site is fully static, so no Astro adapter is needed. It deploys to Render, with DNS managed at Bluehost (the domain points at Render). Config lives in render.yaml.

Setting	Value
Service type	Static Site
Build command	npm install && npm run build
Publish directory	dist
Node version	20 (NODE_VERSION)

Caching + security headers are defined in render.yaml. The www/apex redirect and custom domain are managed in the Render dashboard; api.jjswigut.com stays on Railway, independent of this deploy. The Render service builds from main and auto-deploys on push.