MY Portfolio Website

The challenging journey to a self-programmed website.

Portfolio Page


I created my own portfolio website to showcase my work to potential employers and other interested user. I coded the website myself to prove my HTML, CSS and JavaScript Skills that I acquired during the development. The limitations of my technical possibilities drove me crazy in the meantime. I would have liked to make the case studies much more appealing and interactive, but I had to realize that this was not possible for the time being. But I will continue to work on it.

Context & Challenge

The responsive website is the final project of my UX/UI-Journey with the Career Foundry. I started with a seven month intensive UX Design Course, followed by a UI Specialisation and the Web Development Course to round off my further education and experience to gain a holistic understanding of the challenges and opportunities of my new career.


At the beginning of the course I had no idea about programming and I was not very fond of it. Nonetheless, it's important to me and I have always tried to identify the respective issues, needs and responsibilities in a team and work environment in order to find the best and fastest possible route to the desired result. With the best possible background knowledge of the individual processes and responsibilities, I can deliver an even better product.


The overall goal was to sharpen my understanding of this side of product development and at the same time to create my own homepage from scratch to show what I'm capable of. I wanted to have a portfolio website whose content was completely created by me.


Process & Insights


Various types of designer portfolio websites. After that, and what I knew about my future possibilities in the course, I needed to lower my own expectations of what I’ll be able to develop in the end.


The content. I hand-sketched the layouts how I will arrange that content.



Mid-fidelity Wireframes. Made with Figma, to get a better understanding of my options.



The Color Scheme. I wanted to create a light page that would match daytime reading habits, since my target audience tends to view my page during the day. In combination with a trustful and soothing petrol blue it underlines what I want to transport.

Color Scheme

The Typography. I have decided to use the combination of two fonts. To pick up my print background, I decided to use the Typewriter-like Arvo as the eye-catching font. I use it for headlines and claims on the homepage and for headlines and the text about me. For the projects and all other copy texts I chose Lato as a sans serif and easy to read font.



My own Logo/Favicon. I used Adobe Illustrator to create an illustration from an image I already use with Behance and LinkedIn, to create an unique style and to show another skill that I have. The illustration represents a location icon to show that with me is the right place for a collaboration.


Images, gathered and rewrote project text, chose a burger-Icon for mobile.


The code. Input of HTML, CSS styling, and JavaScript programming language/code into Atom. Designed using the mobile-first approach, then pain point display sizes.


User test with five participants from the business. I created five Senarios with following user goals to reach:

  • View case study „Wingbuddy“ directly from the homepage
  • See the next case study „INK!“
  • Use mobile version now and navigate to the contact section
  • Find the option to download the resume
  • Navigate to my LinkedIn profile


Usability Issues and Ranking according to NN metrics. The following rating scale can be used to rate the severity of usability problems:

  • 0 = I don't agree that this is a usability problem at all
  • 1 = Cosmetic problem only: need not be fixed unless extra time is available on project
  • 2 = Minor usability problem: fixing this should be given low priority
  • 3 = Major usability problem: important to fix, so should be given high priority
  • 4 = Usability catastrophe: imperative to fix this before product can be released
Test Results


The usability catastrophe and major problems were fixed based on the user feedback.


The code. Then I checked the website using cross-browser testing.


A list with further improvements:

  • Add more interactivity to the projects
  • Give the user the option to jump from one project to the others via thumbnails
  • Learn more development to to make the website, especially the projects, more appealing to my visual sensibilities.

Please be merciful, I will not be a super programmer soon, but I do know now how the wind blows in the developers cellar.

High Fidelity

Thanks for Reading!