Personal Portfolio Project

Hello,

I’m just doing the personal portfolio project. It’s almost done, but one thing is bugging me.

I’ve done this animation on my website, check it out here > Adrian Somor

But the animation is overflowing on the right side.

Can somebody point me in the right direction?

Here’s the GitHub project: GitHub - wengriff/portfolio-project

That looks Great! Is it common to get hired for piece work coding?

Hi Adrian, I really like the style on your site, and that animation looks great! This is a tough one, but hopefully what I found helps you diagnose the issue.

When I took a look in DevTools, I noticed that the overflow was getting bigger as time went on. I think the issue might be related to the script driving the animation. Specifically:

square.style.top = Math.random() * innerHeight + 'px';
square.style.left = Math.random() * innerWidth + 'px';

If I print out innerWidth in the console, it keeps increasing. That means squares can keep advancing further and further to the right on the page when created.

What I think is happening is this: the animation randomly generates a square such that the size of the square extends past the right boundary of the webpage, which increases innerWidth past the width of the viewport.

I haven’t tried it, but I think the simplest way to avoid the overflow is to prevent the animation from creating any squares near the right boundary of the screen. Say the maximum size of a square was 80px. You could subtract 80 from the animation equation on both sides of screen to center the animation and still maintain the same effect:

square.style.left = Math.random() * (innerWidth - 160) + 80 + 'px';

That way you have a buffer on both sides of the screen that prevents squares from exceeding the boundaries of the viewport. Hope this works out for you!

3 Likes

Woohoo!! It works, thanks @codingtojoy, I just updated the website so you can take a look. Thanks a lot.

1 Like

Hey @taraciaskustomcraft , I wouldn’t say it’s common, but it’s definitely possible if you want to :slight_smile:

1 Like

Awesome! Glad it worked, and I really like the finished product. I hadn’t seen an animation like that before, so I learned something, too!

1 Like

Hello,
Thank you for your reply! This is so neat, you had a question and was able to get it fixed! It looks Great!! I hope your ventures treat You Well as You treat them Well, too!