A rebuild of my original portfolio — a free, hand-coded HTML/CSS/Bootstrap site on GitHub Pages — into a modular Next.js app deployed on AWS Amplify. The goal was a codebase I could extend without copy-pasting markup, and a real deploy pipeline I own end to end.
01 / tech-stack
Tech Stack
Framework
Styling & Motion
Hosting & Ops
Tooling
02 / why-built
Why I Built It
The old version was a hand-coded static site. This rebuild makes it modular and gives me a deploy pipeline I control.
// before
A hand-coded static site
- Plain HTML with CSS and Bootstrap, hosted free on GitHub Pages
- No components — the nav, footer, and cards were copied into every page
- Changing one shared element meant editing the same markup in several files
- Styling was global and hard to keep consistent as pages were added
// after
A modular Next.js app
- Every section is a typed, reusable React component
- One shared layout renders the nav and footer across all pages
- Project pages are generated from a single case-study template and a config file
- Deployed on AWS Amplify with automatic builds on every push to main
03 / impact
Impact
What changed, measured against the old static site.
~$0.03
Projected hosting / month
Amplify hosting for a site this size lands around a few cents a month, tracked with an AWS Budget and a CloudWatch billing alarm.
1 layout
Nav + footer, defined once
A single shared layout replaces the nav and footer that were copy-pasted into every page of the old static site.
0 steps
Manual deploy work
Amplify builds and publishes automatically from GitHub on every push to main — no manual upload.
04 / features
Key Features
Template-driven project pages
Each project page is composed from modular sections (tech stack, before/after, impact, features, lessons) keyed off a single config file. Adding a project means adding a config entry, not building a page.
One component system
Buttons, headings, badges, and section layouts are shared components reused across the home, about, and project pages, so the whole site stays visually consistent.
Continuous deployment on Amplify
Pushing to main triggers an Amplify build that compiles the Next.js app and publishes it — the same model as the old GitHub Pages site, but with full control over the pipeline.
Cost monitoring from day one
An AWS Budget and a CloudWatch billing alarm watch the account so there are no surprises — useful practice for the Solutions Architect work this project supports.
05 / lessons
Lessons Learned
- // 01Deciding component boundaries before writing JSX saved far more time than it cost.
- // 02A shared layout plus a config-driven page template turns "add a project" into a five-minute change.
- // 03Amplify made the deploy story simpler than the serverless stack I originally planned, with nothing lost for a static site.
- // 04Setting a budget and billing alarm early is the cheapest insurance in all of AWS.