nextjsmdxtypescriptdocker

Portfolio Site

Personal brand site built with Next.js and MDX; editorial dark UI, content-driven pages, Docker deploy, and an Ask Taylor chat widget grounded in résumé and project context.

Portfolio home hero with split-flap name and Ask Taylor widget
{ key: 'duration' }
Ongoing
{ key: 'role' }
Creator & maintainer
{ key: 'atmosphere' }
Editorial and iterative
{ key: 'technology' }
Next.js, MDX, Tailwind, Docker, VPS

Portfolio Site: a content-driven personal brand surface

This site is my public shopfront for data and AI work: portfolio case studies, long-form posts, services narrative, and a contact path that actually emails me. It is a full Next.js app, but the day-to-day authoring lives in Markdown under content/. Push copy, ship pages. No CMS dashboard to babysit.

Source lives on GitHub: github.com/taylorsegell/portfolio-tjs. Live at taylorsegell.com.

Portfolio home hero

Challenge

A personal site has to do more than look sharp on day one. It needs to:

  1. Stay easy to update when a project ships or a post is ready
  2. Read as a credible professional surface without turning into a beige template
  3. Carry blog, projects, about, and contact without four separate stacks
  4. Deploy predictably to a VPS I control (not only a platform black box)
  5. Answer visitor questions without forcing them to hunt through every section

Static brochure sites go stale. Overbuilt CMSes slow you down. The brief was a maintainable hybrid: editorial UI, MDX content, and enough product surface (chat, forms, newsletter) to feel alive.

Solution

The architecture is intentionally boring in the best way:

  • Content as the source of truth: YAML front matter plus MDX bodies under content/; meta.layout picks the React layout
  • One catch-all route: pages/[[...slug]].tsx resolves slug to file, parses sections, runs computed fields (collections, images, GitHub repos, tags)
  • Editorial UI: dark canvas, orange accent, display type for section titles, grid atmosphere, split-flap name treatment on home
  • Ship path: Docker image, GitHub Actions deploy to a Hostinger VPS, nginx in front of 127.0.0.1:3000
  • Ask Taylor: floating RAG-style chat grounded in résumé and project corpus (Anthropic), so visitors can ask instead of scroll forever

Implementation

How the pieces fit together:

  1. MDX pipeline: front matter and ---section blocks parse into layout props; computed fields hydrate collections and GitHub repository cards on the projects index.
  2. Layouts and components: Home, About, Projects, Post, Blog, Contact, and friends compose domain UI from components/ with shared Reveal motion and editorial prose styles.
  3. Design tokens: Tailwind v4 CSS-first theme (globals.css) with oklch tokens, Bebas display, IBM Plex sans/mono.
  4. Integrations: SendGrid for contact, ConvertKit for newsletter, Anthropic for Ask Taylor, GitHub API for open-source cards when GITHUB_TOKEN is set.
  5. Ops: multi-stage Dockerfile (output: 'standalone'), compose on the VPS, Actions SSH deploy on main.

Key features

Split-flap home and navigation

  • Intro sequence, then a compact split-flap TAYLOR / SEGELL hero with resume and contact CTAs
  • Numbered top nav across Home, About, Specialties, Articles, Projects, Contact
  • Ask Taylor parked bottom-right sitewide
Projects index

Projects and writing

  • Case studies from content/projects/ with tags, attributes, and image galleries
  • Open-source cards pulled from GitHub when the token is healthy
  • Blog index with topic filters, featured covers, and newsletter signup
Articles index

About and ops

  • Skills grid, bio, and CTA on About
  • Contact form and ConvertKit path for people who prefer human inbox over chat
  • Docker + Actions so deploys are repeatable instead of “SSH and hope”
About page

Results

What shipped is a site I can actually keep current:

  • Content edits without a rebuild ritual in my head: add an MDX file, wire assets under public/, done
  • One visual language across marketing pages, posts, and project write-ups
  • A living assistant (Ask Taylor) for FAQ-style questions that used to bury people in scroll
  • Ownership of hosting: VPS, Docker, nginx; secrets in env, not tribal knowledge

Try it

Live: taylorsegell.com

Repository: clone portfolio-tjs on GitHub, copy .env.example to .env, run pnpm install and pnpm dev (Node 20+).

Worth poking once it is up:

  • Home split-flap intro, then the Ask Taylor chip
  • /projects for case studies and open-source cards
  • /blog topic filters and a post layout
  • Drop a new file under content/projects/ and watch the collection pick it up

This repo stays maintainer-owned: my brand surface, my content folder, my deploy path. Fork it if you want the same MDX-plus-layouts pattern without reinventing the router.

Questions about this work — or a similar problem?

Hit me up