CSSS · jbriones1 · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git a/public/fall-hacks/2025/img1.png b/public/fall-hacks/2025/img1.png
diff --git a/public/fall-hacks/2025/img2.png b/public/fall-hacks/2025/img2.png
diff --git a/public/fall-hacks/2025/img3.png b/public/fall-hacks/2025/img3.png
diff --git a/public/fall-hacks/2025/img4.png b/public/fall-hacks/2025/img4.png
diff --git a/public/fall-hacks/2025/img5.jpg b/public/fall-hacks/2025/img5.jpg
diff --git a/public/fall-hacks/2025/img6.jpg b/public/fall-hacks/2025/img6.jpg
diff --git a/public/fall-hacks/2025/img7.jpg b/public/fall-hacks/2025/img7.jpg
diff --git a/public/fall-hacks/2025/img8.jpg b/public/fall-hacks/2025/img8.jpg
diff --git a/public/fall-hacks/2025/img9.jpg b/public/fall-hacks/2025/img9.jpg
diff --git a/public/fall-hacks/2025/index.html b/public/fall-hacks/2025/index.html
@@ -0,0 +1,205 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Fall Hacks 2025 | CSSS</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/static/icons/favicon_colourful.svg" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <ul class="nav-list">
+          <li><a href="#about">About</a></li>
+          <li><a href="#register">Register</a></li>
+          <li><a href="#faq">FAQ</a></li>
+        </ul>
+      </nav>
+    </header>
+    <div class="hero">
+      <h1 class="hero__intro">SFU CSSS presents</h1>
+      <pre>
+                    /@@@@@@@@@@@,
+                    /@@#
+                    *@@@((#%##@@/<b>      ,@@@@@@@#%/</b>
+      @@@@@@@@@@@@  .@@@@@@#%#@@#<b>      #@@@@@@@@@,        (##%(,</b>
+      %@@/                    #@@.<b>    ,@@@@@*            #@@@@@@@@         (,</b>
+      (@@*                    #@@*<b>    %@@@@@@@@@/       @@@@@.@@@@.       /@@@@@*</b>
+      *@@#                    (@@(<b>   ,@@@@@#/#@@       @@@@@,*@@@@(       #@@@@#         %@@@@@.</b>
+      .@@#                    *@@%<b>   %@@@@@          (@@@@@@##@@@@%      ,@@@@@,        .@@@@@#</b>
+       #@@.           .*/((#%%@@@#<b>   .,*/#/         #@@@@@@@@@@@@@@,     #@@@@#         (@@@@@.</b>
+       #@@@@@@@@@@@   %@@@##%#((/,<b>                 ,*/##@.    @@@@@/    *@@@@@(         @@@@@%</b>
+                                ..<b>                              ,*//    %@@@@@@@@@*    (@@@@@.</b>
+                      (@@@@@@@@@@@*<b>                                          .*/#%     #@@@@@@@@@,</b>
+                      ,@@%<b>                                                                .*/#%@@</b>
+             ..,,***   @@@@@@@@@@@@@@@@@*<b>                                              ,*..</b>
+   %@@@@@@@@@@@@@@@#.  /#((/**,..    .#@@%<b>                                         (@@@@@@@@/</b>
+  %@@(                    ..,,**/(##%#@@@@@*<b>                      .  (@@@@@       %@@@@#, ..(</b>
+ #@@@###@@@@@@@@@@@@(  /@@@@@@@@##%%%#(//*,.<b>                 /@@@@@*.@@@@@,       %@@@@@@@@@@#.</b>
+/###%%#((/*,..   /@@#<b>                            %@@@@@#      %@@@@#/@@@@%         ,%@@@@@@@@@@</b>
+       ....,,*/(##@@#<b>                         .@@@@@@@@@,     *@@@@@@@@@@@,        ##(/,/#@@@@/</b>
+%@@@@@@@@@@@@@####%#*<b>        @@@@@@@@        ,@@@@@(           #@@@@@%@@@@@@.      .@@@@@@@@#
+                ./%/         @@@@@@@@@*      #@@@@@      ,     .@@@@@% *@@@@@@*        .
+      ./#@/   #@@@@@.       ,@@@@##@@@@@.    ,@@@@@@#.,#@@      (@@@@@*  ,#%/.
+     %@@@@@    @@@@@#       (@@@@# /@@@@@,     (@@@@@@@@@@%      (*
+     ,@@@@@%./#@@@@@@,      (@@@@@@@@@@@@@#.      *@#@@#,
+      (@@@@@@@@@@@@@@#      #@@@@@%*  @@@@@@*
+       #@@@@#   .@@@@@/     #@@@@#
+       *@@@@@(   %@@@@@.
+        #@@@@#</b>
+      </pre>
+      <strong class="hero__year">v2025.09.27</strong>
+    </div>
+
+    <main>
+      <section id="info">
+        <h2>
+          <span>Get ready for...</span> <span><b>FALL HACKS 2025!</b></span>
+        </h2>
+        <p><span>Saturday, September 27th,</span> <span>8:00AM - 9:00PM</span></p>
+        <p>SFU Burnaby Campus</p>
+        <p>
+          Brought to you by the
+          <span
+            ><a href="https://sfucsss.org" target="_blank"
+              >Computing Science Student Society</a
+            ></span
+          >
+        </p>
+      </section>
+
+      <section id="about">
+        <h2>About</h2>
+
+        <b>What is Fall Hacks?</b>
+
+        <p>
+          This is the 6th iteration of Fall Hacks, an annual hackathon hosted by the SFU Computing
+          Science Student Society. This 13-hour event brings together over 200 students to build
+          creative projects, learn from workshops, and connect with companies! It will be hosted at
+          SFU Burnaby Campus on <b>September 27, from 8AM to 9PM.</b>
+        </p>
+
+        <b>Why participate in Fall Hacks?</b>
+
+        We emphasize learning and creativity over commercial feasibility. This is an opportunity to
+        spend a weekend tinkering with your favourite technologies to create something fun and
+        interesting. Fall Hacks is the perfect event for everyone from fresh first years to seasoned
+        CS veterans.
+      </section>
+
+      <section id="register">
+        <h2>Register & Contact</h2>
+        <ul class="register__list">
+          <li>
+            <a
+              href="https://docs.google.com/forms/d/e/1FAIpQLSfSeWJ09AEgwjZjEEANhMs_yWL8y-4nFAmIzb1qKHNsTX4NUQ/viewform?usp=sharing&ouid=111801379333111153622"
+              target="_blank"
+            >
+              Register</a
+            >
+            <span> (closes September 25 @ 11:59PM)</span>
+          </li>
+
+          <li><a href="https://discord.gg/sfucsss" target="_blank">SFU CSSS Discord</a></li>
+
+          <li>
+            <a href="mailto:csss-hackathonchair@sfu.ca" target="_blank">Email the organizers</a>
+          </li>
+        </ul>
+      </section>
+
+      <section id="faq">
+        <h2>Frequently Asked Questions...</h2>
+
+        <h3>Wait, what actually is a hackathon?</h3>
+        <p>
+          A hackathon is an event where teams work on a project inspired by an event-provided theme.
+          You will have 12 hours to develop something cool at Fall Hacks. Your team will start from
+          scratch and try to make the coolest thing they can before the time is up.
+        </p>
+
+        <h3>Where is Fall Hacks?</h3>
+        <p>
+          This year will be in-person. Registration will be at the ASB entrance. Most of the day-of
+          activities, like workshops, will be held in TASC or ASB. You are free to hack at other
+          open locations on campus.
+        </p>
+
+        <h3>Why should I participate?</h3>
+        <p>
+          You get experience with new technologies and navigate teamwork dynamics to accomplish a
+          goal. Hackathon projects are also a great addition to a resume! There are also prizes and
+          free food.
+        </p>
+
+        <h3>I am in my first year/don't have much experience, should I still participate?</h3>
+        <p>
+          Yes! This hackathon is a great learning opportunity for people with less development
+          experience. We'll also be hosting HACKATHON 101 workshops the week leading up to Fall
+          Hacks to prepare you for the event.
+        </p>
+
+        <h3>Can I work on my previous projects?</h3>
+        <p>
+          No, we want you to create awesome things from scratch in 13 hours. Starting from an
+          existing project is against the spirit of the event. Existing open-source libraries and
+          frameworks are fine, of course. Ask an organizer if you are unsure.
+        </p>
+      </section>
+
+      <section id="gallery">
+        <h2>Gallery</h2>
+
+        <div class="img-container">
+          <img src="img1.png" />
+          <img src="img2.png" />
+          <img src="img3.png" />
+          <img src="img7.jpg" />
+          <img src="img6.jpg" />
+          <img src="img8.jpg" />
+          <img src="img9.jpg" />
+          <img src="img5.jpg" />
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <small>#FallHacks2025</small>
+      <div class="icons">
+        <a href="mailto:csss-hackathonchair@sfu.ca" target="_blank">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+              fill="#fff"
+              d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
+            />
+          </svg>
+        </a>
+        <a href="https://www.linkedin.com/company/sfucsss/" target="_blank">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path
+              fill="#fff"
+              d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+            />
+          </svg>
+        </a>
+        <a href="https://www.instagram.com/sfu_csss/" target="_blank">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path
+              fill="#fff"
+              d="M194.4 211.7a53.3 53.3 0 1 0 59.3 88.7 53.3 53.3 0 1 0 -59.3-88.7zm142.3-68.4c-5.2-5.2-11.5-9.3-18.4-12c-18.1-7.1-57.6-6.8-83.1-6.5c-4.1 0-7.9 .1-11.2 .1c-3.3 0-7.2 0-11.4-.1c-25.5-.3-64.8-.7-82.9 6.5c-6.9 2.7-13.1 6.8-18.4 12s-9.3 11.5-12 18.4c-7.1 18.1-6.7 57.7-6.5 83.2c0 4.1 .1 7.9 .1 11.1s0 7-.1 11.1c-.2 25.5-.6 65.1 6.5 83.2c2.7 6.9 6.8 13.1 12 18.4s11.5 9.3 18.4 12c18.1 7.1 57.6 6.8 83.1 6.5c4.1 0 7.9-.1 11.2-.1c3.3 0 7.2 0 11.4 .1c25.5 .3 64.8 .7 82.9-6.5c6.9-2.7 13.1-6.8 18.4-12s9.3-11.5 12-18.4c7.2-18 6.8-57.4 6.5-83c0-4.2-.1-8.1-.1-11.4s0-7.1 .1-11.4c.3-25.5 .7-64.9-6.5-83l0 0c-2.7-6.9-6.8-13.1-12-18.4zm-67.1 44.5A82 82 0 1 1 178.4 324.2a82 82 0 1 1 91.1-136.4zm29.2-1.3c-3.1-2.1-5.6-5.1-7.1-8.6s-1.8-7.3-1.1-11.1s2.6-7.1 5.2-9.8s6.1-4.5 9.8-5.2s7.6-.4 11.1 1.1s6.5 3.9 8.6 7s3.2 6.8 3.2 10.6c0 2.5-.5 5-1.4 7.3s-2.4 4.4-4.1 6.2s-3.9 3.2-6.2 4.2s-4.8 1.5-7.3 1.5l0 0c-3.8 0-7.5-1.1-10.6-3.2zM448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM357 389c-18.7 18.7-41.4 24.6-67 25.9c-26.4 1.5-105.6 1.5-132 0c-25.6-1.3-48.3-7.2-67-25.9s-24.6-41.4-25.8-67c-1.5-26.4-1.5-105.6 0-132c1.3-25.6 7.1-48.3 25.8-67s41.5-24.6 67-25.8c26.4-1.5 105.6-1.5 132 0c25.6 1.3 48.3 7.1 67 25.8s24.6 41.4 25.8 67c1.5 26.3 1.5 105.4 0 131.9c-1.3 25.6-7.1 48.3-25.8 67z"
+            />
+          </svg>
+        </a>
+        <a href="http://discord.gg/sfucsss" target="_blank">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+            <path
+              fill="#fff"
+              d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"
+            />
+          </svg>
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/public/fall-hacks/2025/style.css b/public/fall-hacks/2025/style.css
@@ -0,0 +1,144 @@
+/* IBM Plex Mono */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700#display=swap');
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: black;
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 400;
+  color: white;
+}
+
+ol,
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+b {
+  color: white;
+  font-weight: 700;
+}
+
+i {
+  color: gray;
+}
+
+a {
+  color: green;
+}
+
+s {
+  color: gray;
+}
+
+.img-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+img {
+  width: 17.5rem;
+  aspect-ratio: 1.33 / 1;
+  object-fit: cover;
+  border: 1px solid gray;
+  flex: 0 1 auto;
+}
+
+.hero {
+  height: 100svh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero__intro {
+  font-size: clamp(1.5rem, 3vw, 4rem);
+}
+
+.hero__year {
+  color: darkgreen;
+  font-size: clamp(1.5rem, 3vw, 4rem);
+}
+
+pre {
+  color: lightgreen;
+  font-size: clamp(0.1rem, 1.5vw, 1rem);
+  width: 100ch;
+  margin: auto;
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+header {
+  position: sticky;
+  padding: 0.5rem;
+  top: 0;
+  z-index: 10;
+  background-color: black;
+}
+
+.nav-list {
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  > li {
+    margin: 0 auto;
+  }
+}
+
+main {
+  width: clamp(15rem, 90%, 75rem);
+  margin: 0 auto;
+
+  display: flex;
+  flex-direction: column;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+}
+
+section[id] {
+  padding-top: 3rem;
+}
+
+section > h2 {
+  color: grey;
+}
+
+span {
+  display: inline-block;
+}
+
+.register__list > li {
+  margin-bottom: 0.5rem;
+}
+
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1rem;
+  padding: 1rem;
+
+  .icons {
+    display: flex;
+    gap: 0.5rem;
+
+    & .icon {
+      width: 1.5em;
+      height: 1.5em;
+    }
+  }
+}