THIS MIGHT BE THE LAST DEVLOG

First I polished the puzzles sidebar. I made the sidebar width to be same as vision page sidebar. Then I changed the level button size as they were too small for larger screens. I also made the level button container scrollable if the level buttons overflow. This took the most time because the whole puzzles sidebar body was overflowing pushing down that start button. I just wanted the sidebar body to not overflow which would make the levels container to be scrollable. The fix at last was using min-height: 0 to the sidebar body. Idk how the min-height: 0 is helping here 😭 .

Next I made the visualization section animation (The last section of the home page) to appear quicker. This was a recommendation from my brother as when scrolling previously the section might seem like it contained nothing until you scroll fully. I faced issued mainly with the section not pinning to the top of screen when trying to move the animation timeline starting point. Also I tried to placing text higher on y axis and animate it coming down with the user scroll which produce the result I was expecting. So, I split the timeline into two. The first one reveals the text and the second one shows a person visualizing. The tex revealing animation ends when the section top hits the top of the screen which makes the section pin to the top exactly how I wanted it to be.

Then I polished vision page sidebar as follows:

Made the sidebar responsive after user has clicked on start
Made the sidebar header look better and fix mismatch of padding from body
Returned to using flex for the attempts and mad them responsive
Tweaked the options and info as they were looking odd in some screen sizes (mainly the tablet one which looked really bad)

I then copied some of these changes to the puzzles sidebar for maintaining similarity.

Lastly I capped the width of course, puzzles and vision page to 1600px by adding a wrapper element. It acted weird on puzzles and vision page sidebar as there was already a element named wrapper and so I changed the classname to page-wrapper.