Developer Portfolio Dashboard
The UI effectively uses a code editor aesthetic, appealing specifically to developers with clear, well-organized code snippets and relevant content sections. However, some areas could improve with better navigation clarity, more contrast for readability, and enhanced labeling to aid users unfamiliar with the coding style presentation.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast3
Content Readability & Clarity3
Visual Consistency, Imagery & Media2
Navigation & Structure0
Conversion & Actions1
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load1
Flow & States Completeness1
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
12Moderate
5Minor
Unclear description of the profile image
Major
Content Readability & Clarity
The Problem
The text below the image reads 'this is an image about an introvert who want his online presence to be a cat' which is vague and does not clearly describe the image or its purpose.
Why it Matters
Users may find it confusing and unclear what the image represents and the context of the description, which can hurt understanding of the profile section.
How to Fix
Rewrite the description to clearly and succinctly explain the image and its relation to the profile, e.g. 'Profile image representing an introvert's online persona as a cat.'
Issue Highlights
Social media icons have small tap targets
Major
Accessibility & Input Ergonomics
The Problem
The GitHub, Discord, and LinkedIn icons below the profile image appear smaller than recommended minimum target sizes for touch, likely below 40x40 pixels.
Why it Matters
Small tap targets are difficult to activate accurately on touchscreens, especially for users with limited dexterity, increasing the chance of input errors or frustration.
How to Fix
Increase the size of the social media icons to at least 40x40 pixels, or add extra padding around these icons to achieve a 40x40 pixel touch target.
Issue Highlights
No visible current location or role orientation
Major
Orientation Missing (Environment/Role/Location)
The Problem
There is no clear breadcrumb, page heading, or prominent indication of the user's current location or role context within the app or site.
Why it Matters
Users can get lost or unsure about where they are or what section they are viewing, especially with minimal top navigation and multiple panels visible.
How to Fix
Add a visible page title or breadcrumb near the top or inside main containers to clearly show current page or section. Include role or environment labels if applicable.
Issue Highlights
No actionable or navigational elements clearly indicated as next steps
Major
Flow & States Completeness
The Problem
The screen shows profile and system information, but there are no clear calls-to-action or directions on what to do next, such as buttons or links for interaction or progression.
Why it Matters
Users might feel stuck or unsure about how to proceed, which can lead to confusion and abandonment of the page.
How to Fix
Add clear next-step actions, such as labeled buttons, links, or instructions guiding users on what to do next or how to interact with the content.
Issue Highlights
Different highlight styles for active tabs
Moderate
Visual Consistency, Imagery & Media
The Problem
The top navigation tabs ('.home', '.blog', '.project-showcase') have an orange underline highlight, whereas the tabs on the about-me.json container (JSON, skills) use a background fill for the active tab.
Why it Matters
Inconsistent active tab styles across different components increase cognitive load as users must re-learn UI behavior and reduce overall visual harmony.
How to Fix
Use a consistent style for active tabs throughout the interface, either underline or background fill, for clarity and cohesion.
Issue Highlights
Low contrast of orange code text on dark blue background
Moderate
Color & Contrast
The Problem
Several orange text elements (like 'this is an image...', 'about-me.json', 'arch linux (btw)', and others) on a dark blue background have low contrast, likely below WCAG AA for normal text.
Why it Matters
Low contrast makes text difficult to read for users with low vision or color blindness, reducing accessibility.
How to Fix
Increase contrast by using a lighter/more saturated orange or switching to a lighter background behind these text blocks.
Issue Highlights
Profile image border radius inconsistent with container
Moderate
Visual Consistency, Imagery & Media
The Problem
The profile image inside the 'profile.sh' container has a rounded border with an orange outline, but the container's corners have a different rounding radius, causing a subtle visual mismatch.
Why it Matters
Inconsistent border radius between elements within the same component can reduce perceived visual polish and cohesiveness.
How to Fix
Adjust the border radius of the profile image to match exactly the container's border radius or vice versa.
Issue Highlights
Top navigation is minimal and lacks clear differentiation
Moderate
Navigation & Structure
The Problem
The top navigation shows only three text links (.home, .blog, .project-showcase) with subtle styling and low visual priority, making it hard for users to quickly identify or understand these as primary navigation items.
Why it Matters
Users might miss the main navigation or be unsure about the current location, causing disorientation and difficulty moving between sections.
How to Fix
Increase the visual prominence of top navigation links via more distinct styling such as larger font size, stronger contrast, or tabs; add clearer active states or section labels to communicate context better.
Issue Highlights
Tab labels '.home', '.blog', '.project-showcase' lack clear button affordance
Moderate
Accessibility & Input Ergonomics
The Problem
The navigation tabs at top appear as plain text without distinct button-like styling aside from underline on hover or active, which may not clearly signal their interactivity.
Why it Matters
Users might overlook or disregard these tabs as clickable links, impacting navigation efficiency and discoverability.
How to Fix
Use clear button styling with hover/focus states such as background changes or borders to visually indicate these tabs are interactive.
Issue Highlights
Low contrast of the dark gray icons on dark container
Moderate
Color & Contrast
The Problem
The GitHub, Discord, and LinkedIn icons near the bottom center of the left card are dark gray on a dark blue background, making them difficult to distinguish clearly.
Why it Matters
Icons that are hard to see can confuse users or reduce the discoverability of important links or actions.
How to Fix
Use lighter colors or outlines for icons or add a slight glow or background circle behind them to increase contrast.
Issue Highlights
Inconsistent time and timezone labeling
Moderate
Ambiguous Date/Time/Timezone
The Problem
The local time is shown as '11:34:45 ICT' but the timezone abbreviation 'ICT' may not be understood by all users. Also, there's no clear label that this is the current local time, potentially causing confusion.
Why it Matters
Users might misinterpret or misunderstand the displayed local time due to ambiguous or unfamiliar timezone abbreviations.
How to Fix
Add a clear label indicating the local time and consider using a full timezone name or tooltip explanation for 'ICT'.
Issue Highlights
Flat hierarchy in JSON data block
Moderate
Content Readability & Clarity
The Problem
The JSON block in the about-me.json panel uses a monospaced font without differentiated headings or sections, making it hard to scan key information quickly.
Why it Matters
Users may find it tedious and harder to understand the structure and key points of the contained information quickly.
How to Fix
Add distinct headings or bold key labels or use subtle color variations to improve scanning and hierarchy while preserving style.
Issue Highlights
Social media icons are spaced too closely
Moderate
Accessibility & Input Ergonomics
The Problem
The spacing between the three social media icons underneath the profile image is small, reducing the gap between tap targets to less than recommended minimum (about 8 pixels).
Why it Matters
Insufficient spacing between interactive elements increases the risk of accidentally tapping the wrong icon, especially on touch devices.
How to Fix
Increase horizontal spacing between each social icon so that at least 8 additional pixels separate their tap target boundaries.
Issue Highlights
Small font size in profile description text
Moderate
Content Readability & Clarity
The Problem
The descriptive text below the profile image is small and tightly spaced, which may reduce readability for some users.
Why it Matters
Small font size can strain users' eyes and reduce the ease of reading, particularly for users with visual impairments.
How to Fix
Increase the font size and improve line spacing of the text to enhance readability.
Issue Highlights
Skills reference requires user to remember to switch tabs
Moderate
Efficiency & Cognitive Load
The Problem
In the JSON about-me section, the 'skills' field instructs users to 'check the skills tabs,' requiring them to remember to switch tabs to get the info.
Why it Matters
Users may miss or forget to switch tabs, leading to incomplete understanding of skills information and increased cognitive load.
How to Fix
Integrate key skills information inline or provide an explicit, visually prominent prompt or tooltip that guides users to check the skills tab without relying on memory.
Issue Highlights
Lack of distinctive visual hierarchy in main content panels
Moderate
Strategic Design
The Problem
The profile image panel and JSON info panel use similar dark backgrounds and font colors, resulting in a flat visual hierarchy. There is minimal differentiation to guide user focus to the main content areas.
Why it Matters
Users may find it harder to quickly understand the relationships between sections or what content is most important, reducing engagement and comprehension.
How to Fix
Introduce varied background shades, border styles, or spacing to create clearer visual grouping and hierarchy. Use typography contrast or accents to highlight key sections.
Issue Highlights
Social media icons not aligned with text
Minor
Visual Consistency, Imagery & Media
The Problem
The GitHub, Discord, and LinkedIn icons below the profile image appear horizontally centered but are spaced unevenly relative to the descriptive text above, and their size style differs from other icons on the screen.
Why it Matters
Misaligned and unevenly spaced icons can distract users, making the UI look less polished.
How to Fix
Align the icons properly relative to the caption text block and ensure consistent sizing and spacing with other icon sets.
Issue Highlights
Low contrast of light blue links on dark background
Minor
Color & Contrast
The Problem
Light blue text elements such as '.home', '.blog', '.project-showcase', 'github-activity', and 'Learn how we count contributions' on a dark blue background have insufficient contrast to meet WCAG AA for normal text.
Why it Matters
Users with low vision or some color deficiencies may struggle to read these links or labels.
How to Fix
Choose a lighter or more saturated blue color or add a subtle text shadow or background behind text to increase contrast.
Issue Highlights
Social and code repository icons placed too close together below profile image
Minor
Navigation & Structure
The Problem
GitHub, Discord, and LinkedIn icons appear closely spaced below the profile image with minimal padding, making it potentially harder to differentiate and select the intended icon easily.
Why it Matters
Users may accidentally click the wrong icon, negatively impacting navigation flow and user experience.
How to Fix
Add consistent spacing or padding between social icons to clearly separate each clickable area, improving target accuracy.
Issue Highlights
Profile image description tone is awkward and unclear
Minor
Tone, Friendliness & Delight
The Problem
The profile image's caption 'this is an image about an introvert who want his online presence to be a cat' is grammatically incorrect and awkward, which weakens the friendly tone and may confuse users about the intent.
Why it Matters
Unclear, awkward copy can reduce user trust and adversely affect perceptions of professionalism and warmth, impacting engagement.
How to Fix
Revise the description for clarity and friendliness, e.g., 'An introvert’s online presence, represented as a cat.'
Issue Highlights
Multiple separate elements require scanning across page
Minor
Efficiency & Cognitive Load
The Problem
Information about the user is shown in several distinct sections (profile image, JSON data, system info, GitHub activity) that forces users to scan multiple areas sequentially.
Why it Matters
Users must perform multiple steps to piece together profile information, increasing task completion time and mental effort.
How to Fix
Group related information more cohesively or provide a summarizing area that reduces the need for jumping between distinct code-style sections.
Issue Highlights