Portfolio — Jonah Mabry

Personal portfolio site built with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS v4.

Live site: https://jonahmabry.github.io/portfolio

Tech stack

• Next.js 16 with the App Router, exported as a static site (output: "export")
• React 19 + TypeScript
• Tailwind CSS v4 (CSS-based config via @tailwindcss/postcss, no tailwind.config file)
• Contact form powered by Formspree

Project structure

app/          App Router entry (layout.tsx, page.tsx, globals.css)
components/    Section components (Hero, Projects, About, Skills, Contact, etc.)
lib/          Site content (data.ts) and shared types (types.ts)
public/       Static assets (resume PDF, project images)

Editing site content (projects, skills, bio, links) is done in lib/data.ts — no component changes required.

Local development

npm install      # install dependencies
npm run dev      # start dev server at http://localhost:3000
npm run build    # production static export to ./out
npm run start    # serve the production build
npm run lint     # run ESLint

Deployment

The site deploys automatically to GitHub Pages on every push to main via .github/workflows/deploy.yml, which builds the static export and publishes the out/ directory. Because it's served from a project subpath, next.config.ts sets basePath: "/portfolio" — keep that prefix in mind when referencing assets (e.g. the resume and project images).