Finalize hackathon page

src/components/introduction/Introduction.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { TypeAnimation } from "react-type-animation";
 import "./introduction.css";
 
-const Typewriter = ({
+export const Typewriter = ({
   text,
   showIf = true,
   sequenceBefore = [],
@@ -16,7 +16,7 @@ const Typewriter = ({
   return (
     <span style={{ whiteSpace: "pre-wrap" }}>
       <span style={{ position: "absolute" }}>
-        {showIf && !shouldHideCursor && (
+        {showIf && !shouldHideCursor &&(
           <TypeAnimation
             sequence={[
               ...sequenceBefore,

src/components/navbar/Navbar.jsx

@@ -8,6 +8,9 @@ const Navbar = () => {
 
   const links = (
     <>
+      <p>
+        <Link to="/hackathon">Hackathon 2024!</Link>
+      </p>
       <p>
         <Link to="/about">About</Link>
       </p>

src/pages/hackathon/Hackathon.mdx

@@ -1,84 +1,42 @@
 import { Hackathon } from "..";
 import "./hackathon.css";
+import { Typewriter } from "../../components/introduction/Introduction.jsx";
+
 
 <main className="content color__text hackathon">
 
 <div class="text-center">
 
-<div class="disclaimer">
-
-This page is a work-in progress!! We're still planning this Hackathon.
-
-</div>
-
 <div class="title">
 
+
 ObieSource presents…
 
-# \> OBIEHACKS
+<div
+className="obs__hackathon-intro-terminal-body"
+style={{ overflowWrap: "break-word" }}
+>
+<h1 className="obs__hackathon-intro-heading">
+  <Typewriter
+    text={
+      "> OBIEHACKS\nSpring 2024"
+    }
+    sequenceAfter={[1000, () => setAnimationState(1)]}
+  />
+</h1>
+</div>
 
 _Spring 2024_
 
 </div>
 
-</div>
-
-## Overview and Goals
-
-OBIEHACKS is ObieSource’s first annual Hackathon. Our goal is to create a fun and competitive environment for students to create, innovate, and problem-solve!
-
-## Programming
-
-### Time, location, theme:
+<div class="obs__hackathon-devpost">
 
-OBIEHACKS is open to all Oberlin students from all majors and disciplines, and is tentatively scheduled to happen on April 13, 2024 (Saturday) at Peter’s Hall Language Lab (Ben Toker is working on securing the location with Abe Reshad)
+[Learn more on our DevPost!](https://obiehacks.devpost.com/)
 
-### Pre-event:
-
-In order to compete in Hackathon, students must form groups of maximum 4-5 members, and fill out a Google Form before [deadline].
-If a student do not have a group yet, they may mingle with other groupless peers on the OBIEHACKS Discord server. This server will also be ObieSource’s main channel of communication with hackers!
-
-### Agenda:
-
-- 9 AM - 10 AM: Briefing, Opening Ceremony
-- 10 AM - 9 PM: Hack time (with breaks in between)
-- 9 PM - 10 PM+: Judges discuss and pick winners
-- [sometime]: Announce winners, Closing ceremony
-
-### Example Submissions:
-
-All team must submit documentation of their project via DevPost, along with an artifact. The written documentation should sufficiently and clearly answer [the following questions] (this is so judges can interact with your artifact as you intend!) This artifact could come in the form of:
-
-- Website/web application
-- Mobile application
-- Game (software or physical!)
-- Interactive art
-- And more!
-
-### Awards:
-
-- Most Technically Impressive
-- Most Creative
-- Judges’ favourite
-- Best Hack for the Community
-
-## Logistics
-
-- Google Forms:
-  - Team formation
-  - Do you need accommodations (laptop?)
-- Costs: We want to be able to provide snacks and drinks to hackers, as well as lunch(?) if possible.
-- Location and Accommodations: As of right now, Language Lab in Peters is a suitable, and accessible location as a working space. We approximate that 6-8 teams should be able to work in this space.
-- Possible collaboration with Major League Hacking: Dan-Ha is currently reaching out to MLH as a sponsor organization for OBIEHACKS.
+</div>
 
-## Questions for Faculty:
+</div>
 
-- Adjudication: We need a panel of judges to pick the winners of the Hackathon.
-  - Would any faculty be interested in/avaible to adjudicate ObieHacks?
-  - What should the grading rubrics look like (clear documentation is definitely important)
-- What other awards should we do?
-- Costs: ObieSource has had a lot of difficulty in the past asking for snacks and meal coverage from SFC.
-  - Can the department sponsor ObieHacks (just food)
-  - How about publicity– can the department help print posters and advertise?
 
 </main>

src/pages/hackathon/hackathon.css

@@ -15,6 +15,10 @@
   text-align: center;
 }
 
+.hackathon .title {
+  font-size: 30px;
+}
+
 .hackathon .title p {
   margin-top: 0;
 }
@@ -27,3 +31,118 @@
 .hackathon li:not(:last-child) {
   margin-bottom: 0.2rem;
 }
+
+.obs__hackathon-devpost {
+  margin-top: 2rem;
+  font-size: 45px;
+}
+
+
+.obs__hackathon-intro {
+  background-color: var(--color-background);
+  /* width: 100%; */
+  padding: 0rem 6rem 6rem 6rem;
+}
+
+.obs__hackathon-intro-terminal {
+  background-color: var(--color-foreground);
+  /* width: 100%; */
+  border-radius: 10px;
+  box-sizing: border-box;
+  /* justify-content: space-between; */
+}
+
+.obs__hackathon-intro-terminal-buttons__container {
+  background-color: var(--color-foreground-2);
+  /* width: 100%; */
+  padding: 0.5rem 1rem;
+  border-radius: 10px 10px 0px 0px;
+  box-sizing: border-box;
+  /* justify-content: space-between; */
+}
+
+.obs__hackathon-intro-terminal-body {
+  padding: 2rem 1.8rem;
+}
+.obs__hackathon-intro-terminal-buttons {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 25px;
+  margin-right: 0.7rem;
+
+  &.red {
+    background: #ff6057;
+    border: 1px solid #e14640;
+  }
+
+  &.amber {
+    background: #ffbd2e;
+    border: 1px solid #dfa123;
+  }
+
+  &.green {
+    background: #27c93f;
+    border: 1px solid #1dad2b;
+  }
+}
+
+.obs__hackathon-intro-heading {
+  font-family: var(--font-display);
+  font-weight: 250;
+  font-size: 92px;
+  color: var(--color-txt);
+}
+
+.obs__hackathon-intro-description__container {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.obs__hackathon-intro-description-buls {
+  /* margin: 1.3rem 0 0 0; */
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  /* width: 100%; */
+  gap: 0.5rem;
+}
+
+.obs__hackathon-intro-description {
+  min-width: 13rem;
+  border-radius: 10px;
+  /* width: 100%; */
+}
+
+.obs__hackathon-intro-description h3 {
+  font-family: var(--font-text-1);
+  font-weight: 500;
+  font-size: 30px;
+  padding: 0 0 0.6rem 0;
+  color: var(--color-accent);
+}
+
+.obs__hackathon-intro-description p {
+  font-family: var(--font-text-1);
+  font-size: 16px;
+  color: var(--color-txt);
+}
+
+@media screen and (max-width: 700px) {
+  .obs__hackathon-intro-heading {
+    font-size: 35px;
+  }
+  .obs__hackathon-intro-description h3 {
+    font-size: 20px;
+  }
+  .obs__hackathon-intro {
+    padding: 2rem 4rem;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .obs__hackathon-intro {
+    padding: 2rem;
+  }
+}