Moda Demonstration project
Atelier Norte — wool fashion e-commerce
A gallery-white store for a Porto slow-fashion label: working cart with slide-in drawer, EUR totals and free-shipping logic, collection filtering, an editorial lookbook and a full size guide.
feitura.pt/demo/atelier-norte — Live
A Porto atelier making one wool collection a year needs a store as restrained as the clothes: stark white, oversized type, no marketplace clutter. It must sell six pieces with a frictionless cart and checkout, tell the story of the mills, and present sizing precisely enough to cut returns.
What's inside
- Working cart: add, remove and adjust quantities in a slide-in drawer
- Live EUR totals with free-shipping threshold and progress hint
- Two-step checkout flow ending in an order confirmation (demo sink)
- Collection grid filterable by outerwear, knitwear and tailoring
- Abstract fabric art direction — every 'product photo' is pure CSS
- Tabbed editorial lookbook with three styled looks
- Size guide accordion with per-category measurement tables
- Mobile-first layout recomposing at tablet and desktop widths
- Reduced-motion and keyboard-focus support throughout
Build log
- Art direction: gallery-white system, Archivo 900 display scale, hairline grid
- Hero composition, marquee strip and sticky header with cart entry point
- CSS fabric swatches — six gradient compositions, one palette per garment
- Collection grid with category filters and product cards
- Cart state, drawer slide-in, quantity controls and EUR totals
- Checkout steps, free-shipping logic and order confirmation sink
- Lookbook tabs, atelier manifesto and size guide accordion
- Responsive pass at 768/1100, contrast audit, reduced-motion and focus states
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript
- Tailwind CSS
Lighthouse
95
Performance
97
Accessibility
100
Best practices
100
SEO