Furekunst

The site integrates Contentful as a headless CMS with Next.js, using the Contentful Delivery API to retrieve and present artwork data. The content model features a GalleryPost type, enabling the artist to upload and manage their artwork entries, and a linked SizeAndPrice model. This setup supports conditional rendering of multiple size and price options when an artwork is categorized as a "Print" instead of an "Original".

---

The gallery implements react-masonry-css to create a responsive, Pinterest-style grid that adapts to various screen sizes and gracefully handles artworks of different dimensions. The layout automatically adjusts its column count based on viewport width, maintaining visual harmony while maximizing screen usage across devices, from three columns on larger displays down to a single column on mobile.

---

One distinctive feature is the realistic picture frame effect created entirely with CSS, giving digital artwork a physical gallery presence. The implementation uses layered shadows, borders, and gradient overlays to simulate frame depth, with an optional passepartout (mat board) effect toggled directly by the artistd through Contentful's content model. This attention to presentation details elevates the viewing experience, creating a sense of depth and physicality that's often lacking in digital galleries.

---

The site leverages Next.js's Image component for comprehensive optimization, delivering responsive images in modern formats like WebP and AVIF while reducing bundle size. Images load progressively with smooth fade-in transitions, use appropriate sizing based on viewport, and implement strategic loading priorities where above-fold content appears first. The integration with Contentful's image API allows for additional optimization through URL parameters, enabling resizing and format adjustments directly from the CDN.

---

The site implements Motion (formerly Framer Motion) for subtle animations that enhance the viewing experience without overwhelming the artwork itself. Staggered reveal effects create visual rhythm as users scroll through the gallery, while subtle hover states provide feedback without distracting from the art. The implementation staggers animation timing based on each item's index, creating a cascade effect as content appears on the page, all while respecting user preferences for reduced motion.