I was trying to find fonts for my website and came across this weird yet intriguing looking font. Certainly, the font wasn't for rich text but it had potential to be used my logo, which I did. The letter "H" looked great - no need to do any modifications. The letter "M" on the other hand was a bit lack luster. So I jumped to Illustrator and went to work.

For my logo I didn't need sketch anything on paper which usually should be the starting point for any logo design but as I already had a somewhat clear vision and the logo would have a lot of straight lines which are slower to  draw by hand than in Illustrator.

My first design direction was driven by the drawing above that my friend had made. Even though I like the drawing I couldn't make it work as I would have needed more drawing of similar style.

I also I let my logo design dictate my whole design which severely limited my options and imagination. The grayscale logo made my design gray which worked but gray is depressing and snowless December was depressing enough. Next up was the colorful logo, the stark opposite of the gray one. I was really happy with the logo and still am but once again couldn't really get the whole design to follow a common thread with logo. Once again I was stuck. I decided to leave logo alone for now and just design the website layout first and worry about the logo later.

Back to the drawing board (Adobe XD) I went. Most of my content was already created so the redesign process only took 2-3 hours. I decided to ditch the white background and black text as it was starting to strain my eyes. I chose light green with some silver in it as the background color. For the logo, decided to go pure white which contrast well with green/silver color. The lines in the logo sparked an idea - what if the background had a huge version of the logo?

The process of creating a portfolio differs greatly from creating client project as with client project the scope is - or at least should be - set right from the get go but with your personal portfolio the scope goes out the window really fast as you try and experiment with all kinds of ideas and push the envelop of your own capabilities.

Making the portfolio responsive proved to be a challenge as the website has a lot custom code which caused a lot of unwanted surprises. Luckily I was able to solve them and learned a lot from the unwanted surprises which turned out to be happy little accidents in the end.

Most of the challenges were caused by custom scripts for interactions which had to be modified in order for them to work in tandem. Figuring out how to make the scripts work was great learning experience as my Javascript and jQuery knowledge is somewhat limited.

Webflow enables designers to create amazing interaction - both with Webflow's innate interaction functionalities as well imported jQuery libraries - that give websites the needed appeal. These of course shouldn't be overdone as they can distract the visitor from actual content.

I scoured through thirty or so web pages that had interesting interactions and found that had this image displacement which was sleek and non obstrusive. Bingo. This interaction worked with all different versions of my design. I implemented the interaction with a bit of custom code.

Next, I wanted the navigation to feel smooth. Scouring through the many pages I found some website that used snap scrolling, which felt good and most were quite janky. I found Alvaro Trigo fullpage.js plugin which functioned just as I hoped - no jank, pure smoothness. I also implemented a horizontal drag-and-scroll for works parts which was a pain but worth it.

Instead of traditional desktop navigation bar I went with a hamburger menu so I could use it in all screen size breakpoints. It also allowed me to create a full screen menu which might a bit too much from UX standpoint but they look nice so why the hell not.