From Static Tags to a Living CV: Pair-Programming a Site Architecture with AI

Most personal engineering websites treat tags as an afterthought. You write an article, slap five lowercase keywords at the bottom, and end up with a predictable cloud of #kubernetes or #javascript links that lead to thin archive pages. Case in point: I do this all the time.

When I started revamping this site, I wanted the tags to actually do something useful. Over a career spanning enterprise systems support at HPE, principal messaging engineering and program management at Vade, and ongoing high-availability mail delivery operations across APAC (based in Japan), my work has never existed in isolated silos. Technical architecture, daily problem-solving logs, career milestones, a little time in the garden, and life behind the camera all inform one another.

Instead of just spitting out article links, I wanted clicking a tag to connect the dots: career milestones, relevant technical deep dives, homelab field notes, and even photos where relevant. And as a practical side benefit, structuring everything cleanly lays the groundwork for generating tailored, accurate CVs without an LLM having to hallucinate my past.

---

Connecting Milestones to Real Work

The core problem with traditional resumes is that they are flat assertions. A PDF bullet point says:

“Spearheaded advanced engineering for high-scale enterprise email security platforms protecting mail for millions of domains worldwide.”

Recruiters and hiring managers read that and have to take your word for it. They can’t easily click through to see the actual problems you solved, the postmortems you logged, or how you think.

In this setup, tags act as connective tissue across four distinct data collections:

1. Career Experience (experiences.ts): Structured role histories containing verified production highlights, enterprise environments, and core competencies.
2. Technical Articles (src/content/blog/): Deep dives into multi-region cloud storage, email deliverability, DNS, virtualization, or whatever else I fancy.
3. Operational Logs (src/content/log/): Timestamped field notes from the engineering trenches—capturing day-to-day problem solving, homelab hardware quirks, Proxmox hypervisor passthrough, and IoT garden automation.
4. Picture Logs (src/content/photolog/): Atmospheric photographic stories and observations captured across the world—documenting Aegean cliffside architecture, spring cherry blossoms along quiet Tokyo canals, Kenzo Tange’s concrete curves, and contemporary art exhibitions.

When you click a tag like #Email or #Infra or #AI, the route doesn’t just show a list of blog titles. The page dynamically pulls the matching career roles, surfaces the exact bullet-point highlights where that competency was exercised under enterprise SLAs, and displays the technical articles and real-life logs that substantiate it.

It turns a lazy list of links into something tangible.

---

Keeping Things Sane: Engineering vs. Photography Tags

One immediate headache was tag clutter. With nearly 40 photo entries on the site, I didn’t want the engineering tags buried under purely visual keywords like #Sakura, #Nightscape, or #Canal Walk.

The fix was straightforward:

• Photography Topics: Pure visual themes stay in their own dedicated, neutral-toned gallery section.
• Engineering & Career Topics: Any tag that appears in career experiences, blog write-ups, or operational logs automatically routes to the primary engineering taxonomy.
• Cross-pollination: If a photography tag happens to overlap with engineering (like #Architecture, #Geometry, or #AI), it automatically promotes into the main tag index.

This keeps the site’s professional focus front and center without hiding the creative side.

---

Making CV Generation Less Painful

Structuring career highlights, technical essays, and observational notes into typed Astro collections does more than just organize the site: it creates a clean data source for future CV generation.

Tailoring a CV for different opportunities is notoriously tedious. One role might call for a Principal Systems Engineer with deep Linux kernel and bare-metal server experience. Another might seek an Engineering Program Manager who excels at cross-timezone team leadership and complex carrier migrations.

Because every highlight in experiences.ts is tagged and backed by real entries:

• No Hallucinations: When feeding an LLM a prompt to build a tailored resume, it pulls from genuine, pre-written accomplishment bullets in experiences.ts tied to specific tags (like #Infra or #Security). It doesn’t have to guess or embellish.
• Real Context: Instead of sterile bullet points, an exported summary can weave in real context—such as field notes on Tokyo architecture or reflections from an art exhibition at Roppongi’s Mori Tower. It conveys not just what was built, but how I think and solve problems.
• Single Source of Truth: Updating a job accomplishment or logging a new milestone in git automatically refreshes the portfolio, the tag cross-references, and any downstream generated resumes simultaneously.

---

Pair-Programming with AI (When You’re Not a Frontend Dev)

This site wasn’t generated by a single prompt asking an LLM to “build me a portfolio with a cool tagging system.” I’m admittedly an amateur when it comes to web development, and in my experience, monolithic prompts almost always yield generic, bloated code that breaks when integrated with real compilers and stylesheets. Trying to untangle 500 lines of generated code when you aren’t a frontend expert is miserable.

Instead, I used an AI coding assistant (Antigravity) as a hands-on pair programmer, steering it with short, incremental prompts under close supervision:

1. Reverting and Resetting: When an early experiment with an embedded slide-out card inside the lightbox modal proved overly intrusive, we immediately scrapped the UI change while keeping the underlying data model intact.
2. Establishing Dedicated Spaces: We created clean photo cards on /log/, ensuring every entry had a title, formatted date, location, and tags linking back to the LightGallery modal.
3. Polishing User Experience: We cut down visual clutter by removing redundant buttons, turning entire cards into clickable targets, and styling tag badges in subtle neutral grays for photography and warm amber for career highlights.
4. Migrating to Astro Content Collections: We moved runtime TypeScript data objects into native Markdown files in src/content/photolog/, allowing full Astro schema validation and individual story editing.
5. Human Ground-Truthing: When the AI enriched stories by scanning visual contact sheets, it made an initial aesthetic guess about photo #7 (calling it a structural timber lattice). Because I was there in person, I corrected it: “Golden Lattice is actually a burnt piano and chair with black twine attached everywhere, an art exhibition in Mori Tower Roppongi.” The assistant immediately rewrote the story to capture Chiharu Shiota’s installation with complete accuracy.
6. Micro-interaction Polish: Finally, we tightened the lightbox captions so that the photo title, date, and link to the picture log sit cleanly on a single row, overriding LightGallery’s internal CSS specificity to ensure the link retains our site-wide amber accent (#fbbf24).

Each step took two to three minutes—always under supervision. Because the assistant had terminal and file-system access within the workspace, it could execute AST modifications, verify with headless Chrome screenshots, and run npm run build after every single turn.

---

What a Personal Site Can Be

In 2026, a software engineer’s website shouldn’t just be an electronic business card or a neglected blog (knock on wood).

Connecting career milestones, operational logs, and life behind the camera doesn’t require over-engineered enterprise tooling. With a clean static framework like Astro and a bit of patient, supervised AI pair-programming, you can build something genuinely personal—and actually useful.