Summary
I built this portfolio website using Next.js, TypeScript and SCSS. From meticulous planning and design using Figma to development in VScode. I built my own custom headless CMS using a combination of serverside scripts, gray-matter for metadeta, and react-markdown for markdown support.
Background
The idea initially started in 2018 when I was in highschool. I wanted to have a platform where I can showcase my work, and share my opinions and insights.
I started with initial sketches and prototypes of my vision. How I wanted the website to look like, and the purpose of creating such website. The process was very exciting and I would continue sketching ideas and develop local prototypes.
Portfolio v1
Portfolio v1 overview page.
This was one of the earliest design prototypes I made. It was heavily inspired by Tobias Ahlin's website.
Portfolio v2
Portfolio v2 homepage.
This version was shortlived, as I had more exciting ideas on the horizon.
Experimenting with font combinations and colors.
Portfolio v3
Portfolio v3 homepage.
Tying it back to the original sketch designs; I was starting to get somewhere, but the design didn't seem practical enough to me. It seemed too gimmicky and trendy.
Bold and energetic ⇒ Calm and soothing.
Portfolio v4
The 4th iteration of my website is where I aimed to do things differently. I took time to do thorough planning, user research, UX considerations based on emotions and message I wanted to convey.