This Portfolio
Built to be proof of work, not just a showcase of it.
Overview
Built with Next.js 16, TypeScript, Tailwind CSS, and Framer Motion. Interactive terminal contact form, dark/light mode, React Three Fiber, and real API submission.
Role
Side Project
Period
2024 – Present
Category
Portfolio
Status
Live
The Problem
Most developer portfolios look generated — the same hero, the same cards, the same copy. I wanted one that felt like it was actually built by an engineer who cares about craft: something that demonstrates production-level thinking in the implementation, not just lists it.
Approach
Started from the tech I actually use daily. No UI kit, no template. Every component is purpose-built. The terminal contact form is the most engineered part — a real CLI with command routing, validation, and nodemailer API integration, not a styled form.
Architecture
Next.js 16 App Router
Full App Router setup with Server Components for static content, Client Components for interactive elements. Deployed on Vercel with SSR/SSG per page.
Framer Motion
Purposeful animation layer — orbital icon system, hero entrance, section reveals, and micro-interactions. Respects prefers-reduced-motion throughout.
React Three Fiber
3D scene (scene.gltf) rendered via R3F in the Explore section. GPU-accelerated with proper disposal to prevent memory leaks.
Terminal Contact System
Custom terminal emulator with command router, multi-step contact flow, input validation, and a nodemailer SMTP API endpoint.
Key Features
Terminal Contact Form
A fully functional CLI experience — type `contact`, answer prompts, confirm and send. Backed by a real nodemailer API route with validation and error handling.
Orbital Hero
Custom OrbitalSystem with two rings of technology icons rotating at different speeds and directions. Mouse position drives 3D perspective tilt via Framer Motion springs.
Dark / Light Mode
System preference detection via next-themes with persistent manual override. Theme transitions are instant with no FOUC.
Custom Cursor
Canvas-based particle system that emits cyan particles on mouse movement. Degrades gracefully on touch devices.
Technology Stack
Engineering Challenges
Terminal State Machine
The multi-step contact flow requires careful state management — current step, collected data, and async API calls all need to compose without race conditions. useRef/useCallback pattern prevents stale closures across steps.
Orbital Animation Performance
Six icons spinning at different speeds using requestAnimationFrame rather than CSS transitions gives precise control and stays off the main thread via Framer Motion spring values.
Outcome
Live at klausdev.com. The portfolio is the proof — if the site itself is built well, the claim "I build production-grade systems" has evidence.