For the "stretch" section of the second project, we had to manipulate “rocket ships”. They were really just different colored square HTML divs lined up in a single column. So I took it upon myself to make them look somewhat like rocket ships by using different linear and radial gradients for the background images. I digress. The goal was to have event listeners to that when a ship was clicked, it would move to the top. If you clicked and held on a ship, it needed to travel to the right until you released. Then it would travel back to its original spot. Easy enough if you don’t care about smooth, nicer looking transitions. You can just change the
order property for the click event. But I wanted it to look nice, so I had to play around with the
Check it out here!
I’ve also been working on my personal website this week! I don’t like the site I made when we did our personal sites as a Lambda School project several weeks ago, so I decided to make my own instead of using a template. I’m using Gatsby and Netlify CMS, since I want to include my blog. It’s been my biggest challenge by far since I’ve never worked with React or GraphQL, so thankfully my sweet husband has been helping teach me the new concepts. I would like to incorporate a parallax scroll with for the background of the landing page, but for now I’ll keep it clean and simple since I’m still figuring everything out. I’m just excited because Gatsby sites have a reputation of being really fast and it would be nice to use Netlify CMS as my CDN so that I don’t have to write the MD files myself. I can just enter in the CMS side and it converts it and adds it to my GitHub repo and site for me. Sweet :) I can’t wait to see how it turns out!