UX/UI Designer Portfolio

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import Lenis from 'lenis';

// ── Plugin registration ────────────────────────────────────────
gsap.registerPlugin(ScrollTrigger, SplitText);

// ── Demo Shell ─────────────────────────────────────────────────
initDemoShell({
  title: 'UX/UI Designer Portfolio',
  category: 'pages',
  tech: ['gsap', 'lenis', 'scrolltrigger', 'splittext', 'view-transitions-api']
});

// ── Reduced motion ─────────────────────────────────────────────
let reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

window.addEventListener('motion-preference', (e) => {
  reduced = e.detail.reduced;
  document.documentElement.classList.toggle('reduced-motion', reduced);
  ScrollTrigger.refresh();
});

const dur = (d) => reduced ? 0 : d;

// ── Lenis smooth scroll ────────────────────────────────────────
const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

// ═══════════════════════════════════════════════════════════════
// HERO ANIMATIONS
// ═══════════════════════════════════════════════════════════════

function initHero() {
  const nameEl = document.querySelector('.hero__name');
  if (!nameEl) return;

  // SplitText — char by char animation
  const split = new SplitText(nameEl, { type: 'chars', charsClass: 'char' });

  const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });

  tl.from(split.chars, {
    y: 60,
    opacity: 0,
    duration: dur(1),
    stagger: 0.03,
  })
  .to('.hero__eyebrow', {
    opacity: 1,
    duration: dur(0.6),
  }, '-=0.5')
  .to('.hero__role', {
    opacity: 1,
    y: 0,
    duration: dur(0.5),
  }, '-=0.3')
  .to('.hero__tagline', {
    opacity: 1,
    duration: dur(0.5),
  }, '-=0.2')
  .to('.hero__cta', {
    opacity: 1,
    duration: dur(0.4),
  }, '-=0.1')
  .to('.hero__scroll-hint', {
    opacity: 1,
    duration: dur(0.4),
  }, '-=0.1');

  // Parallax on background deco circles
  if (!reduced) {
    gsap.to('.deco-circle--1', {
      y: -80,
      ease: 'none',
      scrollTrigger: {
        trigger: '.hero',
        start: 'top top',
        end: 'bottom top',
        scrub: 1.5,
      },
    });

    gsap.to('.deco-circle--2', {
      y: -40,
      ease: 'none',
      scrollTrigger: {
        trigger: '.hero',
        start: 'top top',
        end: 'bottom top',
        scrub: 2,
      },
    });
  }
}

// ═══════════════════════════════════════════════════════════════
// ROTATING WORDS
// ═══════════════════════════════════════════════════════════════

function initRotatingWords() {
  const wordEl = document.getElementById('rotating-word');
  if (!wordEl) return;

  const words = ['product', 'interaction', 'visual', 'systems'];
  let currentIndex = 0;

  function rotateWord() {
    currentIndex = (currentIndex + 1) % words.length;

    if (reduced) {
      wordEl.textContent = words[currentIndex];
      return;
    }

    gsap.timeline()
      .to(wordEl, {
        opacity: 0,
        y: -10,
        duration: 0.3,
        ease: 'power2.in',
        onComplete: () => {
          wordEl.textContent = words[currentIndex];
          gsap.set(wordEl, { y: 12 });
        },
      })
      .to(wordEl, {
        opacity: 1,
        y: 0,
        duration: 0.4,
        ease: 'power3.out',
      });
  }

  // Start rotating after hero animation finishes
  setTimeout(() => {
    setInterval(rotateWord, 2500);
  }, reduced ? 0 : 2000);
}

// ═══════════════════════════════════════════════════════════════
// SECTION HEADING REVEALS
// ═══════════════════════════════════════════════════════════════

function initHeadingReveals() {
  const headings = document.querySelectorAll('.reveal-heading');

  headings.forEach((heading) => {
    gsap.to(heading, {
      opacity: 1,
      y: 0,
      duration: dur(0.8),
      ease: 'power3.out',
      scrollTrigger: {
        trigger: heading,
        start: 'top 85%',
        toggleActions: 'play none none none',
      },
    });
  });
}

// ═══════════════════════════════════════════════════════════════
// WORK CARDS
// ═══════════════════════════════════════════════════════════════

function initWorkCards() {
  const cards = document.querySelectorAll('.case-card');

  cards.forEach((card, i) => {
    gsap.to(card, {
      opacity: 1,
      y: 0,
      duration: dur(0.7),
      ease: 'power3.out',
      delay: reduced ? 0 : (i % 2) * 0.12,
      scrollTrigger: {
        trigger: card,
        start: 'top 88%',
        toggleActions: 'play none none none',
      },
    });
  });
}

// ═══════════════════════════════════════════════════════════════
// PROCESS STEPS
// ═══════════════════════════════════════════════════════════════

function initProcessSteps() {
  const steps = document.querySelectorAll('.process-step');
  if (!steps.length) return;

  gsap.to(steps, {
    opacity: 1,
    y: 0,
    duration: dur(0.7),
    stagger: reduced ? 0 : 0.12,
    ease: 'power3.out',
    scrollTrigger: {
      trigger: '.process-row',
      start: 'top 80%',
      toggleActions: 'play none none none',
    },
  });
}

// ═══════════════════════════════════════════════════════════════
// ABOUT SECTION
// ═══════════════════════════════════════════════════════════════

function initAbout() {
  const image = document.querySelector('.about-image');
  const content = document.querySelector('.about-content');

  if (image) {
    gsap.to(image, {
      opacity: 1,
      x: 0,
      duration: dur(0.9),
      ease: 'power3.out',
      scrollTrigger: {
        trigger: '.about-layout',
        start: 'top 80%',
        toggleActions: 'play none none none',
      },
    });
  }

  if (content) {
    gsap.to(content, {
      opacity: 1,
      x: 0,
      duration: dur(0.9),
      ease: 'power3.out',
      delay: reduced ? 0 : 0.15,
      scrollTrigger: {
        trigger: '.about-layout',
        start: 'top 80%',
        toggleActions: 'play none none none',
      },
    });
  }

  // Skill pills stagger
  const pills = document.querySelectorAll('.skill-pill');
  gsap.from(pills, {
    opacity: 0,
    scale: 0.85,
    duration: dur(0.4),
    stagger: reduced ? 0 : 0.04,
    ease: 'back.out(1.5)',
    scrollTrigger: {
      trigger: '.about-skills',
      start: 'top 85%',
      toggleActions: 'play none none none',
    },
  });
}

// ═══════════════════════════════════════════════════════════════
// FOOTER ANIMATION
// ═══════════════════════════════════════════════════════════════

function initFooter() {
  const headline = document.querySelector('.footer__headline');
  if (!headline) return;

  gsap.to(headline, {
    opacity: 1,
    y: 0,
    duration: dur(1),
    ease: 'power3.out',
    scrollTrigger: {
      trigger: '.footer',
      start: 'top 85%',
      toggleActions: 'play none none none',
    },
  });
}

// ═══════════════════════════════════════════════════════════════
// CASE STUDY PROJECT DATA
// ═══════════════════════════════════════════════════════════════

const projectData = {
  finvault: {
    title: 'FinVault',
    badge: 'Fintech',
    year: '2024',
    color: '#d4956a',
    summary: 'A personal finance dashboard redesign focused on reducing cognitive load and building financial confidence for everyday users.',
    challenge: 'FinVault\'s existing dashboard overwhelmed users with dense data visualizations and unclear information hierarchy, leading to a 68% feature abandonment rate and low DAU retention.',
    approach: 'I led a 3-month discovery sprint: 24 user interviews, diary studies with 8 participants, and a competitive audit of 14 fintech apps. The redesign introduced progressive disclosure, a "financial health score" to anchor the experience, and contextual micro-goals that guided users toward positive behaviors.',
    outcomes: [
      { label: 'Engagement', value: '+47% DAU', desc: 'Daily active users within 90 days of launch' },
      { label: 'Task Success', value: '91%', desc: 'Up from 54% on core financial planning tasks' },
      { label: 'Satisfaction', value: '4.7★', desc: 'App Store rating after redesign (from 3.2)' },
    ],
  },
  luma: {
    title: 'Luma',
    badge: 'Mobile App',
    year: '2024',
    color: '#9b8fbe',
    summary: 'AI-powered mood journaling app that adapts its interface — colors, typography, content — to the user\'s emotional state in real time.',
    challenge: 'Most journaling apps feel clinical or one-size-fits-all. The brief was to design an experience that felt genuinely empathetic: one that acknowledged where users were emotionally and met them there without being intrusive.',
    approach: 'I prototyped 6 different adaptive UI models and ran moderated usability sessions with 18 users across diverse emotional states. The final design uses a gentle color temperature shift, typographic weight changes, and prompt cadence adjustment to create a sense of co-presence without AI "performance."',
    outcomes: [
      { label: 'Retention', value: '+61%', desc: '30-day retention vs. category benchmark' },
      { label: 'Sessions/week', value: '5.2', desc: 'Average weekly journal sessions per user' },
      { label: 'NPS', value: '72', desc: 'Net Promoter Score at 60-day mark' },
    ],
  },
  forma: {
    title: 'Forma DS',
    badge: 'Design System',
    year: '2023',
    color: '#6a9e91',
    summary: 'A comprehensive design system built for a B2B SaaS platform serving 40k+ users across 12 distinct product areas with 3 engineering teams.',
    challenge: 'The platform had accumulated 7 years of UI debt: 4 inconsistent component libraries, 200+ one-off colors, and 3 separate icon sets. Engineers were re-building the same components independently and design reviews were bottlenecks.',
    approach: 'I audited all existing UI, ran a component inventory workshop with both design and engineering leads, and established token architecture from scratch. The system was built in Figma with full Storybook parity, documented for both designers and developers, with WCAG AA as a baseline requirement for every component.',
    outcomes: [
      { label: 'Build Speed', value: '3× faster', desc: 'Feature UI implementation time reduced' },
      { label: 'Components', value: '180+', desc: 'Fully documented, accessible components' },
      { label: 'Adoption', value: '100%', desc: 'All 3 engineering teams on Forma DS by Q4' },
    ],
  },
  wayfound: {
    title: 'Wayfound',
    badge: 'Travel & Navigation',
    year: '2023',
    color: '#b8956e',
    summary: 'Reimagining travel discovery for solo adventurers — from inspiration to itinerary in a single, fluid, AI-assisted experience.',
    challenge: 'Planning a solo trip involves 8–12 different apps and websites on average. Wayfound wanted to collapse this fragmented experience into one coherent product, without losing the serendipitous "discovery" quality that makes travel planning enjoyable.',
    approach: 'Through guerrilla research at hostels and solo travel forums, I mapped 5 distinct traveler personas and their planning rituals. The UX centers on a "wanderboard" that feels like a digital pin-board — expansive and non-linear — that progressively structures into a day-by-day itinerary as the user\'s intent becomes more defined.',
    outcomes: [
      { label: 'Time Saved', value: '4.2 hrs', desc: 'Average planning time reduction per trip' },
      { label: 'Bookings', value: '+38%', desc: 'Conversion to actual bookings vs. control' },
      { label: 'Users', value: '15k', desc: 'Beta waitlist signups before launch' },
    ],
  },
};

// ═══════════════════════════════════════════════════════════════
// VIEW TRANSITIONS + CASE STUDY OVERLAY
// ═══════════════════════════════════════════════════════════════

function initCaseStudyOverlay() {
  const overlay = document.getElementById('detailOverlay');
  const closeBtn = document.getElementById('detailClose');
  const cards = document.querySelectorAll('.case-card');

  if (!overlay || !closeBtn) return;

  const supportsVT = typeof document.startViewTransition === 'function';

  function populateOverlay(project) {
    const data = projectData[project];
    if (!data) return;

    // Hero image
    const detailImage = document.getElementById('detailImage');
    detailImage.style.background = data.color;
    detailImage.innerHTML = `
      <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0.3;">
        <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
          <rect x="10" y="20" width="60" height="40" rx="6" fill="white"/>
          <rect x="20" y="30" width="40" height="6" rx="3" fill="${data.color}"/>
          <rect x="20" y="42" width="24" height="4" rx="2" fill="${data.color}80"/>
        </svg>
      </div>
    `;

    // Text content
    document.getElementById('detailMeta').innerHTML = `
      <span class="badge">${data.badge}</span>
      <span class="case-card__year">${data.year}</span>
    `;
    document.getElementById('detailTitle').textContent = data.title;
    document.getElementById('detailSummary').textContent = data.summary;
    document.getElementById('detailChallenge').textContent = data.challenge;
    document.getElementById('detailApproach').textContent = data.approach;

    if (data.outcomes) {
      ['detailOutcome1', 'detailOutcome2', 'detailOutcome3'].forEach((id, i) => {
        const el = document.getElementById(id);
        if (el && data.outcomes[i]) {
          el.innerHTML = `
            <div style="font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem;">${data.outcomes[i].label}</div>
            <div style="font-family:var(--font-serif);font-size:1.6rem;color:var(--accent);margin-bottom:0.3rem;">${data.outcomes[i].value}</div>
            <div style="font-size:0.85rem;color:var(--muted);">${data.outcomes[i].desc}</div>
          `;
        }
      });
    }
  }

  function openOverlay(project) {
    populateOverlay(project);

    const doOpen = () => {
      document.body.classList.add('detail-open');
      overlay.classList.add('is-open');
      overlay.setAttribute('aria-hidden', 'false');
      overlay.scrollTop = 0;
      document.body.style.overflow = 'hidden';
      lenis.stop();
      closeBtn.focus();
    };

    if (supportsVT && !reduced) {
      document.startViewTransition(doOpen);
    } else {
      doOpen();
    }
  }

  function closeOverlay() {
    const doClose = () => {
      document.body.classList.remove('detail-open');
      overlay.classList.remove('is-open');
      overlay.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
      lenis.start();
    };

    if (supportsVT && !reduced) {
      document.startViewTransition(doClose);
    } else {
      doClose();
    }
  }

  // Attach card click handlers
  cards.forEach((card) => {
    card.addEventListener('click', () => {
      const project = card.dataset.project;
      if (project) openOverlay(project);
    });

    // Keyboard accessibility
    card.setAttribute('tabindex', '0');
    card.setAttribute('role', 'button');
    card.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        const project = card.dataset.project;
        if (project) openOverlay(project);
      }
    });
  });

  // Close button
  closeBtn.addEventListener('click', closeOverlay);

  // ESC key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && overlay.classList.contains('is-open')) {
      closeOverlay();
    }
  });

  // Click outside inner content to close
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) closeOverlay();
  });
}

// ═══════════════════════════════════════════════════════════════
// INIT
// ═══════════════════════════════════════════════════════════════

function init() {
  initHero();
  initRotatingWords();
  initHeadingReveals();
  initWorkCards();
  initProcessSteps();
  initAbout();
  initFooter();
  initCaseStudyOverlay();

  // Refresh ScrollTrigger after all setup
  ScrollTrigger.refresh();
}

// Run after DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sofia Reyes — UX/UI Designer Portfolio</title>
  <link rel="stylesheet" href="style.css" />
  <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
</head>
<body>

  <!-- ═══════════════════════════════════════════
       HERO
  ═══════════════════════════════════════════ -->
  <section class="hero" id="hero">
    <div class="hero__inner">
      <div class="hero__eyebrow">
        <span class="year-badge">© 2024</span>
        <span class="hero__location">Based in Barcelona</span>
      </div>

      <h1 class="hero__name" aria-label="Sofia Reyes">
        Sofia<br/>Reyes
      </h1>

      <div class="hero__role">
        <span class="role__prefix">UX/UI &amp;</span>
        <span class="role__word" id="rotating-word" aria-live="polite">product</span>
        <span class="role__suffix">designer</span>
      </div>

      <p class="hero__tagline">
        Crafting interfaces that feel inevitable —<br/>
        where clarity meets craft.
      </p>

      <div class="hero__cta">
        <a href="#work" class="btn btn--primary">View Selected Work</a>
        <a href="#about" class="btn btn--ghost">About Me</a>
      </div>
    </div>

    <div class="hero__scroll-hint" aria-hidden="true">
      <span class="scroll-line"></span>
      <span class="scroll-label">Scroll</span>
    </div>

    <div class="hero__bg-deco" aria-hidden="true">
      <div class="deco-circle deco-circle--1"></div>
      <div class="deco-circle deco-circle--2"></div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       SELECTED WORK
  ═══════════════════════════════════════════ -->
  <section class="section section--work" id="work">
    <div class="section__inner">
      <header class="section__header">
        <span class="section__label">Selected Work</span>
        <h2 class="section__title reveal-heading">Case Studies</h2>
      </header>

      <div class="work-grid">

        <!-- Card 1 — large -->
        <article class="case-card case-card--large" data-project="finvault" data-color="#c17b3c">
          <div class="case-card__image" style="--card-color: #d4956a;">
            <div class="case-card__image-inner">
              <div class="mockup mockup--dashboard">
                <div class="mockup__bar"></div>
                <div class="mockup__row"></div>
                <div class="mockup__row mockup__row--short"></div>
                <div class="mockup__chart"></div>
              </div>
            </div>
          </div>
          <div class="case-card__body">
            <div class="case-card__meta">
              <span class="badge">Fintech</span>
              <span class="case-card__year">2024</span>
            </div>
            <h3 class="case-card__title">FinVault</h3>
            <p class="case-card__desc">A personal finance dashboard redesign focused on reducing cognitive load and building financial confidence.</p>
            <span class="case-card__cta">View Case Study →</span>
          </div>
        </article>

        <!-- Card 2 — small -->
        <article class="case-card case-card--small" data-project="luma" data-color="#7a6b9e">
          <div class="case-card__image" style="--card-color: #9b8fbe;">
            <div class="case-card__image-inner">
              <div class="mockup mockup--mobile">
                <div class="mockup__screen">
                  <div class="mockup__app-row"></div>
                  <div class="mockup__app-grid">
                    <div class="mockup__app-tile"></div>
                    <div class="mockup__app-tile"></div>
                    <div class="mockup__app-tile"></div>
                    <div class="mockup__app-tile"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="case-card__body">
            <div class="case-card__meta">
              <span class="badge">Mobile App</span>
              <span class="case-card__year">2024</span>
            </div>
            <h3 class="case-card__title">Luma</h3>
            <p class="case-card__desc">AI-powered mood journaling app that adapts its interface to the user's emotional state.</p>
            <span class="case-card__cta">View Case Study →</span>
          </div>
        </article>

        <!-- Card 3 — small -->
        <article class="case-card case-card--small" data-project="forma" data-color="#4a7b6e">
          <div class="case-card__image" style="--card-color: #6a9e91;">
            <div class="case-card__image-inner">
              <div class="mockup mockup--web">
                <div class="mockup__nav-bar"></div>
                <div class="mockup__hero-block"></div>
                <div class="mockup__content-cols">
                  <div class="mockup__col"></div>
                  <div class="mockup__col"></div>
                  <div class="mockup__col"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="case-card__body">
            <div class="case-card__meta">
              <span class="badge">Design System</span>
              <span class="case-card__year">2023</span>
            </div>
            <h3 class="case-card__title">Forma DS</h3>
            <p class="case-card__desc">A comprehensive design system built for a B2B SaaS platform serving 40k+ users across 12 product areas.</p>
            <span class="case-card__cta">View Case Study →</span>
          </div>
        </article>

        <!-- Card 4 — large -->
        <article class="case-card case-card--large" data-project="wayfound" data-color="#c17b3c">
          <div class="case-card__image" style="--card-color: #b8956e;">
            <div class="case-card__image-inner">
              <div class="mockup mockup--map">
                <div class="mockup__map-bg">
                  <div class="mockup__pin mockup__pin--1"></div>
                  <div class="mockup__pin mockup__pin--2"></div>
                  <div class="mockup__pin mockup__pin--3"></div>
                  <div class="mockup__route"></div>
                </div>
                <div class="mockup__map-card"></div>
              </div>
            </div>
          </div>
          <div class="case-card__body">
            <div class="case-card__meta">
              <span class="badge">Travel &amp; Navigation</span>
              <span class="case-card__year">2023</span>
            </div>
            <h3 class="case-card__title">Wayfound</h3>
            <p class="case-card__desc">Reimagining travel discovery for solo adventurers — from inspiration to itinerary in a single, fluid experience.</p>
            <span class="case-card__cta">View Case Study →</span>
          </div>
        </article>

      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       PROCESS
  ═══════════════════════════════════════════ -->
  <section class="section section--process" id="process">
    <div class="section__inner">
      <header class="section__header">
        <span class="section__label">How I Work</span>
        <h2 class="section__title reveal-heading">The Process</h2>
      </header>

      <div class="process-row">
        <div class="process-step" data-step="01">
          <div class="process-step__number">01</div>
          <div class="process-step__connector" aria-hidden="true"></div>
          <h3 class="process-step__title">Research</h3>
          <p class="process-step__desc">Interviews, competitive audits, analytics deep-dives. I build empathy before pixels.</p>
        </div>

        <div class="process-step" data-step="02">
          <div class="process-step__number">02</div>
          <div class="process-step__connector" aria-hidden="true"></div>
          <h3 class="process-step__title">Define</h3>
          <p class="process-step__desc">Synthesizing insights into problem statements, journey maps, and success metrics.</p>
        </div>

        <div class="process-step" data-step="03">
          <div class="process-step__number">03</div>
          <div class="process-step__connector" aria-hidden="true"></div>
          <h3 class="process-step__title">Design</h3>
          <p class="process-step__desc">Wireframes to high-fidelity prototypes. Iterating with users and engineering partners.</p>
        </div>

        <div class="process-step" data-step="04">
          <div class="process-step__number">04</div>
          <div class="process-step__connector" aria-hidden="true"></div>
          <h3 class="process-step__title">Deliver</h3>
          <p class="process-step__desc">Spec'd handoffs, design systems, and post-launch measurement to close the loop.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       ABOUT
  ═══════════════════════════════════════════ -->
  <section class="section section--about" id="about">
    <div class="section__inner about-layout">

      <div class="about-image">
        <div class="about-image__frame">
          <div class="about-image__placeholder">
            <!-- Decorative portrait placeholder -->
            <div class="portrait-bg"></div>
            <div class="portrait-shape portrait-shape--head"></div>
            <div class="portrait-shape portrait-shape--body"></div>
          </div>
          <div class="about-image__tag">
            <span class="tag-dot"></span>
            Available for work
          </div>
        </div>
      </div>

      <div class="about-content">
        <header class="section__header section__header--left">
          <span class="section__label">About</span>
          <h2 class="section__title reveal-heading">The Designer</h2>
        </header>

        <p class="about-bio">
          I'm Sofia — a UX/UI designer with 7 years of experience turning complex systems into clear, delightful products. I've worked with early-stage startups and enterprise teams across fintech, health, and productivity.
        </p>
        <p class="about-bio about-bio--secondary">
          My work lives at the intersection of research and craft. I believe the best interfaces are the ones users never have to think about — they just work.
        </p>

        <div class="about-skills">
          <span class="skill-pill">UX Research</span>
          <span class="skill-pill">Interaction Design</span>
          <span class="skill-pill">Design Systems</span>
          <span class="skill-pill">Figma</span>
          <span class="skill-pill">Prototyping</span>
          <span class="skill-pill">User Testing</span>
          <span class="skill-pill">Accessibility</span>
          <span class="skill-pill">Motion Design</span>
          <span class="skill-pill">Visual Design</span>
          <span class="skill-pill">Product Strategy</span>
        </div>

        <div class="about-stats">
          <div class="stat">
            <span class="stat__number">7+</span>
            <span class="stat__label">Years Experience</span>
          </div>
          <div class="stat">
            <span class="stat__number">40+</span>
            <span class="stat__label">Projects Shipped</span>
          </div>
          <div class="stat">
            <span class="stat__number">12</span>
            <span class="stat__label">Happy Clients</span>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       FOOTER / CONTACT
  ═══════════════════════════════════════════ -->
  <footer class="footer" id="contact">
    <div class="footer__inner">
      <div class="footer__availability">
        <span class="avail-dot"></span>
        Open for projects
      </div>
      <h2 class="footer__headline">
        Let's make<br/>
        something<br/>
        <em>remarkable.</em>
      </h2>
      <a href="mailto:sofia@example.com" class="footer__email">
        sofia@example.com
      </a>
      <div class="footer__links">
        <a href="#" class="footer__link">LinkedIn</a>
        <a href="#" class="footer__link">Dribbble</a>
        <a href="#" class="footer__link">Read.cv</a>
      </div>
      <div class="footer__bottom">
        <span>Sofia Reyes</span>
        <span>Barcelona, Spain</span>
        <span>2024</span>
      </div>
    </div>
  </footer>

  <!-- ═══════════════════════════════════════════
       CASE STUDY DETAIL OVERLAY
  ═══════════════════════════════════════════ -->
  <div class="detail-overlay" id="detailOverlay" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Case Study Detail">
    <button class="detail-overlay__close" id="detailClose" aria-label="Close case study">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
    </button>

    <div class="detail-overlay__inner">
      <div class="detail-hero">
        <div class="detail-hero__image" id="detailImage">
          <!-- Filled dynamically -->
        </div>
        <div class="detail-hero__content">
          <div class="case-card__meta" id="detailMeta"></div>
          <h2 class="detail-title" id="detailTitle"></h2>
          <p class="detail-summary" id="detailSummary"></p>
        </div>
      </div>

      <div class="detail-body">
        <div class="detail-section">
          <h3 class="detail-section__title">The Challenge</h3>
          <p class="detail-section__text" id="detailChallenge"></p>
        </div>
        <div class="detail-section">
          <h3 class="detail-section__title">My Approach</h3>
          <p class="detail-section__text" id="detailApproach"></p>
        </div>
        <div class="detail-outcomes">
          <div class="outcome" id="detailOutcome1"></div>
          <div class="outcome" id="detailOutcome2"></div>
          <div class="outcome" id="detailOutcome3"></div>
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="script.js"></script>
</body>
</html>