From 4feddb47f18a043f89c38b32ef851f4fe00fda9b Mon Sep 17 00:00:00 2001
From: Jason Antwi-Appah <hey@jasonaa.me>
Date: Sat, 29 Jun 2024 15:04:21 -0500
Subject: [PATCH] Update about page content + misc style fixes

---
 src/components/home/division.astro |  2 -
 src/components/navbar.tsx          | 68 +++++++----------------
 src/data.ts                        | 87 +++++++++++++++++++++++++-----
 src/layouts/markdown.astro         | 73 ++++++++++++++++++-------
 src/pages/about.md                 | 73 ++++++++++++++++---------
 src/pages/index.astro              |  1 -
 6 files changed, 195 insertions(+), 109 deletions(-)

diff --git a/src/components/home/division.astro b/src/components/home/division.astro
index 1b15869..ff2c69b 100644
--- a/src/components/home/division.astro
+++ b/src/components/home/division.astro
@@ -1,6 +1,4 @@
 ---
-// TODO: figure out whats wrong with the impulse picture
-
 interface Props {
   backgroundImg: string
   backgroundPosition: string
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index f2caf22..3419d7c 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,6 +1,6 @@
 import { Bars3Icon } from '@heroicons/react/24/solid'
 import { useEffect, useRef } from 'react'
-import { HOME_LINK, discordInvite, instagramURL, mainNavLinks } from '../data'
+import { HOME_LINK, discordInvite, mainNavLinks } from '../data'
 import useMedia from '../utils/useMediaQuery'
 
 const menuBg = 'var(--text-dark)'
@@ -8,6 +8,7 @@ const gradBg = 'linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.
 const styles = `
   .nav-links > a:any-link {
     color: var(--text);
+    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.3)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.4));
   }
   
   .menubar {
@@ -31,8 +32,10 @@ const styles = `
     display: none;
   }`
 function Navbar() {
-  const mobile = useMedia('(max-width: 800px)', true)
+  const mobile = useMedia('(max-width: 900px)', true)
   const detailsRef = useRef<HTMLDetailsElement>(null)
+
+  // this effect handles closing the navbar overlay when switching between pages
   useEffect(() => {
     const listener = () => {
       if (!mobile || !detailsRef.current) {
@@ -55,40 +58,6 @@ function Navbar() {
         zIndex: 100,
       }}
     >
-      <div
-        style={{
-          backgroundColor: 'var(--primary)',
-          textAlign: 'center',
-          padding: '1rem',
-        }}
-      >
-        <p>
-          This site is currently in progress! Feel free to browse around, and
-          check out our
-          <a
-            style={{ fontWeight: 700 }}
-            href={discordInvite}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {' '}
-            Discord
-          </a>
-          {' '}
-          and
-          <a
-            style={{ fontWeight: 700 }}
-            href={instagramURL}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {' '}
-            Instagram
-          </a>
-          {' '}
-          for club updates!
-        </p>
-      </div>
       <style dangerouslySetInnerHTML={{__html: styles}}/>
       <div
         className="menubar"
@@ -100,7 +69,7 @@ function Navbar() {
           padding: '2rem 4rem',
         }}
       >
-        <a href={HOME_LINK.href}>
+        <a href={HOME_LINK.href} className="no-decoration">
           <img
             src="/wordmark.png"
             style={{
@@ -110,14 +79,14 @@ function Navbar() {
         </a>
         {mobile
           ? (
-            <details ref={detailsRef}>
-              {/* TODO: hamburger icon */}
-              <summary style={{ cursor: 'pointer' }}>
-                <Bars3Icon/>
-              </summary>
-              <NavLinks mobile={mobile} />
-            </details>
-            ) : (
+              <details ref={detailsRef}>
+                <summary style={{ cursor: 'pointer' }}>
+                  <Bars3Icon />
+                </summary>
+                <NavLinks mobile={mobile} />
+              </details>
+            )
+          : (
               <NavLinks mobile={mobile} />
             )}
       </div>
@@ -130,28 +99,29 @@ function NavLinks(props: { mobile: boolean }) {
   const { mobile } = props
   return (
     <nav
-      className='nav-links'
+      className="nav-links"
       style={{
         display: 'flex',
         flexDirection: mobile ? 'column' : 'row',
         gap: '2rem',
         backgroundColor: mobile ? menuBg : 'transparent',
         position: mobile ? 'absolute' : 'inherit',
-        top: mobile ? 200 : 'inherit',
+        top: mobile ? 100 : 'inherit',
         left: mobile ? 0 : 'inherit',
         zIndex: mobile ? 90 : 'inherit',
         width: mobile ? '100vw' : 'min-content',
-        height: mobile ? 'calc(100vh - 200px)' : 'inherit',
+        height: mobile ? 'calc(100vh - 100px)' : 'inherit',
         alignItems: 'center',
         fontFamily: '\'Mashine\', sans-serif',
       }}
     >
       {mainNavLinks.map(link => (
-        <a key={`nav-${link.name}`} href={link.href}>
+        <a className="no-decoration" key={`nav-${link.name}`} href={link.href}>
           {link.name}
         </a>
       ))}
       <a
+        className="no-decoration"
         style={{
           backgroundColor: 'var(--primary)',
           padding: '0.5rem 1rem',
diff --git a/src/data.ts b/src/data.ts
index 531210f..a7bcf83 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -5,7 +5,7 @@ const HOME_LINK: LinkType = { name: 'Home', href: '/' }
 const mainNavLinks: LinkType[] = [
   HOME_LINK,
   { name: 'About', href: '/about' },
-  // { name: "Projects", href: "#" },
+  // { name: "Projects", href: "/projects" },
   { name: 'Contact', href: '/links' },
 ]
 
@@ -30,16 +30,6 @@ const sponsorLinks: LinkWithIconType[] = [
     href: 'https://www.bettercnc.com/',
     icon: '/sponsors/bettercnc.png',
   },
-  // {
-  //     name: 'Fingertech Robotics',
-  //     href: 'https://www.fingertechrobotics.com/',
-  //     icon: '/sponsors/fingertech.png'
-  // },
-  // {
-  //     name: 'SendCutSend',
-  //     href: 'https://sendcutsend.com/',
-  //     icon: '/sponsors/sendcutsend.png'
-  // },
   {
     name: 'Repeat Robotics',
     href: 'https://www.repeat-robotics.com/',
@@ -47,6 +37,79 @@ const sponsorLinks: LinkWithIconType[] = [
   },
 ]
 
+interface Person {
+  name: string
+  role: string
+}
+
+const generalOfficers: Person[] = [
+  {
+    name: 'Om Davra',
+    role: 'President'
+  },
+  {
+    name: 'Jaime Contreras',
+    role: 'Vice President'
+  },
+  {
+    name: 'Mason Thomas',
+    role: 'Director of Marketing'
+  },
+  {
+    name: 'Jason Antwi-Appah',
+    role: 'Director of Events'
+  },
+  {
+    name: 'Blessy Kim',
+    role: 'Director of Finance'
+  },
+  {
+    name: 'Alyssa Su',
+    role: 'Director of Outreach'
+  },
+]
+const projectOfficers: Person[] = [
+  {
+    name: 'Natalie Stromberg',
+    role: 'Director of Combat Robotics'
+  },
+  {
+    name: 'Neil Blatzheim',
+    role: 'Director of Combat Robotics'
+  },
+  {
+    name: 'Colin Wong',
+    role: 'Director of Competitive Robotics'
+  },
+  {
+    name: 'Ryan Hirasaki',
+    role: 'Director of Competitive Robotics'
+  }
+]
+
+const projectManagers: Person[] = [
+  {
+    name: 'David von Paumgartten',
+    role: 'Solis Rover Project',
+  },
+  {
+    name: 'David Brock',
+    role: 'Blended Donut, Misc. Combat Projects'
+  },
+  {
+    name: 'Jude Onyenze',
+    role: 'VEX U'
+  },
+  {
+    name: 'Evan Wu',
+    role: 'Sumo Bots'
+  },
+  {
+    name: 'Dylan Brose',
+    role: 'Chess Bots'
+  }
+]
+
 const clubEmail = 'cometrobotics@utdallas.edu'
 const discordInvite = 'https://discord.gg/dTGwav3PVM'
 
@@ -150,4 +213,4 @@ const combatTeams = [
   },
 ]
 
-export { mainNavLinks, HOME_LINK, footerLinks, socialLinks, clubEmail, sponsorLinks, discordInvite, makerspaceMap, websiteRepo, linksPageLinks, instagramURL, competitiveTeams, combatTeams }
+export { mainNavLinks, HOME_LINK, footerLinks, socialLinks, clubEmail, sponsorLinks, discordInvite, makerspaceMap, websiteRepo, linksPageLinks, instagramURL, competitiveTeams, combatTeams, generalOfficers, projectManagers, projectOfficers }
diff --git a/src/layouts/markdown.astro b/src/layouts/markdown.astro
index 28a055c..a4cd645 100644
--- a/src/layouts/markdown.astro
+++ b/src/layouts/markdown.astro
@@ -8,43 +8,78 @@ import Join from '../components/join.astro'
 import type { MarkdownLayoutProps } from 'astro';
 
 type Props = MarkdownLayoutProps<{
-  // Define frontmatter props here
   title: string;
   subtitle: string;
 }>;
 
+
 const { title, subtitle } = Astro.props.frontmatter || Astro.props;
----
 
+const toc = Astro.props.headings.filter(h=>h.depth == 1)
+const renderTOC = toc.length > 1
+---
 <BaseLayout title={title}>
   <div
     class="main-container"
-    style="padding-top: 120px; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column;"
+    style="padding: 120px 2rem; display: flex; background: linear-gradient(#230508 70%, var(--text-dark)); flex-direction: column; text-align: center;"
   >
     <div
-      style="display: flex; flex-direction:column; margin: auto; align-items: center;"
+      style="display: flex; flex-direction:column; margin: auto; gap: 0.5rem; align-items: center;"
     >
       <h1 class="font-unbounded">{title}</h1>
-      <h3 class="font-unbounded" style="opacity: 80%;">
+      <h3 class="font-unbounded" style="font-weight: 400; color: #E1AAAF;">
         {subtitle}
       </h3>
     </div>
-    <div
-      class="md-container"
-      style="margin: auto; margin-top: 5em;max-width: 100em; width: 100%; display: flex; flex-direction: column; gap: 2em; padding: 2em 2em; background-color: white; border-radius: 1em;"
+    <div class="md-container"
     >
-    <style is:global>
-      .md-container > h1 {
-        color: var(--primary); 
-        font-family: 'Mashine', sans-serif;
-      }
-      
-      .md-container > p, .md-container > h2, .md-container > h3, .md-container > h4, .md-container > h5, .md-container > h6 {
-        color: var(--text-dark);
-      }
-    </style>
+      <style is:global>
+        .md-container {
+          text-align: left;
+          background-color: var(--text);
+          margin: auto; 
+          margin-top: 5em; 
+          min-width: 10rem; 
+          max-width: 75rem; 
+          width: 100%; 
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          padding: 3.5em;
+          background-color: white;
+          border-radius: 1em;
+        }
+        
+        .md-container > h1 {
+          color: var(--primary); 
+          padding-top: 1rem;
+          font-family: 'Mashine', sans-serif;
+        }
+        
+        .md-container > p, .md-container > h2, .md-container > h3, .md-container > h4, .md-container > h5, .md-container > h6, .md-container > ol, .md-container > ul {
+          color: var(--text-dark);
+        }
+        
+        .md-container > p, .md-container > ol, .md-container > ul { 
+          font-size: 1.33rem;
+          line-height: 1.5;
+        }
+        
+        .md-container > h2, .md-container > h3, .md-container > h4, .md-container > h5, .md-container > h6 {
+          font-family: 'Unbounded Variable', sans-serif;
+          font-weight: 500;
+        }
+        
+        .end {
+          margin: 2rem 0;
+          background-color: var(--primary);
+          width: 2rem;
+          height: 0.5rem;
+        }
+      </style>
       <slot />
+      <span class="end"/>
     </div>
-    <Join theme="dark" />
   </div>
+  <Join theme="dark" />
 </BaseLayout>
diff --git a/src/pages/about.md b/src/pages/about.md
index 8126fe9..4eefe26 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -3,42 +3,63 @@ layout: ../layouts/markdown.astro
 title: About
 subtitle: More about the club and its history
 ---
+# Who we are
 
+Comet Robotics at UT Dallas is a student organization with the goal of promoting robotics at UT Dallas and in the surrounding area through outreach, projects and workshops. We compete with colleges and universities across the globe in combat robotics competitions, and programs like VEX U and University Rover Challenge.
 
-# Our Mission
-Comet Robotics, a student-led organization at the University of Texas at Dallas, is a group of students who are passionate about robotics and engineering. We design, build, and compete with robots in various competitions. Our goal is to provide students with the opportunity to learn and apply engineering concepts in a hands-on environment. We welcome students from all backgrounds and experience levels to join us in our mission to promote STEM education and robotics in our community.
+With membership open to all students regardless of major or prior experience in robotics, we provide students with the opportunity to collaborate and compete with like-minded individuals to gain experience and refine their knowledge of designing, building, and programming robots. As an organization, we aim to build and sustain an engaged body of students hoping to expand upon their coursework and gain real-world experience, developing skills in project management, leadership, teamwork, and much more.
 
-<!-- TODO: need to work copy. sort of struggling to find the right words
-https://www.nhrl.io/about
-https://www.purduehackers.com/
-https://stripe.com/guides/atlas/landing-page-copy
-https://unbounce.com/landing-page-copywriting/
--->
+# History
 
-<!--
-Comet Robotics is a student-led organization at the University of Texas at
-Dallas. This club was founded in 2021, as a rebirth of the now-defunct UT Dallas Combat Robotics club and rebranded to Comet Robotics in summer 2023 to represent our expanded focus to include our competitive robotics division.
+Originally started with ‘The Blender’, our 120-pound, world-championship-winning BattleBot, combat robotics at UT Dallas has history going back to 2004. This club was founded in 2021 as a rebirth of the now-defunct UT Dallas Combat Robotics club, during which time we focused on antweight and beetleweight combat robots. Since then, we have expanded to dozens of 1lb, 3lb, and 12lb weight class combat robots, rebranding the org as Comet Robotics in summer 2023 to reflect our expanded focus with our competitive robotics division.
+
+# Organization Structure
+
+Projects are the heart of Comet Robotics, and consist of teams that work together to develop their project, helping each other and learning new skills along the way. While each project is led by one Project Manager, a project may optionally have a number of Team Leads focused on specific goals or needs of their project, like a software lead.
+
+Each project falls under one of 2 divisions, Combat Robotics and Competitive Robotics, both of which have directors overseeing the projects and helping to address their needs. Combat Robotics encompasses our combat robot projects, while Competitive Robotics holds all remaining projects which don't fall under the Combat Robotics roster.
 
-Originally started with ‘The Blender’, our 120lb world championship winning BattleBot, combat robotics at UT Dallas has history going back to 2004. Since the clubs' revival in 2021, we have expanded to dozens of 1lb, 3lb, and 12lb weight class combat robots and grown to include more competitive robotics projects.
+The organization is led as a whole by the President, Vice President and other supporting officers, who work together to keep Comet Robotics moving and support the goals of the organization. Officers and project managers are elected positions with 1-year terms.
 
-we are group of students who are passionate about all things robots, from software, to mechanical, and all the things in between . 
+## Leadership
 
-Computer science students, as well as engineering and non-STEM majors alike come together
-united by our passion for all things robotics
+TODO: include officers and project managers here
 
+### General Officers
+### Project Officers
+### Project Managers
 
-Who we are
-Comet Robotics at UT Dallas is a student organization with the goal of promoting robotics at UT Dallas and in the surrounding area through outreach, projects and workshops. We're building a world-class robotics program, competing with colleges and universities across the globe in combat robotics competitions, and programs like VEX U and University Rover Challenge.
+# Past Achievements
+
+## 2023-2024
+
+- building a bulletproof, 1000-pound, 8 ft x 8 ft x 8 ft battlebox for safely fighting combat robots up to 3lbs in mass
+- competing at 10 public combat robotics competitions with 6 podium finishes
+- being invited to and competing at an official BattleBots event at SXSW in March 2024 with our 15-pound combat robot, Desserts
+- significant progress on prototyping/R&D for a Mars rover to compete in the University Rover Challenge
+- starting a VEX U competition team, which received an invitation to compete at the VEX Robotics World Championship in its first year based on performance
+- hosting 3 outreach events in collaboration with local schools, introducing over 150 middle and high schoolers to robotics and the engineering design process through our custom 3D-printed combat robotics kit, Combat Blocks
+
+<!--
+brainstorming 
 
-With membership open to all students regardless of major or prior experience in robotics, we provide students with the opportunity to collaborate and compete with like-minded individuals to gain experience and refine their knowledge of designing, building, and programming robots. As an organization, we aim to build and sustain an engaged body of students hoping to expand upon their coursework and gain real-world experience, developing skills in project management, leadership, teamwork, and much more. 
+who is this site for?
+- students - whose goal is to learn about the club and decide whether to join. is it worth my time, will i fit in, etc.
+- potential sponsors - see what we do and why to consider supporting the club
 
+i think as long as we do a good job of tailoring copy to students we'll achieve the goal of communicating what we do to other stakeholders as well.
 
+pages i like copy on
+- https://www.nhrl.io/ 
+  - does a good job of explaining what nhrl/combat is without taking themselves too seriously. we shouldn't come across as overly professional/business-like in our copy, because we aren't :)
+- https://www.purduehackers.com/
+  - like how the copy is addressing the viewer specifically. i'd also say purdue hackers has a similar goal to us in that we're both very project focused orgs and agree that building stuff outside of class is a very rewarding experience
+- https://acm.cs.purdue.edu
+  - does a good job of balancing a professional but semi informal tone. makes it easy to understand what exactly they do as an org and why you should join \[a SIG\]. org has a similar structure to us in that being in a SIG is how you are a part of the org
+- https://hackclub.com/clubs/, https://hackclub.com/
+  - explains clearly what a hack club is and what you do in a hack club.
 
-Achievements
-This academic year alone, we've achieved significant milestones as a club, including but not limited to:
-building a bulletproof, 1000-pound, 8 ft x 8 ft x 8 ft battlebox for safely fighting combat robots up to 3lbs in mass
-competing at 10 public combat robotics competitions with 6 podium finishes
-being invited to and competing at an official BattleBots event at SXSW in March 2024 with a 15-pound combat robot
-significant progress on prototyping/R&D for a Mars rover to compete in the University Rover Challenge
-starting a VEX U competition team, which received an invitation to compete at the VEX Robotics World Championship in its first year based on performance
-hosting 3 outreach events in collaboration with local schools, introducing over 150 middle and high schoolers to robotics and the engineering design process through our custom 3D-printed combat robotics kit, Combat Blocks -->
+guides to copy writing (more business oriented but still has some good principles)
+- https://stripe.com/guides/atlas/landing-page-copy
+- https://unbounce.com/landing-page-copywriting/
+-->
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fa7734f..60b2836 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,6 @@ import Summary from '../components/home/summary.astro'
 import Division from '../components/home/division.astro'
 import Join from '../components/join.astro'
 ---
-<!-- TODO: this whole page needs copy rewritten and images changed -->
 <BaseLayout title="Home">
   <Hero />
   <Summary />