This app presents the several planets of our solar system and sums up what we know about them. The website is also available on tablet and mobile devices.
Check it out here : https://actually-way-test.surge.sh/
Desktop version overview :
Internal structure of the planet :
Surface geology of the planet :
Tablet version overview :
Mobile version overview :
Clone the project, then jump into your command line and run these :
# install dependencies
yarn
# start the application
yarn start
# open the application in the browser
open http://localhost:3000- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SCSS
- Mobile-first workflow
- React - JS library
- Typescript - JS with an emphasis on types
- Figma
It was my first time working with figma designs, while discovering the tool I quickly got trapped in the "pixel perfect" mindset and so abused the
position: absolute;atribute. That mistake cost me a lot while trying to make the website responsive. I'll have a completely different approach in my future projects, and I pretty much think that I won't use absolute position anymore except for rare cases.
I've learned how to dynamically change my css classes thanks to javascript like so :
className={`planetLink ${window.location.pathname === `/${planet.name}` ? `planetLink--${planetId}` : '' }`}Here the default className will be "planetLink" but if the slug matchs a planet name then the class
planetLink--*will be added.
I witnessed some issues concerning the routing of the website. I also witnessed that the website doesn't display properly on laptop screensizes, it is due to the font-size that is not adaptating to the loss of screen size and also to the absolute position of some elements.
I will try to fix all of these in the near future.