Skip to content
Back to ProjectsFull-Stack

www.kbuendia.com

Production-grade developer portfolio with server-gated classified content, PayPal payments & 3D spy-themed UX

WEBDESIGNLIVEPRODUCTION
PRODUCTION GRADE
Active
Jul 2025 - Present

// VIDEO SHOWCASE

01/06Portfolio Walkthrough
COMING SOON
COMING SOON
COMING SOON
COMING SOON
COMING SOON
COMING SOON
MISSION STORY:

THE COMMAND CENTER

www.kbuendia.com is a production-grade, full-stack developer portfolio engineered to the same standards as the projects it showcases. What started as a simple Vite + JavaScript single-page app evolved through multiple iterations into a Next.js 16 App Router application with 14 routes, 3 server-side API endpoints, 94 components, and comprehensive security headers. The site features a spy/intelligence-themed design with a classified content system — production case study data is server-gated (never in static HTML), requiring access code validation via API before delivery. PayPal integration powers a real service checkout flow with server-side order creation/capture and rate limiting (20 req/min). Interactive elements include Three.js 3D spider easter eggs with React Three Fiber, Swiper carousels, Framer Motion animations, and a file-explorer skills viewer across 157 skills. Deployed on Vercel with CSP, HSTS, X-Frame-Options, and a sitemap covering all 15 project pages. This isn't a template — it's a full-stack application that happens to be a portfolio.

14Page Routes
3API Endpoints
33+Static Pages (SSG)
7Security Headers

Next.js 16 App Router with static site generation (SSG) for 33+ pages, 3 server-side API routes for payments and content delivery, and a component library of 94 modules. The build pipeline pre-renders all pages at build time while API routes handle runtime server-side operations. Security headers applied globally via Next.js config middleware.

Static Frontend

Next.js 16 SSG + React 19TAP TO FLIP

14 routes with 33+ statically generated pages including 15 dynamic project pages. 94 components organized by feature. Tailwind CSS 4 for utility styles, custom CSS for spy-themed design system. Client-side interactivity via Framer Motion, Swiper, and Three.js.

API Layer

Next.js API RoutesTAP TO FLIP

3 server-side endpoints: PayPal order creation, PayPal capture, and restricted content delivery. Rate-limited (20 req/min per IP), with server-side access code validation. Shared PayPal client (lib/paypal.ts) for DRY configuration.

Content & Data

TypeScript Data ModulesTAP TO FLIP

15 projects, 16 certifications, 157 skills, and service definitions stored as typed TypeScript modules. Production projects have restricted fields stripped at build time via getPublicProject() — classified data served only through authenticated API.

Deployment & Security

Vercel Edge NetworkTAP TO FLIP

Deployed on Vercel with custom domain (kbuendia.com). 7 security headers including CSP, HSTS (2-year max-age with preload), X-Frame-Options DENY, and Permissions-Policy. Robots.txt blocks /api/ and /services/checkout/. Dynamic sitemap covers all routes.

FRONTEND

Next.js 16React 19TypeScriptTailwind CSS 4SK-0057SK-0081SK-0081SK-0082SK-0086SK-0087

BACKEND

Next.js API RoutesSK-0062SK-0094Server-Side Access Validation

CLOUD & DEVOPS

SK-0046

TOOLS & TESTING

SK-0063SK-0062SK-0081SK-0085PostCSS
PhilippinesREMOTE GLOBALAerox