Personal Portfolio Project


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: = Math.random() * innerHeight + 'px'; = 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: = 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!


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

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!