Get recognized: add some pizzazz to your portfolio

What?

When conceptualizing my personal profile site, the number one thing I had in mind was that I needed something to reflect my personality, to 'pop'. I had been searching for ideas for a while when I came across a CodePen that immediately caught my attention. I had seen moving gradient backgrounds before, but not like this; sliding diagonal backgrounds that are set under the content. I loved it.

We are going to recreate that together. What will this look like? Check out the live demo here:

Let's get started

Let's get some HTML written. We are going to create three divs (<div></div>) all with the class of background class="background. So, what we have now is:

<div class="background"></div>
<div class="background"></div>
<div class="background"></div>

We still need to do two things to the HTML. In the second and third <div>'s we need to add a second class="". Add 'background2' to the second div and add 'background3' to the third div. You’ll see the reason in the following paragraphs and now the result should look like this:

<div class="background"></div>
<div class="background background2"></div>
<div class="background background3"></div>

Add CSS

Now it's time to add some style! To start, let’s go ahead and create our three background classes. So now we have:

.background {

}
.background2 {

}
.background3 {

}

Now in the .background{} class we are going to set up our movement with the animation: property. We’ll add the code and then I’ll explain what it does. Add this code to the background:

.background {
    animation: slide 3s ease-in-out infinite alternate;

}

What are we doing here? It’s a lot jammed into that statement. First, we are naming the animation 'slide' and then telling it to take 3 seconds to complete. Next, we are telling the timing function to 'ease-in-out', which means to start slow and end slow and to iterate infinitely. Lastly, alternate tells the animation to 'play forward and then in reverse'.

Now let's add the rest of the properties to the .background{} starting directly below the animation line:

.background {
    animation: slide 3s ease-in-out infinite alternate;
    background-image : linear-gradient(-50deg, #ff0004 50%, #0065d7 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

Oh my! What's going on with the background-image: property? We set it up to be a linear-gradient. By default linear-gradient is from top to bottom. So, the first part where we set it to -50deg, sets a specific angle. Next, linear-gradient needs at least two colors, so we are going to use a shade of red and a shade of blue #ff0004 and #0065d7 respectively. The 50% after each color is an optional stop position you can add to the property. In our case, we only want each color to cover 50% of the gradient.

The remaining properties in the .background{} make sure it's positioned where we want it, that it will be behind the content, and that it’s slightly opaque. Let's finish up with the .background2{} and .background3{} classes.

.background2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

.background3 {
    animation-duration: 5s;
}

For these two classes we just want to adjust a few specific qualities of the animation. In .background2{} we want it to play in the alternate direction of the .background{} class. We also want it to take a full one second longer to play (any faster reduces the UX). For .background3{}, we just want it to take a full two seconds longer than the .background{} class.

Why don't .background2{} and .background3{} have all the same properties as .background{}? Well, recall the <div>'s we created in the HTML? All three contain the .background{} class which handles all the color. The other two background classes will apply a white overlay effect in their respective <div>'s creating different shades, and with the slight animation property adjustments, give us the different shades of red and blue moving diagonally! BOOM!

Let's make it move

Time to add that last bit of CSS, the @keyframes! A keyframe is a CSS rule that controls the intermediate steps in an animation sequence by declaring waypoints (keyframes) along the animation sequence. Put this at the bottom of the CSS:

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}

Let’s break it down. We have 'slide', which is what we initially named the animation in the top-level .background{} class. Next, we’ll declare two waypoints. Essentially we’re directing the movement from top to bottom in a 'here' to 'there' way. So at the start of the animation (0%) we set it to an offset of -25% and then at the end of the animation (100%) it moves to an offset of 25%. Our full CSS should look like this:

.background {
    animation: slide 3s ease-in-out infinite alternate;
    background-image : linear-gradient(-50deg, #ff0004 50%, #0065d7 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

.background2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

.background3 {
    animation-duration: 5s;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}

To see this live, check out my profile site at fitzweb.dev!
See the code at this GitHub Repo fitzwebdev!

Call to action

Now that you have a fun little sliding diagonal background, make it your own! You can add a fourth or fifth background, using the same slide animation, but with the linear-gradient line set to be up and down. Then you'd have diagonal movement along with right to left vertical movement. There is a lot you can do with this to experiment with to understand the basics of what we've learned today. Go build and make it your own!