Context
I needed a fast site to show my work, especially on mobile.
Approach
- Built a static site and rendered portfolio projects from a single data file.
- Added Google Analytics 4, structured data, and lazy loading for heavy assets.
Impact
- First Contentful Paint: 1.2s (mobile).
- This site helped me share my work during my job search.
Goals
I built this site to be fast, easy to use, and easy to update as I add projects.
- Performance: keep pages light and avoid blocking resources.
- Accessibility: semantic landmarks, keyboard-friendly components, and predictable navigation.
- Maintainability: one project data file + build scripts to generate pages.
Architecture
- Static HTML pages with shared JS for navigation, lazy loading, and UI behavior.
- Portfolio projects defined in one data file and rendered into modals and filters.
- Progressive enhancement: the portfolio page still works without JS via pre-rendered cards.
SEO and Sharing
- Generated `/portfolio/<id>` pages for each project (canonical URLs, Open Graph metadata, JSON-LD).
- Kept `sitemap.xml` in sync via a build step.
- Configured Vercel rewrites so clean URLs map to generated pages under `pages/`.
Build and Deployment
- CSS is bundled into a hashed file for caching while still allowing quick invalidation.
- Build scripts generate project pages and copy deployable artifacts into `public/`.
- Lightweight tests enforce markup contracts and ensure pages exist for every project ID.
What I'd Improve
- Add richer case studies (diagrams, metrics, and lessons learned) for the top projects.
- Reduce third-party dependencies in demos and tighten CSP over time.
- Automate screenshots so project cards stay consistent.
