Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thebigsasha/nasa-gallery
An interactive gallery of NASA's photos of the day, with a like system :)
https://github.com/thebigsasha/nasa-gallery
framer-motion gatsby scss spring-boot typescript
Last synced: about 1 month ago
JSON representation
An interactive gallery of NASA's photos of the day, with a like system :)
- Host: GitHub
- URL: https://github.com/thebigsasha/nasa-gallery
- Owner: TheBigSasha
- License: 0bsd
- Created: 2021-09-19T03:52:54.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-09-23T04:48:06.000Z (over 3 years ago)
- Last Synced: 2024-10-27T23:15:57.679Z (3 months ago)
- Topics: framer-motion, gatsby, scss, spring-boot, typescript
- Language: SCSS
- Homepage:
- Size: 4.62 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A demo site for my latest web techs
## Likes & Account Tracking
### 🙋♀️ User account authentication
Users are individually authenticated with NASA API keys. This allows them to like posts and see who else liked them
### 🔗 HTTPS APIs
The Spring boot server is hosted locally on a dedicated servers using certbot and NGINX for
HTTPS. [Browse the API on PostMan](https://www.getpostman.com/collections/1703c1056154b3a622f4)
## Mind blowing speed
### 🖥 Server Side Rendering
Thanks to Gatsby's super fast static code output, as much of this site as possible is rendered server side. Only the
content from the NASA API is loaded in client side.
### 💤 Lazy Loading
All images and content are lazy loaded, enabling lightning fast load times. Also, images are loaded in sequence, first a low res blurry image, then a high res image when time allows. Everything which can be async is async.
## 🎞 Animations
### 👁 Opacity focus
Focus on the current text: the text in the middle of the screen has a higher opacity than the text at the edges, if your
screen is big enough.
### 🎬 Dynamic Animations
The site is animated using Framer Motion, with some animations disabled on small screen devices.
## Sashaphoto Gatsby Template
### 🔐 Fully TypeScript
All the components which can be written in TypeScript are written in TypeScript!
### 🎨 SASS Styling + Auto color palettes
You can specify colors in `colors.scss` and then it will automatically generate color palettes from them for you!
#### Auto Palettes
When you specify an accent color, style classes are auto generated for you for the accent color as well as variations like darker,
lighter, etc. [Learn more](https://sashaphoto.github.io/sashaphoto-gatsby-template/about-styling/)
### 🚀 Auto deploy to GH pages
Simply specify a personal access token with repo access in your repository secrets as `ACCESS_TOKEN` when you use this template and it should automatically publish to GitHub Pages on each push :)
### 📊 Automatic Google Analytics
Just specify your GTAG ID in GitHub secrets under `GATRACKINGID` and optionally `AWCONVERSIONID`, `DCFLOODIGHTID` to get started tracking your analytics.
#### No analytics in development
Analytics are tracked only in production builds with the IDs passed by GitHub actions or in `.env.production`