Inspiration
I've been watching my friend play through Night in the Woods recently, and the indie game I'm on the team for, The Space in Between, has constellation-building much like Night in the Woods does. Because of this, my first idea for an interactable website was building constellations.
What it does
Hover over the stars to build constellations and learn more about me!
How I built it
Since I'm working on the project solo and didn't want to spend too much time on it, I made the scope of my project idea small. I was just going to change images and make text appear. Part of the reason I leaned towards stars in the night sky is because of how easy it would be to make a minimalist design.
Since the behavior of all the constellations is the same, after I figured out how to make one work, I was set. I switched between a dog and frog image and also made text appear on hover to test if my idea would work. Some context for this: My high school friends participated in picoCTF, and one of the challenges in picoCTF 2018 was called Dog Or Frog, and it was an adversarial machine learning problem that involved making a dog appear as a tree frog with added noise. Kudos to Eric for getting that problem!
After making a dog successfully transform into a frog, I was set for the rest of the project. I drew the stars in Medibang Paint (raster) because I was too lazy to learn how to make vector images in PS or Illustrator. I used Inkscape before for vectors but its UI stands for UnIntuitive...
Challenges I ran into
I spent Too Long trying to figure out how to position images. I swear I knew more about web dev when I was a child playing around on Khanacademy than I do now. I have no idea how HTML sibling relationships work and all I've concluded is that some parts don't work if I switch up the order in HTML. I couldn't figure out how to get more than one other element to get affected when something is hovered over. There is a lot of copypasted code WHOOPS and that meant I would randomly encounter errors because I forgot to change things. =
Accomplishments that I'm proud of
I told myself I would finish over Thanksgiving break and I did! I zoomed through all the Hackschool writeups on Saturday and built the website on Sunday! I did make some refining touches and figured out how to use Github Pages on Monday, but I have been pretty unmotivated lately so I'm glad that I was able to pretty much stick to my goal!
What I learned
I came up with my idea before I started looking at the Hackschool workshops and only learned what I needed to make it work, so my understanding of the curriculum is pretty shallow. I didn't bother trying out Flexbox/Grid or React at all, which I should later :^) I skimmed through the design workshop videos but I was too lazy to use Figma and just sketched my idea on paper.
What's next for Star Site
I have a constellation for this! But I can also expand on it here! My site is probably wack on some aspect ratios because I used absolute positioning with percentages. I was looking at 16:9 and 16:10 aspect ratio screens when I was designing it. I should have used vector images instead of raster images and also made the constellations more consistent. I don't know enough about web dev to know if my judgment is accurate, but the code is probably written poorly and breaking style guide, and there are probably ways to reduce the redundant code. Maybe I'll add more constellations in the future. I think it would have been better if I could swap the images of the stars and the drawn constellation instead of changing the opacity of the top image to 0%.
Log in or sign up for Devpost to join the conversation.