How This Site Was Built

This guide walks through how I built and deployed this portfolio using Next.js, GitHub and Vercel. It’s a simple, repeatable process that goes from a blank folder to a live website quickly.

Project Notes

Problem

A portfolio should show the work while also making the build process understandable and repeatable.

What I built

A Next.js portfolio with project pages, interactive tools, media demos and a documented path from local project to deployment.

Why it matters

Documenting the build turns the site itself into evidence of process, not just a container for finished projects.

Tools used

Next.js, React, Tailwind CSS, GitHub, Vercel and iterative AI-assisted development.

1. Create the project

npx create-next-app@latest .

2. Run locally

npm run dev

3. Build pages

Edit app/page.tsx and create routes like:

app/projects/automation/page.tsx
app/projects/apps/page.tsx

4. Add media

public/videos/

5. Initialize Git

git init
git add .
git commit -m "initial portfolio"

6. Connect to GitHub

git remote add origin https://github.com/YOUR-USERNAME/my-portfolio.git
git branch -M main

7. Push

git push -u origin main

8. Deploy

Import the repo into Vercel and click deploy.

How to Use These Tools

This site isn’t just a portfolio — it’s a set of systems designed to explore how content is created, evaluated and delivered.

Headline Architect

This tool simulates how an editor evaluates headlines before publishing. You can start with your own headline, apply constraints, generate alternatives and compare them based on clarity, structure and editorial intent.

Front Page Focus

This tool transforms written reporting into a conversational audio format. It breaks a story into a natural discussion and presents it as a podcast-style experience.

How the tools connect

Use Headline Architect to refine how a story is framed, then use Front Page Focus to explore how that story sounds in conversation. Together, they represent different ways of shaping and delivering the same information.

Why this exists

Across journalism, automation and AI, the same patterns kept appearing — repetition, constraint-based decision making and the need to translate information across formats. These tools are experiments in making those processes more visible and more intentional.

This process can be reused for any future project, not just a portfolio.