Portfolio website

My portfolio website needed to reflect who I am and where my interests lie. Because the homepage is the first page a vistor of the website will see, I made that page the main focus and different from the other pages. In my opinion the other pages that relay information should be more straight to the point.

I designed and coded the website myself using HTML, (S)CSS, and vanilla JS. The illustration on the homepage I made using Photoshop. The background stripes were done in Illustrator.

Ideas

I wanted the website to reflect who I am and what I like so I started with making some sketches for the website. I had some ideas about me maybe walking outside or behind the computer. Maybe something involving my cats?

After making the sketches I decided that I liked the one where my head pops off best. I think it has a nice interaction for users that visit the site and it isn't too cluttered and distracting.

Code Snippets

After deciding what elements I liked best I started making pieces of code. The first one was for the eye movement following the mouse, that you can see here.

The other one was to try out how I should cut up the illustration I was going to have to make to pop off my head correctly, this one you can see here. Seperating and trying out the different elements on their own at first made the process less daunting and easier to implement.

Illustration

For the illustration I wanted it to include myself, a sign with my name and my cats. I first started with sketching. This took a few steps to get right:

After the sketches I could work on the line art and shadows:

What was left now was to render the illustration as a png, without the eyes. The eyes I would add here on the website. The illustration you see at the home page is cut up into different pieces.

Design

I now had most of the pieces made, but that doesn't make it usable yet as a reference for making the website. For example I still had to work out what the background should look like and what fonts to use. So I finished up designing the project in Figma. After the design was done I could start making this website.