Personal Portfolio — Website & Admin Panel

A portfolio site that's also a complete full-stack application, with its own CMS, authentication, and bilingual support.

What it is

This is the site you're looking at right now: a Next.js application built from scratch to showcase projects, articles, a resume, and contact options — with one key difference: all content is managed through a custom admin panel, with no external CMS involved. Projects, text, images, technologies, and incoming messages are all edited straight from the browser, without touching code or triggering a new deploy.

How it works

The app uses Next.js App Router with two main areas: the public-facing site and an authentication-protected /admin section where content is created and edited. Data lives in Supabase (Postgres), with a schema versioned through incremental SQL migrations. A custom middleware handles two things at once: guarding the admin routes and automatically detecting the visitor's language (Portuguese or English) via browser header and cookie, serving already-translated content. Site images are hosted on Google Drive and served through dedicated endpoints, keeping the API key off the client entirely.

Tech stack

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS 4 + shadcn/ui + Framer Motion
• Supabase (Postgres + Auth)
• Google Drive API as an image gallery
• react-markdown for blog articles

Technical highlights

• A custom CMS built into the admin panel, covering projects, articles, resume, contact messages, and the site's visual customization
• Purpose-built bilingual support: automatic language detection plus mirrored content fields (e.g. hero_title / hero_title_en)
• SEO handled from day one: structured JSON-LD, sitemap, robots.txt, and dynamic Open Graph images
• Unit tests covering the most sensitive parts of the system: authentication, locale detection, and markdown processing
• Hybrid search (full-text + local AI) and an MCP server for AI-driven content edits, with granular permissions

Hybrid search and MCP connections

Beyond the CMS, the site has two features that go past a typical portfolio:

• Hybrid search (/busca, ⌘K shortcut): combines Postgres' native full-text search with semantic search through an embedding model running locally on the server (@huggingface/transformers, no external API cost), merging both rankings with Reciprocal Rank Fusion.
• MCP server (/api/mcp): exposes the site's content as Model Context Protocol tools, with per-resource, per-connection read/write permissions created and managed from the admin panel. This lets an AI (like Claude) read and edit projects, articles, SEO copy and other site content directly, under the owner's granular control — this very paragraph was added through that connection.