Timothy Leong

Overview

Project Diary is my personal portfolio website for documenting and showcasing projects I have worked on. I wanted the site to feel more like a project log rather than just a static resume page, so each project has its own writeup with details about the idea, implementation, and technologies used.

The site is built with Next.js and uses MDX for the project pages, which makes it easy to add new projects by creating new content files.

Motivation

I wanted a place where I could properly organise my projects and explain the thinking behind them. A lot of my work involves a mix of web development, IoT, dashboards, and hardware-related systems, so a normal portfolio layout felt a bit too limited.

This project also gave me a chance to explore Next.js more seriously. I had seen it during my internship but did not get much time to experiment with it, so I used this website as a way to build something practical while improving the overall design and structure of my portfolio.

Implementation

The website uses a file-based project system. Each project is written as an MDX file with front matter for details like the title, description, date, tags, and whether it should be featured on the homepage.

The project listing page reads these MDX files and automatically generates the project cards. Individual project pages are also generated from the same files, so the content stays consistent across the site.

I also added a 3D element using Three.js and React Three Fiber. The bongo cat model was created in Blender and rendered inside the site to give the portfolio a more personal and unique feel.

Key Features

MDX-based project writeups
Automatically generated project pages
Featured projects section on the homepage
Light and dark mode support
Reusable layout, button, card, and badge components
3D model rendered with React Three Fiber
Responsive design using Tailwind CSS
Deployed on Vercel

Tech Stack

Next.js for the framework and routing
React for reusable UI components
Tailwind CSS for styling and responsive design
MDX for project content
Three.js for 3D rendering
React Three Fiber and Drei for using Three.js with React
Blender for creating the 3D model
Vercel for deployment

Outcome

Project Diary became the main place where I showcase my technical projects. It is now easier for me to add new work, keep my portfolio updated, and present each project with more context than a simple project card.

The site also helped me build a stronger foundation in Next.js, Tailwind CSS, MDX content workflows, and 3D elements on the web.

View GitHub Repository