This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.
What I Built
It’s more of a snack than a feast, but I made a gallery app to recreate pieces of a couple of sites I found on awwwards. It’s got nice transitions, has a monochromatic feel and takes advantage of Netlify’s Image CDN.
Demo
Give it a try: Link ✨
Here’s the Code💻
Platform Primitives
I used the CDN for fetching and transforming images in my NextJS app, it also provides some amazing cache out of the box. Using the custom loader prop in the next/image component, I was able to apply the following transforms:
Sizing
Object Fit
Format
Quality
Here’s a snippet of the loader:
const { src } = args;
return `.netlify/images?url=${src}&w=${transforms.width}&h=${transforms.height}&q=${transforms.quality}&fit=${transforms.fit}&fm=${transforms.format}`;
};
And here’s the UI implementation:
Generally, when using NextJS 13.5+ with Netlify, you don’t need a custom loader, the cdn works by default with next/image but I needed the loader for some of the transforms and flexibility in rendering. Thanks @hrishikeshk for pointing that out.
Conclusion
It was a fun experience building this, I got the chance to implement some nice designs and transitions, play around with CSS and try out a new component library. I’m also really delighted with how the bottom section turned out:
Thanks for reading and have a great day 👋
…I wonder if anyone got the pun in the title 🤔
