🌱 Web for the Community garden NGO Strelak in Hradec Kralove 🌱
- Draft design 🎨
- Implement modal window 💻
- Add registration forms 👩🌾
- Link registration forms to Netlify forms 📋
- Connect the form submission to the NGO email 📫
- Store collected data in Supabase ⚡
- Clean up the responsive version 📱
- Add form validations ✅
- Add cute animations 🌳
- Cleanup and refactor 🧹
- TailwindCSS for styling (with UI kit)
- Headless UI for the modal window
- Supabase for data storage
- Figma for the design
- Color Shades Generator for creating 10 shades of yellow
- Vuelidate for form validation
- GSAP for animations
Disclaimer: These are only few of a whole bunch of amazing technologies that helped me build this website. Refer to the package.json for the full list ;)
- Netlify forms + automation
- GSAP animations on load and on hover
- Vue 3 slots
- Implementing form validation in nested components
- Vuelidate for Vue 3 (nested components)
- Running GSAP animations in Vue (composition API)
On a slightly more complex project, you might want to implement a store. For Vue 3, this is done with Pinia.