Product Vision
This website is for art collectors and fans to visit works from the 3D artist, Xun Wang. The website presents his bronze sculptures and 3D works.
Important aspects include high performance and sleek design.
Challenges
- Render high-quality images without hindering performance.
- Serve useful information to potential buyers.
- Internationalization (i18n) support.
- Create interactive animations without being too jarring.
React Spring
The React Spring library was a great way to bring sleek hover and transition animations into the project.
Animations were also reused for modular components such as buttons.
Durations were kept short to feel responsive.
Internationalization (i18n) support
The website uses next-i18next for full internationalization support. The website has currently been translated into Chinese and English with support for future languages.
"contacts": "聯絡",
"exhibits": "展覽",
"works": "作品",
"pageTitle": "王尋 | 時差雕塑"
The data is loaded from JSON files and only loads needed translations. Since the next-i18next package also supports server-side rendering, all translations are SEO compatible.
Image Optimization
Since images were a big part of the project we tried to optimize it as much as possible. We mostly relied on Next.js to lazy load the 4k images. This resulted in a 22% speed increase for pace load times.
The optimal image sizes are fetched based on different screen widths which allows us to render high quality images for bigger screens while serving smaller images for mobile devices.
Takeaways
Overall the Artist was very pleased with the end result and so was I. Tailwind CSS was also a great tool to use and allowed us to maintain and update styles easily.
