Cloudinary Phototographer Portfolio

This template is a plug and play image gallery portfolio site using Next.js, Cloudinary, and Tailwind.

Installation

Follow these steps to install and set up the Template on your local machine:

Clone the repository:

git clone https://github.com/jbxamora/photoport.git .

Install Dependencies:

npm i or npm install

Create dotenv file with the following lines:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=yourcloudinarycloudname

CLOUDINARY_API_KEY=yourcloudinaryapikey

CLOUDINARY_API_SECRET=yourcloudinaryapisecret

Run on your local machine:

npm run dev

This will ensure the app will run with any new Cloudinary account. Please follow the steps below to view how to customize further.

Cloudinary Setup

Switching these folder paths will ensure that you can connect your own folders and images.

export async function getStaticProps() {
  const results = await cloudinary.v2.search
    .expression(`folder:samples/*`) // select folder that holds ALL images
    .sort_by("public_id", "desc")
    .max_results(400)
    .execute();
  let reducedResults: ImageProps[] = [];
 
  let i = 0;
  for (let result of results.resources) {
    reducedResults.push({
      id: i,
      height: result.height,
      width: result.width,
      public_id: result.public_id,
      format: result.format,
    });
    i++;
  }

 
  const fetchImagesByCategory = async (category: string) => {
    try {
      const res = await fetch(
        `/api/images?folder=samples/${encodeURIComponent(category)}` // Do the same here.
      );

Lastly, Make sure to switch out the categories in the Filter component. Keep in mind when creating your folders that it is case sensitive.

<Filter
          categories={[
            "animals",
            "Lifestyle",
            "people",
            "Events",
            "landscapes",
          ]}
          onCategorySelect={handleCategorySelect}
        />

What I Learned

Next.js

In this project, it was used to create a seamless user interface that provides an optimal experience across a wide variety of devices. It allowed for both client-side and server-side data fetching, ensuring that the images load quickly and efficiently.

Cloudinary

In this project, it was used to store, optimize, and deliver images for the portfolio. Cloudinary's API allowed for quick and easy fetching of images and its manipulation features were used to ensure the images are displayed in the optimal size and format.

TailwindCSS

For this project, TailwindCSS was used to create a modern and responsive UI. Its utility-first nature made it incredibly easy to customize the portfolio's design and create a unique look and feel.

Imagemin

Imagemin is a module to minify images. It was used in this project to compress the images before they were uploaded to Cloudinary. This step ensured that the image files were as small as possible without losing quality, which helped improve the site's performance.

TypeScript

It was used in this project to ensure type safety and improve tooling. It made the code more readable and maintainable.

Image Portfolio