Added custom modal to allow pictures preview

src/components/projects/Modal.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import classes from './Modal.module.css'
+
+const Modal = ({ show, img, alt, onClose }) => {
+  if (!show) {
+    return null
+  }
+
+  return (
+    <div className={classes.modal} onClick={onClose}>
+      <div className={classes.modalContent} onClick={(e) => e.stopPropagation()}>
+        <span className={classes.close} onClick={onClose}>
+          &times;
+        </span>
+        <img className={classes.modalImage} src={img} alt={alt} />
+      </div>
+    </div>
+  )
+}
+
+export default Modal

src/components/projects/Modal.module.css

@@ -0,0 +1,37 @@
+.modal {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.modalContent {
+  position: relative;
+  margin: auto;
+  padding: 0;
+  width: 80%;
+  max-width: 700px;
+}
+
+.close {
+  position: absolute;
+  top: 15px;
+  right: 35px;
+  color: #fff;
+  font-size: 40px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.modalImage {
+  display: block;
+  width: 100%;
+  height: auto;
+}

src/components/projects/ProjectJS.js

@@ -2,10 +2,12 @@ import { useEffect, useState } from 'react'
 import { Blurhash } from 'react-blurhash'
 
 import '../../Colors.css'
+import Modal from './Modal'
 import classes from './Projects.module.css'
 
 function ProjectJS({ img, alt, title, git, demo, tech, description }) {
   const [imageLoaded, setImageLoaded] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
 
   useEffect(() => {
     const image = new Image()
@@ -15,25 +17,40 @@ function ProjectJS({ img, alt, title, git, demo, tech, description }) {
     image.src = img
   }, [img])
 
+  const openModal = () => {
+    setIsModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setIsModalOpen(false)
+  }
+
   return (
     <div className={classes.work}>
       <div className={classes.imageWrapper}>
         {!imageLoaded && (
           <Blurhash hash="L03l5OWBofayofayj[ayayj[ayj[" width="100%" height="220px" />
         )}
-        {imageLoaded && <img className={classes.image} src={img} alt={alt} loading="lazy" />}
+        {imageLoaded && (
+          <img
+            className={classes.image}
+            src={img}
+            alt={alt}
+            loading="lazy"
+            onClick={openModal}
+            style={{ cursor: 'pointer' }}
+          />
+        )}
       </div>
       <div className={classes.info}>
         <h3>{title}</h3>
         <p className={classes.description}>{description}</p>
         <ul className={classes.list}>
-          {tech.map((el) => {
-            return (
-              <li key={el.id} className={el.color}>
-                {el.tech}
-              </li>
-            )
-          })}
+          {tech.map((el) => (
+            <li key={el.id} className={el.color}>
+              {el.tech}
+            </li>
+          ))}
         </ul>
         <div className={classes.links}>
           <>
@@ -46,6 +63,7 @@ function ProjectJS({ img, alt, title, git, demo, tech, description }) {
           </>
         </div>
       </div>
+      <Modal show={isModalOpen} img={img} alt={alt} onClose={closeModal} />
     </div>
   )
 }