Portfolio Website

Visual Studio Code
Browser

I wanted to have a website for a long time. In 2017 during a school practica at SE-Electronic the developer responsible for me, Dominik Höfer, mentioned he knew how to create websites which i showed a lot of interest in and instead of the planned program we went ahead and created my very first website. After the practica I kept on writing websites and later that year tried to host by myself on my Raspberry Pi, which fell flat when my parents didn't allow me access to our router settings. In hindsight propably a good call because I didn't really have a clue what I was doing. I went ahead and hosted locally.

Anyway with another bigger, more important practica approaching I wanted to have a website to show of some personal and uni projects I did aswell as documenting projects for myself.

Step 1 • Understanding context

Defining who was going to use my Website was quite straight forward and I quickly made out two distinct user groups:

For myself it was pretty clear what purpose this website should solve. Documentation and maybe even some archivation.

For the people working HR it wasn't that clear cut. Initially I thought about creating a website build to impress. This connotation came from my knowledge of how most portfolio-websites looked. Flashy, heavily animated and all in all very gimmicky. Thinking about by whom for whom those kind of websites were created, I realized this formula wasn't applicable. I'm not a web-designer, animator or photographer looking for freelance work in those fields. There is no need to try and show of in fields I'm not proficient in. I also assumed that people working HR prefered a leaner web experience for a portfolio because it's straight to the point (in my case: this is a list of what I did and what I can do). In a discussion with friends the argument that a flashier website might be more memorable and therefore beneficial for me came up. I still went ahead with my gut feeling.

This might be a good point to address my lack of validation in regards to my users. This website is first and foremost a passion project and I just didn't feel like messaging people working HR and asking them questions. Idealy I would have went ahead and gotten way more specific with my second user group and researched companies I'm interested in and created a persona according to who I'm potentially going to send this website to.

Anyway here are some additional assumptions I made:

Step 2 • Market Research

I already mentioned that I initially imagined a way artsier and flashier design. Most of my early research was spend on websites featured on awwwards.com. Most of my inspiration later on came from websites focused more heavily on functionality namely: artstation.com, youtube.com and the spotify app. The idea for using this style of navigation came from a friend of mine.

Step 3 • Designing & Prototyping

I went through multiple designs even beginning to implement two of them. Most of my prototyping was done on paper or sketched on my pc due to its ligthweight nature. I also begun to create a prototype in Figma because I only had used AdobeXD and Axure before. But since getting used to Figma only seemed to hinder my workflow I decided not to use it for this project.

Step 4 • Implementation

I created this website only using HTML, CSS and some JavaScript. I tried to avoid JS as much as I could, mainly for accesibility and complexity reasons.

Navigation: Navigation is arguably the most critical point for my website. I wanted to give user group 2(HR) a feeling of discovery. For them there is no need to search for something specif due to the fact they arent aware of specific projects yet. For user group 1(Me) i felt like using CTRL+F to find articles was good enough. The navigation I now use is heavily inspired by a design spotify uses. The implementation is pretty dirty. I rarely us JavaScript and I really underestimated the complexity of this filter system.

Quick loading of images: I really wanted to optimize the picture loading. Mainly because I thought it'd look cool. In principle there are two versions of each image, one very very low resolution which loads initially and the real one that only loads in when visible in the viewport. I wrote a python script to create these low resolution thubnails which came with it's own challanges. Initially I scaled all images to 2% size, which caused the thumbnails to differ heavily in size. Also the library I used (Python Imaging Library - PIL) swapped the Red and Blue Channels which caused the images to have the wrong colors.

Responsivness: Responsivness was more of an afterthought. I always kept it somewhat in mind, but being aware that my target user group presumably only uses computers. I wasn't bothered too much by it.

Step 5 • Creating Content

Collecting and remembering old projects was no easy feed. I was heavily biased towards recent projects for obvious reasons and I'm certain that I forgot a lot of thinks I did not so recently. Creating written content for each article is still very time consuming. Trying to document afterwards is always a bad idea. Right now I'm just writing down the first thing that comes to mind in regards to that particular project. I also try to be as honest as possible with myself. I'm not sure wether I should include stuff I failed or really am not happy about. Obviously a portfolio is not the right place for this. Maybe I'm gonna seperate the portfolio stuff from the documenting stuff completly. Propably should have done that to begin with.

Step 6 • Webhosting

For my domain I initially eyed nicksportfol.io but this one was a bit cheaper. I still like the idea though. I wanted to host on OVH but they wouldn't verify me. They took my money and ignored me from there on. Three weeks later and I still haven't heard back. So I switched over to one.com, and in a few hours my website was up and running.