Portfolio Site

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.

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.

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

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.

• 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

• 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

• 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”

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

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.