Portfolio v3: Next.js, Payload CMS & AI-Powered Site

Overview

This is the third iteration of my personal site — raneljohntormis.dev — designed as both a public portfolio and a real product: content-managed, SEO-ready, and extensible without redeploying for every copy change.

The goal was simple: present work and writing professionally, own the full stack end-to-end, and add capabilities you do not get from a static site generator alone — drafts, live preview, structured case studies, lead capture, and an on-site AI guide that answers questions about my background and projects.

What I built

Marketing site & UX

• Home hero with animated typography, profile-driven content, and a hero-embedded chat entry point
• Work section for project/case-study pages with cover media, stack tags, read time, views/likes, and share tracking
• Blog with categories, rich Lexical content, and engagement metrics
• Composable layout blocks (featured work, stack, FAQ, CTAs, integrations, about/contact layouts, and more) managed in the CMS
• Responsive UI with shadcn/ui, motion, and mobile-first layout fixes

Headless CMS (Payload 3)

• Collections for Pages, Blog, Projects, Media, Technology, Leads, Subscribers, and Analytics (Soon ✨)
• Draft/publish workflow, live preview, and on-demand revalidation when content changes
• SEO plugin per document (title, description, meta image) plus unified Open Graph/Twitter metadata
• Media pipeline with image sizes (including 1200×630 OG variants), S3 storage, and admin-managed globals (header, footer, site banner)

AI assistant

• Site chatbot powered by LangChain & Cohere for embedding with tools for profile info, projects, blog posts, and RAG over ingested PDFs (e.g. CV) via pgvector on PostgreSQL
• Previewed blogs / case studies (if there are new)
• Rate limiting and public-safe responses scoped to portfolio content.

Growth & operations

• Newsletter subscribe flow with Resend transactional email
• CloudFlare for domain security (e.g blocking ai crawlers, ofc we don't want to use our website as training data right?)
• Contact/lead forms, traffic/visitor tracking, cookie consent
• GitHub Actions CI/CD: changelog (versioning) → build → production
• Dynamic sitemap and robots.txt covering pages, blog, work, and postsechnical highlights

Challenges & decisions

• SEO & social previews: Unified OG metadata across pages, blog, and work; fixed URL resolution for media paths and Cloudflare crawler rules so Facebook/WhatsApp receive valid og:image URLs.
• Performance: Server components where possible, image optimization for local Payload media paths, and careful cache/revalidation so CMS updates propagate without full rebuilds for every page.
• Content model: Separated marketing Pages from Projects (work) and Blog so editors such as me can publish case studies and articles without touching code.

Outcome

A single codebase that serves as my live portfolio, blog, and admin-backed marketing site — fast for visitors, manageable for me, and demonstrative of full-stack delivery: CMS design, frontend polish, AI integration, and production deployment.

Live: https://raneljohntormis.dev