fireship-io / threejs-scroll-animation-demo

3D Scrolling Portfolio Website with Three.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Some code suggestions

justingolden21 opened this issue · comments

Hi, I've been making my own version of this, and I found some improvements to your code:

You have:

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

twice in your code

Your blockquote could use some "padding" (although adding padding and margin to the quote and/or paragraph doesn't work as intended, so you can add:

blockquote p {
  background-color: white;
  padding: 2rem;
  line-height: 2;

Before:
image

After:
image

Adding a red border yields this:
image
and adding to the blockquote itself (rather than blockquote p) just adds a line around all parts regardless of text per line of course

You also have some other wacky stuff in your css with random sections indented twice for seemingly no reason.

You also have about twenty random blank lines in a row in your html, and some other oddities like in your JS you have:

moon.position.z = 30;
moon.position.setX(-10);

And you use .position.x, .position.y, .position.z to set the position in all other nine places, but in this one area you set it with setX which I found weird. The z-index is also needlessly set and there are some other pieces of unused code here.

Awesome profile / template / website, just wanted to give my two cents for cleaning up the code base a bit since it's a little messy and seems to be intended as a template repository (unless you actually worked at McDonalds, Burger King, and Taco Bell and want to cite that as work experience on your web dev portfolio 😄).