I think finally you may have found your answer to this question:
I put the effort and understand how it articulates and the logic behind it but the more I do those exercises, the more I ask myself if this way of learning is obsolete. I completed the exercise in 5 minutes with chat GPT. In real life, if I need to solve a problem, I would also turn to a GPT. So what’s the point ?
Maybe one day we’ll be there that you do not need to understand programming languages anymore to build websites. For small projects, we might already be there. There are resources like Webflow that let you build attractive websites without having to write a single line of code. Tools like CGPT can also be a great help, but they still deliver rubbish sometimes. At the current stage, you still need to understand what they suggest to make them a really helpful resource.
I’m not sure what exactly you mean with slow loading – I did not observe that. Just a little sluggish behaviour of the eye movement, sometimes. But I have a very fast machine.
I don’t know if this is the reason for it, just an observation. One thing that does not seem very efficient to me is this snippet:
function movePupils(e) {
pupils.forEach((pupil) => {
const rect = pupil.getBoundingClientRect();
const x = (e.pageX - rect.left) / 30;
const y = (e.pageY - rect.top) / 30;
const transformX = x + "px";
const transformY = y + "px";
pupil.style.transform = "translate3d(" + transformX + "," + transformY + ", 0px)";
});
}
You define the same const variables on every little movement of the mouse here. And you get the position (const rect) on every little mouse move – that means several times per millisecond which is completely unnecessary. You need all that just once. The only values you need to get inside the event listener function movePupils are e.pageX and e.pageY.