Trying cloudinary as my image server

urbanobaz · Jan 27, 2024 · bbb3311 · bbb3311 · vercel · Jan 27, 2024
1 parent 02627ef
commit bbb3311
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 3 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="dfrugnsw9"
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
-import headshot from '../public/finalheadshotedit.png';
+import { CldImage } from 'next-cloudinary';
 import styles from '../styles/Main.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -33,12 +33,14 @@ export default function Home() {
                 transition={{ delay: 0.4 }}
               >
                 <Link className="cursor-pointer" href={'/'}>
-                  <Image
+                  <CldImage
                     id="pictureImage"
                     className={styles['picture-image']}
-                    src={headshot}
+                    src="https://res.cloudinary.com/dfrugnsw9/image/upload/v1685401832/finalheadshotedit_tfqes4.png"
                     alt="Portrait of Urbano Baz"
                     loading="lazy"
+                    width={300}
+                    height={300}
                   />
                 </Link>
               </motion.div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "eslint-config-next": "13.4.4",
     "framer-motion": "^10.12.22",
     "next": "^14.1.0",
+    "next-cloudinary": "^5.20.0",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",