Developer Portfolio Interface
The design effectively mimics a terminal or code editor environment, providing a unique and consistent developer-centric aesthetic. However, the interface could improve in clarity and usability, especially in terms of visual hierarchy, spacing, and providing more intuitive interaction cues for non-technical users.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast4
Content Readability & Clarity5
Visual Consistency, Imagery & Media1
Navigation & Structure0
Conversion & Actions0
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load1
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
14Moderate
2Minor
Unlabeled navigation bar commands at bottom
Major
Content Readability & Clarity
The Problem
The bottom bar includes commands (Nav, Up, Down, Open, Jump, Select) with symbols but no clear label or explanation of their function or how to use them.
Why it Matters
Users unfamiliar with the interface might not understand what the controls do or how to interact, causing confusion and navigation difficulties.
How to Fix
Add clear labels or tooltips explaining each navigation/control command and their input method.
Issue Highlights
Low contrast light gray project description text
Major
Color & Contrast
The Problem
The main project description text on the right side uses a medium gray on a nearly black background, making the text hard to read due to insufficient contrast likely below WCAG AA standards.
Why it Matters
Users with low vision or in bright environments will struggle to read important content, leading to poor user experience and accessibility issues.
How to Fix
Increase the brightness of the gray text or use a lighter color to ensure a minimum 4.5:1 contrast ratio against the background.
Issue Highlights
Unlabeled Icons for Language Toggle and Social Links
Major
Visual Consistency, Imagery & Media
The Problem
The 'fr' button on the top right and the icons next to Email, LinkedIn, and GitHub have no visible labels or tooltips on the screenshot, which may confuse users unfamiliar with the symbols.
Why it Matters
Unlabeled or unclear icons increase user confusion about their function, reducing usability, especially for users less familiar with these icons.
How to Fix
Add visible labels or accessible tooltips explaining the purpose of the icons and buttons.
Issue Highlights
Small touch targets in navigation bar
Major
Accessibility & Input Ergonomics
The Problem
The navigation bar at the bottom showing keys such as ':t', 'k', 'j', 'i' and symbols has very small tap targets likely below the recommended 44x44 pixels.
Why it Matters
Small tap targets may cause users to miss and have to repeatedly tap, reducing usability and causing frustration, especially on touch devices.
How to Fix
Increase the size of interactive elements or add extra padding around them to create larger touch targets.
Issue Highlights
Low contrast on dark blue status bar text
Moderate
Color & Contrast
The Problem
The text in the top status bar uses a dark blue color on a nearly black background, resulting in low contrast likely below WCAG AA for normal text.
Why it Matters
Low contrast text can be difficult for many users to read, especially in low-light conditions or for users with visual impairments.
How to Fix
Use a lighter color for the text or a lighter background color in the status bar to increase contrast to at least 4.5:1.
Issue Highlights
Project details lack clear visual hierarchy
Moderate
Content Readability & Clarity
The Problem
The project details such as location, team size, and tech stack use similar font sizes and colors to the project titles and section headers, lacking distinguishable visual emphasis to separate headings from details.
Why it Matters
Users may find it difficult to quickly scan and differentiate high-level project titles from detailed attributes, reducing readability and comprehension.
How to Fix
Use distinct font weights or sizes, or different text colors to create a clear visual hierarchy between project titles and their detail lines.
Issue Highlights
Misaligned Right Panel Elements
Moderate
Visual Consistency, Imagery & Media
The Problem
The text elements below the image (username, roles, project title, details) are not consistently aligned or spaced. For example, the username, links, and project title have different horizontal alignments, causing a disjointed visual flow.
Why it Matters
Misaligned elements create a visually unbalanced composition that can distract users and reduce the professional appearance of the portfolio.
How to Fix
Use a consistent horizontal alignment (e.g., center or left) for all text elements and maintain uniform vertical spacing between them.
Issue Highlights
Breadcrumb navigation is present but lacks clear styling
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The breadcrumb at the top ('Lucas r. > Projets Sélectionnés > Mini-SGBD') is small and faint blue on a dark background. It provides location context but is not visually emphasized, potentially making it easy to overlook.
Why it Matters
Users may not realize where they are in the site structure quickly, impacting their ability to navigate efficiently or understand their current context.
How to Fix
Increase the font size and/or use a higher contrast color for the breadcrumb. Consider adding separators with more visual weight or styling to highlight the current location.
Issue Highlights
Unclear next action after project selection
Moderate
Flow & States Completeness
The Problem
The interface shows a selected project with details, but there is no clear call-to-action or button indicating what the user should do next to proceed or interact further with the project.
Why it Matters
Users may be confused about how to continue their workflow or get more detailed information, leading to uncertainty and potential drop-off.
How to Fix
Add a clearly visible next-step button or link such as 'Edit project', 'View details', or 'Proceed' to guide users to the next logical action from this screen.
Issue Highlights
Body project text appears very small
Moderate
Content Readability & Clarity
The Problem
The descriptive project text uses a very small font size, likely below comfortable reading thresholds, which may stress users when reading detailed information.
Why it Matters
Small body text can cause eye strain and reduce overall accessibility, particularly for users with visual impairments.
How to Fix
Increase the font size of body text to at least 14px or equivalent for better readability.
Issue Highlights
Inconsistent Icon Styles and Sizes
Moderate
Visual Consistency, Imagery & Media
The Problem
Icons next to 'Email', 'LinkedIn', and 'GitHub' links vary in style and size. For example, the LinkedIn icon appears different in form and spacing compared to the email and GitHub icons.
Why it Matters
Inconsistent iconography reduces visual harmony, making the interface feel unpolished and potentially confusing users.
How to Fix
Use a single icon style set with uniform size and stroke weight for all social/contact icons.
Issue Highlights
Code Lines and Panel Text Misaligned Horizontally
Moderate
Visual Consistency, Imagery & Media
The Problem
The numeric line indicators on the left are not perfectly aligned with the corresponding text lines in the main code area, making it harder to associate line numbers with content precisely.
Why it Matters
Poor alignment increases cognitive load for users reading the code-like presentation, impeding quick scanning and referencing.
How to Fix
Adjust horizontal positioning so that line numbers vertically align exactly with the corresponding text lines.
Issue Highlights
Multiple closely spaced project links crowd the left navigation area
Moderate
Navigation & Structure
The Problem
The left panel lists multiple projects and links with small line spacing and minimal padding, making individual clickable areas dense and potentially harder to select accurately, especially with keyboard navigation.
Why it Matters
Users may feel frustrated if they accidentally click the wrong link or find the navigation difficult to scan and select, reducing usability and engagement.
How to Fix
Increase vertical spacing between links and add distinct hover or focus states to clarify clickable regions. Consider grouping or collapsing sections for large lists to reduce clutter.
Issue Highlights
Closely spaced links in 'Contact' and 'Forge' sections
Moderate
Accessibility & Input Ergonomics
The Problem
Links like 'Email', 'LinkedIn', and 'GitHub' are placed closely in vertical list with minimal vertical spacing, which might cause accidental taps on nearby links.
Why it Matters
Insufficient spacing between clickable elements increases the likelihood of unintended taps and user errors.
How to Fix
Increase vertical spacing between these links to at least 48 pixels height per touch target.
Issue Highlights
Multiple navigation options with unclear priority
Moderate
Efficiency & Cognitive Load
The Problem
Navigation instructions at bottom use multiple keys for similar commands (e.g., 'Open' with 'i' or Space) and many different key help labels are shown, causing several competing decisions.
Why it Matters
Users must decide from many options for basic navigation, which increases cognitive load and decision-making time.
How to Fix
Simplify navigation instructions and reduce the number of valid keys per command to one clear option.
Issue Highlights
Low contrast gray labels in project details
Moderate
Color & Contrast
The Problem
Labels such as 'Année:' and 'Entité:' use a medium-dark gray color on a black background, causing readability issues with likely insufficient contrast for normal text.
Why it Matters
Lower contrast labels can make it difficult for users to quickly parse key information, reducing usability especially for users with visual impairments.
How to Fix
Use a lighter or more saturated gray or another color with higher contrast.
Issue Highlights
Too many small clickable project items in list
Moderate
Efficiency & Cognitive Load
The Problem
The list of selected projects on the left contains multiple small project entries with details, each requiring user attention and likely interaction. This breaks the task into many micro-steps.
Why it Matters
Users need to scan many individual project items and their tech details, increasing cognitive load and slowing navigation.
How to Fix
Group project items with collapsible sections or summary views to reduce the number of individual steps needed to view details.
Issue Highlights
User must remember project details from list to right panel
Moderate
Efficiency & Cognitive Load
The Problem
The right panel shows detailed info for the selected project, but the user must maintain context from the left list where projects have similar names and details, without clear visual cues linking both.
Why it Matters
Users may have to mentally hold or recall details from the left list to understand what is shown on the right, increasing working memory demand.
How to Fix
Add stronger visual linking or breadcrumbs between the selected project item in the list and the right panel details.
Issue Highlights
Inconsistent Link Text Color and Style
Minor
Visual Consistency, Imagery & Media
The Problem
Link texts such as 'GitHub', 'LinkedIn', and 'Email' use different shades of blue and underline patterns, causing style inconsistency.
Why it Matters
Inconsistent link styles reduce user confidence in interactive elements and overall design cohesion.
How to Fix
Standardize link color and underline style for all clickable text elements.
Issue Highlights
Ambiguous status label 'TERMINÉ' without context
Minor
Content Readability & Clarity
The Problem
The status label 'TERMINÉ' (completed) appears above 'Mini-SGBD' but lacks additional context or explanation of what is marked completed.
Why it Matters
Users may not understand the scope or meaning of the label, reducing clarity of the project's progress or state.
How to Fix
Add a tooltip or brief explanatory text clarifying what 'TERMINÉ' refers to.
Issue Highlights