The Project that I've created is a Really fun to do site. Anyone can Understand the History and Underlying phenomenon of the Golden Ratio through it, and can see Illustrations or Try it on his/her own images. Thus being able to Identify The Golden Ratio in Everyday Objects Easily. The Whole Project follows a WebApp Pattern, Thereby is Totally modular and Does Not Refresh everytime you go to another page.(You can see, that it will not refresh, if u got to another page, through the Navbar If You Notice carefully)
I've given it stunning Graphics using the Particles.js and I've used the ALPHA version of Bootstrap 5, which has just come out! and the main framework is the latest React.js 16. And in the Illustrations Section, the Project is Fetching images from Google(WebScrapping, i created this with node.js and cheerio). Thus no Images are stored right on the Project, making it able to Display 4000 high quality images, while still being light-weight
I plan to give this Project a huge Upgrade soon, where, i'll use the Posenet Library to make the Golden Ratio Scanner Realtime AI, where right now, i'm using a Static vector created using HTML Canvas. Hope You Like my Project.
- React JS
- Bootstrap 5 alpha
- Google Fonts
- Node JS API fetches for Getting the Images
- Particle js
- HTML Canvas
- Insure that you have an Internet Connection.
- Extract the Zip File.
- Open up Command Prompt/Terminal Inside of the "the-golden-ratio" folder, do
npm installto install all the Dependencies. THIS MIGHT TAKE SOME TIME! - Only & Only, after all the dependencies have been Successfully downloaded and installed, type
npm startand hit Enter. - After Compliling is Complete, You can Access the Project from
localhost:3000
Working Tested with => Firefox Browser, {Should work fine with Chrome as well.}