my APOD site - Stardance

Open comments for this post

@blackbird on my APOD site · 22 days ago

18m 47s logged

There is a request to change my readme to the raw version before reshipping.

Ship #2

@blackbird on my APOD site · 22 days ago

I added the final change of this site, which was the test clock that syncs to your device. This was a lot simpler than I thought due to already-existing clock features. One of the hardest parts was doing the planet, which I had to look up a tutorial for and took much longer than otherwise thought to center correctly. The memo feature at the bottom of the page took the longest to implement, but there were no large snags in the work, other than a quickly-figured-out issue where the page didn't reload with the notes.

1 devlog
6h
5.59x multiplier
33 Stardust

Try project → See source code →

Open comments for this post

@blackbird on my APOD site · 22 days ago

5h 53m 57s logged

I mostly made a few changes to personalize the site. A notes section was added to the bottom, as I enjoy being able to write memos for myself to keep. These notes will pop up on the same day the next year, and they are saved in a bubble at the bottom of the page which will open the page up to that day when clicked. I added a semi-transparent planet to the background to learn more about gradients, which took a massive amount of time, and a lot of trial and error for positioning the ring vs the main body.

To Do:

make a clock that can sync time from the device (planning on doing something similar for personal website so this will be good practice)

Ship #1 Changes requested

@blackbird on my APOD site · 22 days ago

I made a NASA Astronomy Picture of the Day site built with Vite and vanilla JS. It pulls the day's image or video, title, and explanation from NASA's API, has a date picker to browse any past day, and a space theme with shooting stars.

The toughest part was that the shooting stars had three separate bugs, each from a different layer: they flew backward, spawned offset from the cursor, and all burst at once after leaving the tab. I'm really proud of how I navigated fixing those issues.

Try project → See source code →

Open comments for this post

@blackbird on my APOD site · 22 days ago

1h 36m 25s logged

Made the page look a lot more space-y with a dark gradient theme and a starfield background. Allowed the user to switch the date to a previous one and the corresponding image of that day. Added shooting stars that streak by on their own and move from your cursor when you click the background.

Bugs I fixed:

Shooting stars flew backward (gradient was on the wrong end)
Stars spawned offset from the cursor (was positioning by the corner)
All shooting stars appeared at once after leaving the tab (paused the spawner with the Page Visibility API)

Open comments for this post

@blackbird on my APOD site · 23 days ago

58m 37s logged

Wow, the picture actually shows!

Open comments for this post

@blackbird on my APOD site · 23 days ago

54m 11s logged

Starting my NASA Astronomy Picture of the Day page. This is a small site that will pull NASA’s APOD API and show the day’s title, image or video, and explanation. For this session I decided to deploy-first and get a live (but nearly empty) page onto GitHub Pages before building any features.

Set up: the Vite scaffold, a .gitignore keeping my .env safe, .env.example, vite.config.js so Pages serves assets from the right path (otherwise 404s), and a GitHub Actions workflow that builds and publishes to Pages. First deploy actually failed on the Pages step because Pages wasn’t enabled yet. I enabled it, re-ran, green check, live page confirmed.

Next session: fetch and render the APOD data