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