In a Nutshell

In April 2022 I created my first own portfolio. It looked pretty ok for that time, but as time went on, I noticed some problems. That’s why I started a remake of my portfolio at the end of October.

Analysis & Research

First, I formulated all my used text in German and English. Then I looked up a lot of portfolios and videos about them and wrote down what appealed to me. In addition to that, the problems of my current website:

Problems

1. The homepage appears empty and has no real purpose
2. Boring design
3. Unclear what elements are clickable
4. Project preview hover lacks information or where it will lead too
5. Some projects are outdated
6. Bad layout on the project pages
7. Missing feedback after you click the email button
8. Resume with too personal information is accessible for every page visitor
9. Ugly portraits
10. Everything is in English even though I only searched for jobs in Germany
11. Bad/faulty optimization for mobile

Design Sketches

The first sketches of the portfolio focussed on 2 navigation pages, a cooler design and optimization for mobile.

Prototyping & Design

The design process and prototyping happened in Figma. With my new workflow that I learned through my student job, I created a mobile and desktop design of my portfolio. In addition to that, I also made some mockups and previews on Figma. I had to keep in mind what elements would look like on mobile and desktop and if they make sense on them. That’s why I left out the prototype button on the mobile view of project pages.

Coding

The longest and hardest phase was programming. With a little help through tutorials and forum posts, I managed to create this portfolio on my own. The basic structure is based on a predefined responsive grid with content block in between. Several times errors occurred that I solved through endless trials and research which unleashed real moments of happiness. That’s how I solved the problems:

Solutions

1. Transferred the homepage to the about me page
2. Design: dark mode, new fonts for texts and striking headlines, new project previews
3. Clickable elements are rounded, navigation buttons are even more rounded
4. Next to a short description, the year and the way of redirection is listed through a icon in the project preview hover
5. Removed outdated projects
6. New layout with thumbnails and prototype buttons on the project pages
7. Popup with a notification after clicking the email button
8. Removed the resume
9. New cool portraits
10. You can switch between English and German language
11. Mobile optimized with small adjustments because the mobile view can’t provide all desktop features

The current website!

Explore my portfolio to experience the improvements and to get used to my skills.

Retrospective

This was the first time that I created a website first on Figma and then rebuilt it through HTML, CSS and Javascript. I learned new coding ways that surely will be useful in the future, and how to manage a giant project with little time.