A changelog of website updates and explanations of design decisions.
Private Markets API
Added a backend API project for managing private market funds, investors, and investments. Built with Express 5, TypeScript (ESM), and PostgreSQL 16, fully containerised with Docker Compose. Key design decisions include dual-layer validation (application + database constraints), PostgreSQL domains for enumerated types, centralised error handling with PostgreSQL error code mapping, and integration tests running against a real database via Supertest and Vitest.
Express 5TypeScriptPostgreSQLDockerREST API
Carbon Portfolio Summary
Added a fullstack Carbon Portfolio Summary project. The application tracks carbon credit positions and computes portfolio-level summaries including total tonnes, total value, and weighted average price per tonne. The React + Vite frontend communicates with an Express backend, with features for filtering by position status and vintage year. Handling the intentionally slow API response gracefully was a key design challenge, solved with loading states and non-blocking data fetching.
ReactViteExpressTypeScriptTailwind CSS
A/B Testing with Firebase
Built an interactive A/B testing experiment (Cats vs Dogs) to explore how A/B tests can measure user engagement. Visitors are randomly assigned to one group and their session data—pictures viewed before ending—is tracked in Firebase Firestore. The aggregated results reveal which content type drives higher engagement, demonstrating A/B testing as a practical analytical tool for data-driven decision making. Chose Firebase for its ease of use, generous free tier, and built-in security via App Check which Google manages.
FirebaseFirestoreA/B TestingAnalyticsTypeScript
NBA Team Stats Dashboard
Built an interactive NBA stats dashboard to visualize team performance throughout a season. Leveraged React Query's useQuery hook to maximize caching and minimize API calls, which was essential given the balldontlie.io API's 5 req/min limit on the free tier. Chose Chart.js for the data visualization due to its ease of integration, built-in responsiveness, and visually appealing styling.
Implemented an interactive particle field behind the hero section using Three.js and @react-three/fiber. The animation includes 5,000 particles with mouse-tracking interactivity. Chose Three.js for its ease of integration with React via react-three/fiber, the control it offers over rendering and scene composition, and its relatively lightweight footprint compared to full 3D engines.
Three.jsAnimationReact Three Fiber
Dark/Light Theme Toggle
Implemented theme switching using next-themes. It eliminates the common 'flash of wrong theme' on page load by properly syncing server-rendered HTML with client preferences. The library handles system preference detection, persists selections in localStorage, and provides a simple useTheme hook. It also prevents React hydration mismatches by managing theme state after mounting. Minimal setup with great Tailwind CSS integration.
Themingnext-themesUX
Initial Website Launch
Launched the portfolio website built with Next, React, and Tailwind CSS. Using Redux Toolkit for state management. This is a modern tech stack that ensures high performance, scalability, and a great developer experience.