CASE
CASE
CASE
CASE
My Portfolio Website
My Portfolio Website
My Portfolio Website
My Portfolio Website
My Portfolio Website
USED SKILLS
USED SKILLS
USED SKILLS
USED SKILLS
USED SKILLS
UI/UX, Figma, Adobe CC, No-Code Tool,
Html & CSS
UI/UX, Figma, Adobe CC, No-Code Tool,
Html & CSS
UI/UX, Figma, Adobe CC, No-Code Tool,
Html & CSS
UI/UX, Figma, Adobe CC, No-Code Tool,
Html & CSS
CLIENT
CLIENT
CLIENT
CLIENT
CLIENT
---
---
---
---
Methodologies used
Methodologies used
Methodologies used
Methodologies used
Methodologies used
Design Thinking, WCAG 2.2 Guidelines, Agile
Design Thinking, WCAG 2.2 Guidelines, Agile
Design Thinking, WCAG 2.2 Guidelines, Agile
Design Thinking, WCAG 2.2 Guidelines, Agile
YEAR
YEAR
YEAR
YEAR
YEAR
2025
2025
2025
2025
Project Plan
Project Plan
Project Plan
Introduction and Learnings
Introduction and Learnings
The goal of this project was to design and build a modern and professional portfolio that not only shows my work, but also reflects my skills and way of working. I used Figma to build the structure and design, while following accessibility guidelines (WCAG 2.2) to make sure the portfolio can be used by almost everyone. After this I used Wordpress to acutualy built my portfolio.
My main learning during this project was about the importance of accessibility guidelines. I didn’t know before that so many people worldwide live with a disability and face issues when using digital platforms. In addition, I created a design document that explains all the choices and directions I took during the project. Design Document PDF. and the Figma Link
The goal of this project was to design and build a modern and professional portfolio that not only shows my work, but also reflects my skills and way of working. I used Figma to build the structure and design, while following accessibility guidelines (WCAG 2.2) to make sure the portfolio can be used by almost everyone. After this I used Wordpress to acutualy built my portfolio.
My main learning during this project was about the importance of accessibility guidelines. I didn’t know before that so many people worldwide live with a disability and face issues when using digital platforms. In addition, I created a design document that explains all the choices and directions I took during the project. Design Document PDF. and the Figma Link
Phase 1 & 2
Phase 1 & 2
I started my portfolio project by looking at what others had already done. I analysed different portfolios and websites to see what caught my eye, what felt professional, and what made me want to keep scrolling. This helped me figure out how I wanted to present myself and who I was designing for: mainly recruiters and companies looking for interns or starters.
In phase 2 I knew who I was designing for, it was time to give my portfolio its look and feel. I created a moodboard full of colours, fonts, and styles that matched my personality and design goals. From there, I built a style guide with typography, colour palette, button styles, and spacing rules.
I also set up a design system in Figma with reusable components and auto layout. This makes designing much faster and keeps everything consistent whether it’s a button, a heading, or a case study card.
I started my portfolio project by looking at what others had already done. I analysed different portfolios and websites to see what caught my eye, what felt professional, and what made me want to keep scrolling. This helped me figure out how I wanted to present myself and who I was designing for: mainly recruiters and companies looking for interns or starters.
In phase 2 I knew who I was designing for, it was time to give my portfolio its look and feel. I created a moodboard full of colours, fonts, and styles that matched my personality and design goals. From there, I built a style guide with typography, colour palette, button styles, and spacing rules.
I also set up a design system in Figma with reusable components and auto layout. This makes designing much faster and keeps everything consistent whether it’s a button, a heading, or a case study card.
Phase 3 & 4
Phase 3 & 4
In Phase 3, I started with low-fidelity wireframes for the Home, About, Work, and Contact pages. After testing with a few users, I refined the layout to improve navigation and highlight key information.
I then moved to high-fidelity designs, applying my style guide and accessibility rules, and built interactive prototypes to test the whole design with users again.
In phase 4 it was time to bring it to life. I chose to build my portfolio in a no-code platform (WordPress), so I could focus on creating fully functional website without heavy coding in a fast way.
During this phase I also tested the site on different devices to make sure it was responsive and worked well on desktops, tablets, and mobiles. Accessibility checks were done again as well.
In Phase 3, I started with low-fidelity wireframes for the Home, About, Work, and Contact pages. After testing with a few users, I refined the layout to improve navigation and highlight key information.
I then moved to high-fidelity designs, applying my style guide and accessibility rules, and built interactive prototypes to test the whole design with users again.
In phase 4 it was time to bring it to life. I chose to build my portfolio in a no-code platform (WordPress), so I could focus on creating fully functional website without heavy coding in a fast way.
During this phase I also tested the site on different devices to make sure it was responsive and worked well on desktops, tablets, and mobiles. Accessibility checks were done again as well.
Reflections and Challenges
Reflections and Challenges
A big challenge in this project was balancing creative design with accessibility rules. I learned how to make modern choices that also support readability and usability. Another challenge was translating my Figma designs into WordPress, which sometimes required creative workarounds. I also improved my time management by planning dedicated moments for documentation. Overall, this project strengthened my skills in UI/UX, accessibility, and no-code development, while teaching me to stay flexible and structured.
A big challenge in this project was balancing creative design with accessibility rules. I learned how to make modern choices that also support readability and usability. Another challenge was translating my Figma designs into WordPress, which sometimes required creative workarounds. I also improved my time management by planning dedicated moments for documentation. Overall, this project strengthened my skills in UI/UX, accessibility, and no-code development, while teaching me to stay flexible and structured.
