[Web Dev] Portfolio Site Project

I have several iterations of my portfolio site, from learning React with it to the latest NextJS framework. Here are some iterations of its design.

Iteration #3 : 3D Blog concept

In iteration #3, I built a dynamic and visually engaging portfolio site using GSAP (GreenSock Animation Platform) and Three.js. This was my first experience with both libraries, and I learned a great deal in the process.

Project Site URL ( here )

Key Learnings:

  • GSAP: Leveraged GSAP to create smooth and complex animations, enhancing the site's interactivity and user experience.
  • Three.js: Utilized Three.js to incorporate 3D graphics, adding depth and a modern aesthetic to the website.
  • Prismic CMS: Made use of Prismic CMS and its slice machine to manage content efficiently. This experience allowed me to dive deep into understanding the role of CMS in web development and its importance in creating modular, maintainable web applications.

Iteration #4 - Current: Minimalist blog concept

In my current iteration, I focused on a minimalist blog concept that allows for the seamless integration of YouTube videos. This approach reflects my preference for clean, straightforward designs that represent my personal style.

Key Features and Learnings:

  • YouTube Integration: The blog supports embedding YouTube videos, which I plan to utilize extensively.
  • Minimalist Design: I believe that portfolio websites should mirror the creator's personality. For me, a minimalist and clean design is essential, avoiding overly complex or "funky" elements unless they serve a clear purpose.
  • Tina CMS: I transitioned from using Prismic to Tina CMS for this project. Tina's open-source nature and comprehensive documentation made it enjoyable to work with, and it offers superior support for features like YouTube embedding, simplifying the process compared to Prismic.

Future Plans:

  • Animations with GSAP: I intend to enhance the blog with animations using GSAP, adding subtle yet impactful visual elements.
  • Rebranding: I aim to rebrand the blog to better align with my evolving style and professional identity.

This minimalist blog concept represents my current vision for a personal portfolio, balancing simplicity with functionality.


©2024 Chantelle Loh