Updated photo gallery.

public/Style.css

@@ -582,6 +582,7 @@ h1, h2, h3, h4, h5, h6 {
     border-radius: 1vw;
     overflow: hidden;
     height: 200px; /* adjust this as needed */
+    position: relative;
 }
 
 .slideshow-img {
@@ -590,6 +591,17 @@ h1, h2, h3, h4, h5, h6 {
     object-fit: cover;
 }
 
+.slideshow-img-container:hover .slideshow-img {
+    transform: scale(1.1);
+    opacity: 0.6;
+}
+
+.slideshow-img-container:hover .gallery-name {
+    visibility: visible;
+    opacity: 1;
+    display: block;
+}
+
 .control-button {
     padding: 0.5em 1em;
     margin: 0 0.5em;
@@ -600,6 +612,22 @@ h1, h2, h3, h4, h5, h6 {
     flex: 1 0 10%; /* adjust this as needed */
 }
 
+.gallery-name {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.6vw;
+    color: white;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.3s, opacity 0.3s ease;
+}
+
+.slideshow-img, .gallery-name {
+    transition: all 0.3s ease;
+}
+
 .control-button:disabled {
     /* background-color: #C2B19C; */
     opacity: 25%;
@@ -619,6 +647,47 @@ h1, h2, h3, h4, h5, h6 {
     opacity: 0.6; 
 }
 
+/* Photo Album Template */
+.album {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.image-grid {
+    column-count: 3;
+    column-gap: 1em;
+    margin: 0 auto;
+    max-width: 90%;
+}
+
+.image-grid img {
+    width: 100%;
+    margin-bottom: 1em;
+    break-inside: avoid;
+}
+
+.albumoverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.8);
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.albumoverlay img {
+    max-width: 80%;
+    max-height: 80%;
+    border: 1px solid black;
+    border-radius: 8px;
+}
+
+
+
 /* My Story */
 .my-story {
     display: flex;

src/components/pages/About.js

@@ -17,57 +17,55 @@ const defaultOptions = {
 
 // Placeholders for image sources
 const imgSources = [
-    '/images/Chi2/Img1.jpeg', '/images/Chi2/Img2.JPG',
-    '/images/Chi2/Img3.jpg','/images/Chi2/Img4.jpeg',
-    '/images/Chi2/Img5.JPG','/images/Chi2/Img6.jpg',
-    '/images/Chi2/Img7.jpeg','/images/Chi2/Img8.jpg',
-    '/images/Chi2/Img9.jpeg','/images/Chi2/Img10.jpg',
-    '/images/Chi2/Img11.JPG','/images/Chi2/Img12.jpeg',
-    '/images/Chi2/Img13.jpeg','/images/Chi2/Img14.jpeg',
-    '/images/Chi2/Img15.jpg','/images/Chi2/Img16.JPG',
-    '/images/Chi2/Img17.jpeg','/images/Chi2/Img18.jpeg',
-    '/images/Chi2/Img19.jpeg','/images/Chi2/Img20.jpeg',
-    '/images/Chi2/Img21.jpeg','/images/Chi2/Img22.jpeg',
-    '/images/Chi2/Img23.jpeg','/images/Chi2/Img24.jpeg',
-    '/images/Chi2/Img25.jpeg','/images/Chi2/Img26.jpeg',
-    '/images/Chi2/Img27.jpeg','/images/Chi2/Img28.JPG',
-    '/images/Chi2/Img29.jpeg','/images/Chi2/Img30.jpeg',
-    '/images/Chi2/Img31.jpeg','/images/Chi2/Img32.jpeg',
-    '/images/Chi2/Img33.jpeg','/images/Chi2/Img34.JPG'
+    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',
+    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',
+    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg',
+    '/images/Chicago-Loop-23-9/Chicago-Loop-23-9-39.jpg'
+    // ... other images
 
 ]; 
 
-// Shuffle Images
-function shuffle(array) {
-    var currentIndex = array.length, temporaryValue, randomIndex;
+// Placeholders for image links
+const imgLinks = [
+    '/AlbumOne',
+    // ... other links
+];
 
-    // While there remain elements to shuffle...
-    while (0 !== currentIndex) {
-        // Pick a remaining element...
-        randomIndex = Math.floor(Math.random() * currentIndex);
-        currentIndex -= 1;
+// Placeholders for image names
+const galleryNames = [
+    "Chicago Loop '23-9.1'",
+]
 
-        // And swap it with the current element.
-        temporaryValue = array[currentIndex];
-        array[currentIndex] = array[randomIndex];
-        array[randomIndex] = temporaryValue;
-    }
+// // Shuffle Images
+// function shuffle(array) {
+//     var currentIndex = array.length, temporaryValue, randomIndex;
+
+//     // While there remain elements to shuffle...
+//     while (0 !== currentIndex) {
+//         // Pick a remaining element...
+//         randomIndex = Math.floor(Math.random() * currentIndex);
+//         currentIndex -= 1;
+
+//         // And swap it with the current element.
+//         temporaryValue = array[currentIndex];
+//         array[currentIndex] = array[randomIndex];
+//         array[randomIndex] = temporaryValue;
+//     }
 
-    return array;
-}
+//     return array;
+// }
 
 const About = () => {
-    const [shuffledImages, setShuffledImages] = useState(shuffle([...imgSources]));
     const [currentPage, setCurrentPage] = useState(0);
-
+  
     // Function to navigate to the next page
     const nextPage = () => {
-        setCurrentPage(currentPage => Math.min(currentPage + 1, Math.floor(shuffledImages.length / 9)));
+      setCurrentPage(currentPage => Math.min(currentPage + 1, Math.floor(imgSources.length / 9)));
     };
-
+  
     // Function to navigate to the previous page
     const prevPage = () => {
-        setCurrentPage(currentPage => Math.max(currentPage - 1, 0));
+      setCurrentPage(currentPage => Math.max(currentPage - 1, 0));
     };
 
     return(
@@ -111,20 +109,23 @@ const About = () => {
 
             {/* Personal Interests Section */}
             <div id="personalInterestsSection" className="section-about">
-                <h2>Personal Interests</h2>
-                <p>From culinary arts to arts to boating life, my personal interests span a wide range. Here's just a snippet into my world of relaxation.</p>
+                <h2>Photo Galleries</h2>
+                <p>Click on any album to explore my gallery.</p>
                 <div id="slideshow-controls">
-                    <button className="control-button" onClick={prevPage} disabled={currentPage === 0}>
-                    <img class="prev-button" src="/images/AboutArrow.png" alt="Previous" />
+                <button className="control-button" onClick={prevPage} disabled={currentPage === 0}>
+                        <img className="prev-button" src="/images/AboutArrow.png" alt="Previous" />
                     </button>
                     <div id="slideshow">
-                        {shuffledImages.slice(currentPage*9, currentPage*9+9).map((imgSrc, index) => 
+                        {imgSources.slice(currentPage*9, currentPage*9+9).map((imgSrc, index) => 
                         <div key={index} className="slideshow-img-container">
-                            <img src={imgSrc} alt={`Slideshow ${index+1}`} className="slideshow-img" />
+                            <Link to={imgLinks[index]}>
+                                <img src={imgSrc} alt={`Slideshow ${index + 1}`} className="slideshow-img" />
+                            </Link>
+                            <div className="gallery-name">{galleryNames[index]}</div>
                         </div>
                         )}
                     </div>
-                    <button className="control-button" onClick={nextPage} disabled={currentPage === Math.floor(shuffledImages.length / 9)}>
+                    <button className="control-button" onClick={nextPage} disabled={currentPage === Math.floor(imgSources.length / 9)}>
                         <img src="/images/AboutArrow.png" alt="Next" />
                     </button>
                 </div>

src/components/pages/AlbumOneChicagoLoop239.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+
+// Shuffle an array 
+const shuffle = (array) => {
+    let currentIndex = array.length, randomIndex;
+
+    // While there remain elements to shuffle...
+    while (currentIndex !== 0) {
+      // Pick a remaining element...
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex--;
+
+      // And swap it with the current element.
+      [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+    }
+    return array;
+};
+
+const AlbumOneChicagoLoop239 = () => {
+    const albumName = 'Chicago-Loop-23-9';
+    const imageCount = 45;  // Replace with the actual number of images in the album
+
+    const images = Array.from({ length: imageCount }, (_, i) => 
+        `/images/${albumName}/${albumName}-${String(i + 1).padStart(2, '0')}.jpg`
+    );
+
+    const [shuffledImages, setShuffledImages] = useState([]);
+
+    useEffect(() => {
+        setShuffledImages(shuffle([...images]));
+    }, []);
+
+    const [selectedImage, setSelectedImage] = useState(null);
+
+    const handleClick = (image) => {
+        setSelectedImage(image);
+      };
+
+      const handleClose = () => {
+        setSelectedImage(null);
+      };
+
+    return (
+        <div>
+          <div id="titleSection-template">
+            <h1>Chicago Loop '23-9.1'</h1>
+          </div>
+          <div className="album">
+            <div className="image-grid">
+              {shuffledImages.map((image, index) => 
+                <div 
+                  className="image-container" 
+                  key={index}
+                  onClick={() => handleClick(image)}
+                >
+                  <img src={image} alt={`${albumName} ${index + 1}`} />
+                </div>
+              )}
+            </div>
+          </div>
+          {selectedImage && (
+            <div className="albumoverlay" onClick={handleClose}>
+              <img src={selectedImage} alt="Enlarged" />
+            </div>
+          )}
+        </div>
+      );
+    };
+
+export default AlbumOneChicagoLoop239;

src/index.js

@@ -35,6 +35,9 @@ import TermsOfUse from "./components/pages/TermsOfUse";
 import Ventures from "./components/pages/Ventures";
 import Websites from "./components/pages/Websites";
 
+// Import Photo Albums
+import AlbumOneChicagoLoop239 from "./components/pages/AlbumOneChicagoLoop239";
+
 // Browser Router
 const router = createBrowserRouter([
     {
@@ -54,6 +57,10 @@ const router = createBrowserRouter([
                 path: "/about/mystory",
                 element: <MyStory />
             },
+            {
+                path: "/AlbumOne",
+                element: <AlbumOneChicagoLoop239 />
+            },
             {
                 path: "/connect",
                 element: <Connect />