The new MichinokuWeb
Hello everyone, I hope you are having a great day, wherever you are.
I'm currently working through The Odin Project to learn more web design and other things, and as practice for animations and such I decided to redesign my homepage. So I spent a couple weeks doing just that! The previous page was more like a sales pitch for the things I can do, but I realized that, while I really like making things, I'm really bad at marketing myself and getting the word out. So I wanted to make a portfolio page combined with a space I can use to publish things. And here we are. It looks quite different, doesn't it?
Seasonal Mountains
Check out these mountains! They almost look like real mountains, right? That's because they are! I used an image of a real mountain range in Iwate and traced the mountains to create a parallax with three mountain SVG images. There are different themes depending on the season. Right now you can enjoy the autumn theme, with falling leaves. You can check back in different seasons to see all the themes. Or, if you're skilled with developer tools in your browser, you can try to find where I set the season and set it to a different one! Of course, you can also stop the animation with the push of a button.
If you like the dark theme more, you may have noticed the stars. They don't look randomly scattered, do they? They are not! I looked up star patterns in this region and wrote a python script to find the stars location and apparent brightness to translate into JavaScript. Now, I just import the stars as HTML files, so JavaScript does not have to do the same work over and over again, but these are star patterns you can see during this season in the early night sky in Iwate. And yes, they change for every season as well! Give it a try!
Nifty Features
This blog also has a cool code block feature. I want to show you how it looks, so let me share a bit of code from this website with you. If you scroll down, you may notice that the background parallax mountains move ever so slightly. Here is how it works!
const mountainParallax = (function () {
// Only the mid and back distance mountains move
const back = document.querySelector(".layer.back");
const mid = document.querySelector(".layer.mid");
function moveMountains() {
// Get the scroll position
const scroll = window.scrollY;
// Translate both mountains at different rates for a parallax effect
back.style.transform = `translateY(${scroll * 0.02}%)`;
mid.style.transform = `translateY(${scroll * 0.01}%)`;
}
// Fire this event on scrolling and resizing
window.addEventListener("scroll", moveMountains);
window.addEventListener("resize", moveMountains);
})();
I really like this code block! It uses highlight.js with the atom-one-dark-reasonable theme. Now I can easily show some stuff I work on and how it works. Starting with this one, just for fun! The parallax has three layers, front, mid and back. The front moves as the page does with the regular scroll, but mid and back move at different speeds to create a subtle perspective effect. I think it's really cool. The only slightly unrealistic thing about it, is that you see more stars as you go down, instead of less. In truth, I initially moved all layers up, to create the same effect, but this was causing some problems with sudden gaps, so I decided on this compromise! The effect is used when you scroll or resize the window. Be sure to check it out.
Personal Content
Beside the index and the blog, you can now also find my portfolio with websites I worked on and apps and projects I made. I will be adding more as I make them, and I expect some of them to change quite a bit the more I learn. You can also see a gallery with some of the photographs I took in Tohoku over the years. I will be adding more over time!
If you want to learn more about me and where I came from and how I got here, you can check out my new about page and my updated CV.
I'm looking forward to sharing more fun stuff in the future.
Have a good day!