Portfolio Website

Problem Statement

A portfolio site needs to do two conflicting things well: load fast for visitors who are assessing technical credibility, and be maintainable enough to update without friction. Off-the-shelf builders trade control for convenience; hand-rolling everything from scratch is slow.

Objective: Build a production-grade web application using the same engineering standards applied to back-end systems — type safety, component architecture, CI-ready deployment — while keeping the output fast and accessible across all screen sizes.

Solution Design

The architecture is organized around three principles: separation of concerns,progressive enhancement, and cross-platform readiness.

Routing Layer

Next.js 16's App Router structures the site as a filesystem hierarchy. Each route is a thin server component responsible only for metadata and delegating rendering to a paired screen component. This keeps the route layer stable while allowing screen components to evolve independently.

Screen Pattern

Every page follows a three-layer pattern:

• src/app/<route>/page.tsx — server component, sets Metadata, renders the screen.
• src/screens/<route>/<Name>Screen.tsx — page content with paired .css.
• <Name>ClientWrapper.tsx — opt-in client boundary when interactivity is needed.

React Native Web Hybrid

UI primitives (View, Text, Pressable, StyleSheet) are sourced from react-native and transpiled to DOM elements via react-native-web. This keeps the component model compatible with future Capacitor builds targeting Android and iOS, without any runtime cost on the web path.

Technology Choices

Solution Implementation

Scroll-Spy Navigation

Service pages feature a sticky left sidebar that highlights the active section as the user scrolls. This is implemented via SpyNavigation.tsx, which registers an IntersectionObserver against each section's id. The observer fires a state update on the closest intersecting element, and the sidebar re-renders with the new active item — no scroll event listeners, no RAF loops.

Analytics & Cookie Consent

Google Analytics is gated behind a cookie consent banner. AnalyticsUtils.ts reads a consent flag from localStorage before initializing react-ga4. The AnalyticsTracker component then attaches Web Vitals reporting (via theweb-vitals library) and sends LCP, INP, and CLS to GA4 as custom events. No analytics data is collected without explicit user approval.

Mobile Readiness via Capacitor

capacitor.config.ts is present and configured. The React Native Web primitive layer means that the same component tree that renders to <div> on web will render to native View / Text elements when Capacitor wraps the build for Android or iOS — no conditional rendering or platform branches required.

Build Pipeline

• Dev: next dev with Turbopack for sub-second HMR.
• Production: next build → static export → firebase deploy.
• Linting: ESLint flat config with TypeScript and React Hooks rules.

Solution Analysis

Conclusion

This project applies the same engineering discipline used in distributed back-end systems to the front-end: deliberate architecture, explicit types, and a clear separation between routing, layout, and content. The result is a site that is fast to load, easy to extend, and already wired for native mobile deployment without a rewrite.

The React Native Web hybrid layer in particular is an uncommonly pragmatic choice — it adds no overhead to the web bundle while keeping the door open to Android and iOS builds from the same source tree, mirroring the cross-platform efficiency achieved on the back-end with containerized Java services.