Nolan Cacheux Portfolio

Production portfolio, case-study hub, bilingual blog, and exportable CV for Nolan Cacheux.

Live: nolancacheux.com

What this repo ships

• Premium personal site focused on AI, GenAI, RAG, MLOps, and production ML engineering
• Detailed project case studies with architecture, screenshots, and business outcomes
• English + French content support
• SEO stack with:
  • canonical URLs
  • hreflang alternates
  • sitemap + robots
  • Open Graph + Twitter cards
  • JSON-LD structured data
  • Playwright smoke tests for metadata and crawlability
• CV exports:
  • PDF via external render service
  • DOCX export
  • PPTX export
• Blog publishing workflow with RSS and daily/content scripts

Stack

• Framework: Next.js 16 + React 19 + TypeScript
• Content: MDX case studies and blog posts
• Styling: SCSS modules + internal UI adapter layer (src/ui/core.ts)
• Deployment: Vercel
• PDF rendering: external Puppeteer service
• Testing: Playwright smoke tests + repo validation scripts

Product positioning

This site is not just a résumé page. It is built to do three jobs well:

1. Convert visitors into inbound opportunities
2. Rank for relevant AI engineering topics and branded queries
3. Document real work with enough depth to be credible

Main sections

• / — positioning, trust signals, flagship work, latest content
• /about — detailed profile, experience, education, technical depth
• /work — case studies
• /en/blog and /fr/blog — localized technical writing
• /cv — exportable résumé
• /sports — freestyle football track record and media/brand proof

Repository layout

src/
  app/                  Next.js app router pages and API routes
  components/           shared UI + page building blocks
  i18n/                 translation dictionaries and locale handling
  resources/            site content, metadata, route config, style config
  ui/                   internal UI adapter layer
  utils/                SEO helpers, content loaders, analytics, blog helpers
public/
  images/               static media and project assets
scripts/
  blog/                 blog scaffolding, queueing, quality gate helpers
tests/playwright/       SEO and route smoke tests

Local development

npm install
npm run dev

Default dev server: http://localhost:3000

Quality checks

npm run lint
npm run build
npm run test:smoke:seo

Useful variants:

npm run test:smoke:seo:headed
npm run test:smoke:seo:prod
npm run test:smoke:seo:report

Environment variables

Optional but useful

• NEXT_PUBLIC_GA_MEASUREMENT_ID
  • enables Google Analytics events

Required for PDF export / cache invalidation flows

• PDF_SERVICE_URL
  • external PDF rendering endpoint
• PDF_SECRET
  • shared secret for PDF-related API calls and deploy hook

Required only for protected pages

• PAGE_ACCESS_PASSWORD
  • password checked by auth route for protected pages
• AUTH_SECRET
  • optional auth secret fallback used in auth route logic

Test helpers

• PLAYWRIGHT_BASE_URL
• PLAYWRIGHT_PORT
• PLAYWRIGHT_USE_PROD
• EXPECTED_SITE_ORIGIN

Deployment

• GitHub is the source of truth
• Vercel deploys from the repository
• Production URL: https://nolancacheux.com

SEO implementation notes

Technical SEO is handled in-repo through:

• src/utils/seo.ts
• src/app/robots.ts
• src/app/sitemap.ts
• src/app/manifest.ts
• tests/playwright/seo-metadata.spec.ts
• tests/playwright/sitemap-rss.spec.ts
• tests/playwright/structured-data.spec.ts

Content workflow

Add a blog post

• create an MDX file in src/app/blog/posts/
• add frontmatter
• run the smoke tests before shipping

Add a project case study

• create an MDX file in src/app/work/projects/
• add metadata, media, and summary
• verify the detail page and work index rendering

Notes on the UI layer

The app uses an internal adapter at src/ui/core.ts so the rest of the codebase is not hard-coupled to a vendor import path. That makes future UI refactors far less painful.

Author

Nolan Cacheux

• Site: nolancacheux.com
• GitHub: @nolancacheux
• LinkedIn: nolancacheux