Web design and systems renovation · 2026
Portfolio Renovation: From Static Pages to a Living Archive
I rebuilt my portfolio around a maintainable static architecture, then preserved the original site as a browsable part of the story.
Use the old site
This is the previous portfolio running inside the renovation story. Its navigation, project pages, filters, and small Easter egg still work.
- v1 → v2
- controlled rebuild
- Static
- AWS-ready output
- 320–1440px
- verification range
- Role
- Designer, developer, and project lead
- Tools
- Astro · TypeScript · CSS · AWS S3
The challenge
What needed to change
My original portfolio had useful content and a recognizable blue-and-teal identity, but I had mixed shared behavior, page-specific code, large assets, and deployment files together. Continuing to patch it would have preserved the same maintenance problems.
My contribution
Responsibilities
- I audited the existing pages, assets, content, accessibility behavior, and deployment assumptions.
- I set the professional positioning, content priorities, motion principles, and review checkpoints for the rebuild.
- I migrated my projects, resume evidence, credentials, and interactive work into the new system.
- I preserved the original site as a working archive instead of erasing my earlier design decisions.
The system
Approach and decisions
- I moved shared structure into Astro layouts and components while keeping browser JavaScript focused by behavior.
- I centralized project facts in typed data so the directory and detail routes stay synchronized as the catalog changes.
- I kept Astro’s flat-file output so index.html and the existing root routes remain compatible with my AWS S3 hosting.
- I built accessibility and reduced-motion behavior into the shared system, then verified responsive layouts across mobile and desktop widths.
- I repackaged the old site as a lightweight, sandboxed archive that reuses reviewed downloads and optimized media.
The result
Outcome
I now have a portfolio that separates editable source from deployable output, gives every project a consistent evidence structure, and preserves my former site as an interactive record of the renovation. I can replace the website files without rebuilding my AWS architecture.
Attribution: I own the site, its content, its visual direction, and the final decisions. I used Claude Code and Codex as vibe-coding collaborators for research, auditing, implementation, testing, and documentation; I directed the work, reviewed the output, and decided what shipped.
I limited the archive to material that was already public on my previous portfolio. Its larger artifacts reuse reviewed, optimized files from the current site.
Evidence