optimed images

package.json

@@ -9,7 +9,8 @@
     "start": "next start",
     "export": "next export",
     "deploy": "next build && next export && gh-pages -d out",
-    "lint": "next lint"
+    "lint": "next lint",
+    "resize": "node utils/resizeImages.js"
   },
   "dependencies": {
     "@next/font": "13.1.2",
@@ -19,6 +20,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
+    "sharp": "^0.33.5",
     "styled-components": "^5.3.6",
     "styled-normalize": "^8.0.7"
   },

src/components/Footer/Footer.js

@@ -21,7 +21,7 @@ const Footer = () => {
             <AiOutlineMail size="1.5rem" /> E-mail{" "}
           </LinkTitle>
           <LinkItem href={`mailto:${email}`}>
-          {email}
+            {email}
           </LinkItem>
         </LinkColumn>
       </LinkList>
@@ -30,16 +30,16 @@ const Footer = () => {
           <Slogan>Learn to Innovate.</Slogan>
         </CompanyContainer>
         <SocialContainer>
-          <SocialIcons href={github}>
+          <SocialIcons href={github} hoverColor="#333">
             <AiFillGithub size="3rem" />
           </SocialIcons>
-          <SocialIcons href={linkedin}>
+          <SocialIcons href={linkedin} hoverColor="#0077b5">
             <AiFillLinkedin size="3rem" />
           </SocialIcons>
-          <SocialIcons href={instagram}>
+          <SocialIcons href={instagram} hoverColor="#e4405f">
             <AiFillInstagram size="3rem" />
           </SocialIcons>
-          <SocialIcons href={twitter}>
+          <SocialIcons href={twitter} hoverColor="#1da1f2">
             <AiFillTwitterCircle size="3rem" />
           </SocialIcons>
         </SocialContainer>

src/components/Header/Header.js

@@ -5,6 +5,7 @@ import { DiCssdeck, DiSnapSvg } from 'react-icons/di';
 
 import {  facebook, instagram, github, twitter, linkedin } from '@/src/constants/constants';
 import { Container, Div1, Div2, Div3, NavLink, SocialIcons, Span } from './HeaderStyles';
+import Image from 'next/image';
 
 const Header = () => (
   <Container>
@@ -18,8 +19,8 @@ const Header = () => (
           marginBottom: "20px",
         }}
       >
-        <DiCssdeck size="3rem" />
-        <Span>Portfolio</Span>
+        <Image src={'/logo.svg'} alt="Logo" width={28} height={28} />
+        <Span style={{marginLeft:'8px'}}>Portfolio</Span>
       </Link>
     </Div1>
 
@@ -36,19 +37,13 @@ const Header = () => (
     </Div2>
 
     <Div3>
-      {/* {socialmedia.map((social, index) => (
-        <SocialIcons href={social.link} key={index}>
-          <AiFillAlert size="3rem" />
-        </SocialIcons>
-      ))} */}
-
-      <SocialIcons href={github}>
+      <SocialIcons href={github} hoverColor="#eee">
         <AiFillGithub size="3rem" />
       </SocialIcons>
-      <SocialIcons href={linkedin}>
+      <SocialIcons href={linkedin} hoverColor="#0A66C2">
         <AiFillLinkedin size="3rem" />
       </SocialIcons>
-      <SocialIcons href={twitter}>
+      <SocialIcons href={twitter} hoverColor="#1DA1F2">
         <AiFillTwitterCircle size="3rem" />
       </SocialIcons>
     </Div3>

src/components/Header/HeaderStyles.js

@@ -116,14 +116,13 @@ export const NavProductsIcon = styled(IoIosArrowDropdown)`
 // Social Icons 
 
 export const SocialIcons = styled.a`
-transition: 0.3s ease;
-color: white;
-border-radius: 50px;
+  transition: 0.3s ease;
+  color: white;
+  border-radius: 50px;
   padding: 8px;
-&:hover {
-    background-color: #212d45;
+  &:hover {
+    color: ${(props) => props.hoverColor || '#212d45'};
     transform: scale(1.2);
     cursor: pointer;
-    
   }
 `

src/components/Hero/Hero.js

@@ -13,7 +13,7 @@ const Hero = () => {
           Hi, I&apos;m Ishu <br />
         </SectionTitle>
         <SectionText>
-          Explore my projects and professional journey. Keep pushing forward and never stop learning!
+          Keep pushing forward and never stop learning!
           Stay curious and keep coding!
         </SectionText>
         <Link href="/Resume.pdf" passHref>

src/constants/constants.js

@@ -3,7 +3,7 @@ export const projects = [
     title: "Space Invader",
     description:
       "Using Python, pygame-module, and SQL, you'll learn how to use Python's pygame (GUI module) to create any game you want to build and how to integrate SQL database to store data.",
-    image: "/images/space-invader.png",
+    image: "/images/space-invader.webp",
     tags: ["Python", "pygame", "SQL"],
     source: "https://github.com/IshuSinghSE/space_invader/releases/tag/v1.0",
     visit: "https://github.com/IshuSinghSE/space_invader/",
@@ -13,7 +13,7 @@ export const projects = [
     title: "Face Recognition",
     description:
       "This project uses the Haarcascade model and OpenCV for real-time face detection and recognition from video feeds or static images. It identifies and labels faces efficiently.",
-    image: "/images/face-recognition.png",
+    image: "/images/face-recognition.webp",
     tags: ["Python", "Computer Vision", "AI ML"],
     source: "https://github.com/IshuSinghSE/face-recognition/",
     visit: "",
@@ -23,7 +23,7 @@ export const projects = [
     title: "Particle Text",
     description:
       "This project creates particle text effects using HTML, CSS, and JavaScript. It demonstrates how to manipulate canvas elements to achieve dynamic visual effects.",
-    image: "/images/particle-image.png",
+    image: "/images/particle-image.webp",
     tags: ["HTML", "CSS", "JavaScript"],
     source:
       "https://github.com/IshuSinghSE/HtmlCanvas/tree/master/ParticleText",
@@ -34,7 +34,7 @@ export const projects = [
     title: "Pixeture",
     description:
       "Pixeture is a simple image editor that allows you to draw on an image using different colors and symbols. Users can also drag and drop the image or image URL to edit.",
-    image: "/images/pixeture.png",
+    image: "/images/pixeture.webp",
     tags: ["HTML", "SCSS", "JavaScript"],
     source:
       "https://github.com/IshuSinghSE/HtmlCanvas/tree/master/ParticleImage/basepp",
@@ -45,34 +45,44 @@ export const projects = [
     title: "2048 Game",
     description:
       "This is a simple single-player sliding block puzzle game. The game's objective is to slide numbered tiles on a grid to combine them to create a tile with the number 2048.",
-    image: "/images/2048.png",
+    image: "/images/2048.webp",
     tags: ["HTML", "CSS", "JavaScript"],
     source: "https://github.com/IshuSinghSE/2048",
     visit: "https://2048retro.netlify.app/",
     id: 5,
   },
+  {
+    title: "NexShare",
+    description:
+      "NexShare is your go-to solution for easy and secure file sharing. Whether you need to upload important documents, share memories with friends, or manage your files.",
+    image: "/images/nexshare.webp",
+    tags: ["NextJS", "Firebase", "ReactJS"],
+    source: "https://github.com/IshuSinghSE/nexshare",
+    visit: "https://nexshare.vercel.app/",
+    id: 6,
+  },
 ];
 
 export const TimeLineData = [
   { year: 2018, text: "Started my journey" },
   { year: 2019, text: "Learned JavaScript" },
   { year: 2020, text: "Learned Python" },
   { year: 2021, text: "Built a game in pygame" },
-  { year: 2022, text: "Learned Django" },
-  { year: 2023, text: "Learned React" },
-  { year: 2024, text: "Learned NextJS" },
+  { year: 2022, text: "Learned Django & SQL" },
+  { year: 2023, text: "Learned React & SCSS" },
+  { year: 2024, text: "Learned NextJS & Tailwincss" },
   { year: 2024, text: "Contributed to Open Source projects" },
 ];
 
-export const facebook = "https://www.facebook.com/itsashu13/";
+export const facebook = "https://www.facebook.com/wthishu/";
 
 export const github = "https://www.github.com/IshuSinghSE/";
 
 export const twitter = "https://www.twitter.com/wth_ishu/";
 
 export const instagram = "https://www.instagram.com/wth_ishu/";
 
-export const snapchat = "https://www.snapchat.com/ashusingh.13/";
+export const snapchat = "https://www.snapchat.com/wth-ishu/";
 
 export const linkedin = "https://www.linkedin.com/in/wth-ishu/";
 
@@ -81,7 +91,7 @@ export const email = "ishuu.singh13@gmail.com";
 export const socialmedia = [
   { name: "Github", link: "https://www.github.com/IshuSinghSE/" },
   { name: "Instagram", link: "https://www.instagram.com/wth_ishu/" },
-  { name: "Facebook", link: "https://www.facebook.com/itsashu13/" },
+  { name: "Facebook", link: "https://www.facebook.com/wthishu/" },
   { name: "Twitter", link: "https://www.twitter.com/wth_ishu/" },
   { name: "LinkedIn", link: "https://www.linkedin.com/in/wth-ishu/" }
 ];

src/pages/_document.js

@@ -31,6 +31,7 @@ export default class MyDocument extends Document {
     return (
       <Html lang='en-GB'>
         <Head>
+          <title>Ishu's Portfolio</title>
           <link rel="icon" href="/favicon.ico" type="image/x-icon" />
           <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
         </Head>

utils/resizeImages.js

@@ -0,0 +1,94 @@
+const sharp = require("sharp");
+const fs = require("fs");
+const path = require("path");
+
+const resizeImage = async (imagePath, outputPath, size = 600, quality = 80) => {
+  try {
+    const metadata = await sharp(imagePath).metadata();
+    const isWebP = metadata.format === "webp";
+    const needsResize = metadata.width > size || metadata.height > size;
+    const needsExtension = metadata.width !== metadata.height;
+
+    if (!needsResize && !needsExtension && isWebP) {
+      console.log(
+        `Skipping resize for ${imagePath}, dimensions and format are within the target size and format.`
+      );
+      return false;
+    }
+
+    if (needsExtension) {
+      console.log(`Extending image: ${imagePath}`);
+      const maxSize = Math.max(metadata.width, metadata.height);
+      await sharp(imagePath)
+        .resize(maxSize, maxSize, {
+          fit: sharp.fit.contain,
+          background: { r: 255, g: 255, b: 255, alpha: 0 },
+        })
+        .resize(size, size, {
+          fit: sharp.fit.cover,
+          position: sharp.strategy.entropy,
+        })
+        .webp({ quality })
+        .toFile(outputPath);
+      console.log(`Successfully extended and resized image: ${imagePath}`);
+      return true;
+    }
+
+    console.log(`Resizing image: ${imagePath}`);
+    await sharp(imagePath)
+      .resize(size, size, {
+        fit: sharp.fit.cover,
+        position: sharp.strategy.entropy,
+      })
+      .webp({ quality })
+      .toFile(outputPath);
+    console.log(`Successfully resized image: ${imagePath}`);
+    return true;
+  } catch (error) {
+    console.error(`Error resizing image ${imagePath}:`, error);
+    return false;
+  }
+};
+
+const renameImage = (oldPath, newPath) => {
+  fs.rename(oldPath, newPath, (err) => {
+    if (err) {
+      console.error(`Error renaming file ${oldPath} to ${newPath}:`, err);
+    } else {
+      console.log(`Successfully renamed file ${oldPath} to ${newPath}`);
+    }
+  });
+};
+
+const resizeImagesInFolder = async (folderPath) => {
+  fs.readdir(folderPath, (err, files) => {
+    if (err) {
+      console.error(`Error reading folder ${folderPath}:`, err);
+      return;
+    }
+
+    console.log(`Found ${files.length} files in folder: ${folderPath}`);
+    files.forEach(async (filename) => {
+      if (filename.match(/\.(png|jpg|jpeg)$/)) {
+        const imagePath = path.join(folderPath, filename);
+        const resizedImagePath = path.join(
+          folderPath,
+          `${path.parse(filename).name}-resized.webp`
+        );
+        const resized = await resizeImage(imagePath, resizedImagePath);
+        if (resized) {
+          renameImage(
+            resizedImagePath,
+            path.join(folderPath, `${path.parse(filename).name}.webp`)
+          );
+        }
+      } else {
+        console.log(`Skipping non-image file: ${filename}`);
+      }
+    });
+  });
+};
+
+const publicFolder = path.join(__dirname, "../public/images");
+// console.log(`Starting to resize images in folder: ${publicFolder}`);
+resizeImagesInFolder(publicFolder);