My portfolio

2024/2025

Services

UI / UX design

Figma

FigJam

PHP + HTML/CSS/JS

Tailwind CSS

Image showing subpage example with a project

Subpage example with a project

Project overview

The design of a personal UI/UX portfolio was born out of the need to showcase projects, skills, and experience in the form of a website built from scratch.

Creating a portfolio from scratch provided not only visual freedom but also the opportunity to showcase the creative process and skills from related fields (e.g., graphic design, frontend, and backend development). The custom portfolio reflects my design philosophy, which is based on usability, aesthetics, and tailoring to user needs.

Goal

The goal of the portfolio project was to create a visually appealing, intuitive, and functional website that clearly showcases my skills, experience, and projects, helping me to stand out in the job market.

The portfolio was designed not only to capture the attention of potential employers and clients but also to showcase my competencies in interface design.

The website is responsive, optimized for speed, and matches the needs of recruiters, project managers, and potential clients.

Image showing personas and content mockups

Personas and content mockups

Image showing visualisation of the site map

Visualisation of the site map

UX

For the creation of a personal portfolio, four personas were developed: 1. Recruiter (seeking a candidate for a specific position with a visual portfolio; needs to quickly find information about the candidate, review their work, and access contact details). 2. Young Student (looking for inspiration for their first portfolio). 3. Woman around 25 years old (searching for projects to create a mood board for a new design, seeking inspiration from a specific industry). 4. Owner of a small studio (looking for a specialist to join their team of designers, with specific skills and professional experience). Each of these personas should navigate the user flow in a short and seamless manner, culminating in a predefined conversion.

Two simple content mockups were created (a homepage and a subpage). The mockups helped logically plan the layout and organize the content in a functional way (both text and graphics). This allowed to eliminate the poorly optimized content modules.

The site map helped to avoid navigation chaos and determine what content should be included in each section. It also enabled better planning of intuitive user paths.

Image showing moodboard with visual inspirations, color palette and typograhpy

Moodboard with visual inspirations, color palette and typograhpy

Image showing subpage example with a presentation of a project

Subpage example with a presentation of a project

UI

The main task in the UI design was to give the portfolio a minimalist tone: a grid-based layout, muted color scheme, simple and modern font, and the use of negative space. The priority was the content, ensuring the user’s attention was focused on the projects and key information, such as the "About Me" section or professional experience timeline.

A 12-column grid was used to create the visual design. Thanks to the flexible features of such a grid, it allowed the creation to be a fully responsive layout while ensuring clarity and readability for the user (as shown in the attached mockup graphic).

A well-thought-out collection of the UI elements in the form of a mood board enabled the selection of a color palette, suitable typography (a neo-grotesque font, Switzer, ideal for the minimalist design of the portfolio), and the method of presenting graphics in the project descriptions.

Image showing 12-column grid mockup

12-column grid mockup

Image showing mobile view header

Mobile view header

Image showing About me section with professional experience timeline

"About me" section with professional experience timeline

Other works

Website redesign for the Digital Designer course

Stradale Classics

Website redesign for the Digital Designer course

Design and implementation of one-page for tailor

Sylvana

Design and implementation of one-page for tailor