Yggdrasil is an elegant, but simple site designed to show off the equally elegant brand.
Link to project: https://yggdrasilrealm.netlify.app/
Tech used: HTML, CSS, JavaScript, GIMP
This site was created from scratch - bare bones with HTML, styling with CSS and a touch of JavaScript for interactivity. I had a vision of a black, gold and green color scheme and various font styles to emphasize the elegance of a plant shop bearing a mystical name like Yggdrasil (the World Tree in Norse Mythology). I wanted to showcase a running theme of mythology and deities in the copy for the page as well. The nature guides aren't simply guides, but goddesses that are assisting you on the path of plant parenthood.
I didn't want the interactivity of the site to be too overwhelming, so I only used JavaScript for the slideshow at the top and then some CSS animations for the hover behaviour of the featured plants.
While the design of this site was originally coded using floats in CSS, I updated all of the code to use CSS Flex-Box instead. This change made the style so much easier to work with.
Currently, the site is a single landing page, but I plan to make the following improvements:
- Create Individual pages for each of the featured plants. Each page will show information about the plants, how to care for them and what precautions to make with the plant in your home (i.e. is it pet friendly).
- Add in a shopping experience by using the Shopify API
I learned that starting the project over (even just a small part of it) can help you to find errors and new ways of doing things. Switching from floats to flexbox, then redoing all the CSS a couple more times, helped me to refactor the code in a simpler way.
Take a look at these other examples that I have in my portfolio:
Blackbird Australia / Propeller Internship Task: https://github.com/raeplusplus/-blackbird-propeller-task-
EA Internship - Vaxman Game: https://github.com/raeplusplus/ea-vaxman-py