Guess what I did???

I finally updated my personal website, byvernacchia.com. It's definitely been a long time coming.

You're probably wondering, "what's the point of this blog post then, huh? Are you just plugging your new site?"

Hell no!!! I wanted to share, far and wide, the tech I used to create it. Let's get started.

When you first visit the site, you see someone (or something) typing. I thought this was a cool, personal approach. Thankfully, there was a module with this functionality already (yes, I'm a bit lazy). Enter TypeIt. TypeIt helps simulate on-screen typing. It's free for OSS projects and very easy to use and customise.

Then, after learning all about me I display some links via sliding. Check them out or not. It's up to you.

I wanted to use animation instead of just flashing something onto the screen. Where do you think I started? jQuery animate of course. That's how long it's been since I've done animations/effects. After realising how much would be added to my bundle, I abandoned jQuery completely.

Following this was a lot of trial and error with other JS animation libraries. None of them did what I wanted. After thinking that there must be a better way of doing this, I found it. CSS transitions.

CSS transitions work very well but, of course, there's a catch. It's difficult to get the transitions to work when setting the height of an element from "0" to "auto." I found a great article that helped me fix this problem. Hopefully it can help you too.

And that's it. A simple website. No React. No Webpack. No Lodash. It's been great.

...

That's right, I did say "No Webpack." I ended up using Parcel.js. It touts itself as a "Blazing fast, zero configuration web application bundler", and by all means it is. I really liked using it as everything "just worked." I would suggest checking it out!

And finally, for hosting I used Github Pages. Simple as.

Last but not least, the links to the website and it's code.

Until next time...