Improve image alignment and responsiveness in portfolio items

Enhance PortfolioItem styling and layout for improved image display and alignment

Applied Prettier to reformat the code for better readability and maintainability.

Details:

Refactored .portfolio__img to center images using flexbox.
Ensured consistent image aspect ratio with object-fit: contain and fixed container height at 340px.
Refined keyword styles and hover effects for improved user experience.
Improved responsiveness with media query updates for smaller screens.
Applied Prettier to reformat the code for better readability and maintainability.

components/UI/PortfolioItem.jsx

@@ -1,9 +1,7 @@
-
-import React from 'react';
-import classes from '../../styles/portfolio-item.module.css';
-import Image from 'next/image';
-import Link from 'next/link';
-
+import React from "react";
+import classes from "../../styles/portfolio-item.module.css";
+import Image from "next/image";
+import Link from "next/link";
 
 const PortfolioItem = (props) => {
   const {
@@ -14,31 +12,38 @@ const PortfolioItem = (props) => {
     subtitle,
     ribbonText = null,
   } = props.item;
+
   return (
     <div className={`${classes.portfolio__item}`}>
       <a
-        target='_blank'
-        style={{ textDecoration: 'none' }}
+        target="_blank"
+        style={{ textDecoration: "none" }}
         href={liveUrl}
-        rel='noreferrer'
+        rel="noreferrer"
       >
         <>
           {ribbonText && (
-            <div style={{ zIndex: 99 }} className='ribbon ribbon-top-left'>
+            <div style={{ zIndex: 99 }} className="ribbon ribbon-top-left">
               <span>{ribbonText}</span>
             </div>
           )}
 
-          <div className='bg-transparent'>
+          <div className="bg-transparent">
             <div className={`${classes.portfolio__img}`}>
-              <Image alt={title} src={img} width={380} height={1} style={{maxHeight: "380px", overflow:"auto"}}/>
-
+              <Image
+                alt={title}
+                src={img}
+                width={380}
+                height={300} // Adjust height as needed
+                objectFit="cover" // Ensures the image fills the container
+                style={{ borderRadius: "10px" }}
+              />
             </div>
 
             <h3 style={{ background: "transparent" }}>{title}</h3>
-            <p style={{ background: "transparent", }}>{subtitle}</p>
-            
-            <div className=" w-[100%] mt-5 lg:mt-0"> </div>
+            <p style={{ background: "transparent" }}>{subtitle}</p>
+
+            <div className="w-[100%] mt-5 lg:mt-0"></div>
             <div
               style={{
                 position: "absolute",
@@ -47,8 +52,8 @@ const PortfolioItem = (props) => {
                 display: "flex",
                 flexDirection: "row",
                 flexWrap: "wrap",
-              }}>
-
+              }}
+            >
               {keyword.map((item, index) => (
                 <span
                   className={`${classes.portfolio__keyword} my-1`}
@@ -65,4 +70,4 @@ const PortfolioItem = (props) => {
   );
 };
 
-export default PortfolioItem;
+export default PortfolioItem;

pages/api/contact.js

@@ -1,34 +1,34 @@
-import { GoogleSpreadsheet } from 'google-spreadsheet';
+import { GoogleSpreadsheet } from "google-spreadsheet";
 // Initialize the Google Sheets API
 
 const doc = new GoogleSpreadsheet(process.env.SPREAD_SHEET_ID);
 
 doc.useServiceAccountAuth({
-    client_email: process.env.CLIENT_EMAIL,
-    private_key: process.env.PRIVATE_KEY,
+  client_email: process.env.CLIENT_EMAIL,
+  private_key: process.env.PRIVATE_KEY,
 });
 
 export default async function handler(req, res) {
-    if (req.method === 'POST') {
-        try {
-            // Extract the form data from the request body
-            const { name, email, message } = req.body;
+  if (req.method === "POST") {
+    try {
+      // Extract the form data from the request body
+      const { name, email, message } = req.body;
 
-            // Load the Google Sheets document
-            await doc.loadInfo();
+      // Load the Google Sheets document
+      await doc.loadInfo();
 
-            // Select the first sheet 
-            const sheet = doc.sheetsByIndex[0];
+      // Select the first sheet
+      const sheet = doc.sheetsByIndex[0];
 
-            // Append the form data as a new row in the sheet
-            await sheet.addRow({ Name: name, Email: email, Message: message });
+      // Append the form data as a new row in the sheet
+      await sheet.addRow({ Name: name, Email: email, Message: message });
 
-            res.status(200).json({ message: 'success' });
-        } catch (error) {
-            console.error('Error:', error);
-            res.status(500).json({ message: 'An error occurred' });
-        }
-    } else {
-        res.status(405).json({ message: 'Method Not Allowed' });
+      res.status(200).json({ message: "success" });
+    } catch (error) {
+      console.error("Error:", error);
+      res.status(500).json({ message: "An error occurred" });
     }
+  } else {
+    res.status(405).json({ message: "Method Not Allowed" });
+  }
 }

pages/index.js

@@ -145,7 +145,6 @@ export async function getStaticProps(context) {
     const [youtubeStats, youtubeVideos, blogResponse] = await Promise.all([
       getYoutubeStatsForChannelId("UCf9T51_FmMlfhiGpoes0yFA"),
       getYoutubeVideos(),
-
     ]);
 
     return {

styles/portfolio-item.module.css

@@ -26,10 +26,16 @@
 .portfolio__img {
   background: transparent;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 340px;
 }
 
 .portfolio__img img {
   border-radius: 10px;
+  height: 100%;
+  object-fit: contain;
 }
 
 .portfolio__keyword {