TrickfireRobotics · Quashnock · Sep 13, 2024 · Sep 13, 2024
diff --git a/OurStory.html b/OurStory.html
@@ -31,8 +31,8 @@
     ></script>
 
     <!-- Loads module Html -->
-    <script src="./components/Header.js" defer></script>
-    <script src="./components/Footer.js" defer></script>
+    <script src="./components/Header.js"></script>
+    <script src="./components/Footer.js"></script>
 
     <!-- Gets instagram posts -->
     <script src="./assets/javascript/getInstagramPosts.js" defer></script>
@@ -110,14 +110,14 @@ <h3 id="leaderTitle">Team Leaders</h3>
               src="assets\images\photos\ProfilePlaceholder.webp"
               alt="Placeholder profile"
             />
-            <h3>Name</h3>
+            <h3>Jason</h3>
           </div>
           <div class="quote" role="presentation">
-            <h3>“Quote, or motto”</h3>
+            <h3>“Knocked down 6, get up 7”</h3>
             <p>
-              Job responsibilitiesJob responsibilitiesJob responsibilitiesJob
-              responsibilities Job responsibilitiesJob responsibilitiesJob
-              responsibilities
+              As the Electrical Co-Lead for the Trickfire Robotics team, I'm
+              driven to inspire, grow, and lead by example. There's always a lot
+              to do, and I'm in love with every second of it.
             </p>
           </div>
         </article>
@@ -177,14 +177,6 @@ <h3>“Quote, or motto”</h3>
         <h3>Our Story on Instagram</h3>
         <div id="photoContainer" role="presentation"></div>
       </section>
-      <section id="teamCompetitionSection">
-        <h3>Awards</h3>
-        <div id="awardLogoContainer" role="presentation">
-          <img src="assets/images/sponsors/nvidia.png" alt="Logo placeholder" />
-          <img src="assets/images/sponsors/nvidia.png" alt="Logo placeholder" />
-          <img src="assets/images/sponsors/nvidia.png" alt="Logo placeholder" />
-        </div>
-      </section>
     </main>
     <!-- Footer will be loaded here -->
   </body>

diff --git a/Sponsor.html b/Sponsor.html
@@ -38,7 +38,146 @@
   <body>
     <!-- Header will be loaded here -->
     <main>
-      <h1>Sponsor</h1>
+      <picture id="starBackgroundContainer">
+        <source
+          media="(min-width: 768px)"
+          srcset="assets/images/photos/desktopStarRainBackground.webp"
+        />
+        <source
+          media="(max-width: 768px)"
+          srcset="assets/images/photos/mobileStarRainBackground.webp"
+        />
+        <img
+          src="assets/images/photos/starRainBackground.jpg"
+          alt="Background image of falling stars"
+        />
+      </picture>
+      <section id="introductionSection">
+        <h2>Support the Future of Robotics with TrickFire</h2>
+        <div class="mainContentContainer" role="presentation">
+          <article>
+            <h3>Why Sponsor Us?</h3>
+            <ul>
+              <li>
+                TrickFire Robotics is made possible by the generous support of
+                our sponsors and donors, who play a vital role in fostering the
+                innovative work of the next generation of engineers.
+              </li>
+              <li>
+                Sponsoring TrickFire Robotics not only empowers students to
+                develop cutting-edge robots but also prepares them to apply
+                their skills in real-world applications, from space exploration
+                to solving everyday challenges.
+              </li>
+              <li>
+                Your sponsorship turns these possibilities into reality while
+                elevating your brand's visibility as a leader in supporting
+                future technology pioneers.
+              </li>
+            </ul>
+          </article>
+          <picture>
+            <source srcset="assets/images/photos/2024RoverRevealGroup.webp" />
+            <img
+              src="assets/images/photos/2024RoverRevealGroup.jpg"
+              alt="Team photo with the 2024 Viator rover"
+              loading="lazy"
+              decoding="async"
+            />
+          </picture>
+        </div>
+      </section>
+      <section id="sponsorshipFundsSection">
+        <h3>Where Your Sponsorship Funds Go</h3>
+        <div id="fundLocationContainer" role="presentation">
+          <article class="fundLocation">
+            <img
+              src="assets/images/icons/teacherIcon.svg"
+              alt="Teacher figure"
+            />
+            <h4>Workshops and Training</h4>
+            <p>
+              Skill-building workshops, expert-led training, and hands-on
+              learning opportunities.
+            </p>
+          </article>
+          <article class="fundLocation">
+            <img
+              src="assets/images/icons/placeHolderIcon.svg"
+              alt="Lightbulb figure"
+            />
+            <h4>Technology and Innovation</h4>
+            <p>
+              Investing in the latest hardware, software, and cutting-edge
+              robotics technology.
+            </p>
+          </article>
+          <article class="fundLocation">
+            <img
+              src="assets/images/icons/developmentIcon.svg"
+              alt="Building blocks figure"
+            />
+            <h4>Project Development</h4>
+            <p>
+              Enabling the design, prototyping, and construction of unique
+              robots.
+            </p>
+          </article>
+          <article class="fundLocation">
+            <img src="assets/images/icons/gearIcon.svg" alt="Gear figure" />
+            <h4>Equipment and Tools</h4>
+            <p>
+              Providing essential equipment, tools, materials to build and
+              perfect robotic creations.
+            </p>
+          </article>
+        </div>
+      </section>
+      <section id="howToSection">
+        <h3>How to Support Us: Step-by-Step Guide</h3>
+        <div class="mainContentContainer" role="presentation">
+          <article>
+            <ol>
+              <li>
+                Open the provided
+                <a
+                  href="https://www.washington.edu/giving/make-a-gift/"
+                  target="_blank"
+                  >link</a
+                >
+              </li>
+              <li>
+                In the search field, type "UW Bothell Robotics Program Support
+                Fund."
+              </li>
+              <li>Click the "Add" button.</li>
+              <li>Select your desired support option!</li>
+            </ol>
+            <p>
+              If you have any questions about sponsoring or supporting us,
+              please feel free to contact us at
+              <a href="mailto:tfrbtcs@uw.edu" target="_blank">tfrbtcs@uw.edu</a>
+            </p>
+          </article>
+          <picture>
+            <source srcset="assets/images/photos/ViatorStreetPhoto.webp" />
+            <img
+              src="assets/images/photos/ViatorStreetPhoto.jpg"
+              alt="Street photo of the 2024 Viator rover"
+              loading="lazy"
+              decoding="async"
+            />
+          </picture>
+        </div>
+      </section>
+      <section id="sponsorsSection">
+        <h3>Sponsors / Partners</h3>
+        <div id="sponsorLogoContainer" role="presentation">
+          <img src="assets/images/sponsors/nvidia.png" alt="Logo placeholder" />
+          <img src="assets/images/sponsors/nvidia.png" alt="Logo placeholder" />
+          <img src="assets/images/sponsors/nvidia.png" alt="Logo placeholder" />
+        </div>
+      </section>
     </main>
     <!-- Footer will be loaded here -->
   </body>

diff --git a/assets/images/icons/communityIcon.svg b/assets/images/icons/communityIcon.svg
diff --git a/assets/images/icons/developmentIcon.svg b/assets/images/icons/developmentIcon.svg
diff --git a/assets/images/icons/gearIcon.svg b/assets/images/icons/gearIcon.svg
diff --git a/assets/images/icons/lightbulbIcon.svg b/assets/images/icons/lightbulbIcon.svg
diff --git a/assets/images/icons/spiralGearIcon.svg b/assets/images/icons/spiralGearIcon.svg
diff --git a/assets/images/icons/suitIcon.svg b/assets/images/icons/suitIcon.svg
diff --git a/assets/images/icons/teacherIcon.svg b/assets/images/icons/teacherIcon.svg
diff --git a/assets/images/photos/2024RoverRevealGroup.jpg b/assets/images/photos/2024RoverRevealGroup.jpg
diff --git a/assets/images/photos/2024RoverRevealGroup.webp b/assets/images/photos/2024RoverRevealGroup.webp
diff --git a/assets/images/photos/Sponsor Tiers.jpg b/assets/images/photos/Sponsor Tiers.jpg
diff --git a/assets/images/photos/ViatorStreetPhoto.jpg b/assets/images/photos/ViatorStreetPhoto.jpg
diff --git a/assets/images/photos/ViatorStreetPhoto.webp b/assets/images/photos/ViatorStreetPhoto.webp
diff --git a/assets/images/photos/desktopStarRainBackground.webp b/assets/images/photos/desktopStarRainBackground.webp
diff --git a/assets/images/photos/mobileStarRainBackground.webp b/assets/images/photos/mobileStarRainBackground.webp
diff --git a/assets/images/photos/starRainBackground.jpg b/assets/images/photos/starRainBackground.jpg
diff --git a/assets/javascript/getInstagramPosts.js b/assets/javascript/getInstagramPosts.js
@@ -1,8 +1,10 @@
 /* Implementation currently uses Mock Data from API to avoid using up views */
 async function getInstagramPosts() {
   let data = localStorage.getItem("instagramResponse");
-  if (!data) {
-    try {
+  const photoContainer = $("#photoContainer");
+  photoContainer.empty();
+  try {
+    if (!data) {
       //const response = await fetch('FETCH URL');
       if (true /*response.ok*/) {
         data = JSON.stringify({
@@ -1218,27 +1220,32 @@ async function getInstagramPosts() {
       } else {
         throw new Error("Error recieving behold fetch");
       }
-    } catch (err) {
-      console.log(err);
     }
-  }
-  JSON.parse(data).posts.forEach((post) => {
-    const link = $("<a></a>");
-    const icon = $(
-      `<img class = "postIconOverlay" src = "assets/images/icons/InstagramIcon.svg" alt = "Instagram icon"/>`
-    );
-    link.attr("href", post.permalink);
-    const picture = $(`<img />`);
+    JSON.parse(data).posts.forEach((post) => {
+      const link = $("<a></a>");
+      const icon = $(
+        `<img class = "postIconOverlay" src = "assets/images/icons/InstagramIcon.svg" alt = "Instagram icon"/>`
+      );
+      link.attr("href", post.permalink);
+      const picture = $(`<img />`);
 
-    picture.attr("src", post.sizes.small.mediaUrl);
-    picture.attr(
-      "srcset",
-      `${post.sizes.small.mediaUrl} 768w, ${post.sizes.medium.mediaUrl} 1200w`
-    );
-    picture.attr("alt", post.caption);
-    link.append(icon);
-    link.append(picture);
-    $("#photoContainer").append(link);
-  });
+      picture.attr("src", post.sizes.small.mediaUrl);
+      picture.attr(
+        "srcset",
+        `${post.sizes.small.mediaUrl} 768w, ${post.sizes.medium.mediaUrl} 1200w`
+      );
+      picture.attr("alt", post.caption);
+      link.append(icon);
+      link.append(picture);
+      photoContainer.append(link);
+    });
+  } catch (err) {
+    console.log(err);
+    const errorMessage = $("<h4>Error Loading Instagram Feed</h4>");
+    const refreshButton = $("<button>Refresh</button>");
+    refreshButton.click(getInstagramPosts);
+    photoContainer.append(errorMessage);
+    photoContainer.append(refreshButton);
+  }
 }
 getInstagramPosts();
diff --git a/assets/scss/Events.css b/assets/scss/Events.css
@@ -1,5 +1,5 @@
 main {
-  background-color: rgb(24, 24, 24);
+  background-color: rgb(23, 23, 23);
 }
 main h1 {
   color: #FFF;
@@ -203,4 +203,4 @@ main .back-button {
   right: 20px;
   font-size: 30px;
   cursor: pointer;
-}/*# sourceMappingURL=events.css.map */
+}/*# sourceMappingURL=Events.css.map */