The Patty Wagon is a modern burger joint with a street-style aesthetic, known for serving high-quality fast food with an urban twist. Their goal was to establish a bold, energetic web presence that would reflect the brand’s rebellious personality and connect with a younger, fast-paced audience, one that values great design as much as great food.
frontend , ux/ui , static
The Patty Wagon
Key Features
- Urban-inspired layout with bold color blocks and strong typography
- Tailwind-based responsive grid system
- All-caps heading system and split sections for visual rhythm
- Structured Decap CMS setup for menu management
- Lazy-loaded WebP images and compressed assets for fast load times
- Semantic HTML and ARIA roles for accessibility
- Built with Eleventy, styled with Tailwind CSS, hosted on Netlify
Role/Services
frontend , ux/ui , static
Date
Jun 5, 2025
I was hired as a freelance developer to bring the brand to life online, building a bold and responsive website from scratch. The goal was to showcase the menu, capture the vibe of a modern street-food brand, and make updates easy via a CMS. The site had to be fast, mobile-first, and designed to stand out in a crowded food scene.
I built the site using 11ty (Eleventy) with Nunjucks templates, styled with Tailwind CSS and daisyUI, and integrated Decap CMS for easy content management. The visual direction focused on high contrast, big type, and structured layout rhythms that reflect the energy of The Patty Wagon’s food and brand voice.
Key contributions included:
- Visual System & Layouts: Developed a modular page structure using alternating black/yellow sections for rhythm and clarity. All content was centered and structured for mobile-first consumption, with consistent iconography and stylized section headings like “01 Burgers” and “02 Dogs”.
- Typography & Styling: Implemented a bold all-caps heading system with strong sans-serif fonts to convey energy and confidence. Used custom Tailwind typography classes to keep styling scalable and readable.
- Menu & CMS Integration: Set up a clean CMS structure via Decap for easy editing of menu categories, pricing, and descriptions — empowering the client to update burgers, dogs, and sides without code.
- Performance & Accessibility: Optimized all assets with
sharp, used semantic HTML5 and ARIA for accessibility, and implemented lazy loading for images. Achieved high scores in Lighthouse for performance, accessibility, and SEO. - Interactive Touches: Subtle hover animations, interactive call-to-actions, and a contact form with clear validation helped complete the modern, fast-food-inspired web experience.
The Patty Wagon website captures the high-energy personality of the brand while staying technically robust and scalable. It successfully blends style and substance — delivering an eye-catching, user-friendly experience that’s fast, mobile-optimized, and easy to manage. A live demo is available to ensure its place in my portfolio regardless of future deployment changes.