Building This Site with Claude Code

This site itself is a project worth documenting. Not because of the code, but because of how it was built. All of the website through a conversation with Claude Code, Anthropic’s CLI coding agent.

1. Getting Claude Code Actually Running

I didn’t make website before. So the starting point was a Windows machine with no Node.js installed. Claude Code itself was already set up as the CLI agent, but the very first real obstacle had nothing to do with AI at all. ” The project needed a JavaScript toolchain to run Astro”

So the first hour went to:

• Downloading and installing Node.js LTS

2. Planning Before Writing a Single Line

Before the creation, Claude code and I discuss about a lot like what language the site should be in, where it would deploy, what “portfolio” actually meant here (learning projects vs. CTF writeups), whether certifications deserved their own page, what the homepage needed to contain. Apart from that, since this is a cybersecurity portfolio, the visual direction: dark, terminal-inspired, a neon accent color, monospace headings, a subtle grid in the background.

Before touching the real framework, a throwaway static HTML + Tailwind CDN mockup got built just to lock down color and layout. It is a disposable way to test “does this feel right” before investing in the real build.

3. Building the Real Site

Once the direction felt right, the actual Astro project got scaffolded:

• Astro, with static output, as the framework
• Tailwind CSS v4 for styling
• Content Collections for Projects and Certifications, and each entry is just a Markdown file with typed frontmatter (title, tags, dates, links), so adding content later never means touching code
• Reusable components (Nav, Footer, ProjectCard, CertificationCard, TagBadge) instead of copy-pasted markup everywhere Pages went up one at a time: the homepage, a /projects listing with tag filtering, individual project pages that render the Markdown body, a /certifications page, and later a dedicated /about page split off from the homepage.

4. Pulling In a Design Skill from the Claude Code Marketplace

Rather than hand-tuning every animation and spacing decision, a third-party skill called UI/UX Pro Max got installed straight from Claude Code’s plugin marketplace (/plugin marketplace add ..., run from inside the CLI). Once installed, Claude Code could call on it the same way it calls on any built-in skill, like pulling in curated color palettes, motion presets, and stack-specific UI guidance to sharpen hover states, spacing rhythm, and micro-interactions instead of guessing at “what looks good.”

5. Adding Superpowers: Making Claude Actually Check Its Work

The other skill worth calling out is superpowers. Once it’s installed, the difference in how Claude Code handles bugs and claims is immediate:

• When something breaks, Claude stops guessing at the cause and works through it systematically instead, it will tracing the problem step by step rather than pattern-matching to the first plausible explanation.
• It won’t say “fixed” without actually showing the fix works. If there are not some evidence to prove, it will keep solving problems.
• Before writing new code, it plans first, and it cleans up old code that no longer fits rather than leaving it to rot alongside the new approach.

The nice part is that none of this is specific to coding. Even for tasks that have nothing to do with writing software, having superpowers installed makes Claude noticeably more careful across the board. It will more willing to verify its own work before calling something done, rather than taking its own output on faith.

6. Iterating in Plain Language

From here on, most of the work was just describing what was wanted and watching the site update live in a browser preview:

• “Add a background video behind the hero section”
• “Replace the GitHub buttons with a LinkedIn link”
• “Give projects tags and their own detail pages, like articles used to have”
• “Add a background image behind the About Me page” Each request turned into real file edits, like Astro components, content schemas, Tailwind classes and each one got checked against a live dev server before it counted as done.

7. Finding and Fixing Real Bugs

Not everything worked the first time, and the interesting part is that these were genuine bugs, not just missing features:

• The dev server occasionally crashed with an EBUSY file-watcher error on Windows whenever source image files were swapped out on disk while the server was still running.
• One content image just wouldn’t show up at all: traced back to two compounding mistakes: the image sitting inside src/content/ (which Astro doesn’t serve) instead of public/, and a Windows-style backslash path in the frontmatter where a forward-slash URL path belonged.

Each of these was a small lesson in the gap between “the AI wrote code that looks right” and “the AI verified it actually works”, which is exactly the kind of gap the superpowers skill exists to close, and why every change here got checked in a real running browser before being reported as done.

Result

What exists now is a fully working personal site: a homepage with a video hero, a filterable project archive with individual write-up pages, a certifications page with badge support, and an About page. All of it built through nothing but conversation with an AI agent.