refactor: update image handling and redirect configuration; remove un…

…used components
Pradumnasaraf · Jan 13, 2025 · 842fada · 842fada
1 parent e94d17e
commit 842fada
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 136 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -3,8 +3,8 @@ const nextConfig = {
     async redirects() {
       return [
         {
-          source: '/hey',
-          destination: '/',
+          source: '/monitoring',
+          destination: 'https://Pradumnasaraf.github.io/Monitoring',
           permanent: true, // Permanent redirect (301)
         },
       ];

diff --git a/src/app/camera/components/FullScreenModal.js b/src/app/camera/components/FullScreenModal.js
diff --git a/src/app/camera/components/MasonryGrid.js b/src/app/camera/components/MasonryGrid.js
diff --git a/src/app/camera/page.js b/src/app/camera/page.js
@@ -1,7 +1,8 @@
 'use client';
-import MasonryGrid from './components/MasonryGrid';
-import { useEffect } from 'react';
-
+import React, { useState, useEffect } from 'react';
+import Masonry from 'react-masonry-css';
+import { createPortal } from 'react-dom';
+import './style.css';
 const images = [
   { src: 'https://drive.google.com/thumbnail?id=1uu0wWGmbHC0VY7BT-n5DUpWz86_ozANg&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1G8IYlbeJUKvghC8FIlEmtyVo6fg_YxqZ&sz=w2000', alt: 'photo' },
@@ -38,52 +39,132 @@ const images = [
   { src: 'https://drive.google.com/thumbnail?id=1ISysXMTEBkqwt3-wCN0jFRNATZTWKi26&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1bifEZJm_rIx_Xs4pORmfXCCIVFuMH_DY&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=11VG8uzX2vUMSRtEnHsDxDMT3fcletqsY&sz=w2000', alt: 'photo' },
-  { src: 'https://drive.google.com/thumbnail?id=1JANNc-kNawn7jUGRs4MUZc9ib0wQ8JBP&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1YbOEXGJfIOXvRW6akB1HVmaIOOF2Jk1h&sz=w2000', alt: 'photo' },
-  { src: 'https://drive.google.com/thumbnail?id=1b3CqP5Hn0xI2m6d2jH9_uWrfn3z8rkI0&sz=w2000', alt: 'photo' },
+  { src: 'https://drive.google.com/thumbnail?id=1JANNc-kNawn7jUGRs4MUZc9ib0wQ8JBP&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1ko_WLnJ2SNNEO13WkKmRhpvobDQ6Q_Ko&sz=w2000', alt: 'photo' },
+  { src: 'https://drive.google.com/thumbnail?id=1b3CqP5Hn0xI2m6d2jH9_uWrfn3z8rkI0&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1ruE0RqOwTPK0AR17ap4hwfGDgWboP52p&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1O83nNCKCUZ4McHO1nlZXvo1OKqzLldyw&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1MxtU3yWE8BkSi-1gessGGaTKGKzO8SO6&sz=w2000', alt: 'photo' },
-  { src: 'https://drive.google.com/thumbnail?id=1FEQMnHybHi1TDvCHweOsB7ODeC06VjIs&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1nTQlYnaHPsy-kCrlV1bJocKgwlvqmyQc&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1K_Iteo-Rqrxi0ayMMAjOgsBSocg81Wmx&sz=w2000', alt: 'photo' },
-  { src: 'https://drive.google.com/thumbnail?id=16ujZfroa5zjL09-UJWPyeRK0NUu1VkBi&sz=w2000', alt: 'photo' },
+  { src: 'https://drive.google.com/thumbnail?id=1FEQMnHybHi1TDvCHweOsB7ODeC06VjIs&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1P60hz5FIkEhoyxEJOtHCVprzm8sP4tt-&sz=w2000', alt: 'photo' },
-  { src: 'https://drive.google.com/thumbnail?id=1-umcEA-0sefXkCVXtpEFxvVAWqtnw2y1&sz=w2000', alt: 'photo' },
-  { src: 'https://drive.google.com/thumbnail?id=1sVamXny-K2Tfb_m_PGxQEdTiV99_r8q8&sz=w2000', alt: 'photo' },
   { src: 'https://drive.google.com/thumbnail?id=1dD4-Qrc2Hk4dCFQKcBB4GRbsvrcJOt0Q&sz=w2000', alt: 'photo' },
+  { src: 'https://drive.google.com/thumbnail?id=1sVamXny-K2Tfb_m_PGxQEdTiV99_r8q8&sz=w2000', alt: 'photo' },
+  { src: 'https://drive.google.com/thumbnail?id=16ujZfroa5zjL09-UJWPyeRK0NUu1VkBi&sz=w2000', alt: 'photo' },
+  { src: 'https://drive.google.com/thumbnail?id=1-umcEA-0sefXkCVXtpEFxvVAWqtnw2y1&sz=w2000', alt: 'photo' },
 ]
 
+// FullScreenModal Component
+const FullScreenModal = ({ isOpen, imageSrc, onClose }) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 p-5">
+      <button
+        onClick={onClose}
+        className="absolute top-6 right-6 flex items-center justify-center w-12 h-12 bg-white text-black text-2xl font-bold rounded-full shadow-lg border-2 border-black hover:bg-gray-100 transition-transform transform hover:scale-110"
+        aria-label="Close"
+      >
+        &times;
+      </button>
+      <img
+        src={imageSrc}
+        alt="Full Screen"
+        className="max-w-[90vw] max-h-[90vh] object-contain"
+      />
+    </div>,
+    document.body
+  );
+};
+
+// Main Home Component
 export default function Home() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalImageSrc, setModalImageSrc] = useState('');
+
+  const openModal = (src) => {
+    setModalImageSrc(src);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setModalImageSrc('');
+  };
+
+  const breakpointColumnsObj = {
+    default: 3,
+    1100: 3,
+    700: 2,
+    500: 1
+  };
+
   useEffect(() => {
-      // Google Tag Manager Script
-      const scriptGTM = document.createElement('script');
-      scriptGTM.innerHTML = `
-        (function (w, d, s, l, i) {
-          w[l] = w[l] || [];
-          w[l].push({
-            'gtm.start': new Date().getTime(),
-            event: 'gtm.js',
-          });
-          var f = d.getElementsByTagName(s)[0],
-            j = d.createElement(s),
-            dl = l != 'dataLayer' ? '&l=' + l : '';
-          j.async = true;
-          j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-          f.parentNode.insertBefore(j, f);
-        })(window, document, 'script', 'dataLayer', 'GTM-WRGLMZCX');
-      `;
-      document.head.appendChild(scriptGTM);
-      return () => {
-        document.head.removeChild(scriptGTM);
-      };
-    }, []);
+    // Google Tag Manager Script
+    const scriptGTM = document.createElement('script');
+    scriptGTM.innerHTML = `
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({
+          'gtm.start': new Date().getTime(),
+          event: 'gtm.js',
+        });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-WRGLMZCX');
+    `;
+    document.head.appendChild(scriptGTM);
+    return () => {
+      document.head.removeChild(scriptGTM);
+    };
+  }, []);
+
   return (
     <div className="px-24 py-8 mx-auto max-w-6xl">
       <div className="p-4">
-        <MasonryGrid images={images} />
+        <Masonry
+          breakpointCols={breakpointColumnsObj}
+          className="my-masonry-grid"
+          columnClassName="my-masonry-grid_column"
+        >
+          {images.map((image, index) => (
+            <ImageItem
+              key={index}
+              src={image.src}
+              alt={image.alt}
+              onClick={() => openModal(image.src)}
+            />
+          ))}
+        </Masonry>
+
+        <FullScreenModal
+          isOpen={isModalOpen}
+          imageSrc={modalImageSrc}
+          onClose={closeModal}
+        />
       </div>
     </div>
   );
-}
+}
+
+// ImageItem Component
+const ImageItem = ({ src, alt, onClick }) => {
+  const [hasError, setHasError] = useState(false);
+
+  return !hasError ? (
+    <img
+      src={src}
+      alt={alt}
+      className="w-full h-auto object-cover cursor-pointer transition-transform transform hover:scale-105 grayscale-image"
+      onClick={onClick}
+      onError={() => setHasError(true)}
+      loading="lazy"
+    />
+  ) : null;
+};
diff --git a/src/app/services/page.js b/src/app/services/page.js
@@ -2,7 +2,8 @@
 import './style.css'
 import Head from 'next/head';
 import { useEffect } from 'react';
-import { FaTwitter, FaLinkedin, FaDev, FaGithub, FaEnvelope, FaSuitcase, FaFeather, FaMicrophone, FaTerminal, FaVideo, FaStackExchange } from 'react-icons/fa';
+import { FaTwitter, FaLinkedin, FaDev, FaGithub, FaEnvelope, FaSuitcase, FaFeather, FaMicrophone, FaTools, FaVideo, FaStackExchange } from 'react-icons/fa';
+import { BsPeopleFill } from "react-icons/bs";
 import { TbArticle } from "react-icons/tb";
 import Image from 'next/image';
 
@@ -169,14 +170,14 @@ const ServicesPage = () => {
                 </p>
               </div>
               <div className="service-box">
-                <FaTerminal className='icon-service' />
+                <FaTools className='icon-service' />
                 <h3 className="service-box-service">Build Products</h3>
                 <p className="service-box-desc">
                   Building products, tools, apps, etc for companies according to their needs.
                 </p>
               </div>
               <div className="service-box">
-                <FaFeather className='icon-service' />
+                <BsPeopleFill className='icon-service' />
                 <h3 className="service-box-service">Community</h3>
                 <p className="service-box-desc">
                   Building community around products and companies to scale up the product feedback