Skip to main content
Back to Projects
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.

5
Galleries
8
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.

Results

Portfolio presentation

A layout that keeps Kayla’s UX work at the center.

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

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

Lessons

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.

More Projects

Focus Graphics

Focus Graphics

Complex B2B workflow platform spanning quoting, proofs, invoicing, payments, and production

California Reflections HOA

California Reflections HOA

Community platform with a markdown CMS, resident newsletter, and document library

PrismCV

PrismCV

Solo SaaS for ATS scoring, AI tailoring, job aggregation, and application tracking

View All Projects

Need a website that does useful work?

I build maintainable sites that pair a clear public experience with the publishing, communication, or lead workflows behind it.

View ServicesGet in Touch