This will be a further improvement of the Every Picture project.
1. I'm going to enhance the scrolling effect as expected: when users scroll down the page, the first text scrolls out of the screen, and the second one follows, providing an overall introduction to the zoomed photos.
2. I'll also focus more on the transition animation when a user clicks on an image. If possible, I might add a function to ensure users can exit the overlay by clicking any part of the shadow.
3. The title design may also be changed to be more consistent with other projects.
To better improve the project's UX/UI and functionality, I asked three friends who have little understanding of web design to share their 'foodie' experience. All of them really liked the topic and format. There aren't a bunch of photos that overwhelm people. I'll also TA after trying my best to solve problems.
Friend A used a phone and a laptop to test this website. She found out that the photo is stretched when she clicks on it on the phone.
Friend B found that the photo captions are really interesting, providing detailed descriptions. She also gave me some suggestions about correcting some grammar mistakes.
Friend C found that the close button is a little small. It would be better to be able to exit the overlay effect wherever she clicks outside the shadow part.