How I Turned My Design Curiosity into a Working Portfolio
Heads up. This is a Portfolio case study with a litle background of how it all started.
In 2019, I was really into graphic design. I started a small business to support local businesses in Indonesia. I was always interested in having a digital portfolio- basically, a website. That’s when I stumbled upon website-building platforms like Wix and Squarespace.
I had a lot of fun designing websites and adding various functionalities to them. Curiosity did not kill the cat! Turning my dream website into a digital reality was an enjoyable experience. I experimented a lot, but there was one problem- they weren’t very flexible. At that time, there weren’t many free website builders without watermarks. And I’ll admit, I was a bit stingy about investing in paid ones...and that’s where my interest in web design really began.
Later, I discovered Webflow. However, the learning curve was quite steep for me back then (I didn’t have a coding background). I eventually paused my Webflow journey to focus on preparing for university in Germany.
Fast forward to today- I’m now a Business Informatics student in Berlin, learning how to build websites from scratch using different tech stacks (literally coding from VS Code with React and deploying on Netlify). As I’ve gained a deeper understanding of how websites are built, I realized that Webflow is built on the same foundation... it’s all just HTML and CSS.
I picked up Webflow again and began experimenting with the platform, creating dummy websites and my personal portfolio. I hope my skills can help others build a stronger digital presence, whether for their business or personal brand. This marks the start of my freelancing journey as a Webflow designer and developer.
A personal portfolio is a reflection of one’s design thinking and technical skills.
The main challenge was to build a portfolio that:
- Showcases creativity while maintaining professionalism.
- Follows Finsweet’s Client-First naming convention for scalability.
- Stays fully responsive, accessible, and easy to navigate.
- Feels minimal, yet still personal and engaging.
In short, I wanted to create something that screams my brand while also having good structure and performance.
My process follows a clear structure: Research → Design → Build → Refine.
- Wireframing & Design: I started with wireframes in Figma to plan the layout. Visual elements such as typography, color palettes were tested to achieve a minimal and clean look.
- Development in Webflow: Once the structure was ready, I rebuilt the design in Webflow using CMS collections and native Webflow animations to bring the interface to life. I followed Finsweet’s Client-First system to maintain a logical and scalable structure.
- Interactivity & Refinement: To make the experience more engaging, I added small interactions and hover effects. Each rebuild helped refine the layout, responsiveness, and site performance.
(P.S. The website you're seeing now is rebuilt three times in Webflow- each version better than the last!)
I've made testings across devices (thanks mom and dad) and realised the importance of responsiveness. I wanted to ensure a smooth digital experience for every visitor!
Using Finsweet’s Client-First system made development more structured and efficient, while ongoing SEO work continues to improve visibility on the browser. Rebuilding the site multiple times showed me the value of iteration- every version brought new insights and made me a better designer and developer.
In the end, this portfolio isn’t just a website- it’s proof of how much I’ve learned and grown. Hence, the message on my footer. Thanks for stopping by :)
