Building My Portfolio in Code

I organized the project around clear technical guardrails: defining tokens first, standardizing layout grids, and testing interactions directly in the browser.

• Cursor & Claude Code: Coding environments for writing semantic markup, styling tokens, and frontend scripts
• Vercel & Supabase: Serverless deployment, vector search, and edge caching

The biggest takeaway was that AI tools are only as good as the guardrails you give them. When you establish clear tokens and layout rules upfront, AI acts as a reliable accelerator for boilerplate code rather than generating messy overrides.

Designing directly in the browser

Figma is great for team alignment, but jumping straight into HTML and CSS cut out an entire layer of translation lag. I could resize my browser window, test keyboard navigation, and check contrast under real rendering conditions instead of pretending static mockups told the whole story.

Setting ground rules before writing code

If you do not give an AI coding tool strict rules, it will happily invent new CSS classes on every prompt and pad your copy with corporate fluff. Before writing code, I set up explicit project guidelines in local markdown files (CONTEXT.md and AGENTS.md). These defined my tone preferences, banned resume buzzwords, and set hard standards for keyboard accessibility and semantic HTML.

Keeping the CSS modular

The fastest way for an AI-assisted codebase to turn into an unmaintainable mess is letting it write styling rules wherever it wants. I split the stylesheets into clear layers: tokens for colors and spacing, base styles for typography, layout files for grids, and component files for interactive widgets (tokens.css, base.css, layout.css, components.css, pages.css). That kept our CSS clean, prevented styling collisions, and made stylesheets straightforward to maintain.

The first version of my portfolio assistant shoved an entire 40KB JSON file into every single API call. It was simple to set up, but it was inefficient and blew through token limits the second someone asked a nuanced question.

I rebuilt the backend around Supabase and pgvector. Now, every case study and project note is broken into small chunks and indexed using Gemini embeddings. When a recruiter or visitor asks a question, the backend retrieves only the three or four most relevant paragraphs before generating an answer.

Getting the tone and accuracy right took plenty of testing. I had to set strict boundaries so the bot would decline questions outside my background, stream answers smoothly without lag, and track resume downloads so I know what hiring managers care about most.

Lessons

AI coding tools do not replace good software practices. If anything, they punish you faster if you do not have a plan. Without clear architecture upfront, an LLM will happily hand you messy CSS and duplicate utility classes.

• Detailed system rules beat prompt hacking: Setting up explicit coding conventions and design tokens in markdown prevented messy rewrites later.
• Browser testing catches real-world friction: Inspecting live HTML and CSS revealed keyboard navigation quirks and awkward responsive wrapping that Figma never surfaced.
• Fast prototyping requires discipline: When coding is quick, it's easy to build unnecessary features (like the retro themes I ended up cutting). Knowing what to prune is the real job.

Next

• Fine-tune vector retrieval evaluation for more precise project citations in the chat widget
• Add lightweight code sandboxes for interactive case-study components