Design & UX Review

Design & UX Review

Score: 7/10 Potential: 8/10 Gap: 1 point

Executive Summary

Your design system is technically competent with good fundamentals (typography scale, consistent spacing, semantic colors). However, the aesthetic choices are safe to the point of invisibility. The site follows generic portfolio patterns without visual personality or memorable moments. Technical execution is solid; creative expression is missing.

The Core Problem: Template Thinking

What Makes Design “Generic”

Not about quality - Your code is clean, your spacing is consistent, your colors are accessible.

It’s about differentiation - When I see your site, I could swap the content with 50 other portfolios and the design would still work. That’s the problem.

Evidence of Template Patterns

Pattern 1: The Standard Hero

From index.html (lines 7-34):

<section class="hero">
  <div class="container container-narrow">
    <div class="hero-content">
      <div class="hero-avatar">
        <img src="/assets/images/headshot.jpg" alt="...">
      </div>
      <h1 class="hero-title">Brandon JP Lambert</h1>
      <p class="hero-tagline">Language Learning & Teaching</p>
      <div class="hero-actions">
        <a href="/work/" class="btn btn-primary">Learn More</a>
        <a href="/contact/" class="btn btn-secondary">Contact Me</a>
      </div>
    </div>
  </div>
</section>

This is Every Portfolio Ever:

1. Centered avatar
2. Name
3. Tagline
4. Two buttons

No judgment - it works. But it’s unmemorable.

Zero portfolios examined: Can you name a single portfolio that has this layout and stuck with you?

Pattern 2: The Translateย(-2px) Card Hover

From _sass/_components.scss (lines 11-14):

&:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

Usage count in the industry: ~10 million websites

Why it’s overused: It’s the default Tailwind/Bootstrap hover effect. It works, but signals “I used the standard pattern.”

Not bad - just unoriginal.

Pattern 3: The Academic Blue

From _sass/_variables.scss (lines 8):

--color-accent: #2c5282;  // Deep academic blue

This color appears on:

• University websites
• LinkedIn
• Conservative financial sites
• Government portals
• Your portfolio

It’s safe, professional, and forgettable.

Why “Safe” is Dangerous

Safe design means:

• ✅ You won’t offend anyone
• ✅ It’s accessible and professional
• ❌ No one remembers it
• ❌ Doesn’t reflect personality
• ❌ Doesn’t differentiate you

In a competitive market, memorable > safe.

Design System Analysis

✅ What’s Working Well

1. Typography Scale (_variables.scss, lines 22-30)

--font-size-xs: 0.64rem;
--font-size-sm: 0.8rem;
--font-size-base: 1rem;
--font-size-md: 1.25rem;
--font-size-lg: 1.563rem;
--font-size-xl: 1.953rem;
--font-size-2xl: 2.441rem;
--font-size-3xl: 3.052rem;

Good:

• Proper modular scale (1.25 ratio)
• Sufficient range for hierarchy
• Semantic naming

Observation: You have 8 sizes but probably only use 4-5 regularly.

2. Spacing System (_variables.scss, lines 43-53)

--space-2: 0.5rem;   // 8px
--space-3: 1rem;     // 16px
--space-4: 1.5rem;   // 24px
--space-5: 2rem;     // 32px

Good:

• Based on 8px grid (industry standard)
• Consistent mathematical relationship
• Prevents arbitrary spacing values

Observation: This alone puts you ahead of many portfolios.

3. Color Naming (_variables.scss, lines 4-12)

--color-ink: #1a1a1a;           // Primary text
--color-paper: #fafaf9;          // Background
--color-accent: #2c5282;         // Deep academic blue
--color-secondary: #718096;      // Muted gray

Good:

• Semantic, not descriptive (ink/paper vs dark-gray/light-gray)
• Clear purpose for each color
• Accessible contrast ratios

Observation: Your naming is better than your color choices.

4. Font Pairing (_variables.scss, lines 32-35)

--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI'...
--font-heading: 'Crimson Text', 'EB Garamond', Georgia, serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

Good:

• Classic pairing: serif headings + sans body
• Appropriate fallbacks
• Monospace for code (relevant for dev portfolio)

Observation: This pairing appears on 1000+ dev portfolios. It’s the “Helvetica/Georgia” of 2025.

⚠️ What Needs Improvement

1. Color Palette is Too Conservative

Current palette:

• Deep blue (#2c5282)
• Muted gray (#718096)
• Near-black (#1a1a1a)
• Off-white (#fafaf9)

This palette says: “Corporate, safe, don’t take risks”

What it should say: “Educator who experiments, creates, and thinks differently”

Problems:

1. No warmth - All cool colors, nothing inviting
2. No energy - No vibrant accent for important actions
3. No personality - Could be anyone’s site

Where are your photography colors? You mention Letratos as a photography project. Why isn’t your visual palette informed by your photography?

2. Layout is Too Uniform

Evidence: All project cards are identical (ai-projects.html, lines 34-123)

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Portfolio">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational Games">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational Games">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Data Visualization">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="E-commerce">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Data Visualization">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Creative Platform">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Creative Tools">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Productivity Tools">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

<div class="card project-card" data-category="Educational">
  <!-- Same structure for every project -->
</div>

Every project gets:

• Same width card
• Same height image
• Same text layout
• Same button arrangement

Result: Visual monotony. Nothing stands out as “most important.”

Better approach: Differentiate by project status/importance:

[Featured Project - Full Width]
+------------------------------------------+
|  Large Image          |  Description     |
|  Gallery             |  Key Metrics     |
|                      |  [Demo] [Code]   |
+------------------------------------------+

[Active Projects - 2 Column]
+--------------------+  +--------------------+
| Image              |  | Image              |
| Title              |  | Title              |
| Brief Desc         |  | Brief Desc         |
+--------------------+  +--------------------+

[Prototypes - 3 Column]
+------+  +------+  +------+
| Icon |  | Icon |  | Icon |
| Name |  | Name |  | Name |
+------+  +------+  +------+

This creates visual hierarchy and guides attention.

3. No Personality Moments

Personality = unexpected delighters that make people smile or pause

Current count: 0

Examples from other portfolios:

• Custom 404 page with humor
• Animated illustrations that react to scroll
• Easter eggs (Konami code, hidden messages)
• Personal photos/behind-the-scenes
• Hand-drawn elements
• Playful micro-interactions
• Dark mode with personality (not just inverted colors)

Your opportunity: You’re a photographer and language learner. Where are:

• Bilingual easter eggs?
• Your photos used as backgrounds?
• Spanish idioms as section headers?
• Teaching artifacts (old lesson plans, student feedback)?

4. Button Design is Generic

From _sass/_components.scss (lines 33-88):

.btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: var(--border-radius-sm);  // 2px
  font-size: 0.875rem;
  font-weight: 500;
  // ...
}

This button could be on: Amazon, Shopify, WordPress, Medium, your site

What makes a memorable button?

• Unique shape/radius
• Motion on hover (not just color change)
• Sound feedback (subtle)
• Contextual variations

Example of personality:

.btn-primary {
  // Current: flat blue rectangle

  // Alternative 1: Subtle skew
  transform: skewX(-2deg);

  // Alternative 2: Bottom border indicator
  border-bottom: 3px solid var(--color-accent-dark);

  // Alternative 3: Arrow that slides in
  &::after {
    content: "→";
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s;
  }
  &:hover::after {
    opacity: 1;
    transform: translateX(5px);
  }
}

Not saying use these - but your buttons have zero personality.

Missing Visual Elements

1. Photography Integration

You’re a photographer, yet:

• No photo gallery on homepage
• Letratos project buried in project list
• Photography not part of visual identity
• No photos used as section backgrounds/headers

Opportunity:

<!-- Hero Section with your photo -->
<section class="hero" style="background-image: url('your-photo.jpg');">
  <div class="hero-overlay">
    <!-- Content with readable contrast -->
  </div>
</section>

<!-- About section with personal photo -->
<section class="about">
  <div class="about-content">
    <img src="you-teaching.jpg" alt="Teaching in Medellín">
    <p>This is me in 2020, teaching English in Colombia...</p>
  </div>
</section>

Why this matters: It humanizes your portfolio and shows another dimension of who you are.

2. Bilingual Design Elements

You have full Spanish translation, but design doesn’t reflect bilingualism:

• No visual language indicator beyond EN/ES buttons
• No Spanish typography considerations
• No cultural visual references

Ideas:

• Section headers in both languages stacked
• Spanish idiom illustrations
• Color palette inspired by Colombian culture
• Typography that honors Spanish diacritics

3. Educational Artifacts

You’re a 4th-generation educator, yet:

• No teaching photos
• No student work examples (with permission)
• No old lesson plans or handouts
• No visual timeline of teaching career

Opportunity: Create a “Teaching History” visual timeline:

Great-grandfather (1940s) → Grandfather (1970s) → Father (1990s) → You (2010s)
[Photo]                     [Photo]                [Photo]           [Photo]
Teaching: Math              Teaching: Science      Teaching: History Teaching: Languages
Medium: Chalkboard          Medium: Overhead       Medium: Computer  Medium: AI

This is unique, memorable, and meaningful.

Specific Design Improvements

1. Homepage Hero - Add Asymmetry

Current layout (index.html, lines 8-32): Centered, symmetrical, predictable

Improved layout:

<section class="hero hero-asymmetric">
  <div class="hero-left">
    <!-- Large personal photo from Colombia -->
    <img src="brandon-teaching.jpg" alt="Teaching">
  </div>
  <div class="hero-right">
    <span class="hero-eyebrow">4th Generation Educator</span>
    <h1>Brandon JP Lambert</h1>
    <p class="hero-intro">
      I teach languages. I build tools. I use AI to make both better.
      <strong>10 years in classrooms → 15 projects → 1 portfolio</strong>
    </p>
    <div class="hero-stats">
      <div class="stat">
        <span class="stat-number">10</span>
        <span class="stat-label">Years Teaching</span>
      </div>
      <div class="stat">
        <span class="stat-number">15</span>
        <span class="stat-label">AI Projects</span>
      </div>
      <div class="stat">
        <span class="stat-number">B2</span>
        <span class="stat-label">Spanish Level</span>
      </div>
    </div>
    <div class="hero-actions">
      <a href="/work/philosophy/" class="btn btn-primary">My Teaching Approach →</a>
      <a href="/ai-projects/" class="btn btn-secondary">See the Tools</a>
    </div>
  </div>
</section>

Why better:

• Asymmetric layout creates visual interest
• Stats give concrete proof
• Photo humanizes immediately
• Clear value proposition

2. Project Cards - Create Hierarchy

Current: All projects have equal visual weight

Improved: Three tiers

Tier 1: Featured Project (Full Width)

.project-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;

  .project-gallery {
    // Large image carousel
  }

  .project-details {
    // Prominent description, metrics, CTAs
  }
}

Tier 2: Active Projects (2 Column Grid)

.project-active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);

  .project-card {
    // Medium-sized cards
  }
}

Tier 3: Prototypes (3 Column, Compact)

.project-prototype {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);

  .project-card {
    // Compact cards, less detail
  }
}

Impact: Visitors immediately see what’s most important.

3. Color Palette - Add Warmth & Energy

Current palette problems:

• Too corporate
• No warmth
• No energy

Proposed alternative (inspired by your Colombia photography):

:root {
  // Primary (keep some blue, warm it up)
  --color-primary: #2B6CB0;      // Warmer blue
  --color-primary-dark: #1A4971;
  --color-primary-light: #4299E1;

  // Secondary (add warm accent)
  --color-secondary: #DD6B20;    // Warm orange (Colombia sunset)

  // Tertiary (education green)
  --color-tertiary: #38A169;     // Success/growth green

  // Neutrals (warmer)
  --color-ink: #2D3748;          // Softer than pure black
  --color-paper: #FFFAF0;        // Warmer white (slight cream)

  // Supporting
  --color-accent: #9F7AEA;       // Purple for variety
  --color-muted: #718096;        // Keep this
}

Color usage:

• Primary blue: Main CTAs, links
• Secondary orange: Important accents, featured elements
• Tertiary green: Success states, completed projects
• Purple: Hover states, subtle highlights

Why better:

• Warm colors are inviting
• Orange adds energy
• Green connects to education/growth theme
• Still professional, but memorable

4. Typography - Add Personality

Current fonts are fine, but could be more distinctive:

Alternative 1: Embrace the Academic

--font-heading: 'Crimson Pro', 'Crimson Text', Georgia, serif;
--font-body: 'Inter', sans-serif;
--font-accent: 'Playfair Display', serif;  // For callouts

Use Playfair Display for pull quotes, section headers

Alternative 2: Modern Geometric

--font-heading: 'Poppins', sans-serif;  // Geometric, friendly
--font-body: 'Inter', sans-serif;
--font-accent: 'Space Mono', monospace;  // For code/tech elements

Alternative 3: Humanist (warm, approachable)

--font-heading: 'Merriweather', serif;
--font-body: 'Source Sans Pro', sans-serif;
--font-accent: 'Bitter', serif;  // For emphasis

Recommendation: Stick with current, but add typographic variety:

• Use italic Crimson Text for pull quotes
• Add larger font sizes for important statements
• Increase line-height for readability (current: 1.6, try 1.8)

5. Micro-Interactions - Add Delight

Current interactions: Hover color changes, translateY(-2px)

Opportunities:

Navigation Hover

.site-nav a {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
  }

  &:hover::after {
    width: 100%;
  }
}

Project Card Hover

.project-card {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);

    .project-image img {
      transform: scale(1.05);
    }
  }
}

Button Press

.btn {
  &:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  }
}

Small changes, big impact on perceived quality.

UX Issues to Fix

1. Mobile Menu Implementation

Current (_layouts/default.html, lines 85-89):

<button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
  <span></span>
  <span></span>
  <span></span>
</button>

Problems:

• Hamburger icon without label (accessibility issue)
• No visual feedback on menu state
• JavaScript inline in HTML

Better:

<button class="mobile-menu-toggle"
        aria-label="Toggle menu"
        aria-expanded="false"
        aria-controls="mobile-menu">
  <span class="hamburger">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </span>
  <span class="sr-only">Menu</span>
</button>

With CSS animation:

.mobile-menu-toggle {
  &[aria-expanded="true"] {
    .hamburger-line:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-line:nth-child(2) {
      opacity: 0;
    }
    .hamburger-line:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }
  }
}

Animated hamburger → X is expected UX.

2. Language Switcher Visibility

Current (_layouts/default.html, lines 75-82):

<div class="language-toggle">
  <button class="lang-btn" data-lang="en">EN</button>
  <button class="lang-btn" data-lang="es">ES</button>
</div>

Problems:

• Small buttons, easy to miss
• No indication which is active (requires JS)
• No flags or clear visual differentiation

Better:

<div class="language-toggle" role="group" aria-label="Language selection">
  <button class="lang-btn" data-lang="en" aria-pressed="true">
    <span class="flag">🇺🇸</span>
    <span class="lang-label">English</span>
  </button>
  <button class="lang-btn" data-lang="es" aria-pressed="false">
    <span class="flag">🇪🇸</span>
    <span class="lang-label">Español</span>
  </button>
</div>

With styles:

.lang-btn {
  &[aria-pressed="true"] {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
  }
}

Flags + labels + clear active state = better UX.

3. Project Filtering Feedback

Current (ai-projects.html, lines 11-19):

• Buttons change color when active
• No count of filtered results
• No empty state message

Improved:

<div class="filter-controls">
  <button class="filter-btn active" data-filter="all">
    All Projects <span class="count">(15)</span>
  </button>
  <button class="filter-btn" data-filter="Educational">
    Educational <span class="count">(8)</span>
  </button>
  <!-- etc -->
</div>

<div class="filter-results">
  <p>Showing <strong id="results-count">15</strong> projects</p>
</div>

JavaScript updates count when filtering. Users get immediate feedback.

4. Missing Loading States

Current: No loading indicators for:

• Image lazy loading
• Page transitions
• AJAX (if any)

Add:

<div class="project-image">
  <img src="project.jpg"
       loading="lazy"
       alt="..."
       onload="this.classList.add('loaded')">
  <div class="image-loader"></div>
</div>

.project-image {
  position: relative;

  img {
    opacity: 0;
    transition: opacity 0.3s;

    &.loaded {
      opacity: 1;
    }
  }

  .image-loader {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }

  img.loaded ~ .image-loader {
    display: none;
  }
}

Skeleton loaders improve perceived performance.

Design Inspiration Sources

Portfolios with Personality

• Cassie Evans (cassie.codes) - Playful animations, hand-drawn elements
• Lynn Fisher (lynnandtonic.com) - Unique layout each year, creative constraints
• Tatiana Mac (tatianamac.com) - Strong typography, clear voice
• Dan Abramov (overreacted.io) - Content-first, personality in writing

Key Takeaways from Each

• Cassie: Animation can show personality without being distracting
• Lynn: Constraints breed creativity (she redesigns yearly with a theme)
• Tatiana: Strong opinions, strongly held (design reflects confidence)
• Dan: Content quality matters more than flashy design

Your opportunity: Combine educator authenticity with creative visual expression.

Action Plan: Design Improvements

Week 1: Quick Visual Wins (6-8 hours)

Day 1: Color Palette Refresh (2 hours)

• Update _variables.scss with warmer colors
• Test contrast ratios (WebAIM tool)
• Apply to buttons and accents

Day 2: Hero Section Redesign (3 hours)

• Add personal photo
• Create asymmetric layout
• Add stats/metrics
• Rewrite CTA buttons

Day 3: Project Card Hierarchy (2 hours)

• Pick 1 featured project (full width)
• Adjust grid for Active vs Prototype projects
• Add visual differentiation

Week 2: Personality & Polish (8-10 hours)

Day 4: Photography Integration (3 hours)

• Select 5-10 best photos from Letratos
• Add as section backgrounds (with overlay)
• Create photo gallery on homepage
• Link to Letratos prominently

Day 5: Micro-Interactions (2 hours)

• Improve button hover states
• Add nav underline animation
• Animate mobile menu icon
• Polish project card hovers

Day 6: Typography Refinement (2 hours)

• Increase body line-height to 1.8
• Add pull quote styling (large, italic, Crimson)
• Create visual hierarchy in project descriptions
• Add section header treatments

Day 7: UX Fixes (2 hours)

• Fix mobile menu accessibility
• Improve language switcher visibility
• Add loading states for images
• Add filter result counts

Month 1: Major Redesign Elements (16-20 hours)

Week 3: Teaching Timeline (6 hours)

• Design visual timeline of 4 generations
• Source family photos (if available)
• Create illustrated version if no photos
• Add to “About” or “Work” page

Week 4: Bilingual Design Elements (6 hours)

• Add Spanish idioms as section headers
• Create bilingual typography treatments
• Add cultural color references
• Design language-specific layouts

Week 5: Project Case Studies (8 hours)

• Choose top 3 projects
• Create detailed visual case study layout
• Include process images, iterations, metrics
• Design unique layout for each

Success Metrics (Design)

Before/After Comparison

Test: Show 5 people your portfolio for 30 seconds. After, ask:

Current responses (predicted):

• “It’s clean”
• “Professional”
• “Blue and white”
• “Developer portfolio”

Goal responses:

• “The teaching timeline is really cool”
• “I love the photo of you teaching”
• “The orange accent is warm”
• “An educator who codes—that’s unique”

If responses change → design is working.

Specific Metrics

Visual Variety

• Current: All project cards identical
• Goal: 3 distinct card layouts (featured, active, prototype)

Color Usage

• Current: 90% gray/blue, 10% accent
• Goal: 70% neutral, 20% primary, 10% warm accents

Personal Elements

• Current: 1 (avatar)
• Goal: 5+ (photos, teaching artifacts, family history)

Memorable Moments

• Current: 0
• Goal: 3-5 (timeline, photo gallery, unique layout, Easter egg)

Final Thought on Design

Your design isn’t bad. It’s boring.

And “boring” is worse than “bad” because:

• Bad design gets remembered (even negatively)
• Boring design gets forgotten

You have unique stories (4 generations of teaching, learning Spanish, Colombia experience, building 15 projects).

Your design should reflect those stories visually.

Stop designing like you’re applying for a corporate job.

Start designing like you’re starting a conversation.

The technical foundation is solid. Now add personality, warmth, and visual storytelling.

Start with the hero section redesign. You’ll feel the difference immediately.