From 9733d4099f17dfd3ca9334b60e1df7eac1be3d27 Mon Sep 17 00:00:00 2001 From: TheMaddax Date: Tue, 14 Oct 2025 09:46:54 -0600 Subject: [PATCH] Add gallery system to the website --- client/src/App.tsx | 4 +- client/src/components/Gallery.tsx | 165 ++++++++++++++++++++++++++++++ client/src/components/Header.tsx | 2 + cline_docs/activeContext.md | 27 +++-- 4 files changed, 190 insertions(+), 8 deletions(-) create mode 100644 client/src/components/Gallery.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 10b1aed..e61c175 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -9,6 +9,7 @@ import Footer from './components/Footer'; import Bylaws from './components/Bylaws'; import Sponsors from './components/Sponsors'; import MeetBoard from './components/Meet-Board'; +import Gallery from './components/Gallery'; /* import ComingSoon from './components/ComingSoon'; */ import JoinMCDi from './components/JoinMCDi'; @@ -26,6 +27,7 @@ const App: React.FC = () => { } /> } /> } /> + } /> } /> @@ -35,4 +37,4 @@ const App: React.FC = () => { ); }; -export default App; \ No newline at end of file +export default App; diff --git a/client/src/components/Gallery.tsx b/client/src/components/Gallery.tsx new file mode 100644 index 0000000..145ed44 --- /dev/null +++ b/client/src/components/Gallery.tsx @@ -0,0 +1,165 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; + +interface GalleryItem { + id: number; + imageUrl: string; + caption: string; + alt: string; +} + +// Placeholder data using board member headshots +const galleryData: GalleryItem[] = [ + { + id: 1, + imageUrl: '/headshots/tessa.jpg', + caption: 'Tessa Williams - President', + alt: 'Tessa Williams headshot', + }, + { + id: 2, + imageUrl: '/headshots/rita.jpg', + caption: 'Rita Sommers-Flanagan - Vice President', + alt: 'Rita Sommers-Flanagan headshot', + }, + { + id: 3, + imageUrl: '/headshots/aubz.jpg', + caption: 'Aubz Orr - Secretary', + alt: 'Aubz Orr headshot', + }, + { + id: 4, + imageUrl: '/headshots/eliza.jpg', + caption: 'Eliza Gutierrez - Treasurer', + alt: 'Eliza Gutierrez headshot', + }, + { + id: 5, + imageUrl: '/headshots/skyla.jpg', + caption: 'Skyla Heaton - Board Member', + alt: 'Skyla Heaton headshot', + }, + { + id: 6, + imageUrl: '/headshots/kevin.jpg', + caption: 'Kevin Wolff - Board Member', + alt: 'Kevin Wolff headshot', + }, +]; + +const Gallery: React.FC = () => { + const [selectedImage, setSelectedImage] = useState(null); + + const openImage = (item: GalleryItem) => { + setSelectedImage(item); + }; + + const closeImage = () => { + setSelectedImage(null); + }; + + return ( +
+ +

Photo Gallery

+ + {/* Photo Grid */} +
+ {galleryData.map((item) => ( + openImage(item)} + > +
+
+ {item.alt} +
+
+

+ {item.caption} +

+
+
+ + ))} +
+ + + {/* Image Modal */} + + {selectedImage && ( + + e.stopPropagation()} + > + {/* Close Button */} + + + {/* Image Container */} +
+ {selectedImage.alt} +
+ + {/* Caption */} +
+

+ {selectedImage.caption} +

+
+ + + )} + +
+ ); +}; + +export default Gallery; diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index e17127d..3d59ef9 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -74,6 +74,7 @@ const Header: React.FC = () => {
  • setIsMenuOpen(false)}>Home
  • setIsMenuOpen(false)}>About MCDi
  • setIsMenuOpen(false)}>Calendar
    • +
  • setIsMenuOpen(false)}>Gallery
  • setIsMenuOpen(false)}>Join MCDi
    • @@ -156,6 +157,7 @@ const AboutDropdown: React.FC = () => { Meet MCDi Board Bylaws Minutes + Gallery Sponsors diff --git a/cline_docs/activeContext.md b/cline_docs/activeContext.md index f3706c1..a753529 100644 --- a/cline_docs/activeContext.md +++ b/cline_docs/activeContext.md @@ -1,10 +1,21 @@ # Active Context ## Current Task -Completed: Made yellow donation button visible on mobile header +Completed: Created new Gallery page with photo grid and modal viewer ## Recent Changes -1. Modified Header.tsx to display donation button on mobile: +1. Created new Gallery component (Gallery.tsx): + - Responsive photo grid layout (1-4 columns based on screen size) + - Clickable images that enlarge in a modal viewer + - Yellow text captions on red background with black border + - Smooth animations using Framer Motion + - Currently using board member headshots as placeholder images + - Modal features: click outside to close, X button, spring animation + - Maintains website's color scheme (#6B1631 red, yellow-400 text) + - Added to navigation: "About MCDi" dropdown and mobile menu + - Route added: /gallery + +2. Previous: Modified Header.tsx to display donation button on mobile: - Added permanent yellow donation button below hamburger menu on mobile devices - Button is always visible in the red header area (no need to open menu) - Removed duplicate donation button from inside mobile menu dropdown @@ -35,11 +46,13 @@ Completed: Made yellow donation button visible on mobile header - All previous changes successfully deployed to production ## Next Steps -1. Commit and push Header.tsx changes to Git repository -2. Deploy changes through Portainer (pull and redeploy) -3. Verify mobile donation button appears correctly on production -4. Verify desktop layout remains unchanged -5. Test donation button functionality on mobile devices +1. Wait for website owner to provide actual gallery photos +2. Replace placeholder headshots with real gallery photos +3. Update captions with appropriate descriptions +4. Commit all changes (Gallery.tsx, App.tsx, Header.tsx) to Git +5. Deploy changes through Portainer (pull and redeploy) +6. Test gallery functionality on production (desktop and mobile) +7. Consider adding video support to gallery in future ## Solution Summary - Problem: Portainer repository deployments require stack.env file in Git repo