feat(home): finished, cards should be resized, todo added comments

src/Footer/Ender.css

@@ -34,4 +34,5 @@
 
 #ender a img {
 	height: 7svh;
+	filter: invert();
 }

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

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>
+	);
+}

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;
+	}
+}

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;
 }
 

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>

src/MockDB/nothing.txt

@@ -1 +0,0 @@
-this is only for testing vercel