From 29cdc5751a97ce84094b8a376e7181c65b0484a2 Mon Sep 17 00:00:00 2001 From: Ajai Nelson <22969541+AjaiKN@users.noreply.github.com> Date: Tue, 12 Mar 2024 18:54:21 -0400 Subject: [PATCH] Finalize hackathon page --- src/components/introduction/Introduction.jsx | 4 +- src/components/navbar/Navbar.jsx | 3 + src/pages/hackathon/Hackathon.mdx | 82 ++++--------- src/pages/hackathon/hackathon.css | 119 +++++++++++++++++++ 4 files changed, 144 insertions(+), 64 deletions(-) diff --git a/src/components/introduction/Introduction.jsx b/src/components/introduction/Introduction.jsx index 96bf21a..cf06294 100644 --- a/src/components/introduction/Introduction.jsx +++ b/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 ( - {showIf && !shouldHideCursor && ( + {showIf && !shouldHideCursor &&( { const links = ( <> +

+ Hackathon 2024! +

About

diff --git a/src/pages/hackathon/Hackathon.mdx b/src/pages/hackathon/Hackathon.mdx index d5029cb..ff15697 100644 --- a/src/pages/hackathon/Hackathon.mdx +++ b/src/pages/hackathon/Hackathon.mdx @@ -1,84 +1,42 @@ import { Hackathon } from ".."; import "./hackathon.css"; +import { Typewriter } from "../../components/introduction/Introduction.jsx"; +
-
- -This page is a work-in progress!! We're still planning this Hackathon. - -
-
+ ObieSource presents… -# \> OBIEHACKS +
+

+ OBIEHACKS\nSpring 2024" + } + sequenceAfter={[1000, () => setAnimationState(1)]} + /> +

+
_Spring 2024_
-
- -## 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: +
-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. +
-## Questions for Faculty: + -- 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?
diff --git a/src/pages/hackathon/hackathon.css b/src/pages/hackathon/hackathon.css index e5368a1..959d4e3 100644 --- a/src/pages/hackathon/hackathon.css +++ b/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; + } +}