Inspiration
As a fashion lover frustrated by fast fashion’s environmental toll, I wanted to create a tool that makes sustainable choices easy. Living in a community focused on eco-conscious living, I saw a gap: clear, accessible guidance for everyday shoppers to align style with their values. I set out to build something that marries editorial-quality design with actionable, data-driven insights.
What it does
The Sustainable Fashion Guide empowers users to make ethical fashion decisions. It rates brands on sustainability metrics, curates eco-friendly shopping categories (secondhand, rental, eco-brands), offers wardrobe management tools (capsule wardrobes, repair guides), and calculates the environmental impact of clothing choices (water saved, carbon reduced, chemicals avoided).
How we built it
I built the project entirely with vanilla HTML, CSS, and JavaScript – no external libraries or CDNs to ensure offline functionality. I used CSS keyframes for animated botanical elements in the hero section, Intersection Observer for scroll-triggered animations (staggered fade-ups for cards), and custom CSS progress rings/bars for brand score visualization. The design follows a mobile-first approach, with responsive grids adapting to mobile/tablet/desktop.
Challenges we ran into
The biggest challenge was creating smooth, performant animations that respect accessibility (e.g., reducing motion for users with preferences). Perfecting the frosted-glass nav transition on scroll also took trial-and-error – balancing visual appeal with cross-browser consistency. Additionally, ensuring count-up animations for the impact calculator felt natural (1.2s duration with easing) required fine-tuning JS logic.
Accomplishments that we're proud of
I’m proud of building a fully offline-capable tool with zero external dependencies – it’s fast, accessible, and works anywhere. The animated elements (progress rings, floating botanicals) enhance the experience without sacrificing performance, and the color palette/typography create an editorial, approachable aesthetic that aligns with the brand’s mission.
What we learned
I deepened my understanding of performance-focused animation with CSS/JS, and how to prioritize accessibility (e.g., honoring prefers-reduced-motion). I also learned to balance visual flair with usability – every animation serves a purpose, not just aesthetics. Most importantly, I gained insight into translating complex sustainability data into intuitive, easy-to-read visuals for everyday users.
What's next for this project
Next, I plan to expand the brand rating database to include more labels, add interactive repair/upcycle tutorials (video embeds with offline support), and introduce a wardrobe tracker to help users log and manage their capsule pieces. I also want to integrate user feedback to refine the impact calculator with more clothing categories and regional sustainability metrics.
Log in or sign up for Devpost to join the conversation.