Personal Portfolio Site
Designed and built a modern, maintainable portfolio site as a living system—focused on long-form case studies, performance, and a workflow that supports rapid iteration and experimentation.
Overview
This project is an ongoing effort to design and build my personal portfolio site as more than a static brochure. The goal was to create a site that clearly communicates my work, supports deep technical case studies, and reflects how I approach UX engineering and front-end architecture in real-world projects.
Because I controlled the full stack—from design decisions to deployment—the portfolio became a practical sandbox for experimenting with modern tooling, animation, and AI-augmented development workflows.
Goals & Constraints
- Case study–first structure: Prioritize long-form, narrative project breakdowns over shallow project grids.
- Performance and clarity: Fast load times, readable typography, and restrained visual design.
- Maintainability: A structure that makes it easy to add, revise, and evolve content without rewrites.
- Room to experiment: Support animation, interactivity, and emerging workflows without overengineering.
Architecture & Tooling
The site is built with Astro, chosen for its static-first approach, clean component model, and ability to layer in interactivity only where it adds value. This keeps the site fast, predictable, and easy to reason about.
Animated elements are created using Rive, allowing motion to be treated as a reusable, state-driven component rather than a collection of one-off effects.
AI-Augmented Development Workflow
This project also served as an opportunity to refine my AI-augmented development process. I used Claude Code alongside my editor to accelerate setup, explore alternative implementations, and iterate rapidly on both design and functionality.
Rather than treating AI as a code generator, I used it as a collaborative tool—evaluating tradeoffs, refining architecture, and stress-testing ideas quickly before committing them to the codebase.
Hosting & Deployment
The site is hosted for free on Github Pages and published via an automated CI/CD workflow using Github Actions. Every merge to the main branch triggers a build and deployment, keeping the live site in sync with ongoing development.
This setup mirrors the same deployment discipline I use on larger projects—favoring automation, repeatability, and fast feedback.
Why Include This Case Study
While smaller in scope than enterprise projects, this portfolio demonstrates how I approach problems when I own the entire system: defining constraints, choosing appropriate tools, balancing UX with performance, and iterating intentionally.
It reflects the same principles I apply to large, complex platforms—just at a more personal scale.
Role & Responsibilities
- UX and visual design
- Front-end architecture and implementation
- Animation and interaction design
- AI-augmented development and iteration
- CI/CD setup and deployment automation