Final devlog

Devlog 26 - Refined Code

LAST MESSAGE BEFORE STARDANCE ENDS

if you’re rating this project you don’t need to read this segment
Guys thanksss for your support!! I enjoyed this challenge a lot, it had made my summer much better, then I got a little burnt out, but still: stardance has tought me coding, I’ve learnt a new skill, I gained lego and everythings just makes me so happy
I’ve met a lot of amazing people here so if anyone want to stay in touch please message me on slack or maybe even on ig: mvdz1a, or snap: madziabrak, I love how abitious and creative everyone here is. If you’d ever need some help, feedback, maybe even an advice I’ll always be happy to assist!
Once again, thank you soooo much!!
Let’s get back to the devlog

Refined my code

So some ppl in the rating reasons pointed out that my code is a bit messy I tried my best and described it a little by added commented out text! Idk if thats how you say it sorry but I just added some descriptions in the html and css file so you can understand it better while scrolling through it.

README and AI usage

I’ve also updated the readme file!! Obviously some basic things like credits, acknowledgments (as you can see and once again THANK YAAAALL!!) but I realised that the credits are infinite!! It was messy and just looked so bad. I saw these arrows in 253-mathilde’s devlog, but I had no idea how you can add it so eventually I asked ai. I took the information that you just add <details> and <summary> and implemented it.

The end!!

SpacecraftOS was such a creative process. Once again thank you all soooo much I’m so grateful for the support I’ve gotten throughout. Looking forward for next summer challenge! One last time - Thanks for reading and have a nice day!

New spacecraft App!

Devlog 25 - SpaceShuttleApp

Hi everyone!! I’m back with a whole new app and smoother system

1. Smoother system

So I’ve got a lot feedback that spacecraftOS is working slow and someone has recommended to me adding se vite - that’s what i’ve done and now it works much better!

2. Space Shuttle App

I’ve decided to add another spacecraft app, they’re always fun to make and it’s kinda easyyy process tbh so everything was smooth. On this app I described a little every space shuttle NASA has ever created. Hope you’ll enjoy it!!

Thanks for reading and have a nice day!

Devlog 8 - Final devlog, cursor, scrollbar and minor changes

Please watch the videos below if you’re a voter and you can’t visit this website by computer. The first video is speeded up

Cursor

I added this cyan star cursor! I knew how to change the cursor but I had such a problem with making it different while pointing. Eventually I asked ai for help and it turned out pretty well - I think it adds some whimsy to this page

Scrollbar (visible on second slide)

I also styled the scrollbar!! I used youtube tutorial for this one. Looks much better now, I love the cyan accent!

Few minor changes

Fixed some bugs, some typos, added few words

Thank you!!

I’m gonna ship it now, thanks yall for your support I really appreciate it. This project was so fun to make, CSS is awesome. Wish me luck

Devlog 7 - About segment

Hi again! 5/5 segments are complete!!

About

This segment is just a short description on the ISS and a photo with cool animation

What’s next?

I’m not shipping yet, now I need to perfect this site!

1. Style the scrollbar
2. Fix some animations
3. Add some details

It’s near finish! Thanks for reading

Devlog 6 - Education segment

Hello everyone, 4/5 segments complete!

Education

In this section I embedeed 2 imo interesting videos from the ISS and a button that direct you to the ISS site!!

Obviously I’ve also added some animations and I fixed the animation from guide segment, sorry I forgot to put this in the video, but I think that it looks much better now!

If you’d change anything please let me know, I’d love to get to know your opinion!! Thanks for reading and have a nice day

Devlog 5 - Guide and Social media segments

Hiii! 3/5 segments finished!!

Social media

That’s just a segment with ISS socials (but the tiktok one is ESA’s account bc iss don’t have their own and esa post a lot from the ISS!)
But I’ve done this in such a… unique way!

1. The social media icons you see is just one full img
2. I added A B C and D text and centered it on these icons
3. Added href to these abcds and it’s working!
4. Last step - opacity: 0

But why this way?
I’m sure that there’s an easier way to do this but I’m not that experienced and I like to create things on my own, I came up with this and it works!! So yall remember, work smarter not harder!

Guide segment

I’m not so sure about this one. Please let me know - should I keep this animation, where the letters are “dancing”, or should I change it to some smoother animation? I kinda like it bc it’s like futuristic computer coding something vibe but idk, so pleaseee watch the video on the 3th slide and let me know below!! It would be highly appreciated!!!

Thanks for reading and have a nice day!

Devlog 4 - Astronauts Segment

Hi everyone!! 1/5 segments are finished!!
I don’t have much to say as I really like working with css and everything is always so smooth. I enjoyed doing the research and getting to know some interesting information about these people!!

In this segment you will find:

1. A lot of astronauts photos with cool animation on scroll at the top
2. Section about Peggy Whitson
3. Section about Scott Kelly

I decided to write a little bit about 2 people who did some iconic things on the ISS. I didn’t wanted it to be boring and I think that I found the perfect balance.

Thanks for reading and have a nice dayy!!!

Devlog 3 - start screen and a lot of styling!!

So the “raw” version is complete!! This, or so, is how it’s gonna look. Seriously, I love css so much it was so fun to make this!!

Ai usage

To the scroll element I needed to add 2 animations:

1. To make it “jump”, infinite
2. To make it fade while scrolling

I didn’t know how I can add 2 animations and therefore I asked ai. The solution is to add the second animation after a coma but it wouldn’t work very well bc I had, among others, animation-timeline: view(); it also helped me with this one and the solution here is to add auto, view(), normal, 0% and so on. A small thing, but it was really helpful.

What’s next?

1. I need to fill every section with many cool animations and information!!
2. I would love to add maybe an interactive background or just some animations bc rn it’s kinda blank

I love how it’s turning out and can’t wait for the final results!!

Devlog 2 - a complete rebrand!!

New Idea of the ISS hunt

I never wanted it to be a webOS, but when I created this project I just didn’t know what an OS meant lol, while working on spacecraftOS I really liked css, and I also came up with an idea..

I’m staying with the design and ISS is still gonna be the main character, but instead of building some advanced system I’m going to make a pretty website with a lot of animations. It will be a vast guide about the ISS!
Css makes me happy and fulfilled, I really enjoy learning new stuff about it. I’d love to create more beautiful and breathtaking websites. I can’t wait to improve my css skills!!

Yk stardance is ending soon, I wouldn’t even have the time to learn enough js

Also, I’m so grateful for all the reviews I got on spacecraftOS and a 18,53x multiplier!! Thank you all it makes me so happy!!! 😭💗

So, what I’d already done?

1. Deleted most of my code
2. Created header on scroll animation (you can see it in the video below)
3. Left the orbiting ISS bc I spent on it so much time, looking forward to find some use for it!

I think that I’ll just change the background colors as I’m looking at it now, lmk what you think!

Can’t wait to create more!! Thanks for reading and have a nice day

Scrollbar is working!!

Devlog 24 - scrollbar bug

Guys I think that this bug was (is) my personal fault, bc the scroll bar is visible in every single browser different than my current one lol I probably have some sort of extension that adds none !important or sth to my code’s head and it ruins everything, but it shall work on every other device, on every other browser.

Tbh I also used ai to fix it but it didn’t really helped bc it was my internal problem. So happy that it’s working, just wanted to clarify and log these 16min!!

If any problems with scrollbar occur, please use keyboard arrows to scroll through windows

Again, thanks for reading and have a nice day!

happy and frustrated

Devlog 23 - Dock animation, scrollbar and NGRSTApp

Dock Animation

I really like this animation!! It’s so smooth and cool and I’m so happy bc I learned new thing with the tutorial!! It came out exactly as I wanted

NGRSTApp

It’s finally finished!! I managed to add some things regardless it’s such a fresh mission. Hope yall like it!

Scrollbar

Yeah so here’s the frustrating part. I coded really pretty, unique and practical scrollbar in the css but I used webkit and it worked on microsoft but on chrome - not anymore! You can’t even see the scrollbar! I don’t have time anymore - I’m leaving in few hours, I commented it out and I hope I’ll fix it one day

Additional changes

1. Rewrited README
2. Added some events to the calendar

What’s next?

I’m gonna ship now!! Wish me luck and thank you all for your support throughout the whole voyage!!

Which one should I choose?

Devlog #22 - Timer

So I just made a timer with tutorial, but I need your help!! Should I keep miliseconds (slide 2) or keep it simple just with hours/minutes/seconds??
I kinda think that h/m/s looks better but it also seems so boring and less “advanced” than h/m/s/ms!!

Also this was such an easy tutorial, fortunately everything went smoothly!! Yall probably know bro code but if someone wants here’s the link

What’s next?

1. Dock animation
2. NGRSTApp

Thanks for reading and I’m waiting for your comments!

I’m back!!

Devlog #21 - new colors

Hi everyone! I’m finally back but from hospital… right after my trip I was diagnosed with severe anemia and had to stay in the hospital for four days. I’m feeling good but I’m a little worried bc I lost so much time and I’m leaving on next trip again in few days!! There’s not many things left in SpacecraftOS tho, so let’s summarise it

What’s new?

In the video below you can see that I adjusted the calendar colors for every theme. It was such a fun process! I like how it looks now. I also managed to fix the days align and now it works perfectly, always in 7 columns.
Hope yall like it!

What’s next?

I’m going to work on dock animation!! I also need to finish NGRSTApp but I think I’m going to keep it simple bc I don’t have so much time and I want to ship by the time I leave

Thanks for reading, take care and have a nice day!!

Reallyyyyyyy time consuming Calendar

Devlog #20 - Calendar

So I spent this whole day coding this calendar with youtube tutorial. This tutorial was only 17min but it took me 5h

Then I needed to fix some typos bc I ofc made a lot and then many many styling!!

It’s not the final result!

I’m going on a trip tomorow, so I need to take a break from coding. To adjust the width and height, make it all fit to my site, it takes so long, and then I need to change the colors, bc I was just testing with the pinks. Change colors to all of my themes 😭 But it’s okay I got this

Disappointing surprise

You can see in the video on the second slide that there are 6 columns in the next month instead of 7! I’ve been so happy bc it was working in august, and then I changed months and it was a little disappointing surprise. I’m gonna fix it later!

What’s next?

When I’ll be back I’m going to work on this app! I didn’t expected it to be that hard

Thanks for reading and see you in the next one!

More Animatiooons!

Devlog #19 Animations on scroll

Animations

So recently I’ve been working on animations on scroll! Now my Apps about spacecrafts are more interactive and less boring.

In the video below you can see all of the scroll animations I’d added till this moment.

I feel so confident with css animations, they give me so much fun!!

Icon

The video is cropped so you can’t see the snake game icon but it finally is here! I added it in the second slide so you guys can see it! Let me know what yall think.

I wanted to keep the one real-life, space themed addition (like moon in the music app) so the snake has galaxy eyes.

Nancy Grace Roman Space Telescope PROBLEM

As you can see I also added an icon for NGRST App but it’s an upcoming mission and I don’t really know what to do with it!!

Someone requested it in the feedback, so I really want to implement it but idk, maybe I shall add a countdown? But it will be outdated soon. Many things can be outdated!

Thanks for reading and have a nice day!

The most spacecraft app on spacecraft os?

Devlog #18 - MapApp!!!

ALL SPACECRAFTS IN ONE PLACE WHAT AN AMAZING FEATURE!!

What’s new?

MAAAP AAAPP

While doing research on Voyager 1 and 2 I found this “Eyes On The Solar System” from NASA, and noticed that you can embeed it, and that’s what I’ve done!

First and foremost, you can check here the position of any spacecraft you want! That’s why I called it Map App. Moreover, that’s a place with a lot of information, and whole spacecraft history!

As you can notice, it didn’t take me so long (bc it’s just embeeding), so what I’ve also completed?

1. Fixed some bugs
2. Finished icon for snake game

What’s next?

NGRST app! (Can someone guess, what does this short stand for? Hint: HST and JWST are already in spacecraftOS!)

Perfecting

Devlog #17 - snake game and organisation

What’s new?

Snake game

As you can see, I’ve styled the snake game a little! I also added start/tutorial/guide window, I added it by creating new window and setting start button as the window close button hihi work smarter not harder.
Ai usage
I couldn’t figure it out how can I set imgs as the background, food and even for snake, so I asked ai. It’s just creating const with img and adding drawImage instead of fillStyle, and I’m so happy bc now I understand it and know how to implement imgs to js!

WHERE’S THE ROCKET?

It was too hard!! I really tried, but when I managed to set the rocket as the snake’s head:

1. The rocket was too small
2. It wasn’t rotating

It looked so bad and if I wanted to continue with this idea I would need to use ai, so more ai than I would like, so I eventually there’s snake in the snake game.

More organisation

I created folders in the img folder for each app, bc the img folder was still a little messy. It was such a tedious process, but it’s much clearer now!

What’s next?

New REALLY COOL APP and snake app icon, which I’m going to edit today while watching F1 sprint