ReiKikkawaGraduationWork

1 Simplicity
To highlight the beauty of the photos, I didn’t add complicated features. This carousel should be simple a way to view photos.

2 Curiosity
Just because the design of a website shouldn’t affect the beauty of photos, it doesn’t mean it should be tedious. I opted for Three.js carousels because they are simple and impressive.

3 Fast loading
I had to develop a 70-page book, which meant the website would be very slow to load without countermeasures. Also, to maintain the quality of the photos, I didn’t use WebP. Instead of a CMS, I decided to use a SSG to manage the images.

Having defined the core values, I created a draft along with the care values in Figma.

I built multiple carousel prototypes using Three.js. Considering visibility, and the core values, I picked up the most appropriate carousel(no.3).

I built this website in just three days, using Google Antigravity, a new AI-powered coding platform and IDE developed by Google. In my opinion, this AI agent is much smarter than any other AI coding agent.

I valued each year, because this book is a bunch of both photos and her memories. As such, I added on Text Animation to feature memories.

To support mobile devices, I converted the horizontal carousel into a vertical one. Also, I have converted some fires into other actions and omitted some actions.

For usability reasons, the hit areas for the Next and Previous areas were adjusted significantly depending on the device. As a result, the interface is now comfortable to use on mobile as well.