<title>Alex Morgan — Independent Product Designer</title>
<meta name="description" content="Product designer focused on interfaces, interaction systems and digital experiences for ambitious brands and technology companies.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<!-- Mobile menu toggle -->
<input type="checkbox" id="menu-toggle" class="menu-toggle" aria-hidden="true">
<header class="site-header">
<nav class="nav" aria-label="Main navigation">
<a href="#top" class="nav-logo" aria-label="Alex Morgan home">AM.</a>
<ul class="nav-links">
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="nav-cta">Let's Talk <span class="arrow">↗</span></a>
<label for="menu-toggle" class="menu-btn" aria-label="Open menu">
<span class="menu-btn-text">MENU</span>
<span class="menu-btn-icon"></span>
</label>
</nav>
</header>
<!-- Full-screen mobile menu -->
<div class="mobile-menu" aria-hidden="true">
<label for="menu-toggle" class="mobile-menu-close" aria-label="Close menu">✕</label>
<nav class="mobile-nav">
<a href="#work" class="mobile-link">Work</a>
<a href="#about" class="mobile-link">About</a>
<a href="#services" class="mobile-link">Services</a>
<a href="#contact" class="mobile-link">Contact</a>
<a href="#contact" class="mobile-cta">Let's Talk ↗</a>
</nav>
</div>
<main>
<!-- HERO -->
<section class="hero" aria-label="Hero">
<div class="hero-content">
<p class="hero-eyebrow reveal" style="--delay: 0.1s">Independent Digital Designer</p>
<h1 class="hero-headline reveal" style="--delay: 0.25s">
I design<br>
digital experiences<br>
that feel<br>
<span class="accent-text">impossible</span> to ignore.
</h1>
<p class="hero-support reveal" style="--delay: 0.4s">
Product designer focused on interfaces,<br>
interaction systems and digital experiences<br>
for ambitious brands and technology companies.
</p>
<div class="hero-actions reveal" style="--delay: 0.55s">
<a href="#work" class="btn btn-primary">View Selected Work <span>→</span></a>
<a href="#about-intro" class="btn btn-ghost">Scroll to explore <span>↓</span></a>
</div>
</div>
<!-- 3D Sculpture -->
<div class="hero-visual">
<div class="scene">
<div class="orb">
<div class="orb-core"></div>
<div class="orb-inner">
<div class="ring ring-one"></div>
<div class="ring ring-two"></div>
<div class="ring ring-three"></div>
<div class="ring ring-four"></div>
</div>
<div class="orb-highlight"></div>
<div class="orb-glow"></div>
</div>
</div>
<!-- Floating UI Panels -->
<div class="float-panel panel-1">
<span class="panel-num">01</span>
<span class="panel-label">Product<br>System</span>
</div>
<div class="float-panel panel-2">
<span class="panel-label">Interaction<br>Design</span>
</div>
<div class="float-panel panel-3">
<span class="panel-label">Motion<br>+ 3D</span>
</div>
<div class="float-panel panel-4">
<span class="panel-num">04</span>
<span class="panel-label">Creative<br>Tech</span>
</div>
</div>
<div class="hero-bottom">
<div class="scroll-indicator">
<span>Scroll to explore</span>
<div class="scroll-line"></div>
</div>
<div class="hero-index">01 / 05</div>
</div>
</section>
<!-- ABOUT INTRO -->
<section class="about-intro" id="about-intro">
<div class="section-label">
<span class="accent-line"></span>
About the work
</div>
<h2 class="about-intro-heading">
I turn complex ideas<br>
into simple,<br>
beautiful experiences.
</h2>
</section>
<!-- SELECTED WORK -->
<section class="work" id="work">
<div class="section-header">
<h2 class="section-title">Selected Work</h2>
<p class="section-desc">
A selection of digital products,<br>
brands and experiences I've helped shape.
</p>
</div>
<!-- Project 01 — NOVA (full width) -->
<article class="project project-full project-nova">
<a href="#contact" class="project-link">
<div class="project-meta">
<div class="project-info">
<span class="project-number">01</span>
<h3 class="project-title">NOVA</h3>
<span class="project-category">AI Product Experience</span>
<p class="project-desc">
A next-generation AI workspace designed<br>
around clarity, speed and human interaction.
</p>
</div>
<span class="project-arrow">↗</span>
</div>
<div class="project-visual">
<div class="nova-surface">
<div class="nova-orb"></div>
<div class="nova-card nova-chat">
<div class="chat-header">
<span class="chat-dot"></span>
<span class="chat-dot"></span>
<span class="chat-dot"></span>
</div>
<div class="chat-line"></div>
<div class="chat-line short"></div>
<div class="chat-bubble"></div>
</div>
<div class="nova-card nova-nav">
<div class="nav-item active"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
</div>
<div class="nova-status">
<span class="status-dot"></span>
<span class="status-text">Live</span>
</div>
</div>
</div>
</a>
</article>
<!-- Projects 02 + 03 (asymmetric split) -->
<div class="project-row">
<article class="project project-wide project-arc">
<a href="#contact" class="project-link">
<div class="project-meta">
<div class="project-info">
<span class="project-number">02</span>
<h3 class="project-title">ARC</h3>
<span class="project-category">Fintech / Product Design</span>
<p class="project-desc">
A financial platform redesigned around<br>
confidence, transparency and simplicity.
</p>
</div>
<span class="project-arrow">↗</span>
</div>
<div class="project-visual">
<div class="arc-surface">
<div class="arc-chrome"></div>
<div class="arc-card arc-dashboard">
<div class="dash-header"></div>
<div class="dash-bars">
<div class="bar" style="--h: 60%"></div>
<div class="bar" style="--h: 85%"></div>
<div class="bar" style="--h: 45%"></div>
<div class="bar" style="--h: 70%"></div>
<div class="bar" style="--h: 55%"></div>
</div>
<div class="dash-row"></div>
<div class="dash-row short"></div>
</div>
<div class="arc-card arc-metric">
<span class="metric-label">Balance</span>
<span class="metric-value">$48.2k</span>
</div>
</div>
</div>
</a>
</article>
<article class="project project-narrow project-form">
<a href="#contact" class="project-link">
<div class="project-meta">
<div class="project-info">
<span class="project-number">03</span>
<h3 class="project-title">FORM</h3>
<span class="project-category">Creative Technology</span>
<p class="project-desc">
An experimental digital identity and<br>
interactive experience for a creative studio.
</p>
</div>
<span class="project-arrow">↗</span>
</div>
<div class="project-visual">
<div class="form-surface">
<div class="form-typo">FORM</div>
<div class="form-grid"></div>
<div class="form-shape shape-1"></div>
<div class="form-shape shape-2"></div>
<div class="form-panel"></div>
</div>
</div>
</a>
</article>
</div>
<!-- Project 04 — MOTION (full width) -->
<article class="project project-full project-motion">
<a href="#contact" class="project-link">
<div class="project-meta">
<div class="project-info">
<span class="project-number">04</span>
<h3 class="project-title">MOTION</h3>
<span class="project-category">Design System</span>
<p class="project-desc">
A flexible interface system built for<br>
high-growth digital products.
</p>
</div>
<span class="project-arrow">↗</span>
</div>
<div class="project-visual">
<div class="motion-surface">
<div class="ds-component ds-button">BUTTON</div>
<div class="ds-component ds-card">
<div class="ds-card-header"></div>
<div class="ds-card-body"></div>
</div>
<div class="ds-component ds-input">INPUT</div>
<div class="ds-component ds-modal">
<div class="ds-modal-bar"></div>
<div class="ds-modal-content"></div>
</div>
<div class="ds-component ds-nav">
<span></span><span></span><span></span>
</div>
</div>
</div>
</a>
</article>
</section>
<!-- HORIZONTAL STATEMENT -->
<section class="statement" aria-label="From idea to experience">
<div class="statement-track">
<span class="statement-text">FROM IDEA TO EXPERIENCE.</span>
<span class="statement-text" aria-hidden="true">FROM IDEA TO EXPERIENCE.</span>
<span class="statement-text" aria-hidden="true">FROM IDEA TO EXPERIENCE.</span>
</div>
<div class="statement-line"></div>
</section>
<!-- SERVICES -->
<section class="services" id="services">
<h2 class="section-title">What I do</h2>
<ul class="services-list">
<li class="service-item">
<a href="#contact" class="service-link">
<span class="service-num">01</span>
<span class="service-name">Product Design</span>
<span class="service-arrow">↗</span>
</a>
</li>
<li class="service-item">
<a href="#contact" class="service-link">
<span class="service-num">02</span>
<span class="service-name">UI / UX Design</span>
<span class="service-arrow">↗</span>
</a>
</li>
<li class="service-item">
<a href="#contact" class="service-link">
<span class="service-num">03</span>
<span class="service-name">Design Systems</span>
<span class="service-arrow">↗</span>
</a>
</li>
<li class="service-item">
<a href="#contact" class="service-link">
<span class="service-num">04</span>
<span class="service-name">Interaction Design</span>
<span class="service-arrow">↗</span>
</a>
</li>
<li class="service-item">
<a href="#contact" class="service-link">
<span class="service-num">05</span>
<span class="service-name">Creative Direction</span>
<span class="service-arrow">↗</span>
</a>
</li>
<li class="service-item">
<a href="#contact" class="service-link">
<span class="service-num">06</span>
<span class="service-name">Prototyping</span>
<span class="service-arrow">↗</span>
</a>
</li>
</ul>
</section>
<!-- ABOUT -->
<section class="about" id="about">
<div class="about-label">About</div>
<div class="about-content">
<div class="about-text">
<p class="about-lead">
I'm Alex — an independent product<br>
designer obsessed with turning complex<br>
technology into clear, intuitive and<br>
memorable experiences.
</p>
<p class="about-body">
I work across product strategy,<br>
interaction design, visual systems and<br>
creative technology.
</p>
</div>
<div class="about-portrait" aria-hidden="true">
<div class="portrait-frame">
<div class="portrait-inner"></div>
<div class="portrait-glow"></div>
</div>
</div>
</div>
</section>
<!-- PHILOSOPHY -->
<section class="philosophy">
<div class="philosophy-item">
<h3 class="philosophy-word">Clarity</h3>
<p class="philosophy-desc">Strip away the noise until only the essential remains.</p>
</div>
<div class="philosophy-item">
<h3 class="philosophy-word">Curiosity</h3>
<p class="philosophy-desc">Question every assumption. Explore the edges of possible.</p>
</div>
<div class="philosophy-item">
<h3 class="philosophy-word">Detail</h3>
<p class="philosophy-desc">The difference between good and unforgettable lives here.</p>
</div>
</section>
<!-- EXPERIENCE -->
<section class="experience">
<h2 class="section-title">Experience</h2>
<ul class="timeline">
<li class="timeline-item">
<span class="timeline-date">2025 — Present</span>
<span class="timeline-role">Independent Designer</span>
</li>
<li class="timeline-item">
<span class="timeline-date">2023 — 2025</span>
<span class="timeline-role">Senior Product Designer</span>
</li>
<li class="timeline-item">
<span class="timeline-date">2021 — 2023</span>
<span class="timeline-role">Product Designer</span>
</li>
</ul>
</section>
<!-- CONTACT -->
<section class="contact" id="contact">
<div class="contact-glow" aria-hidden="true"></div>
<p class="contact-label">Have a project in mind?</p>
<h2 class="contact-heading">
Let's make<br>
something<br>
meaningful.
</h2>
<a href="mailto:hello@alexmorgan.design" class="btn btn-primary btn-lg">Start a conversation <span>↗</span></a>
<a href="mailto:hello@alexmorgan.design" class="contact-email">hello@alexmorgan.design</a>
<div class="contact-socials">
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a>
<a href="https://behance.net" target="_blank" rel="noopener noreferrer">Behance</a>
<a href="https://dribbble.com" target="_blank" rel="noopener noreferrer">Dribbble</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer">Instagram</a>
<a href="https://x.com" target="_blank" rel="noopener noreferrer">X</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-left">
<a href="#top" class="footer-logo">AM.</a>
<p class="footer-credit">Designed & built with intention.</p>
</div>
<div class="footer-right">
<p class="footer-copy">© 2026 Alex Morgan</p>
<a href="#top" class="footer-top">Back to top ↑</a>
</div>
</footer>
</body>
</html>
Alex Morgan's Premium UI/UX Portfolio - Grok