From 0c0d507c836a0b6c7f951ef79b7565feddeda2d6 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 3 May 2025 16:26:43 -0600 Subject: [PATCH] feat(home): finished, cards should be resized, todo added comments --- src/Footer/Ender.css | 1 + src/Footer/humans.txt | 4 +-- src/Gallery/Slideshow.jsx | 60 ++++++++++++++++++++++++++++++++++ src/Gallery/slideshow.css | 68 +++++++++++++++++++++++++++++++++++++++ src/Home/Home.css | 13 ++++---- src/Home/Home.jsx | 6 ++-- src/MockDB/nothing.txt | 1 - 7 files changed, 141 insertions(+), 12 deletions(-) create mode 100644 src/Gallery/Slideshow.jsx create mode 100644 src/Gallery/slideshow.css delete mode 100644 src/MockDB/nothing.txt diff --git a/src/Footer/Ender.css b/src/Footer/Ender.css index 650a9ab..52c241e 100644 --- a/src/Footer/Ender.css +++ b/src/Footer/Ender.css @@ -34,4 +34,5 @@ #ender a img { height: 7svh; + filter: invert(); } diff --git a/src/Footer/humans.txt b/src/Footer/humans.txt index 950c87a..a83cdf1 100644 --- a/src/Footer/humans.txt +++ b/src/Footer/humans.txt @@ -1,6 +1,6 @@ /* TEAM */ - Lead:Brock - Contact: hello [at] humanstxt.org + Lead of Soon™:Brock + Contact: darkicewolf50@gmail.com Github: darkicewolf50 UI developer: Maria Macias diff --git a/src/Gallery/Slideshow.jsx b/src/Gallery/Slideshow.jsx new file mode 100644 index 0000000..f5da2c6 --- /dev/null +++ b/src/Gallery/Slideshow.jsx @@ -0,0 +1,60 @@ +import { useEffect, useState } from "react"; +import "./slideshow.css"; +export default function Slideshow() { + let listPhotos = [ + { imgUrl: "https://picsum.photos/200", imgAlt: "Lorem picsum1" }, + { imgUrl: "https://picsum.photos/200/200", imgAlt: "Lorem picsum2" }, + { imgUrl: "https://picsum.photos/200/400", imgAlt: "Lorem picsum3" }, + { imgUrl: "https://picsum.photos/200/600", imgAlt: "Lorem picsum4" }, + ]; + + var slideIndex = 1; + useEffect(() => { + showSlides(slideIndex); + }, []); + + const plusSlides = (n) => { + slideIndex += n; + showSlides(); + }; + + const showSlides = () => { + let i; + let slides = document.getElementsByClassName("slides"); + if (slideIndex > slides.length) { + slideIndex = 1; + } + if (slideIndex < 1) { + slideIndex = slides.length; + } + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slides[slideIndex - 1].style.display = "block"; + }; + return ( +
+ {/* you can use keys to get the index of the value to show either dots or what place they are out of x */} + {Object.values(listPhotos).map((photoDetail) => { + return ( + {photoDetail.imgAlt} + ); + })} + plusSlides(-1)}> + ❮ + + plusSlides(1)}> + ❯ + +
+ ); +} diff --git a/src/Gallery/slideshow.css b/src/Gallery/slideshow.css new file mode 100644 index 0000000..084fe3b --- /dev/null +++ b/src/Gallery/slideshow.css @@ -0,0 +1,68 @@ +.slideshow { + display: flex; + justify-content: center; + position: relative; + box-sizing: border-box; + justify-self: center; + align-self: center; + width: 50%; + background-color: white; + border-radius: 1rem; + margin: 2svh 0px; +} + +.slideshow img { + display: none; + vertical-align: middle; + height: 50svh; + max-width: 100%; + overflow: hidden; + padding: 2svh 1svw; +} + +/* Next & previous buttons */ +.prev-button, +.next-button { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -22px; + color: rgba(90, 90, 90, 0.8); + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; +} + +/* Position the "next button" to the right */ +.next-button { + right: 0; + border-radius: 3px 0 0 3px; +} + +.prev-button { + left: 0; +} + +.prev-button:hover, +.next-button:hover { + background-color: rgba(255, 255, 255, 0.8); + filter: invert(); +} + +.fade { + animation-name: fade; + animation-duration: 1.5s; +} + +@keyframes fade { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} diff --git a/src/Home/Home.css b/src/Home/Home.css index ae750b3..4097c67 100644 --- a/src/Home/Home.css +++ b/src/Home/Home.css @@ -3,7 +3,7 @@ flex-direction: column; text-align: center; margin-top: 2svh; - padding-top: 2svh; + padding-top: 4svh; background-color: rgba(128, 128, 128, 0.2); -webkit-mask-image: linear-gradient( to top, @@ -36,7 +36,7 @@ justify-content: center; text-decoration: none; color: inherit; - flex: 0 1 30%; + /* flex: 0 1 20%; */ } #HomeSponsors a img { @@ -51,11 +51,12 @@ #HomeAboutUs { display: flex; flex-direction: row; - justify-content: space-between; + justify-content: center; column-gap: 4svw; padding: 2svh 4vw; - background-color: black; - color: white; + background-color: white; + border-radius: 1rem; + margin: 2svh 6svw; } #HomeAboutUs img { @@ -90,7 +91,7 @@ border: none; background-color: white; text-decoration: none; - color: black; + color: inherit; border-radius: 5px; } diff --git a/src/Home/Home.jsx b/src/Home/Home.jsx index 3cace4d..15f03b8 100644 --- a/src/Home/Home.jsx +++ b/src/Home/Home.jsx @@ -5,6 +5,7 @@ import yaml from "js-yaml"; import "./Home.css"; import sponsorsyaml from "../MockDB/sponsorship.yml"; +import Slideshow from "../Gallery/Slideshow"; export default function Home() { const [currentSponsors, setCurrentSponsors] = useState(); @@ -57,7 +58,6 @@ export default function Home() { currentSponsors[sponsorTier][sponsorListPos][ sponsorName ]; - console.log(sponsorTier, sponsorName, sponsorDetail); return sponsorDetail !== null ? ( sponsorDetail.Url !== "" && sponsorDetail.LogoUrl !== null ? ( @@ -78,7 +78,7 @@ export default function Home() { )} -
Mini Gallery
+
Learn More
diff --git a/src/MockDB/nothing.txt b/src/MockDB/nothing.txt deleted file mode 100644 index aa47ece..0000000 --- a/src/MockDB/nothing.txt +++ /dev/null @@ -1 +0,0 @@ -this is only for testing vercel \ No newline at end of file