imadamai.com

The Problem

I've been building AI tools and experiments for a while. I had projects sitting in GitHub repos with no way for anyone to find them or understand what they do. I needed a place to put them.

Most portfolio templates felt generic. I wanted something that matched the work: dark, technical, not trying too hard. And I wanted the process of building it to be part of the story.

The Approach

I didn't write this site by hand. I used Claude Code with a workflow system called GSD (Get Shit Done) that breaks projects into phases, generates plans, and spawns executor agents to build them.

The process worked like this: I described what I wanted. GSD researched the tech stack, wrote requirements, created a phased roadmap, then executed each phase using sub-agents that wrote code, ran builds, and committed changes. I reviewed the output, gave feedback, and course-corrected.

Three phases: foundation (scaffold, data model, dark mode), visual design (card grid, hover-video, animations), and detail pages (the page you're reading now, plus SEO and sitemaps). The whole v1 was built in a single day.

Architecture

Static site. Every page is pre-rendered at build time. No API routes, no server-side rendering at request time, no database. Add a project by editing one TypeScript file and pushing. The build picks it up and generates new pages.

Project cards on the homepage support hover-to-play video previews on desktop. On mobile, they show a static thumbnail. Videos don't load until the card scrolls into view.

Each project has a detail page with structured content sections (like the one you're reading). The content is stored as plain strings in the project data file. A lightweight renderer handles bold text and inline code. No markdown library, no CMS.

The sitemap and per-project OG metadata are generated from the same data file. Adding a project updates both automatically.

Design Decisions

No CMS. With fewer than ten projects, a CMS adds complexity for no benefit. Editing a TypeScript file is faster than any admin panel and gives type checking for free.

Tailwind v4 over CSS Modules. For a site with a consistent global aesthetic, utility classes are faster to work with. v4 dropped the config file entirely, which simplified setup.

Motion over CSS keyframes for animations. Scroll-triggered entrances and staggered fade-ins are hard to do well with pure CSS. Motion (formerly Framer Motion) handles viewport detection and spring physics in a few lines.

No component library. The entire site has maybe six component types. Installing shadcn or Radix for that would've been overkill.

Static generation over SSR. Nothing on this site changes at request time. Pre-rendering everything means the CDN serves it directly. Fastest possible response.

What I Learned

AI agents can build a real site if you review the output. The code that runs this site was written by executor agents, not by me typing in an editor. But it needed oversight. I caught bad copy, missing links, and layout issues during verification checkpoints. The agents did the work; I did the editing.

Planning matters more than prompting. The GSD workflow front-loads research, requirements, and a phased roadmap before any code gets written. That structure is what made the agents effective. Without it, they'd generate plausible code that didn't fit together.

AI-generated copy needs a heavy edit pass. The first draft of every project description on this site was full of em dashes, "key insights", and rule-of-three lists. I had to build explicit anti-slop rules into the content generation skill to get writing that sounds like a person.

Status as of March 2026. v1 is complete. Three phases, seven plans, all passing verification. The site is live. I'll add projects as I build them.