Documentation

Portfolio documentation

When browsing my portfolio, I want to evoke the feeling of walking through a modern art museum or a gallery, looking at the artwork and reading the museum labels adjacent to them. My work should stand out and shine through. That’s why I’ve chosen a minimalistic style and monochrome color-palette to imitate the feeling.

Styleguide

The museum-aesthetic is imitated in the accompanying styleguide made for my portfolio. To do so, I’ve found five key words to best describe it:

• Elegant
• Modern
• Minimalistic
• Stringent
• Monochrome

All elements for this portfolio—both stylistic as well as layout-wise—are chosen with these key words in mind.

The Design

The overall design of my portfolio is minimalistic, harmonious and

The primary target group are potential employers, who knows how to navigate websites. They have a knowledge for websites and technology. However, I don’t want there to be any confusion when visiting my website. It’s about finding a balance between minimalistic design, which only has the most necessary items and enough elements to ensure a user-friendly experience. I want there to be a good flow when browsing my portfolio without any friction. All elements and their functions should be obvious and if not, they shouldn’t be there.

The website is following the gestalt-principles/design principles of proximity, similarity and symmetry. I want there to be harmony and balance of my portfolio.

The code

The code, both in HTML and CSS, is made in a structural manner, beginning with the general basics for the entire page, then starting from the top of the page at the header moving down to the footer at the bottom. The code is made with semantic HTML and has relevant comments all throughout to make it readable. The website is made from Mobile First-approach, meaning it’s designed for smaller formats first before scaling up. All styling is made in an external stylesheet using CSS only.

The process

When working with any project, I have a typical workflow like the following:

• Idea generation and research
• Concept development
• Execution

Idea generation and research

The style described above is the result of idea generation and research in the very beginning of this process.

Firstly, I made a sitemap to get an overview of the content needed on my portfolio. This is also where I figure out exactly what needs to go on the website.

Secondly, I made a moodboard for the style I wanted to encapsulate. Although it won’t be used until later, it’s a way for me to figure out what needs to be on the portfolio.

Concept development

As with many great ideas, my portfolio started with pen and paper. From the sitemap, I sketched a few different ideas for the layout of my portfolio. I did so for the desktop-version as well as the mobile format. I made three different layout-ideas from which I picked the most fitting with the style. The final layout is in a four-grid-style. I also made Hi-fi sketches of the portfolio in Figma.

Execution

I began coding the hi-fi sketches in HTML and CSS as wireframes in order to get an overview of the website itself. Everything has to work on different formats, before the styling happens.

Once it worked, the styling begins. Based on the moodboard, I made the style guide from which I can style the website.

The entire process followed a pre-made Gantt-chart as well as tasks made in Trello.

Homepage video

On my landingpage is an introduction-video of me and my portfolio. The video is matching the aesthetic of the minimalist style.

My process for video-production is split into three phases:

• Pre-production: storyboard, video script, shotlist
• Filming
• Post-production: editing, rendering