Merge pull request #16 from HackGT/timeline2022

Added timeline from HackGT 1 to HackGT 7 with ChakraUI support

Author: yu-nix

components/navbar.tsx

@@ -62,11 +62,7 @@ export default function NavBar() {
             className={`${styles.line} ${styles.top}`}
             d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"
           />
-          <path
-            fill="#fff"
-            className={`${styles.line} ${styles.middle}`}
-            d="m 70,50 h -40"
-          />
+          <path fill="#fff" className={`${styles.line} ${styles.middle}`} d="m 70,50 h -40" />
           <path
             fill="#fff"
             className={`${styles.line} ${styles.bottom}`}

pages/events.tsx

@@ -62,8 +62,7 @@ const previousEvents = [
   },
   {
     name: "HackGTeeny",
-    description:
-      "HackGT’s inaugural HackGTeeny, a hackathon geared towards beginners",
+    description: "HackGT’s inaugural HackGTeeny, a hackathon geared towards beginners",
     coverImage: "hackgteeny.jpg",
   },
 ];
@@ -75,21 +74,14 @@ export default function Events(props: Props) {
         <div className="max-width-600">
           <Text as="h1">Events</Text>
           <Text>
-            Hackathons are 36-hour events where students from across the country
-            come together for a weekend to create anything that shows off their
-            creativity and passion for development. You may choose any platform,
-            programming language, or format to show how you re-imagine
+            Hackathons are 36-hour events where students from across the country come together for a
+            weekend to create anything that shows off their creativity and passion for development.
+            You may choose any platform, programming language, or format to show how you re-imagine
             solutions.
           </Text>
         </div>
         <div className="splash-hex hex-container">
-          <Hex
-            x="59%"
-            y="10%"
-            size={200}
-            color="rgba(255,255,255,0.35)"
-            rotation={13}
-          />
+          <Hex x="59%" y="10%" size={200} color="rgba(255,255,255,0.35)" rotation={13} />
           <Hex
             x="45%"
             y="20%"
@@ -127,23 +119,21 @@ export default function Events(props: Props) {
           HackGT
         </Text>
         <Text mb="3">
-          HackGT is our annual flagship hackathon where students from across the
-          country come together to celebrate creativity and innovation. We
-          provide resources, workshops, and mentorship to allow students
-          transform their imagination into reality.
+          HackGT is our annual flagship hackathon where students from across the country come
+          together to celebrate creativity and innovation. We provide resources, workshops, and
+          mentorship to allow students transform their imagination into reality.
         </Text>
-        <Link href="https://2021.hack.gt">
+        <Link href="/timeline">
           <Button colorScheme="purple">Learn More</Button>
         </Link>
 
         <Text as="h3" mb="3" mt="10">
           Catalyst
         </Text>
         <Text mb="3">
-          Catalyst is HexLab’s community outreach event for high school students
-          with limited STEAM exposure. Participants at Catalyst have the
-          opportunity to learn about Computer Science and other related fields
-          as a career path as well as be able to receive mentorship from
+          Catalyst is HexLab’s community outreach event for high school students with limited STEAM
+          exposure. Participants at Catalyst have the opportunity to learn about Computer Science
+          and other related fields as a career path as well as be able to receive mentorship from
           industry professionals and Georgia Tech alumni.{" "}
         </Text>
         <Link href="https://catalyst.hack.gt">

pages/timeline.module.css

@@ -0,0 +1,71 @@
+.topContainer {
+    display: flex;
+}
+
+@media (max-width: 700px) {
+  .topContainer {
+    display: flex;
+    width: 150vw;
+    text-align: center;
+    margin-top: 5vh;
+  }
+}
+  
+.event {
+  width: 80%;
+  min-height: 40%;
+  border-left: 4px solid var(--color-blue);
+  margin: 0 auto;
+  padding: 2%;
+}
+
+.event h2 {
+  margin: 0;
+}
+
+.eventDescription {
+  width: 50%;
+  height: 50%;
+}
+
+.mediaContainer {
+  flex: 1;
+}
+
+.imageContainer {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  width: 100%;
+}
+
+.image {
+  margin-right: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  max-height: 300px;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  margin: 1rem;
+}
+
+.buttonContainer > * {
+  margin-right: 1rem;
+}
+
+.customMargin {
+    margin-bottom: 100rem;
+    padding-bottom: 100rem;
+}
+
+.timelineStyle {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+}