Portfolio Engine
A portfolio engineered like a product.
This portfolio is not a template — it is a production-grade full-stack system built to the same engineering standards I apply to every project I ship. It's the most honest signal of how I work: every architectural decision, every performance trade-off, every design choice is mine.
The Story
Why this exists.
The Problem
Most developer portfolios are either a Figma template cloned from a YouTube tutorial or a list of GitHub repos. Neither communicates what actually matters to a hiring engineer: how you think, how you architect, what you build when there are no constraints, and whether you can ship something that feels like a real product.
Why It Matters
A portfolio is the only piece of software a developer ships entirely for themselves — no client requirements, no team constraints, no technical debt inherited from others. What you choose to build and how you choose to build it is the purest signal of your engineering taste. This portfolio is that signal.
The Solution
A Next.js 14 App Router portfolio with a custom component library, Apple-inspired design system, GSAP animations, Lenis smooth scroll, a voice AI agent, a C++ Drogon backend API, 3-tier project detail pages, a contact system via Brevo, and a GitHub activity feed — all deployed on Vercel Edge.
Product Features
What it does.
Apple-Inspired Design System
A complete design token system built in CSS custom properties — fluid typography scale, spacing system, card surfaces, and colour palette inspired by Apple's product pages. Every visual decision is intentional and documented.
Voice AI Agent
An embedded voice assistant powered by Vapi that lets visitors ask questions about my work, experience, and projects — answered in real-time with a conversational AI model trained on portfolio context.
3-Tier Project Detail System
Projects are classified into 3 levels of detail — minimal premium pages for small projects, full case studies for intermediate work, and complete product launch experiences for flagship systems.
GSAP + Lenis Animations
Scroll-driven animations, fade-up reveals, and sticky scroll storytelling powered by GSAP. Lenis provides hardware-accelerated smooth scrolling with configurable easing.
C++ Drogon Backend
A high-performance C++ backend built with the Drogon framework serves dynamic data — GitHub activity, visitor analytics, and real-time stats — with sub-millisecond response times.
System Architecture
How every layer connects.
Next.js SSR/SSG on Vercel Edge → C++ Drogon for dynamic API → Brevo for email → Vapi for voice
Technical Deep Dive
Under the hood.
Why C++ Drogon for the Backend API
Most portfolio backends are Express or FastAPI. I chose Drogon — a C++ async HTTP framework — for three reasons: (1) it demonstrates systems programming ability, (2) it is measurably faster than any interpreted runtime for simple API endpoints, (3) it is architecturally interesting. The Drogon server handles GitHub activity aggregation, visitor stats, and health endpoints with sub-millisecond response times and zero runtime overhead.
// Drogon controller for GitHub activity endpoint
void GithubController::getActivity(
const HttpRequestPtr& req,
std::function<void(const HttpResponsePtr&)>&& callback
) {
auto client = HttpClient::newHttpClient("https://api.github.com");
auto r = HttpRequest::newHttpRequest();
r->setPath("/users/Naren1520/events");
r->addHeader("Authorization", "Bearer " + apiKey_);
client->sendRequest(r, [callback](ReqResult res, const HttpResponsePtr& resp) {
callback(HttpResponse::newHttpJsonResponse(parseActivity(resp->body())));
});
}3-Tier Project Architecture
Projects are typed with a `difficulty` field that maps to one of three detail levels. The dynamic route `app/projects/[id]/page.tsx` reads the project's detail data and renders the appropriate Level1Page, Level2Page, or Level3Page component. Each level is a distinct React component with a purpose-built layout — minimal for Level 1, case study for Level 2, full product launch for Level 3. Projects without detail data fall back to a Level 1 page using their base `projects.ts` fields automatically.
Performance Architecture
Every page is either statically generated or incrementally regenerated. Server Components handle all data fetching — no client-side waterfalls. Images use Next.js Image Optimisation for automatic WebP and AVIF conversion. GSAP animations are client-only and don't block the critical rendering path. The result: Lighthouse Performance 97+, LCP under 1.5s, CLS 0.
Engineering Decisions
Challenge → Decision → Result.
Performance & Scale
By the numbers.
Deployment & Infrastructure
Production setup.
Deployment
Next.js on Vercel Edge CDN with ISR. C++ Drogon backend containerised on Render. Brevo for transactional email. Vapi for voice AI.
CI/CD
GitHub Actions — TypeScript + ESLint + Lighthouse CI on PR. Auto-deploy to Vercel on merge to main.
Monitoring
Vercel Analytics for Core Web Vitals. Render metrics for Drogon CPU/memory. Brevo dashboard for email delivery.
Challenges & Failures
What broke — and how I fixed it.
What I Learned
Key takeaways.
- 01
Building your own design system is the fastest way to learn what makes Apple's UI feel like Apple's UI — intentional spacing, consistent type scale, and disciplined restraint.
- 02
C++ in a web stack is viable and practical when you scope it correctly — a narrow, well-defined API server is a great fit.
- 03
Lighthouse scores are a proxy metric. What matters is actual user experience — LCP, FID, CLS. Optimise for those, scores follow.
- 04
A portfolio built like a product communicates more in 10 seconds than any resume bullet point.
Future Roadmap
Where this is going.
v2.0
- —WebGL hero section with custom shader for the flagship project scenes
- —Reading time and difficulty indicators on all project pages
- —Dark mode with smooth transition — system preference detection + manual toggle
Screenshots
The product.
Hero section — GSAP animations, Apple-inspired typography
Level 3 project detail — full product launch layout
Technology Stack
Built with.
Frontend
Animation
Scroll
Backend
Voice AI
Deployment
Ready to dive in?