Tattoo-Studio

A Tattoo-Studio portfolio with Cloudinary Image Gallery, On-Demand ISR, SSG, Static Paths

Features   •    Installation   •    Usage   •    Environment Variables

🇬🇧 English   •    🇪🇸 Español   •    🇧🇷 Português

Home.mp4

Portfolio.mp4

Contact.mp4

Features

• Image Gallery connected with cloudinary Account
• Automatic e-mails with nodemailer
• Form Validation with react-hook-form
• Internationalization with GetStaticProps
• Beautiful UI with material-ui
• Beautiful Page Animations with framer-motion
• Responsive 8-pt grid system with figma
• Sitemap with next-sitemap
• SEO with next-seo

Installation

# Clone this repository
$ git clone git@github.com:sarassaura/tattoo.git

# Go into the repository
$ cd tattoo

# Install dependencies
$ npm install
OR
$ yarn set version berry
$ yarn install
$ yarn dlx @yarnpkg/sdks vscode


# Run the app
$ npm run dev
OR
$ yarn dev

Usage

1. Create a Cloudinary Account
2. Create a Gmail Account
3. Get Cloudinary Config Info
4. Generate Gmail App password
5. Create Folders with Images in Cloudinary
6. Set the environment variables
7. run

Environment Variables

NEXT_PUBLIC_SITE_NAME
NEXT_PUBLIC_SITE_URL
CLOUDINARY_NAME
CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET
EMAIL - GMAIL
PASSWORD - Generate APP password
SECRET_TOKEN

Cloudinary Configurations

This is important for the ISR revalidation:

Go to the cloudinary settings, under uploads tab, and put this in notifications:

https://<NEXT_PUBLIC_SITE_URL>/api/revalidate?secret=<SECRET_TOKEN>

Meta

Created By Sarassaura: github.com/sarassaura