I created a hand-coded portfolio website designed to present multidisciplinary creative and technical capabilities through a technical blueprint aesthetic. The challenge was in creating a flexible design system that showcases diverse work—photography, graphic design, UX/UI, and code—with cohesive visual identity and excellent responsive performance across all devices.

I designed the site in Figma, then developed it using Jekyll with Liquid, for component-based architecture and Tailwind CSS for systematic styling. The blueprint theme uses deep blue background with light blue typography and yellow accents simulating highlighter markup, reinforced through dotted-line navigation patterns. The typography system pairs Barlow Extra-Bold for bold display with IBM Plex Sans Condensed for efficient body copy and Ubuntu Mono for inline code terms—creating clear visual hierarchy while reinforcing the technical aesthetic. Initial typeface selections ( DIN Condensed Black, Trade Gothic Condensed) were replaced with these Google Fonts alternatives drawn from similar industrial classifications, ensuring accessibility and broad device compatibility.

The design system leverages CSS clamp() functions for fluid typography scaling across breakpoints and custom CSS variables for responsive page margins that proved essential for positioning and layout throughout. Images are optimized with WebP format and fallbacks for performance. I chose this framework for its lightweight simplicity and seamless GitHub Pages hosting without React’s complexity.

Navigation features a custom mobile drawer that animates from bottom-up with an extending line from the arrow icon, avoiding standard hamburger patterns while reinforcing the blueprint aesthetic. Projects organize by discipline (UX/UI & Web, Visual Design, Photography) rather than chronology, allowing flexible positioning for different role applications while quickly demonstrating range to hiring managers.

Led UI design and information architecture for a national veterinary equipment manufacturer, transitioning from a 15-year-old interface to a modern BigCommerce platform. The challenge was serving five distinct user types—veterinarians needing technical specifications, purchasing staff seeking accessible overviews, architects planning facilities, boarders/groomers evaluating equipment, and shelter administrators with budget constraints.

Working collaboratively with an external agency and internal marketing director, I developed the core design system in Sketch: Montserrat typography hierarchy, deep blue with orange/teal accents conveying premium American manufacturing heritage, and a modular card-based layout. I designed the homepage, product category pages, and user-specific landing pages (Veterinary, Boarding, Grooming, Architect, Shelter), tailoring content and imagery to each audience’s needs.

A key UX challenge was the Technical Support page, designed to reduce call volume for two overwhelmed support representatives. I created a self service hub addressing the most common issues such as scale calibration. Placing this along side video tutorials and parts access, customers were able able to resolve issues independently. I advocated for streamlined search UX but had to work within technical constraints requiring dual search bars due to platform integration limitations. The modernized site I designed remains live today, serving customers nationwide.

I designed and coded fixed-width HTML emails for Shor-Line’s subscriber base across veterinary, kennel, grooming, and humane practice segments. I built a reusable component system for buttons and layout blocks to streamline production across multiple campaign types. I varied section backgrounds to maintain visual interest while keeping images minimal (one per section) to improve deliverability and accommodate copy-heavy content. The primary challenge was achieving polished, on-brand design while working within strict email client limitations and outdated rendering engines, particularly Outlook on Windows.

My photography portfolio and lead generation site was built on WordPress from a blank theme, fully customized to serve wedding, senior portrait, commercial, and family photography clients. I hand-coded the custom theme, implementing full-page split hero imagery with centered logo overlay and a custom masonry gallery grid that displayed full uncropped images without gaps or container fills—both technically challenging achievements for mid-2010s CSS and WordPress capabilities.

The architectural approach prioritized visual impact through full-bleed imagery above the fold across all screen sizes, while placing descriptive text content below the fold to support SEO performance without compromising the hero visual. The site leveraged viewport width calculations, strategic floats for responsive layouts, early WebP optimization through plugins, and CDN integration. Strong SEO implementation achieved first-page Google rankings and top-three Google Maps placement. While the site is starting to show its age today, it demonstrates foundational WordPress theme development skills.