Portfolio Website

From Figma to the Browser

This website shows my projects, my skills and who I am. I sketched the layout in Figma first and then built it with HTML and CSS, without a framework. You can switch between dark and light mode and read the site in German or English.

The Brief

In class we had to design and build our own portfolio website. We started with a mockup in Figma and wrote the code afterwards. The site had to be clearly structured and use the same colours, spacing and fonts everywhere.

Lessons

• Designs and prototypes in Figma
• Semantic HTML and Flexbox layouts
• Defining colours and font sizes as CSS variables
• Making the site work on phones and desktops
• Turning a Figma mockup into code