A personality quize site that determines whether you may pass into the Ancient Egyptian afterlife!
Link to project: https://afterlife-personality-quiz.netlify.app/
Tech used: HTML, CSS, JavaScript
I made this project to explore SVG animations as well as see to the extend I could push my vanilla JavaScript and CSS skills.
- User can drag and drop the heart onto the scales which will start the animation
- Underneath the animation a rolling animation will play showing the choices the user has made and the associated values to these choices will be reflected in the above animation (tilting back and forth) as the app shows the user their chosen choices.
- Separate the SVG related code into a file separate to the HTML files
- Clean up and refactoring the code
I learnt a lot about SVG animations and using CSS variables, as well as using setTimeout effectively to create the right effect on the pages. I also learnt more about responsive web design especially in regards to SVG and animations. As well as circumventing browser defaults which may effect the look of the website on different browsers. This was also an experience in UI design, especially surrounding font and animations.
Take a look at these couple examples that I have in my own portfolio:
Cuisine Restaurant: https://github.com/divi4/cuisine-restaurant
Restaurant Demo: https://github.com/divi4/demo-restaurant
Source (Mobile-first responsive website): https://github.com/divi4/source