Tech stack: TypeScript, Python, Next.js, HTML, TailwindCSS, FastAPI, Vercel, AWS Lambda, MongoDB Atlas, D3.js, Jest, React Testing Library, Pytest, Strava's API
Project Links
Gallery
Description
This website has undergone extensive updates since I first deployed it 3 years ago. The first version was built with just React as a single page application and styled with pure CSS. As I wanted to record my running data I transitioned to a full stack application using Node.js and Express for the backend, and MongoDB for the database. I also switched to Next.js for the frontend, which allowed me to use server-side rendering and static site generation. This made the site much faster and more efficient, especially for the project pages which are now generated dynamically. A similar approach of dynamic data loading is used to create the project 'cards' displayed on the main projects page.
Another major change was the switch from CSS to TailwindCSS for styling. This allowed me to use utility classes to style the components, which made the code much cleaner and easier to maintain. I also completely rewrote the backend logic in Python using FastAPI, as I wanted to simplify the development process for adding new features in the future, as well as being able to use Python data science libraries to process my running data.
This website is an ongoing project, and I am continually adding new features and improving the design.
GitHub ReadMe
Portfolio Website
A full-stack web application showcasing my coding projects, 3D modelling work, and running statistics.
Overview
This website has evolved over several years to become a dynamic, full-stack platform for displaying my work and tracking running data. The first version was a simple React single-page application styled with CSS. Over time, the site has been rebuilt and extended with modern technologies to improve performance, maintainability, and interactivity.
Key improvements include:
- Migrating to Next.js for server-side rendering and static site generation
- Switching from CSS to TailwindCSS for clean, maintainable styling
- Rewriting backend logic in Python with FastAPI, enabling easy feature additions and data processing with Python libraries
- Consolidating the client and server into a single, unified repository
The site is continuously updated, with new features and design improvements added regularly.
Features
- Project Showcases: Dynamic project cards with descriptions, tech stack, screenshots, and live README rendering
- Running Data: Fetches activity data from Strava’s API, including automatic refresh handling
- 3D Models: Interactive Three.js models embedded in project pages
- Markdown Rendering: Displays README and project documentation with headings, lists, code blocks, and images
- Responsive Design: Fully responsive across devices with consistent typography and layout
Architecture
- Frontend: Next.js with TypeScript and TailwindCSS
- Backend: Python with FastAPI, serving dynamic project and activity data
- Database: MongoDB Atlas for storing project info and activity data
- Deployment: Hosted on Vercel with serverless functions and optional AWS Lambda integration
The backend handles API requests, data preprocessing, and refresh tokens for external services like Strava. Markdown and 3D content are dynamically loaded and rendered in the frontend, providing a seamless user experience.
Tech Stack
- TypeScript
- Python
- Next.js
- TailwindCSS
- FastAPI
- MongoDB Atlas
- Vercel / AWS Lambda
- Three.js / D3.js
- Jest, React Testing Library, Pytest
- Strava API integration
Outcome
This project demonstrates my ability to build and maintain a full-stack, interactive web application that integrates APIs, dynamic content, and data visualisation. It also highlights ongoing development and iteration as I expand features and improve the user experience.