Space Themed Site with Mini Game!

shiftyp

Ryan Kahn (he/him)

Posted on December 19, 2020

Space Themed Site with Mini Game!

What I built

Hi all! For this hackathon (and for myself) I've built a space themed site for my work as an engineering mentor and trainer, with a collaborative mini-game! 🚀

Category Submission:

This falls under the personal site category!

App Link

You can find the application here at https://rkahn.dev!

Screenshots

App Screen Capture

Description

This site showcases some aspects and reviews of my work, as well as some personal information and thoughts. It also contains an astronaut themed mini-game. Launch an astronaut, and everyone can see it for a time!

Link to Source Code

The static site is built from this repo, and the golang / docker backend from this repo!

Permissive License

The code is all released under an MIT license. Feel free to remix it for your own purposes. The imagery on the site is not included in the repository, and is either copyrighted by myself or under the proprietary image license included in the static repo.

Background

I've been in need of a personal site for some time, but I haven't been inspired to come up with a design. I came across these space graphics a while back, and I've been meaning to incorporate them into a personal project. My personal site turned into a perfect opportunity!

How I built it

The static site and the backend are both built and deployed on Digital Ocean Apps. The images are separately hosted on a Digital Ocean Spaces CDN. The images are premium content from freepik.com and flaticon.com. I've purchased a license to them, so please don't use them without permission of their respective owners.

I tried to keep the code approachable, so the majority of the Frontend is built using just HTML and CSS and compiled with Parcel. The astronaut minigame is built using Preact with hooks!

The backend is built with Golang, mainly because this is what the Digital Ocean Docker example started as, and it seemed like a good idea! It stores all the data in memory and doesn't utilize a database. Go ahead and take a look! (see what I did there)

I had wanted to add an analytics server that used the Apps Postgres database component...but I ran into various issues involving SSL and decided to throw my hands in the air and use Segment. 🤷‍♂️

Additional Resources/Info

I really enjoyed using Digital Ocean Apps, it made the simpler things (for me) straightforward. I ran into some issues as stated with using the database component, but overall I had a great experience, and look forward to keeping the site on DO Apps for the foreseeable future!

💖 💪 🙅 🚩
shiftyp
Ryan Kahn (he/him)

Posted on December 19, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related