Rebuilding My Home on the Web - Update #2

This post is part of a series. You can view the other posts here:

• Original Post
• Update #1
• Update #2 (You are here)
• Update #3
• Update #4

My current landing page, uses react-particles-js to have an animation running in the background.

I held off on re-implementing this until I was satisfied with the rest of the site because I wasn't ahead 100% sure I would keep it.

I ultimately decided to do away with the particles for a few reasons:

1. It made the page design look very busy. It easily draws the eye away from the content of the page and harms the overall experience, in my opinion.
2. Keeping it makes the site less accessible. With the particles, I'd have to add extra javascript this time around just to handle users who prefer reduced motion. In other places I can handle this with some straightforward CSS, and while I could probably do that here too it seemed like a lot of work when users would get a better experience by just not implementing it.
3. Performance. I've noticed in the past that the animations definitely behave differently on different devices. It wasn't horrible, but it was impacting some metrics like LCP on the page. By not including it, I can ensure better performance across a wider range devices.

But now the question was, what should replace the particles? Leaving it as it currently stood was a bit boring.

I decided to add a little depth via a gradient. This was fairly straightforward to do with tailwind. I just updated the styling of the background to be a gradient instead of a single color.

<main className="
      bg-gradient-to-r 
      from-sky-800 via-amber-100 to-primary-light 
      dark:from-primary-dark dark:via-cyan-700 dark:to-cyan-800">
</main>

After adjusting some of the font colors and weights it started to look much better, but was still feeling pretty flat.

I found a few great SVG backgrounds at Hero Patterns and, after adjusting them a bit so they weren't as prominent, added them via CSS to the page. I also decided that instead of just having one, I'll randomly select a pattern on page load and use that. To achieve that I created an array with the names of the patterns and on load, randomly selected the index of one of the patterns.

// done outside of the component since these are static
const backgrounds = ['gears', 'circuit', 'diamonds'];


function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

// further down in the actual component

const [bgPattern] = useState(
    backgrounds[randomNumber(0, backgrounds.length)]
);

return (
<section
    className={`${styles[bgPattern]}`}
    id="intro"
>

With the added texture from the background it looks much better, and not as busy as it did the particles.