Better Together.

A gallery meant to inspire.

════ ⋆★⋆ ════

Touch the Color; See the Sound

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)

Tech Stack

Environment Variables

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>

Configuration

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=

Dependencies

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

Usage

Screenshots

Features

Code

Build

    npm run build

Deploy (how to install build product)

License

This example shows how to create an image gallery site using Next.js, Cloudinary, and Tailwind.

Demo

View the demo here

Check out our Next.js deployment documentation for more details.

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example::

 npx create-next-app --example with-cloudinary nextjs-image-gallery

yarn create next-app --example with-cloudinary nextjs-image-gallery

pnpm create next-app --example with-cloudinary nextjs-image-gallery

References

Cloudinary API: https://cloudinary.com/documentation/transformation_reference

CodeLikeAGirl29/image-gallery