Merge pull request #163 from git-ankuryadav/source

Scroll effect fixed

package.json

@@ -29,6 +29,7 @@
     "react-scripts": "5.0.1",
     "remark-gfm": "^3.0.1",
     "simple-parallax-js": "^5.6.2",
+    "styled-components": "^6.0.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/gallery.css

@@ -15,10 +15,10 @@
   margin-bottom: 3px;
 }
 
-.gallery .pics:hover {
+/* .gallery .pics:hover {
   opacity: 0.8;
   transform: scale(1.02);
-}
+} */
 
 .gallery p {
   transform: translateY(-24px);

src/App.js

@@ -18,6 +18,36 @@ const App = () => {
   }
   return (
     // Uncomment the below lines to Have everything working!
+//     // <>
+//     //   <Preloader />
+//     //   <AnimatedCursor />
+//     //   <HashRouter>
+//     //     <Headroom>
+//     //       <Navbar />
+//     //     </Headroom>
+//     //     <AnimatedRoutes />
+//     //   </HashRouter>
+//     // </>
+//     <div
+//       style={{
+//         display: "flex",
+//         justifyContent: "center",
+//         alignItems: "center",
+//         height: "100vh",
+//         fontSize: "3rem",
+//         flexDirection: "column",
+//         fontFamily: "Anton, sans-serif",
+//       }}
+//     >
+//       <img
+//         src={underConstructionImage}
+//         alt="Under Construction"
+//         style={{ width: "200px", height: "auto" }} // Adjust the size as needed
+//       />
+//       <p style={{ marginTop: "1rem", fontFamily: "Anton, sans-serif" }}>
+//         Coming Soon!
+//       </p>
+//     </div>
     <>
       <Preloader /> 
       <AnimatedCursor />

src/components/ImageGallery.jsx

@@ -1,10 +1,28 @@
 import React, { useState, useEffect, useCallback } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import data from "../data/galleryData";
+import styled from "styled-components";
+
+const ImageWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const Tag = styled.div`
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+`;
 
 const ImageGallery = () => {
   const [model, setModel] = useState(false);
   const [tempimgSrc, setTempImgSrc] = useState("");
+  const [tagContent, setTagContent] = useState(""); // New state for tag content
 
   const closeModel = useCallback(() => {
     setModel(false);
@@ -23,26 +41,28 @@ const ImageGallery = () => {
     };
   }, [closeModel]);
 
-  const getImg = (imgSrc) => {
+  const getImg = (imgSrc, tag) => {
     setTempImgSrc(imgSrc);
+    setTagContent(tag); // Set the tag content for the selected image
     setModel(true);
   };
 
   return (
     <>
       <div className={model ? "model open" : "model"}>
         <img src={tempimgSrc} alt="" />
+        <Tag>{tagContent}</Tag>
         <CloseIcon onClick={closeModel} />
       </div>
       <div className="gallery">
         {data.map((item, index) => (
-          <div
-            className="pics"
+          <ImageWrapper
             key={index}
-            onClick={() => getImg(item.imgSrc)}
+            onClick={() => getImg(item.imgSrc, item.tag)}
           >
             <img src={item.imgSrc} alt="iste-img" style={{ width: "100%" }} />
-          </div>
+            <Tag>{item.tag}</Tag>
+          </ImageWrapper>
         ))}
       </div>
     </>

src/data/galleryData.js

@@ -33,160 +33,158 @@ let data = [
   {
     id: 30,
     imgSrc: Img30,
-    author: "Technex",
+    tag: "Technex",
   },
   {
     id: 20,
     imgSrc: Img20,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 1,
     imgSrc: Img01,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 2,
     imgSrc: Img02,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 22,
     imgSrc: Img22,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 10,
     imgSrc: Img10,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 19,
     imgSrc: Img19,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 27,
     imgSrc: Img27,
-    author: "Technex",
+    tag: "Technex",
   },
   {
     id: 28,
     imgSrc: Img28,
-    author: "Technex",
+    tag: "Technex",
   },
   {
     id: 16,
     imgSrc: Img16,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 29,
     imgSrc: Img29,
-    author: "Technex",
+    tag: "Technex",
   },
   {
     id: 5,
     imgSrc: Img05,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 6,
     imgSrc: Img06,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 7,
     imgSrc: Img07,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 8,
     imgSrc: Img08,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 9,
     imgSrc: Img09,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 4,
     imgSrc: Img04,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 13,
     imgSrc: Img13,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 18,
     imgSrc: Img18,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 14,
     imgSrc: Img14,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 15,
     imgSrc: Img15,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 3,
     imgSrc: Img03,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 31,
     imgSrc: Img31,
-    author: "Technex",
+    tag: "Technex",
   },
   {
     id: 17,
     imgSrc: Img17,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 24,
     imgSrc: Img24,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 21,
     imgSrc: Img21,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 12,
     imgSrc: Img12,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
   {
     id: 23,
     imgSrc: Img23,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 25,
     imgSrc: Img25,
-    author: "Pahal",
+    tag: "Pahal",
   },
   {
     id: 26,
     imgSrc: Img26,
-    author: "Pahal",
-
+    tag: "Pahal",
   },
   {
     id: 11,
     imgSrc: Img11,
-    author: "Hult Prize",
+    tag: "Hult Prize",
   },
 ];
 
 export default data;
-