Chess-website

Changes:

• Split home.jsx into smaller components
• Installed and applied different font weights
• Made navbar better
• Completed puzzle section on a basic level

This time instead of jumping on doing something new I started with making the code cleaner first. It was easy as nothing broke. Then, I realized the font in the hero section doesn’t look as bold as in my figma design so after looking into the problem for a while I realized I had just the regular font weight of font downloaded leading to fonts looking different. Also made navbar better by decreasing horizontal padding in the button and adding a box shadow. Adding the box shadow made the navbar visible in the courses section. I also completed puzzle section which is looking good but I want to animate the image (Yoinked from chess.com btw 😅). The animation will bring so much life into the section but I really don’t know achieve that. If you can help me or have any suggestion in general please let me know. That’s all for this time folks. Piece ✌️ (It’s a pun btw)

Ayy new devlog!!

Changes:

• Corrected timing of animations in courses section
• Added level indicator of thumbnail
• Added temporary images in each thumbnail.
• Added animation to course title
• Made animation on work reverse as well

I’ve shifted on my macbook for coding which I’ve received from flavortown. Anyways, the courses section looks much better now. I am still not satisfied with the animation of courses info elements. I spend way to long to make that work but in the end I took help of gemini to make it work. Also, timing looks way better than last time. Now, I’m going to split the home page into smaller components to make the code cleaner. Also I’ve to do something of the navbar. Any suggestion will be appreciated.

Changes:

• Added shrinking animation in hero section
• Moved courses text to a constants file
• Added thumbnails in the courses section with animation

The courses section animation doesn’t look the way I want it to be. I’ll be fixing that.. Also things are taking more time than expected which is really frustrating. I thought this will take me about an hour but it’s still not finished. I’ll surely finish courses section today. Hope your project is going smoothly.

Changes:

• Added text reveal animation

Ahhhh it took three hours only to create this text revealing animation. I stumbled across many css and gsap bugs to make this. I first tried to use the ::before pseudo element which worked really well but later replaced it with span cuz i couldn’t figure out how to animate that with gsap. There are many other things that really annoyed me but lets not make this devlog a whole essay. But I love how it turned out in the end.

Changes:

• Fixed the page stacking animation
• Changed the layout of hero section.
• Made navbar position fixed

I was trying to make the navbar sticky which wasn’t working at first and was so annoying, after solving that I found out that it won’t go outside hero section. I was frustrated that I was messing up something so easy. Also it seems that I was doing the stacking animation the wrong way so I fixed that also. So now I have a clean stacking page animation and a navbar that stays at a fixed position.

Created courses-section with page stacking animation. It took me an hour to figure this out 😭. I knew that I have to pin the hero-section but couldn’t figure out how to move the courses-section to overlap the hero-section. I watched different videos and even went to some random guy linked in account to find out the answer. But eventually I just figured it out myself. I still have to check if the way I have accomplished it is the correct way or not.

Just worked on adding the animations to the home page. Also I downloaded the font instead of using google fonts cuz it was taking some time to load every time I reloaded the website. The animation of the hero text was a little tricky as it wasn’t working at first but then I found out the culprit was span. I change the span to inline-block and then the animation worked as expected. I have also made the let’s go nav button same as the cta button for consistency. You won’t be able to see the animations sadly cuz I’m attaching a screenshot here.

First devlog

I have worked on the hero section. I think it looks pretty good. I have some improvements to do on the nav bar. Also, I have to crop out the hero image. The image is taking alot of space rn. Now I’ll devlog after the hero section is complete and then will start on animating the hero section.

Hope you’re project is also going well.