I built this full stack web app with React, Node, Express, PostgreSQL & Knex. I Designed the SVG's icons in Adobe Illustrator.
Chakras, a guide to balance, reflects my passion and expertise of holistic modalities for wellness.
With this site you can discover remarkable connections between the physical matter of the body and the vibratory nature of spirit within each chakra. This site makes complex topics into user-friendly language with dynamic visual demonstrations.I animated the SVG's within the code as well as with CSS.
Chakras, a guide to balance, reflects my passion and expertise of holistic modalities for wellness.
Chakras are energetic systems. With this site you can discover remarkable connections between the physical matter of the body and the vibratory nature of spirit within each chakra. This site makes complex topics into user-friendly language with dynamic visual demonstrations. A focus of this project is the animation and design of the SVG's. I choose this format of XML-based vector images because you can format them for two-dimensional graphics, they are also responsive and lossless. I designed SVG’s in Adobe illustrator. They are animated for interactivity & animation, both within the SVG code and through CSS.
User Interface:
The site is designed to be a beautiful interface, easy navigation of one page scroll, spacious and calming to anchor the user in the present moment, and engage them with an intentional and informative experience.
Header:
The responsive animation of the yogi’s change as the browser window is resized.
Chakra Modals:
The chakras spin in the said direction of their energy vortex they also have a special vibration hover affect. You’ll notice that the seventh chakra goes to the center, which represents enlightenment. The modals cover the common knowledge of number, description, location, color, element and sound of each chakra.
Yogi Modals:
On hover the yogis color changes based on the associated chakra. These energy centers in the body that can be accessed and balanced through yoga practices of asana, pranayama, meditation, crystals, essential oils and foods. The seven modals provide user guidance for each topic.
Crystal Modals:
This animation emulates the chakras in and out of balance, providing detail information on both states of the system,
touching on the aspects of each energy center as well as the emotional association.
Footer:
The footer is an animated gradient change done in CSS.
Search Function:
You can search by name, or chakra number, which enables the user to simplify content that is displayed to just one chakra.
Backend Database:
All the information in the modals are stored in the database and dynamically rendered.
The SVG designs are stored with the client and the relative paths are added to the data set that came back from the database so that they too can be dynamically rendered, enabling the code to be efficiently reused.