Portfolio
This is my portfolio conceptualization process
First, I brainstorm to determine what colors, hues, fonts, and shapes best match my personality and convey the message I want to send. Online tools that generate palettes based on a couple of colors work wonders for this. Once I have a selection that I like, I tweak a few colors and see if they still fit. For this specific website, I decided to keep it more minimalist and didn't use all of the hues provided since the page is expected to showcase a few pictures and drawings, and too many colors would make it look visually cluttered.
My signature is my brand, so why not use it literally? As you can see, my scribbled name is a constant feature across the pages, and it redirects you back to the home page.
Choosing fonts is one of my favorite parts of the design process, as a font can convey so much more than the word it represents. I chose Italiana, a sans-serif font that is elegant and sophisticated without being classic or old-fashioned. For a readable and softer experience, I chose Abhaya Libre, a rounder serif counterpart based on the Sinhalese alphabet. Do you agree that they complement each other well?
As I think of the functionalities and features I want for the website, I generate new ideas and add them to the page. Several ideas were suggested for the light-dark switch, and after gathering opinions and feedback to ensure clarity and ease of use, we concluded that the most compact and clear option was the one that you can actually switch :) :)
To create the moon design, I used the classic waxing and waning crescent moon emojis from Twitter and slightly modified them to match the appropriate color scheme, as well as adding some haloes.
I am not a selfie-kind-of-person, so finding a picture of myself looking cool-and-kind was not that easy. Did I succeed?
In the end, I decided that warm colors are more fitting than the black and white version of the same. Plus, drawing is fun, so I added a playful Procreate-made version of myself to the mix.
I began creating the holistic concept of the website by designing the homepage using Figma. At first, I planned to base it on round shapes and arches to convey a more organic, flowing feel. However, upon further consideration, I found that using straight lines as a theme resulted in a cleaner and more streamlined design that was easier to navigate and understand.
Here is the Figma home frame, which is coded to a high degree of similarity. The whole concept was desktop-first, and I implemented the responsive design when coding.
Finally, for the code, I used Next.js, and some Sass. You can check it out directly on my GitHub repository.
Figma (semi)Final Mockups
