|
41327
|
my APOD site by @YashicaD | Stardance
|
YashicaD
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @YashicaD | Stardance
|
1793559428.5152607
|
1794164228.5152607
|
|
49263
|
my APOD site by @YasserShaikh | Stardance
|
YasserShaikh
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @YasserShaikh | Stardance
|
1793274593.4192193
|
1793879393.4192193
|
|
36833
|
my APOD site by @Yoav1 | Stardance
|
Yoav1
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Yoav1 | Stardance
|
1793317993.6896672
|
1793922793.6896672
|
|
52251
|
my APOD site by @YugSharma | Stardance
|
YugSharma
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @YugSharma | Stardance
|
1793433321.782292
|
1794038121.782292
|
|
30204
|
my APOD site by @Zeenat | Stardance
|
Zeenat
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Zeenat | Stardance
|
1793293049.7812428
|
1793897849.7812428
|
|
56534
|
my APOD site by @Zhardhon | Stardance
|
Zhardhon
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Zhardhon | Stardance
|
1793386510.4055712
|
1793991310.4055712
|
|
60855
|
my APOD site by @Zus | Stardance
|
Zus
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Zus | Stardance
|
1793037072.8163755
|
1793641872.8163755
|
|
69793
|
my APOD site by @Zx_Ai | Stardance
|
Zx_Ai
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @Zx_Ai | Stardance
|
1793584475.9199245
|
1794189275.9199245
|
|
38666
|
my APOD site by @aanwaqas | Stardance
|
aanwaqas
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @aanwaqas | Stardance
|
1793372003.8524997
|
1793976803.8524997
|
|
46944
|
my APOD site by @abodi_madarati | Stardance
|
abodi_madarati
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @abodi_madarati | Stardance
|
1793159662.2084336
|
1793764462.2084336
|
|
30649
|
my APOD site by @ada_bardiz | Stardance
|
ada_bardiz
|
1
|
11.55
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-07-06T13:32:27Z", "hours": 3.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "I made a site with NASA’s API that automatically uploads NASA’s astronomy picture of the day along with its title & description. I had never worked with an API before so it was pretty challenging getting used to it but after sorting out the first few steps the CSS parts weren’t so bad! I’m proud that I managed to create the squiggly banners on the sides :) I added everything people should know in my readme.", "repo": "https://github.com/adabardiz/NASA-s-astronomy-picture-of-the-day", "demo": "https://adabardiz.github.io/NASA-s-astronomy-picture-of-the-day/"}]...
|
[{"post_id": 31483, "ts": "202 [{"post_id": 31483, "ts": "2026-07-19T21:54:44Z", "hours": 8.5461, "text": "bug fixes (server wasn’t working for some reason) & i also readded the blue and pink squiggly things i’d removed earlier. + there was a little bit of an error with my hackatime i wasn’t working on this project but it counted towarsd this one :("}, {"post_id": 23460, "ts": "2026-07-06T13:29:44Z", "hours": 3.2561, "text": "Just finished up with the APOD site! Took pretty long but I’m pretty satisfied with the end result :) It was my first time working with an API and hopefully not the last."}]...
|
Title: my APOD site by @ada_bardiz | Stardance
De Title: my APOD site by @ada_bardiz | Stardance
Devlogs:
Just finished up with the APOD site! Took pretty long but I’m pretty satisfied with the end result :) It was my first time working with an API and hopefully not the last.
bug fixes (server wasn’t working for some reason) & i also readded the blue and pink squiggly things i’d removed earlier. + there was a little bit of an error with my hackatime i wasn’t working on this project but it counted towarsd this one :(
Ships:
I made a site with NASA’s API that automatically uploads NASA’s astronomy picture of the day along with its title & description. I had never worked with an API before so it was pretty challenging getting used to it but after sorting out the first few steps the CSS parts weren’t so bad! I’m proud that I managed to create the squiggly banners on the sides :) I added everything people should know in my readme....
|
1793570202.1196816
|
1793656602.1196816
|
|
29827
|
my APOD site by @adielrak2 | Stardance
|
adielrak2
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @adielrak2 | Stardance
|
1793379160.2675843
|
1793983960.2675843
|
|
34210
|
my APOD site by @advi | Stardance
|
advi
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @advi | Stardance
|
1793512477.4697464
|
1794117277.4697464
|
|
43992
|
my APOD site by @adweik | Stardance
|
adweik
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @adweik | Stardance
|
1793249308.1589239
|
1793854108.1589239
|
|
63083
|
my APOD site by @afnancr7 | Stardance
|
afnancr7
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @afnancr7 | Stardance
|
1793048029.7501798
|
1793652829.7501798
|
|
66835
|
my APOD site by @ahirwarriya034 | Stardance
|
ahirwarriya034
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @ahirwarriya034 | Stardance
|
1793102047.7781014
|
1793706847.7781014
|
|
64838
|
my APOD site by @ahmedrazacreatives | Stardance
|
ahmedrazacreatives
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @ahmedrazacreatives | Stard Title: my APOD site by @ahmedrazacreatives | Stardance...
|
1793066118.091483
|
1793670918.091483
|
|
31843
|
my APOD site by @ahsanayan349 | Stardance
|
ahsanayan349
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @ahsanayan349 | Stardance
|
1793364578.1732535
|
1793969378.1732535
|
|
30783
|
my APOD site by @akshajdewan102 | Stardance
|
akshajdewan102
|
1
|
0.0
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-07-04T22:25:02Z", "hours": 0.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "Built Astro Tab, my NASA APOD new-tab page, following the “Give Your Website a Pulse” guide from start to ship. I scaffolded a vanilla Vite project, cleaned out the demo files, and wired up a fetch to NASA’s APOD API — send the request, .json() the response, then drop the title, image, and explanation into #app, with the key kept safe in a .env (and .env.example committed) read via import.meta.env. The trickiest bit was media handling, since NASA doesn’t always send an image; some days it’s a video or YouTube embed, so I build the media tag in a variable first ( vs vs ) and set innerHTML exactly once instead of overwriting it and losing the title. On top of the base guide I added a date picker so you can pull up any past APOD (same fetch, just &date= appended), and styled it as a dark space HUD with Orbitron/Space Mono fonts and clip-path: polygon() zigzag strips down the sides using body::before/::after pseudo-elements that hide under 600px via a media query. Deployment was its own lesson: set base in vite.config.js, stored the API key as a GitHub Actions secret, and let the workflow build and push to GitHub Pages on every commit to main. Live at https://downbeatfoil.github.io/nasa-apod-site/ and code at https://github.com/Downbeatfoil/nasa-apod-site .", "repo": "https://github.com/Downbeatfoil/nasa-apod-site", "demo": "https://downbeatfoil.github.io/nasa-apod-site/"}]...
|
[{"post_id": 22448, "ts": "202 [{"post_id": 22448, "ts": "2026-07-04T22:24:02Z", "hours": 0.2644, "text": "Built Astro Tab, my NASA APOD new-tab page, following the “Give Your Website a Pulse” guide from start to ship. I scaffolded a vanilla Vite project, cleaned out the demo files, and wired up a fetch to NASA’s APOD API — send the request, .json() the response, then drop the title, image, and explanation into #app, with the key kept safe in a .env (and .env.example committed) read via import.meta.env. The trickiest bit was media handling, since NASA doesn’t always send an image; some days it’s a video or YouTube embed, so I build the media tag in a variable first ( vs vs ) and set innerHTML exactly once instead of overwriting it and losing the title. On top of the base guide I added a date picker so you can pull up any past APOD (same fetch, just &date= appended), and styled it as a dark space HUD with Orbitron/Space Mono fonts and clip-path: polygon() zigzag strips down the sides using body::before/::after pseudo-elements that hide under 600px via a media query. Deployment was its own lesson: set base in vite.config.js, stored the API key as a GitHub Actions secret, and let the workflow build and push to GitHub Pages on every commit to main. Live at https://downbeatfoil.github.io/nasa-apod-site/ and code at https://github.com/Downbeatfoil/nasa-apod-site ."}]...
|
Title: my APOD site by @akshajdewan102 | Stardance Title: my APOD site by @akshajdewan102 | Stardance
Devlogs:
Built Astro Tab, my NASA APOD new-tab page, following the “Give Your Website a Pulse” guide from start to ship. I scaffolded a vanilla Vite project, cleaned out the demo files, and wired up a fetch to NASA’s APOD API — send the request, .json() the response, then drop the title, image, and explanation into #app, with the key kept safe in a .env (and .env.example committed) read via import.meta.env. The trickiest bit was media handling, since NASA doesn’t always send an image; some days it’s a video or YouTube embed, so I build the media tag in a variable first ( vs vs ) and set innerHTML exactly once instead of overwriting it and losing the title. On top of the base guide I added a date picker so you can pull up any past APOD (same fetch, just &date= appended), and styled it as a dark space HUD with Orbitron/Space Mono fonts and clip-path: polygon() zigzag strips down the sides using body::before/::after pseudo-elements that hide under 600px via a media query. Deployment was its own lesson: set base in vite.config.js, stored the API key as a GitHub Actions secret, and let the workflow build and push to GitHub Pages on every commit to main. Live at https://downbeatfoil.github.io/nasa-apod-site/ and code at https://github.com/Downbeatfoil/nasa-apod-site .
Ships:
Built Astro Tab, my NASA APOD new-tab page, following the “Give Your Website a Pulse” guide from start to ship. I scaffolded a vanilla Vite project, cleaned out the demo files, and wired up a fetch to NASA’s APOD API — send the request, .json() the response, then drop the title, image, and explanation into #app, with the key kept safe in a .env (and .env.example committed) read via import.meta.env. The trickiest bit was media handling, since NASA doesn’t always send an image; some days it’s a video or YouTube embed, so I build the media tag in a variable first ( vs vs ) and set innerHTML exactly once instead of overwriting it and losing the title. On top of the base guide I added a date picker so you can pull up any past APOD (same fetch, just &date= appended), and styled it as a dark space HUD with Orbitron/Space Mono fonts and clip-path: polygon() zigzag strips down the sides using body::before/::after pseudo-elements that hide under 600px via a media query. Deployment was its own lesson: set base in vite.config.js, stored the API key as a GitHub Actions secret, and let the workflow build and push to GitHub Pages on every commit to main. Live at https://downbeatfoil.github.io/nasa-apod-site/ and code at https://github.com/Downbeatfoil/nasa-apod-site ....
|
1793490845.7050343
|
1793577245.7050343
|
|
36508
|
my APOD site by @albertphu3 | Stardance
|
albertphu3
|
1
|
1.0
|
0
|
[{"ship_num": 1, "ts": "2026-1 [{"ship_num": 1, "ts": "2026-10-28T01:00:04Z", "hours": 1.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "A Super Cool Website!", "repo": "https://github.com/albertphu07/APOD-SITE-ORBIT", "demo": "https://apod-site-orbit.vercel.app/"}]...
|
[{"post_id": 83475, "ts": "202 [{"post_id": 83475, "ts": "2026-10-28T00:59:13Z", "hours": 0.9444, "text": "Finally Finished With Site After a painful 56 min i finished this amazing site!"}]...
|
Title: my APOD site by @albertphu3 | Stardance
De Title: my APOD site by @albertphu3 | Stardance
Devlogs:
Finally Finished With Site After a painful 56 min i finished this amazing site!
Ships:
A Super Cool Website!...
|
1793487335.8685668
|
1793573735.8685668
|
|
37430
|
my APOD site by @alfa | Stardance
|
alfa
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @alfa | Stardance
|
1793346991.363801
|
1793951791.363801
|
|
41001
|
my APOD site by @alicechurilova | Stardance
|
alicechurilova
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @alicechurilova | Stardance
|
1793537407.3768275
|
1794142207.3768275
|
|
52796
|
my APOD site by @allabi_roa | Stardance
|
allabi_roa
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @allabi_roa | Stardance
|
1793454966.4876924
|
1794059766.4876924
|
|
52874
|
my APOD site by @amatullah_haiabid | Stardance
|
amatullah_haiabid
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @amatullah_haiabid | Starda Title: my APOD site by @amatullah_haiabid | Stardance...
|
1793458611.9230096
|
1794063411.9230096
|
|
37753
|
my APOD site by @ananas_pizza | Stardance
|
ananas_pizza
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @ananas_pizza | Stardance
|
1793437009.4720564
|
1794041809.4720564
|
|
64165
|
my APOD site by @anashooman | Stardance
|
anashooman
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @anashooman | Stardance
|
1793058726.2209437
|
1793663526.2209437
|
|
30088
|
my APOD site by @aniM | Stardance
|
aniM
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @aniM | Stardance
|
1793530618.7922053
|
1794135418.7922053
|
|
53489
|
my APOD site by @anonymosuzer | Stardance
|
anonymosuzer
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @anonymosuzer | Stardance
|
1793490529.8119726
|
1794095329.8119726
|
|
38284
|
my APOD site by @anushkaa | Stardance
|
anushkaa
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @anushkaa | Stardance
|
1792925367.5128791
|
1793789367.5128791
|
|
33553
|
my APOD site by @anushkadingare | Stardance
|
anushkadingare
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @anushkadingare | Stardance
|
1793317956.2474542
|
1793922756.2474542
|
|
55415
|
my APOD site by @aqsaqutabshahawan786 | Stardance
|
aqsaqutabshahawan786
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @aqsaqutabshahawan786 | Sta Title: my APOD site by @aqsaqutabshahawan786 | Stardance...
|
1793162935.7374792
|
1793767735.7374792
|
|
32786
|
my APOD site by @aquafr0stbyte | Stardance
|
aquafr0stbyte
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @aquafr0stbyte | Stardance
|
1793382595.656795
|
1793987395.656795
|
|
32420
|
my APOD site by @aravmahipal11 | Stardance
|
aravmahipal11
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @aravmahipal11 | Stardance
|
1793400632.9398615
|
1794005432.9398615
|
|
35591
|
my APOD site by @areebanaseer | Stardance
|
areebanaseer
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @areebanaseer | Stardance
|
1793335886.8532302
|
1793940686.8532302
|
|
50982
|
my APOD site by @arfaehsan345 | Stardance
|
arfaehsan345
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @arfaehsan345 | Stardance
|
1793368557.5551324
|
1793973357.5551324
|
|
48222
|
my APOD site by @arifansarrii | Stardance
|
arifansarrii
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @arifansarrii | Stardance
|
1793220523.7576737
|
1793825323.7576737
|
|
30909
|
my APOD site by @arkaive19 | Stardance
|
arkaive19
|
1
|
0.0
|
0
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-07-05T10:09:06Z", "hours": 0.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "The Nasa Astronaut Picture Of the day project, in all its glory. wanted to try out a new mission.", "repo": "https://github.com/Arkaive19/nasa_new_tab", "demo": "https://arkaive19.is-a.dev/nasa_new_tab/"}]...
|
[{"post_id": 22741, "ts": "202 [{"post_id": 22741, "ts": "2026-07-05T10:06:29Z", "hours": 0.3164, "text": "Completed APOD mission"}]...
|
Title: my APOD site by @arkaive19 | Stardance
Dev Title: my APOD site by @arkaive19 | Stardance
Devlogs:
Completed APOD mission
Ships:
The Nasa Astronaut Picture Of the day project, in all its glory. wanted to try out a new mission....
|
1793447753.6621041
|
1793534153.6621041
|
|
61662
|
my APOD site by @arunabho_9 | Stardance
|
arunabho_9
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @arunabho_9 | Stardance
|
1793040763.197307
|
1793645563.197307
|
|
41377
|
my APOD site by @aryankumar_1st | Stardance
|
aryankumar_1st
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @aryankumar_1st | Stardance
|
1793562776.2924132
|
1794167576.2924132
|
|
32522
|
my APOD site by @asliddin | Stardance
|
asliddin
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @asliddin | Stardance
|
1793494476.762635
|
1794099276.762635
|
|
55477
|
my APOD site by @astrade2586 | Stardance
|
astrade2586
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @astrade2586 | Stardance
|
1793163123.705818
|
1793767923.705818
|
|
43900
|
my APOD site by @bahodirboliqulov3 | Stardance
|
bahodirboliqulov3
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @bahodirboliqulov3 | Starda Title: my APOD site by @bahodirboliqulov3 | Stardance...
|
1793245688.2201252
|
1793850488.2201252
|
|
30187
|
my APOD site by @baker | Stardance
|
baker
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @baker | Stardance
|
1792914820.8350713
|
1793778820.8350713
|
|
71061
|
my APOD site by @barisemre1607 | Stardance
|
barisemre1607
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @barisemre1607 | Stardance
|
1793516130.3640177
|
1794120930.3640177
|
|
38436
|
my APOD site by @bendavie0428 | Stardance
|
bendavie0428
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @bendavie0428 | Stardance
|
1793378887.9152613
|
1793983687.9152613
|
|
59708
|
my APOD site by @bethecut | Stardance
|
bethecut
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @bethecut | Stardance
|
1793029838.7440686
|
1793634638.7440686
|
|
30194
|
my APOD site by @blackbird | Stardance
|
|
2
|
9.31
|
33
|
[{"ship_num": 1, "ts": "2026-0 [{"ship_num": 1, "ts": "2026-07-04T15:57:56Z", "hours": 6.0, "multiplier": 5.59, "payout": 33, "blessing": "neutral", "text": "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.", "repo": "https://github.com/flyingchickensaucer/NASA_Site", "demo": "https://flyingchickensaucer.github.io/NASA_Site/"}, {"ship_num": 2, "ts": "2026-07-04T04:54:25Z", "hours": 3.0, "multiplier": null, "payout": 0, "blessing": "neutral", "text": "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.", "repo": "https://github.com/flyingchickensaucer/NASA_Site", "demo": "https://flyingchickensaucer.github.io/NASA_Site/"}]...
|
[{"post_id": 22473, "ts": "202 [{"post_id": 22473, "ts": "2026-07-04T23:05:14Z", "hours": 0.3131, "text": "There is a request to change my readme to the raw version before reshipping."}, {"post_id": 22199, "ts": "2026-07-04T15:36:13Z", "hours": 5.8992, "text": "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)"}, {"post_id": 21949, "ts": "2026-07-04T04:41:00Z", "hours": 1.6069, "text": "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)"}, {"post_id": 21621, "ts": "2026-07-03T17:40:59Z", "hours": 0.9769, "text": "Wow, the picture actually shows!"}, {"post_id": 21566, "ts": "2026-07-03T16:19:53Z", "hours": 0.9031, "text": "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"}]...
|
Title: my APOD site by @blackbird | Stardance
Dev Title: my APOD site by @blackbird | Stardance
Devlogs:
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
Wow, the picture actually shows!
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)
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)
There is a request to change my readme to the raw version before reshipping.
Ships:
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.
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....
|
1793534052.604662
|
1793620452.604662
|
|
72181
|
my APOD site by @blaze6930 | Stardance
|
blaze6930
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @blaze6930 | Stardance
|
1793404029.5186818
|
1794008829.5186818
|
|
30733
|
my APOD site by @blue_alpaka | Stardance
|
blue_alpaka
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @blue_alpaka | Stardance
|
1793512585.211325
|
1794117385.211325
|
|
54098
|
my APOD site by @bribook | Stardance
|
bribook
|
0
|
0.0
|
0
|
[]
|
[]
|
Title: my APOD site by @bribook | Stardance
|
1793519689.4052594
|
1794124489.4052594
|