user's avatar
Project Divination
Project Divination
Project Divination is a side project that I did to learn React and practice other design and front-end development concepts. I did both the design and development work.

This project involved:
- React.js
- JavaScript
- CSS3: Flexbox, CSS Grid, animations (transitions, transforms)
- SVG design and manipulation with CSS and JavaScript
- Adobe Illustrator
- Adobe XD
- Logo design and icon design
- Web design and UI/UX design
Website
I built this website with React and custom CSS. I did not use any CSS or design libraries, instead writing the CSS from scratch myself. The React isn't overly complicated, because this is the first big project I've done in React and my goal was to learn how React works while building something lighthearted and fun. The design is responsive, using CSS Grid and Flexbox. There are a few animations using SVG images with JavaScript. Below are some representative page screenshots.
Adobe XD Prototype
I don't often get to do full web design mockups at my regular job, so I used this as an opportunity to do a prototype in Adobe XD. I didn't mockup all of the pages because most of them would use the same layout and I'd be doing the development work as I went along, but below is the Adobe XD embed.
Graphic Assets
I created a variety of graphic assets for this website, most of which are SVG elements. These included a set of icons that are used throughout the site, the runes, the logo, the card backs, the page titles, the hero image on the homepage, etc. (I did not create the tarot cards themselves -- those are from the standard Rider-Waite tarot deck, which is in the public domain.)
This set of icons is available on my Adobe Stock page.
This set of runes is available on my Adobe Stock page, along with a few other variants.
Style Guide
This style guide or branding sheet shows the logo variants, typography choices, and colors for the project.
Project Divination
1
8
0
Published: