Project carousel design improvement

[abhiroopc84]

Description

Improves the project carousel design in the following ways:

1. Projects that are out-of-focus are smaller and have 60% opacity applied
2. You can see a portion of the top / bottom of the next / previous project in the carousel

There is an issue with the slides starting index 2 having a style of scale(0) when scrolling initially. Also, I've tried adjusting the width and height to be unique for each project, but I wasn't able to pull it off, and I also wonder if the unique heights and widths of each project would give a uniform look.

599

What is the purpose of this pull request?

• [X] New feature
• [ ] Documentation update
• [ ] Bug fix
• [ ] Refactor
• [ ] Release
• [ ] Other

[Kitenite]

Hope you don't mind me pushing to your branch here. There seems to have been some extra layers added which caused the aspect ratio issue. You can see it fixed here. It's actually working except for one last thing, the images can be too short to show on the preview which makes sense. One last change is to align the image to the top or bottom if it's not in focused.

https://github.com/user-attachments/assets/cf7d1bc7-e14c-43b2-8794-99b06b83cc7c

[Kitenite]

@abhiroopc84 Updated that here. 2 last small issue:

1. There's a flicker that happens because the alignment changes right away. It would be nice if we can delay that until after the animation is finished. Perhaps keep a "visualCurrentIndex" vs the currentIndex that only updates after the animation?
2. There's seems to be a new issue with scrolling quickly causing multiple scrolls. I think this did not exist before. Any idea how we can address this?

Overall nice work! This feels like a more premium experience already. Just gotta make it smooth :) https://github.com/user-attachments/assets/0059cd0c-bb9e-4286-8ed0-eb18a98a8d8f