Visualization section transformation

• Separated visualization section into text wrapper and body wrapper
• Added a text with reveal animation in text wrapper
• Added visualizedMoves with animation around the img-container
• Deleted the thought component

Finally I get to post a devlog with some good. It’s a better time cuz I’m logging both the figma and the coding time for the first time.

Previous design

I didn’t really like the previous design so I thought for a while and came up with this design. Although it isn’t perfect it’s much better than the last one. The figma design and the website don’t look the same because I just did the design roughly in figma and then winged the chess moves position in vscode. I think removing the background of the chess moves was a great decision.

New design

Firstly I designed the concept in figma before coding. I added a text wrapper within the visualization to break the flow of the website. The previous design which I was going towards started feeling like a generic website (a bad one). Now the there’s text with a reveal animation which looks pretty simple tbh but I think it’s better. I might change that in future though or add elements to make it look fuller. The after the text animation the person visualizing image appears and different moves appear indicating that the person is thinking the moves. I was going to use a thought component for this but I did it in a more simpler manner.

Time

I always underestimate the time required to build things. I feel that I should have completed more in the time that has been recorded but small bugs happen while coding which is really frustrating. In this devlog also I feel I should have completed more. Am I just slow or happens to others as well. I really would like to know (comment).