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 ( + <div className="slideshow"> + {/* 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 ( + <img + key={photoDetail.imgAlt} + className="slides fade" + src={photoDetail.imgUrl} + alt={photoDetail.imgAlt} + /> + ); + })} + <a + className="prev-button" + onClick={() => plusSlides(-1)}> + ❮ + </a> + <a + className="next-button" + onClick={() => plusSlides(1)}> + ❯ + </a> + </div> + ); +} 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() { </> )} </div> - <div>Mini Gallery</div> + <Slideshow /> <div id="HomeAboutUs"> <img src="https://static.wixstatic.com/media/5824fc_f65d87b07f23407087a1bd60766d9548~mv2.jpg/v1/fill/w_846,h_1194,fp_0.50_0.48,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/thumbnail_DE9F07D7-298D-4FFD-9192-27854CB866AA.jpg" @@ -98,7 +98,7 @@ export default function Home() { 100 teams from all corners of the globe compete in the event - the US, Canada, Mexico, India, China, Brazil, Korea, and more. The competition is ferocious, and the race is treacherous; more than - half of the cars that start the race never finish.{" "} + half of the cars that start the race never finish. </p> <Link to="/About">Learn More</Link> </div> 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