Portfolio Compass AI-Powered Portfolio Evaluation
Product Design & Development

Portfolio Compass

AI-Powered Portfolio Evaluation

A free AI-powered portfolio review tool that breaks down your strengths, exposes gaps, and gives you a clear path forward with a 20-point evaluation system across four key dimensions.

Date 2026
Type Web Application
Role Design & Development
Website View Live Tool
Tools Next.js 15, React, TypeScript, Supabase, Perplexity AI, Tailwind CSS, Vercel

Designer portfolios are getting inconsistent, contradictory feedback

Industry layoffs have left thousands of designers scrambling to update their portfolios. The problem? Feedback is unreliable. Friends are biased, colleagues are busy, and recruiters often contradict each other. What worked 3-5 years ago isn't the standard anymore, and full-stack designers can't maintain separate portfolio versions for every job type.

The Feedback Paradox:

  • Friends and family: Too supportive, miss critical gaps
  • Colleagues: Too busy, provide surface-level comments
  • Recruiters: Often contradict each other based on their specific needs
  • Online communities: Feedback varies wildly in quality and relevance

The Wake-Up Call

A recruiter colleague gave me brutally honest feedback: "Beautiful GSAP animations, but I'd leave in a heartbeat if hiring for product design." That conversation revealed something important: I needed unbiased, consistent evaluation that could cut through the noise.

Questions That Sparked the Solution:

  • "Is the core interaction obvious in 3 seconds?"
  • "What would this look like 10x simpler?"
  • "Would I bet my reputation on this work?"

Portfolio Compass: Free, AI-powered portfolio evaluation

I built Portfolio Compass to give designers what they actually need: honest, structured feedback that's consistent across evaluations. The tool uses AI to analyze portfolios across 20 individual criteria, organized into four key dimensions.

20 Evaluation criteria
4 Core dimensions
100 Maximum score

Key Features:

  • Instant Analysis: Submit your URL and get comprehensive feedback in under a minute
  • Sitemap Support: Analyze multiple pages for a complete picture
  • Progress Tracking: Re-submit to see how your improvements affect your score
  • Shareable Reports: Generate unique links to share with mentors or colleagues
  • PDF Export: Download a formatted report for offline review

The Clarity Compass: A 20-point evaluation system

The scoring system breaks down portfolio effectiveness into four fundamental dimensions, each worth 25 points. Every dimension contains 5 criteria, each scored 1-5, creating a nuanced picture of strengths and gaps.

The Clarity Compass Framework

Four dimensions, 20 criteria, one comprehensive score

Direction

Make it make sense

25 pts
  • Problem Clarity
  • Goal Articulation
  • Core Interaction
  • Element Purpose
  • Simplicity
Psychology

Design for the mind

25 pts
  • Emotional Trigger
  • Emotional Flow
  • Friction Points
  • Action Reward
  • Attention Design
Sharpness

Craft is the differentiator

25 pts
  • Scroll-Stop Quality
  • Element Necessity
  • Visual Hierarchy
  • Craft Quality
  • Design vs Style
Separation

Stand out or stay invisible

25 pts
  • Distinctive Detail
  • CD Review
  • Uniqueness
  • Problem vs Pattern
  • Reputation Test
90-100Exceptional
75-89Strong
60-74Developing
0-59Needs Work

Three-step evaluation flow

The tool guides users through a simple three-step process: submit your portfolio URL, wait while the AI analyzes your site, and receive a detailed breakdown of your score with actionable feedback.

Step 1: Submit Your Portfolio

Simple URL input with optional sitemap analysis

Portfolio Compass
Portfolio Compass Illustration

Evaluate your portfolio.

Submit your portfolio and get a professional AI portfolio review that breaks down your strengths, exposes gaps, and gives you a clear path forward.

Use sitemap instead ?

Step 2: Analysis in Progress

Rotating tips keep users engaged while the AI works

Loading Illustration

Analyzing your portfolio...

This may take a moment while we browse your site.

edwardguillen.com

Portfolios with a clear headline convert 2x more visitors into clients.

Step 3: Your Results

Comprehensive score breakdown with actionable insights

edwardguillen.com

Your Score Card

78 /100
Strong

Tap to view breakdown

Your portfolio is looking solid.

We looked at your portfolio across 4 key areas: direction, psychology, sharpness, and separation. Using 20 individual criteria to build your score.

Direction
Make it make sense
21 /25
Psychology
Design for the mind
19 /25
Sharpness
Craft is the differentiator
20 /25
Separation
Stand out or stay invisible
18 /25
Red Flags Found
  • Case studies lack clear problem statements
  • No visible metrics or outcomes shown
  • Contact information buried in footer
What You're Doing Right
  • Clean visual hierarchy throughout
  • Fast load times and smooth animations
  • Clear navigation structure
Quick Wins
  • 1Add a one-line summary to each project card
  • 2Move contact CTA above the fold
  • 3Include one quantified result per case study

Built for speed, designed for clarity

Portfolio Compass uses a modern stack optimized for fast analysis and a seamless user experience. The AI integration leverages Perplexity's ability to browse and understand web content in real-time.

Architecture Decisions:

  • Next.js 15: App router with streaming for progressive loading states
  • Perplexity AI: Real-time web browsing capability to analyze live portfolios
  • Supabase: PostgreSQL database for storing analysis history and shareable reports
  • Tailwind CSS: Utility-first styling with custom design tokens
  • Vercel: Edge deployment for global low-latency access

Key Technical Features:

  • Sitemap Parsing: Automatically detects and validates XML sitemaps for multi-page analysis
  • Progress Tracking: URL-based history allows users to track improvement over time
  • PDF Generation: Client-side PDF export with jsPDF for instant downloads
  • Theme Persistence: Dark/light mode synced across sessions

The Illustrations

I had a lot of fun animating the illustrations throughout the app. The wonderful base illustrations were created by Mary Amato at Notioly.

Helping designers get honest feedback

Portfolio Compass started as a tool I built for myself, but it quickly became something I wanted to share with the design community. The 20-point framework gives designers a structured way to think about their portfolios beyond just "does it look good?"

What I Learned:

  • Structure beats subjectivity: A clear evaluation framework removes ambiguity from feedback
  • Progress tracking motivates: Seeing your score improve creates a positive feedback loop
  • AI as advisor, not judge: The tool works best as a starting point for reflection, not a final verdict
  • Free tools build trust: Making the tool free removes barriers and builds goodwill

Personal Outcome:

"Building Portfolio Compass forced me to articulate what actually makes a portfolio effective. The framework isn't just for users, it fundamentally changed how I approach my own work."

Reflection from the build process
Try Portfolio Compass

Free to use. No sign up required.

Next.js 15 React TypeScript Supabase Perplexity AI Tailwind CSS Framer Motion jsPDF Vercel Figma