Before anything, I want to describe what this portfolio means to me:
Playground : a place to experiment my design ideas
Exhibition Hall : a place to showcase my technical abilities & passion
Extended Name Card : a place that shows who I am - my work attitude, style and personality
Sharing : a place to connect, where I can share my development journey with people in the amazing dev community! :)
Other Important Notes
This portfolio is fully-responsive, assessible, and SEO optimized.
After building the basic layout, I have a love-hate relationship with how this portfolio looks.
Yet I enjoyed so much building what I had in mind. The amount I've learned in the process exceeds my occassional dislikeness of its appearance. That's why, I'm actually already excited about creating my Version 2. :)
What You'll Read About
What is the vibe I'm going for, and where does its inspiration come from?
How was my brainstorming & design process like?
How did I build my responsive layout more efficiently?
How did I build responsive page titles?
My childhood memory sometimes affects me so much that I didn't even realize. This retro bus is my first memory of 'a bus', I loved it and I still love it. Unfortunately, I never see it running again since I went to primary school.
My way of brainstorming design ideas usually consists of playing around Adobe XD and creating moodboards. I didn't know what I wanted at first but I happened to feel resonated with one particular vibe. I later realized it has some resemblance with that retro bus I always missed.
Since I can design any way I like for my portfolio, I decided to experiment and explore more on this vibe:
Colour combination: Orange-red & light tan
Vibe: Retro or historical
The layout is inspired by my moodboard that consists of elegant restaurant menus and print magazines.
Combining the elements of retro and elegance, I created these mockups for my portfolio in Adobe XD:.
I followed mostly my design, but I changed the followings as I was developing:
Black lines and page titles are too harsh and heavy. I changed them to orange and semi-transparent orange.
Changed layout on "About" Desktop page because I ended up writing more than I expected which does not look good side by side.
Hover state in "Works" page for Desktop is too annoying. Bye!
Can't decide what else to put on "Contact" page except my contact details. Since those details appear elsewhere already, this page will be redundant. Contact page, Bye!
Added a "View Live" button to "Individual Project" pages.
Added a "Back to Top" button to "Individual Project" pages.
Added my contact details also in "About" page because why not? :)
Added Instagram icon link to my contact details because later I started an Instagram profile to record & share my web development learning journey!
Realizing the Potential of CSS Grids
Elements in my portfolio move around as the browser width widens. My main navigation & page titles, for instance, have the biggest changes. I'm excited how CSS Grid's 'grid-template-areas' makes my responsive web designs a lot more efficient to build.