Project Diary

A website where I log interesting projects that I have done for future reference as well as to showcase them

JavascriptNextJSThreeJSReactJSTailwindBlender
Overview

This is a personal portfolio website where I document and showcase notable projects for future reference and professional presentation. It features MDX-based writeups for each project.

Why I Built It

Drawing from my internship experience at Singapore Polytechnic, where I gained skills in ReactJS and ExpressJS for IoT dashboards, I aimed to create a deployable and performant site. I chose NextJS for its versatility and refinement, having encountered it during my internship but lacked time to explore it then.

What I Learned
  • Implementing NextJS for server-side rendering and static site generation.
  • Integrating ThreeJS, React Three Fiber, and React Three Drei for 3D elements and animations.
  • Using Blender to create custom 3D models, such as a bongo cat character.
  • Applying Tailwind CSS for styling and responsive design.
Tech Stack
  • NextJS for the framework
  • ReactJS for components
  • ThreeJS for 3D graphics
  • Tailwind for styling
  • Blender for 3D modeling
  • MDX for content
Challenges
  • Learning NextJS from scratch using tutorials.
  • Integrating 3D models and animations into the website.
  • Creating a custom Blender model due to dissatisfaction with available free options, despite the steep learning curve.
  • Managing time constraints, which limited adding animations to the 3D character.
Outcome

The website was successfully built and deployed on Vercel, serving as a platform to showcase projects with a themed design inspired by external sources. It demonstrates my ability to learn and apply new technologies in web development.

GitHub repository