Next.js site using css modules with a mix of css and framer motion animations.
VIEW LIVE: https://brandicameron.com
- First time requiring multiple api fetches, therefore first time using Promise.all.
- Learned about using aria-live='polite' to prompt screen readers to announce different aria-labels when a toggle button is clicked. (used in about section)
- It was fun figuring out how to code the css rain/snow, randomizing the drops placement and animation delays using a random number function in inline css.
- First time creating a dark mode theme — created using css variables. (dark mode kicks in after dusk in Nashville on the index/weather banner section to indicate nighttime.)
- Dug into Framer Motion a bit more, still a lot to learn there.
- Learned how to add and delete items from an array in firestore database.
- Thanks to a very helpful Reddit user, was alerted to a security hole with Firebase (ability for people to sign up for an account even if there is no sign up form in the UI by issuing an HTTP POST request to the Auth endpoint) - learned how to tighten up my database security rules to only allow a particular user to write data.
Graphics were customized in Illustrator using vector graphics from the following:
Cloud Graphics: rawpixel.com from freepik.com
Lightning Graphic: Creative Stall from NounProject.com
Moon Graphic: Pundimon from NounProject.com
Koala Graphic: Loritas Medina from NounProject.com
Resume Graphic: Reza Nur from NounProject.com
Brandi Cameron