PortfolioUI/UX Design

Kayla Lake Portfolio

Year2024

RoleSolo Developer

StatusLive

Portfolio site for a Senior UI/UX Designer at GoDaddy. Drag-to-scroll image galleries, CSS-driven animations, and a hand-crafted MUI theme, built without an animation library to keep the bundle lean.

View Live Site

Galleries

Pages

Lean

Bundle Size

View Live Site

Kayla Lake Portfolio Website — Hero gallery at kayla-lake.com

Overview

Developed a modern portfolio website for Kayla Lake, a Senior UI/UX Designer at GoDaddy, using Next.js 16, React 19, and TypeScript. The site showcases her design work through immersive image galleries with custom drag-scroll interactions and CSS-driven animations, creating an experience that matches the quality of her UX portfolio. Self-hosted on Hetzner via Coolify with Sentry error tracking and GA4 analytics in place.

Interactive Gallery System

The centerpiece of the site is a custom-built gallery system designed to showcase UX design work:

Drag-Scroll GalleriesCustom horizontal galleries for intuitive browsing

Smooth TransitionsCSS transitions and hover effects on gallery items

Lazy LoadingBlur-up placeholders for optimal performance

Touch-FriendlyInteractions optimized for mobile and tablet users

Full-Screen ViewImage viewing with keyboard navigation support

Custom Design System

Created a bespoke visual identity through Material-UI's theming system:

Custom Color PaletteBrand-derived colors matching client aesthetic

Typography SystemCarefully selected font pairings for elegance

Component OverridesCustom buttons, cards, and navigation elements

Visual RhythmConsistent spacing and alignment throughout

Dark Mode SupportAdjusted color values for dark theme

Technical Stack

Built with modern web technologies for performance and maintainability:

FrameworkNext.js 16 with App Router

LanguageTypeScript for type safety

UI LibraryMUI 9 with custom Emotion theme

StylingSass modules for gallery layouts

AnimationsCSS transitions & transforms (no animation library)

Accessibilityfocus-trap-react and DOMPurify on user content

Analytics & ErrorsGA4 + Sentry for production monitoring

HostingSelf-hosted on Hetzner via Coolify

Results

Professional Showcase

Design that reflects the quality of her UX work

Fast Load Times

Optimized images with Next.js performance features

Engaging Experience

Intuitive gallery keeps visitors browsing longer

Mobile-First Design

Great experience across all device sizes

Key Learnings

Material-UI Theming MasteryDeepened my expertise in MUI's theming system, learning to create cohesive design systems through custom palette definitions, component overrides, and responsive breakpoint configurations.

Custom Interaction PatternsDeveloped custom drag-scroll gallery interactions that feel natural on both desktop and touch devices, balancing smooth animations with performance considerations.

Portfolio-Specific UXLearned how to design interfaces that let visual work speak for itself, minimizing UI chrome while maintaining clear navigation and strong calls-to-action.

Image Optimization StrategiesRefined approaches to handling high-resolution portfolio images, implementing lazy loading, blur placeholders, and responsive image sizing for optimal performance.