← Back to Projects

Building this site

#Astro#Tailwind CSS v4

About This Site

I’m a designer who loves learning new tools and workflows. This site is based on an Astro theme called Breeze, that I have and continue to heavily customize via Claude Code and Figma.

Tech Stack

  • Astro + Tailwind CSS
  • TypeScript
  • Markdown / MDX

Changelog

v0.8.0 08/05/2026 A SAMWERKS brand identity, a rebuilt home page, and a left nav that sheds its card.
  • Replaced the inherited Breeze wave logo with a SAMWERKS wordmark set in the Silkscreen pixel font, plus an “Online home of Sam Cook” line
  • New SW monogram favicon and app-icon set (theme-aware SVG, white-backed PNGs) and a manifest that no longer claims to be Breeze
  • Rebuilt the home page hero: dropped the card and banner for a portrait and a single tightened line of copy
  • Added a “Sam who?” card carrying the bio, the company logos, the social links, and a Learn more button
  • Swapped the typeset company names for real wordmark logos — Microsoft, Ultravox, Varo, Zillow, and Axon — inlined as SVG and forced to one theme-adaptive gray
  • Stripped the card treatment from the left nav: transparent and flush, with the mica material now used for the hover and selected states
  • Grew the section cards to 300px and widened the content column to 800px
  • Renamed the About page to /sam_who, with a redirect so old links keep working
  • Pointed the Annular card at a real location so its preview shows the climate rings, and gave Annular itself the Open Graph tags it was missing
  • Added an imagePosition option to project cards, fixing a portrait that was cropping to the subject's torso
  • Turned on Vercel Web Analytics
v0.7.0 07/29/2026 Six projects ported from the old site, a unified card system across Work and Projects, and a richer home page.
  • Ported six case studies from the old sam-cook.com into self-hosted internal pages — Palette of Place, IxDA Interview Series, Arcade 30.3, See you out there, Best foot forward, and Albersmania — with no links back to the retiring site
  • Unified the Work and Projects cards into one system (full-bleed image, mica surface, title + arrow row, matching hover) at two scales — large single-column Work, 2-column Projects grid
  • Reworked the Projects page: curated card order, removed the status badges and #tech hashtags, and moved each title onto the arrow row
  • Removed the clunky image zoom-on-hover from the cards
  • Added a “Places I've shipped at” logo strip and image-backed section nav cards to the home page
  • Centered the home content column at a comfortable reading width
  • Animated the changelog accordions open/close (Web Animations API, respects reduced motion)
  • Raised the dark-mode topographic opacity so the mica frost reads under the nav and cards
  • Fixed spelling carried over verbatim from the old-site copy
v0.6.0 07/28/2026 Shifted the site palette from sage green to ocean blue.
  • Moved the brand hue from 165 (sage green) to 250 (ocean blue) across every OKLCH token — foreground, card, primary, muted, border, shadow
  • Retinted the dark background from green-black to navy (#0f141b), keeping the iOS status-bar theme-color in sync
  • Recolored the logo mark to match the new primary blue
  • Left the semantic callouts unchanged (warning, danger, and green success)
v0.5.0 07/28/2026 Ambient topographic background and a translucent “mica” material on the nav and cards.
  • Added an ambient topographic-contour background generated from real North Cascades elevation data (west of Ross Lake)
  • Rendered the topo as a theme-aware CSS mask so the lines follow the foreground color in both light and dark
  • Layered the topo as a fixed, viewport-anchored layer behind content (pointer-events-none), with the sidebar and main lifted above it
  • Gave the left nav a Fluent-style “mica” material — translucent tint plus a subtle backdrop blur so the topo reads softly through it
  • Extended the same mica treatment to the Work and Projects cards for one consistent material language
  • Matched the Work cards’ resting border to the Projects cards (always-on stroke, primary tint on hover)
  • Fixed card backdrop-blur not sampling the background by removing the persistent backdrop-root on .page-content (dropped will-change; animation fill both → backwards)
  • Added a reproducible generator script (scripts/gen-topo.mjs) for the topo asset
v0.4.0 07/23/2026 Mobile experience overhaul — smooth navigation, refined entrance animation, and layout fixes.
  • Fixed choppy page entrance on iOS by removing scale() from the animation (translateY + opacity only, GPU-composited)
  • Unified the entrance treatment so the tall Work page animates as subtly as other pages
  • Eliminated the gray overlay flash on mobile navigation by bypassing Astro view transitions on small screens (full page loads, like classic navigation)
  • Mobile nav overlay now stays up until the next page paints — no more old-page blink mid-navigation
  • Rebuilt the entrance animation as pure CSS so iOS can never paint content before the animation's start state (fixes the down-shift-then-rise flash)
  • Tuned mobile entrance: longer 1s duration and larger 20px rise to compensate for the missing view-transition cross-fade
  • Halved the top padding above page titles on mobile
  • Fixed the desktop sidebar extending below the fold (height now accounts for its own insets)
  • Cleared iOS Safari's default gray tap highlight site-wide
v0.3.0 07/22/2026 Custom domain live, unified title typography, and blog section renamed to Thoughts.
  • Connected custom domain via Porkbun DNS; set production site URL for sitemap and canonical links
  • Updated social links (Instagram, LinkedIn, GitHub) to real profiles
  • Fixed Dev Tools panel leaking into production and silently overriding page padding
  • Unified page title typography (text-4xl font-extrabold) across Home, Work, Projects, Resources, and About
  • Increased top padding so page titles align with the sidebar nav
  • Rewrote Resources page copy; removed unused Contact and "What I Write About" sections
  • Removed homepage "Latest" posts section and trimmed intro copy
  • Renamed blog section from Posts to Thoughts (route, nav, RSS, search) and added it to primary nav
v0.2.0 07/16/2026 Visual refinements, font swap to Geist, and Dev Tools improvements.
  • Switched font from Inter to Geist / Geist Mono
  • Work cards: white fill, border + shadow on hover, gap and padding refinements
  • Work card titles bumped to text-2xl font-extrabold
  • Project card titles updated to match brand title styling
  • Dev Tools panel now closed by default (state persisted across reloads)
  • Added changelog to About page
v0.1.0 06/10/2026 Initial site build — Astro + Tailwind foundation with full Work collection and ported case study content.
  • Initial build on Astro 6 + Tailwind CSS v4 (Breeze theme base)
  • Custom layout: inset sidebar, viewport-fill, mobile hamburger nav
  • Navigation: Home, Work, Projects, Resources, Sam who?
  • Work collection with 11 case studies + full detail pages
  • Case study content and images ported verbatim from sam-cook.com
  • Home, About, and Resources pages with real content
  • Dev Tools panel (dev-only) for live style adjustments
  • Load-only page entry animations
  • Dark mode toggle with dual-instance fix