[ i.cant.reproduce.it ]

Technical Stack — I Can't Reproduce It

This site was built entirely through Claude Code — Anthropic’s agentic coding tool — starting from a single prompt:

“Please set up a new SvelteKit project with the following: TypeScript enabled, basic project structure with a home page, global CSS file for shared styles, a components folder, Prettier for code formatting. Use the official SvelteKit scaffolding and walk me through each step of the setup process.”

What followed was a lot of iteration, a few rabbit holes, and a final product I couldn’t fully recreate from scratch if I tried. Here’s what’s under the hood.

Framework

SvelteKit 2.x / Svelte 5 — file-based routing, SSR, and a component architecture that stays out of your way. Svelte 5 runes are enabled throughout ($state, $props, $effect), trading the legacy reactive syntax for something that feels more explicit and a little more like actual JavaScript.

Content

mdsvex handles the content layer — a preprocessor that lets .md files be imported and rendered as Svelte components. Markdown files live in src/lib/content/ and are pulled directly into page routes. rehype-slug is wired into the mdsvex config to auto-generate id attributes on headings, which is what powers the sidebar navigation.

Styling

Global styles in app.css, scoped component styles via Svelte’s <style> blocks. The color scheme is Catppuccin Mocha (dark, always). Typography is Geist Mono throughout — monospaced and unapologetic about it. No CSS framework. Everything is hand-written.

  • A sticky header that hides itself on the home splash
  • A breadcrumb component that parses the URL pathname
  • A LeftNav component that queries the DOM for h2 elements after mount and builds anchor links dynamically — used on long-form project pages to keep you oriented

Animations

The home page opens with an interactive splash screen: a circle that tracks your cursor and expands on click to reveal navigation. Session storage is used to skip the animation on return visits, so it stays a moment rather than becoming a chore.

Deployment

Vercel via @sveltejs/adapter-auto, which detects the platform automatically. @vercel/analytics is injected in the root layout. A dynamic sitemap.xml endpoint is included for SEO.

Tooling

TypeScript in strict mode, Vite 7 for dev and build, Prettier with the Svelte plugin, and svelte-check for type checking.

The architecture is intentionally minimal. No state management library, no CSS framework, no CMS. Content is markdown on disk. Styling is raw CSS. Interactivity is Svelte doing what Svelte does. The complexity ceiling was kept low on purpose — which made it a surprisingly good fit for an AI-assisted build, where the real work happened in the conversation, not the configuration.

That said, Claude Code got it to a solid foundation — the fine-tuning is all manual. The CSS and TypeScript are being tweaked by hand, dialing in styles, fixing the edges the AI didn’t quite get right, and making it actually feel like mine. It turns out that’s the part no prompt can fully automate.