My Personal Site's Tech Stack
Ryan
Posted on October 10, 2022
Hey, hey! 🙋♂️ Thanks for stopping by. I recently put together my own developer website, a little blurb about myself and my career - something more than my resume. This started as a quick project to help me learn what Preact was like but slowly turned into something I wanted to polish and deploy. I am pleased with how easy the site was to write, its performance, and its overall feel as a project. In this post, I am going to go over the tech stack I used to create and host this minimalistic site. If you'd like to check out the site before reading this post, you can find it here!
Preact CLI
I initialized my site using the Preact CLI. Preact is a lightweight alternative to React. Preact is a good library to use for a personal site because it focuses on the site's performance and size - I am just displaying static text and images after all. Preact is fast and only ~5kb, while React is ~100kb! I've still got some digging to do to figure where Preact is limited in comparison to React but it worked like a charm for this project.
Styled Components
Styled components let you write CSS in your JS! One major benefit of using this library is that it provides component-level encapsulation, so you write the CSS right in your component's file and there is no worry about it leaking out. This library also has built-in theming, it exposes a wrapper component that gives the rest of your application context to the current theme. The theming functionality made it quite easy to create the light/dark themes for the site.
const Content = styled.div`
align-items: center;
display: flex;
flex-direction: column;
`; // Reference Content directly in your JSX
AOS
The Animate on Scroll library is perfect for anybody looking for minimalistic scroll animations. Initialize AOS, add some data tags to your HTML elements, and you're good to go. This was my first time using this library, and I could see myself coming back to it. I used this to fade/flip in different elements on the page as the user is scrolling down. Seems to give the static content a more interactive feel.
<Container data-aos="fade-up" data-aos-duration="400">
There was one caveat while using AOS with the styled component's theme provider. At times when the user switched themes, child elements using AOS inside a parent also using AOS would disappear and only appear again when the user scrolled. I believe the way styled components obfuscates classes/switches themes was causing the AOS state to believe that the elements were new and had not been animated in yet. To resolve this, I added a custom hook that takes advantage of AOS's document events to keep track of which items had animated in. Once an item had animated, I made sure it did not animate again - keeping it on the screen while switching themes. I used the uuid-random library to help me achieve this.
Netlify + GitHub
Netlify's GitHub integration is so sweet! It makes deploying your site too easy, it's hard to pass up when you want to get something up and running quickly. Through Netlify, you select your repo/main branch in GitHub, define the code's build command and output directory, and then Netlify will automatically deploy and host your site. You can choose to deploy the site whenever you push code to your main branch if you want to, that's what I like to do. You can even customize the site's subdomain name.
Google Analytics (GA4)
I was curious about who may come across this site (if anybody), and whether they would actually interact with the page. GA4 is easy to install into your application. All you've got to do is create an account, and then add a script to your page's <head> tag. GA4 will then give you access to real-time analytics about users, page views, and event counts.
Figma
Figma helped me jumpstart this project. Although my initial design was minimal, it gave enough to go off of to start laying things out. The rest of the layout came naturally after that. One thing I want to highlight is Figma's frame layout grid (the red grid rows). The grid helped get things in the right position when laying things out, following these grid lines will give your page a nice a natural flow without having to think on it too much. It certainly helped me as I don't practice UX design too often.
If you'd like to give the site a look, you can find it at https://ryanhenness.com!
Posted on October 10, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related