A gallery meant to inspire.
When unexpected sadness really hits home & it's difficult to shake it... always remember it's the smallest things that manage to melt my heart.
Live demo can be found here
I even designed the SVG (Logo and Bridge files used on this project)
To run this project, you will need to add the following environment variables to your .env file
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<name-of-cloud>
CLOUDINARY_API_KEY=<your-api-key>
CLOUDINARY_API_SECRET=<secret-key>
// optional
CLOUDINARY_FOLDER=<specific-folder-name>
Add the following variables to your .env.local or .env file. & if you deploy it, with Vercel for example, you can place these variables in the Envorpnment Variables part of the setup!
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_FOLDER=
- From the command line:
- @headlessui/react
- @heroicons/react
- cloudinary
- eslint-config-next
- framer-motion
- imagemin
- imagein-jpegtran
- next
- react
- react-dom
- react-hooks-global-state
- react-swipeable
- react-use-keypress
npm run build
This example shows how to create an image gallery site using Next.js, Cloudinary, and Tailwind.
View the demo here
Check out our Next.js deployment documentation for more details.
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example::
npx create-next-app --example with-cloudinary nextjs-image-galleryyarn create next-app --example with-cloudinary nextjs-image-gallerypnpm create next-app --example with-cloudinary nextjs-image-gallery- Cloudinary API: https://cloudinary.com/documentation/transformation_reference