Under the hood
Explore the engineering behind this portfolio — its architecture, design system, performance metrics, and the roadmap for what’s coming next.
Architecture
This portfolio is built with a modern React architecture using Next.js, TypeScript, and Turborepo. The project structure emphasizes separation of concerns, reusable component patterns, and maintainable project organization, reflecting how I typically structure React applications.
Tech Stack
- Next.js
- React
- Styled Components
- TanStack Query (React Query)
- Contentful CMS
- REST
- GraphQL
- Turborepo
- Vite
- Storybook
- React Testing Library
UI Layer
Content Layer
Integration & APIs
Developer Tooling
Testing
Next.js + React + TypeScript
Storybook + Vite + Styled Components
Contentful
Secure By Design
Upstream Github and Lighthouse APIs are proxied through a Next.js BFF (Backend-for-Frontend) architecture. This server-side bridge keeps sensitive API tokens strictly in the environment—delivering clean, pre-processed data to the UI without exposing credentials to the browser’s Network tab.
Client
Client triggers a GET request to server /api/<route>
API routes
Route handler receives call on the secure server
Environment
Private keys are injected via process.env into the server environment
Upstream
Secure HTTPS outbound request to upstream Github and Lighthouse APIs
Design System
To ensure visual consistency and streamline the development workflow, I am currently architecting a centralized design system hosted as a shared package. Each component will be fully documented within an isolated Storybook environment, with a live link provided here as soon as the first iteration is live.
Stay Tuned
We're currently fine-tuning the frequencies. This section is under development and will be broadcasting soon.
Performance Lab
Automated performance profiling and accessibility auditing. This interface leverages the Lighthouse engine to generate deep-dive insights into the application's speed, crawlability, and inclusive design patterns.
[OK] Tree-shaking active
[OK] Gzip compression
[!] Lighthouse: —/100
Engineering roadmap
A real-time synchronization of active development across the application layer, design system, and CMS integration. This board pulls directly from GitHub Issues serving as a functional 'command center' for the continuous integration and deployment of new features.