← Back to portfolio

Louis VuittonAccessible front-end.

Duration6 weeks TypeFront-end & accessibility ToolsHTML, CSS, JavaScript
Louis Vuitton coded homepage: Holiday Gifts hero carousel Louis Vuitton perfumes gift page Louis Vuitton product detail page: Attrape-Rêves
Three pages, coded to WCAG accessibility standards. Fig. 05

For this project, I had to recreate pages from the official Louis Vuitton website in code, but with a twist: accessibility had to be the main focus, not an afterthought. So on top of just matching the visual design, I also had to make sure it actually worked well for people using screen readers or other assistive tech, following WCAG guidelines the whole way through.

Most of the work was in writing clean, semantic HTML and CSS, and making sure ARIA labels were actually doing something useful instead of just being there for show. I also tested the site with a screen reader myself, which honestly changed how I think about front-end development, you notice accessibility issues way faster once you're navigating your own site blind.

On the JavaScript side I built a bunch of the interactive stuff you'd expect from a real e-commerce site: a hamburger menu, an image carousel, a dark mode toggle, small hover and micro-interactions, and a reduced motion setting for people who'd rather not have everything animating at them.

I also spent a lot of time getting the visual details right: layout, typography, spacing, scroll animations, hover effects, while making sure none of it got in the way of performance or accessibility. It was a good exercise in balancing "looks nice" with "actually works for everyone."

Overall this project pushed my HTML, CSS, and JS skills forward a lot, but the bigger lesson was realizing accessibility isn't something you bolt on at the end. It has to be part of the process from the start.