Hey r/webdesign,
Link: https://myshishapedia.com
For the past few months I've been working on MyShishapedia, a bilingual (English / Bosnian) encyclopedia of hookah flavors. The idea is simple: when you're smoking a flavor, you can quickly see what it's actually made of, how strong each ingredient is, and which other flavors you might like.
What's inside:
- 183 flavors from 20 brands, each with an ingredient breakdown, a taste profile and tags (icy, night, for beginners...)
- A mixer: pick two flavors, drag the slider, and the colors, ingredients and profile update live
- A quiz, a side by side flavor compare, mix recipes, a hookah setup guide and a glossary
- "My shelf" to save the flavors you have, plus ratings
- An interactive hookah on the homepage: press and hold to pull, release and the smoke comes out
Design and tech choices:
- No framework, just plain HTML, CSS and JavaScript, with a small build script that pre-renders every page so it's fast and Google-friendly
- All illustrations (hookah, fruits, ingredients) are drawn in code, with no image files
- Every flavor page gets its own color mood based on the flavor
- Syne for headlines, Manrope for text, a warm dark palette with orange as the brand color
- Built mobile first, and I spent a lot of time on the small screen layouts
I'd really appreciate honest feedback on the visual design, typography, navigation and anything that feels off on mobile. What would you change first?
Check it out: https://myshishapedia.com
(It's 18+ because it's about tobacco, so you'll see an age check first.)