Kayla Lake Portfolio

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.

• The work comes first

  A minimal interface around full-bleed galleries keeps Kayla’s UX work at the center.

• Fast images

  Responsive image sizes with blur-up placeholders and lazy loading.

• Touch and keyboard friendly

  Galleries respond to drag, swipe, and arrow keys.

• Monitored in production

  Error tracking and analytics are wired in from launch.

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

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

Built with modern web technologies for performance and maintainability:

Framework

Next.js 16 with App Router

Language

TypeScript for type safety

UI Library

MUI 9 with custom Emotion theme

Styling

Sass modules for gallery layouts

Animations

CSS transitions & transforms (no animation library)

Accessibility

focus-trap-react and DOMPurify on user content

Analytics & Errors

GA4 + Sentry for production monitoring

Hosting

Self-hosted on Hetzner via Coolify

• 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.