Portfolio v2
My personal portfolio is built as a real full-stack application rather than a static collection of pages. It combines a MongoDB-backed content system, admin authentication, project case studies, Vercel Blob media, and an AI-assisted administrative workflow.
Overview
Purpose: Use my own portfolio as a practical demonstration of architecture, backend development, data modeling, authentication, cloud infrastructure, and AI-assisted administration.
Target users: Recruiters; engineering managers; developers reviewing my work; myself as the content administrator.
- Database-backed homepage
- Database-backed project detail pages
- Blog CMS
- Admin authentication
- Vercel Blob screenshot management
- AI-assisted content administration
- MongoDB-based content source of truth
Tech Stack
Frontend
- Next.js 16
- React 19
- Tailwind CSS
- Radix UI
- Framer Motion
- Three.js / React Three Fiber
Backend
- Next.js Server Components
- API Route Handlers
- Server-side auth utilities
Database
- MongoDB Atlas
- Mongoose
Auth
- JWT
- bcryptjs
- httpOnly cookies
AI
- MCP server
- MongoDB MCP integration
- AI-assisted admin tooling
Deployment
- Vercel
- Vercel Blob
- MongoDB Atlas
- Resend
Features
Database-Backed Homepage
Homepage sections render from a single MongoDB Content document: Navbar, Hero, About, Experience, Resume, Work, Contact, Footer.
Benefit: This keeps display components focused on rendering while the database owns editable content.
Blog CMS
The blog supports public reads, authenticated admin creation, editing, and deletion.
How: Blog content is persisted through Mongoose rather than hardcoded in components.
Database-Backed Project Case Studies
Each project detail page is stored as a Project document, with structured sections: overview, tech stack, features, architecture, database design, API documentation, authentication, challenges, performance, security, deployment, improvements, lessons, metrics, timeline, recruiter summary, screenshots.
How: Vercel Blob stores project media rather than coupling screenshots to local source paths.
AI-Assisted Administration
The portfolio includes an MCP-backed administration layer designed to let me manage content conversationally.
Benefit: The security boundary remains server-authoritative: AI output can request an action, but authorization is determined independently by the application.
Cloud Infrastructure Automation
I configured MongoDB Atlas, Vercel environment variables, Blob storage, and MCP tooling through CLI-based workflows where possible.
Architecture
App flow: Administrative requests pass through authenticated server-side boundaries before content mutations are allowed.
Database Design
- Content — Single document for site-wide homepage content
- Project — One document per project slug, allowing each case study to evolve independently
- Blog — One document per post with title, description, image, body, and timestamps
This model keeps the content architecture simple while avoiding duplicated hardcoded data across components.
API Documentation
| Method | URL | Purpose | Auth |
|---|---|---|---|
| POST | /api/contact | Send contact email | |
| POST | /api/admin-login | Authenticate administrator | |
| GET/POST/PATCH/DELETE | /api/blog | Blog content operations | |
| POST | /api/chat | AI/MCP orchestration | |
| GET/PATCH | Project/content APIs | CMS-backed portfolio content operations |
Authentication Flow
login: Admin credentials → bcrypt verification → JWT issuance → httpOnly cookie → server validation → authorized mutation.
notes: AI-admin capabilities use the same server authorization boundary and do not trust model output as proof of identity.
Screenshots
Challenges
Problem: Removing Multiple Sources of Truth — content had accumulated across legacy and component-level structures during framework evolution.
Solution: I consolidated homepage content into one MongoDB-backed source and made rendering components receive data rather than own duplicated content.
Problem: Vite-to-Next.js Migration — the original application architecture used Vite-specific patterns.
Solution: I migrated the application to Next.js App Router and progressively moved data loading to Server Components.
Problem: Building Safe AI Administration — an AI agent with write capability needs stronger security boundaries than a normal chatbot.
Solution: I separated model intent from application authorization. The server decides which tools/actions are available based on the authenticated session.
Problem: Structured PDP Content — large project case studies become difficult to maintain when stored as massive inline objects.
Solution: I moved project content into MongoDB Project documents and media into Vercel Blob.
Performance
- Server Components for data-driven pages
- Reduced duplicated client-side data
- Structured DB reads
- Blob-backed media
- Next.js rendering and caching capabilities
- Interactive client components isolated from server-rendered content
Security
- bcrypt-hashed admin password
- JWT auth
- httpOnly cookies
- Gitignored environment secrets
- MongoDB/Vercel credentials stored outside source
- Server-side authorization for AI administrative actions
- Clear separation between public read capabilities and privileged mutations
Deployment
hosting: Vercel
prodSetup: Database: MongoDB Atlas · Media: Vercel Blob · Email: Resend. The deployment architecture is environment-driven and designed around the same production services used by the application locally and in hosted environments.
Future Improvements
- More AI-assisted content workflows
- Richer case-study media
- Better project search and discovery
- Additional admin automation
- Expanded analytics and recruiter-focused presentation
Lessons Learned
- A portfolio is more persuasive when the architecture itself demonstrates engineering capability.
- Content should have one clear source of truth.
- AI administration requires explicit tool permissions and server-side authorization.
- Data migrations are easier when display components do not own business content.
- Cloud tooling and content infrastructure are useful portfolio evidence when they solve real maintenance problems.
Project Metrics
Timeline
- March 2025 — Initial portfolio
- July 2026 — Migration from Vite to Next.js
- August 2026 — Admin auth, MongoDB content architecture, project PDP system, Blob media, and MCP-assisted administration
- Ongoing — Content refinement, infrastructure hardening, and recruiter-facing improvements
Ask about this project
Depends on the /api/chat orchestrator and MCP tool server — not built yet (see plan.md).
Recruiter Summary
Role: Solo Full-Stack Developer
- Migrated a real application from Vite to Next.js
- Built JWT-based admin authentication
- Built MongoDB-backed homepage, blog, and project-content systems
- Designed Vercel Blob media storage
- Created MCP/AI-assisted admin workflows
- Consolidated duplicated content into a database source of truth
- Structured project case studies as editable data rather than hardcoded JSX
- Turned a static portfolio into a maintainable full-stack product
- Reduced content duplication
- Demonstrated backend, database, auth, cloud, and AI-integration capability through the portfolio itself