Cloudinary Portfolio Workshop Starter

A React + Vite + Tailwind starter app for a 1-hour Cloudinary portfolio workshop.

For students

After cloning or downloading the repo:

npm install
npm run dev

Then open the local URL shown in the terminal.

What to edit

Most workshop changes happen in src/App.jsx.

Start with:

const CLOUD_NAME = 'demo';

Replace demo with your own Cloudinary cloud name.

Then replace the sample media public IDs in:

• workExperience
• videoProjects
• the hero image

Cloudinary transformation examples

Try changing these strings:

f_auto,q_auto,w_700,h_700,c_fill,g_auto
f_auto,q_auto,w_1280,h_720,c_fill,g_auto
f_auto,q_auto,w_1080,h_1080,c_fill,g_face

Workshop sections

• Hero section
• Work experience image gallery
• Projects video gallery
• Contact footer