Embedded Files
about this project
about this project
This website was created to raise awareness for mental health through interactive data visualizations combined with links to support resources. Built in a continuous scroll style, the site allows users to navigate intuitively while engaging with different statistics.
The project was developed in a team of five, with my main responsibility being the complete programming of the website.
Quickfacts
Quickfacts
Role: Programming
Tech: HTML, CSS, PHP, JavaScript (Ajax, jQuery, jQuery UI)
Development time: ~3 days
Pages: Frontpage, Sources
Language: German
Development
Development
Left/Right statistic
1, 2, 3, 4 statistic
up/down and mute buttons
Ajax usage
Project Scope
Project Scope
Interactive, scroll-based web design (endless scroll style)
Multiple data visualizations, switchable by user input
Integrated background music toggle
Links to real-world help resources for mental health
Smooth navigation using keyboard shortcuts
Controls & Challenges
Controls & Challenges
Arrow Up / Down — Scroll one segment up/down
Arrow Left / Right — Switch to previous/next statistic
Keys 1, 2, 3, 4 — Highlight a statistic
M — Toggle music on/off
Implementing interactive visualizations with jQuery & jQuery UI
Creating a seamless endless scroll experience
Designing intuitive keyboard navigation on top of scrolling
Reflection & Learnings
Reflection & Learnings
This project gave me valuable practice in data visualization and interactive web design. I learned how to build engaging interactions using jQuery, how to integrate multimedia elements, and how to combine storytelling with data-driven content in a web format.
Due to the usage of copyrighted material you may need to contact me before gaining access to everything.
Page updated
Google Sites
Report abuse