Building a portfolio from scratch with AI tools — what worked, what didn't, and why it cost more tokens than I expected.
I'm a mechanical engineer who writes code when he has to, not a web developer. So when I decided I needed a portfolio site, I did what any self-respecting engineer would do: I tried to automate my way out of learning the boring parts.
I've had a LinkedIn profile forever, but it never felt like mine. The format is rigid, the aesthetic is corporate, and there's no room to show personality. I wanted something that actually reflected how I think — precise but not sterile, technical but with some character.
The other reason is purely practical: I work across hardware, software, and the messy middle between them. A resume can't really convey that. A well-built portfolio can.
No frameworks. No build tools. No npm install rabbit holes. Just HTML, CSS, and a single JavaScript file. The goal was something I could fully understand, easily update, and host for free on GitHub Pages without a deployment pipeline.
The design language emerged from my actual interests — the color palette is forest greens and warm cream, the decorative elements are PCB traces and fern silhouettes and a robot arm, because that's genuinely the Venn diagram of my life. Engineering precision meets biological systems meets the fact that I work in a lab all day.
"The model is like a very fast, very confident intern. Great at executing, prone to confidently doing the wrong thing if you don't give it enough context."
I built this almost entirely using Claude Code — Anthropic's CLI AI assistant. The workflow was: I describe what I want, it writes the code, I look at it in the browser, I tell it what's wrong. Repeat until it doesn't look terrible.
This is faster than writing everything by hand, but it's not magic. The AI is excellent at generating boilerplate, implementing a described layout, and wiring up animations once you explain the coordinate system. It's less good at understanding visual taste — I had to be very specific about what I wanted, and "make it look cooler" is not a useful prompt.
The biggest trap is letting it accumulate context debt. After a long session, the model starts patching on top of patches, losing track of what it changed ten messages ago. The fix is to periodically reset, re-describe the current state clearly, and tell it exactly what to do next. Treat it like onboarding a new team member every hour or so.
The robot arm animation. I wanted the decorative robot arm in the hero section to move. Getting a kinematic chain of three joints to animate smoothly — where each joint's rotation is in the local coordinate space of the parent — took more back-and-forth than I expected. The AI kept getting the transform hierarchy wrong, applying rotations in world space instead of local space. Once we got it right, a simple sin-wave idle loop looks genuinely good.
Keeping things consistent across pages. When you're hand-writing HTML, it's easy for 15 pages to slowly diverge in small ways. Nav links, footer structure, CSS class names — all drift. I ended up doing a few passes explicitly asking the AI to audit consistency and normalize everything.
Not over-engineering it. There were several moments where I wanted to add a build system, a component library, a CMS. Each time, I forced myself to ask whether a simpler solution existed. Almost always it did. Static HTML is underrated.
Describe the outcome, not the implementation. "I want the fern on the left to slide offscreen as the user scrolls" is a much better prompt than "add a translateX transform to the plant-left-wrap on scroll." Let the AI figure out the how; you stay focused on the what.
Read the output. I made the mistake early on of approving changes without fully checking them in the browser. A few times this resulted in the AI silently reverting work from two sessions ago because it lost track of what had changed. Trust but verify.
Keep a running note of design decisions. Why is the nav forest green instead of cream? Why are the section decorations SVG instead of CSS? If you can answer those questions, you can give the AI the constraints it needs to stay consistent.
The site is functional but not finished. I want to add real photos to the gallery placeholders, flesh out the blog with a couple more posts, and possibly add a dark mode toggle — though that last one might be the npm install rabbit hole in disguise.
If you're reading this and want to do something similar: the approach works, but it requires you to stay in the driver's seat. The AI is the accelerator, not the GPS.