Website 2026

sigwrench.com

A personal website built as a dark, immersive terminal experience. Custom 3D particle hero, CRT boot sequence, and a curated content garden — built with Astro, Svelte 5, and Three.js.

Astro Svelte Three.js GSAP Tailwind CSS
Visit Project → Source Code →

The site you’re looking at. A personal portfolio, blog, and link garden built from scratch with an aesthetic I’m calling Obsidian Terminal — true black backgrounds, cyan phosphor glow, CRT texture overlays, and monospace everything.

Why Build It

I wanted a site that felt like me and not like every other developer portfolio generated from the same template. No hero + three feature cards + testimonials + CTA. No purple-to-blue gradients. No Inter font. Every design decision had to feel intentional.

The Hero

The landing experience is a two-phase sequence:

  1. Terminal Boot — The screen flickers on like an old CRT. Lines type out character by character: > INITIALIZING SIGWRENCH_OS.... After the boot completes, the terminal glitches out — the text skews, blurs, and dissolves.

  2. Particle Reveal — 4,000 particles fade in from the glitch, forming a reactive cloud rendered with custom vertex and fragment shaders. The particles pulse with sine waves and drift toward your mouse at 15% magnetic pull. Colors shift between cyan (#00ffd5) and amber (#ffb800). An IntersectionObserver pauses the entire render loop when you scroll past it.

The whole thing respects prefers-reduced-motion — users who opt out get a clean static hero instead.

A 72px side rail pinned to the left edge. Frosted glass background, six icon+label nav items, a monogram logo with a glow hover state. On mobile it becomes a full-screen overlay with keyboard trapping and escape-to-close. The rail persists across page transitions using a named view-transition-name, so it never re-renders during navigation.

The Cursor

A custom magnetic cursor built as a Svelte island. An 8px cyan dot tracks tightly, a larger ring lags behind with softer easing. When you hover over interactive elements, the ring expands and the cursor gets magnetically pulled toward the target center. Hidden on touch devices.

Content System

Everything lives in Astro Content Collections with Zod schemas:

  • Projects — MDX case studies with tags, categories, GitHub/live links
  • Blog — Media thoughts and essays with category filtering (movie, show, article, essay, music, game)
  • Links — Curated bookmarks organized into topic clusters, each with its own page

All content is MDX, so I can embed interactive Svelte components (like YouTube players) directly in blog posts.

Design System

The “Obsidian Terminal” aesthetic comes from layering subtle effects:

  • Noise texture — An SVG fractal noise overlay at 3% opacity across the entire viewport
  • Scanlines — A repeating 2px linear gradient at 3% opacity, slowly drifting downward
  • Glass panels — backdrop-filter: blur(12px) with faint borders
  • Glow effects — Layered box-shadow with cyan/amber at low opacity
  • Glitch hovers — clip-path animations that split and offset elements on hover

Typography is Space Grotesk for headings and JetBrains Mono for everything else. Font sizes use clamp() for fluid scaling.

Page Transitions

Astro’s View Transitions API with custom dissolve + glitch animations. The old page blurs out while the new page materializes. The nav rail is excluded from transitions so it stays rock-solid.

Search, RSS, OG

  • Pagefind indexes all content at build time for instant client-side search
  • RSS feed at /rss.xml for blog subscribers
  • Dynamic OG images generated at build with Satori + Resvg — each blog post and project gets a unique 1200×630 PNG
  • Sitemap auto-generated by Astro

Tech Stack

  • Framework: Astro 5 (static output, zero JS by default)
  • Interactivity: Svelte 5 islands with client:visible / client:idle hydration
  • 3D: Three.js with custom GLSL shaders (vertex + fragment)
  • Animation: GSAP + ScrollTrigger for scroll-driven reveals
  • Smooth Scroll: Lenis, synced with GSAP’s ticker
  • Styling: Tailwind CSS 4 + custom CSS for effects
  • Content: MDX with Astro Content Collections + Zod validation
  • Search: Pagefind (client-side, build-time indexed)
  • OG Images: Satori + @resvg/resvg-js
  • Deploy: Vercel (static)
  • Newsletter: Buttondown API via Vercel serverless function

What I Learned

The biggest win was the architecture decision to keep everything static where possible. Astro’s island model means the Three.js hero, search, and newsletter form all hydrate independently — static pages ship minimal JavaScript. The build currently produces 22 pages with Pagefind indexing over 2,000 words.

The custom shaders were the most fun part. Additive blending with depth writes disabled gives the particles that ethereal glow-without-geometry look. Mouse reactivity through shader uniforms (instead of moving actual geometry) keeps the GPU cost almost zero.