DEV Community

Brenden Niedermeyer (he/him)
Brenden Niedermeyer (he/him)

Posted on • Originally published at brenden.codes on

Rebuilding My Home on the Web - Update #2

A screenshot of the updated design with gradient and background pattern

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

My current landing page, uses react-particles-js to have an animation running in the background.
My current website with moving particles 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.
The page with a plain dark background and no particles.

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>
Enter fullscreen mode Exit fullscreen mode

After adjusting some of the font colors and weights it started to look much better, but was still feeling pretty flat.
Light and dark mode of the pages with the new gradients.

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"
>
Enter fullscreen mode Exit fullscreen mode

With the added texture from the background it looks much better, and not as busy as it did the particles.
Final version of the pages with gradient and pattern background on a desktop, tablet, and mobile device.

Top comments (0)