main merged into this branch

gatsby-browser.js

@@ -0,0 +1,4 @@
+exports.shouldUpdateScroll = () => {
+  window.scrollTo(0, 0)
+  return false
+}

src/components/Navbar.js

@@ -15,7 +15,7 @@ import { Link } from 'gatsby'
 import YearsDropdown from './YearsDropdown'; 
 
 const drawerWidth = 240
-const navItems = ['HACKERS', 'ORGANIZERS', 'AMBASSADORS', 'DIVERSITY FELLOWS']
+const navItems = ['ABOUT', 'HACKERS', 'ORGANIZERS', 'AMBASSADORS', 'DIVERSITY FELLOWS']
 
 function DrawerAppBar({ currPage }) {
   const [mobileOpen, setMobileOpen] = React.useState(false)
@@ -32,11 +32,6 @@ function DrawerAppBar({ currPage }) {
             <ListItemText primary="HOME" />
           </ListItemButton>
         </ListItem>
-        <ListItem key="PENNAPPS XXIV" disablePadding>
-          <ListItemButton href="https://2023f.pennapps.com/" sx={{ textAlign: 'left' }}>
-            <ListItemText primary="PENNAPPS XXIV" />
-          </ListItemButton>
-        </ListItem>
         {navItems.map(item => (
           <ListItem key={item} disablePadding>
             <ListItemButton component={Link} to={`/${item}`.toLowerCase()} sx={{ textAlign: 'left' }}>
@@ -49,8 +44,30 @@ function DrawerAppBar({ currPage }) {
   )
 
   return (
-    <Box sx={{ display: 'flex' }}>
-      <AppBar component="nav" sx={{ bgcolor: 'rgba(255, 255, 255, 0.8)' }} elevation={0}>
+    <> {/*
+      <Box sx={{
+        position: 'fixed',
+        top: 0,
+        width: '100%',
+        height: '45px',
+        zIndex: 1000,
+        bgcolor: '#990000',
+        color: '#dce2e8',
+        textAlign: 'center',
+        padding: '10px',
+        }}
+      >
+      <Typography variant="body1" sx={{ fontFamily: `'futura-pt', 'Futura', 'Trebuchet MS', 'Arial', 'sans-serif'` }}>
+        <b> FILL OUT THIS{' '} </b>
+        <b href="https://docs.google.com/forms/d/e/1FAIpQLSemhXtQOOhTzAsz06QA8t9aU-shJs_ZukuU6rW8Nvo2FoiavQ/viewform" style={{ color: '#7fa3c9', textDecoration: 'underline', fontWeight: 'inherit', fontFamily: `'futura-pt', 'Futura', 'Trebuchet MS', 'Arial', 'sans-serif'` }}>
+          FORM
+        </b>{' '}
+        <b>TO BE THE FIRST TO KNOW WHEN THE APPLICATIONS OPEN FOR 2024! </b>
+      </Typography>
+
+      </Box> */}
+
+      <AppBar component="nav" sx={{ top: '0', bgcolor: 'rgba(255, 255, 255, 0.8)', position: 'relative', zIndex: 1, display: 'flex', }} elevation={0}>
         <Toolbar>
           <Typography
             variant="h6"
@@ -64,7 +81,8 @@ function DrawerAppBar({ currPage }) {
               letterSpacing: 2,
               color: '#0F2944',
               textDecoration: 'none',
-              ml: '11px',
+              marginRight: '11px',
+              ml: { xs: '0px', sm: '0px', lg: '0px' },
             }}
           >
             PENNAPPS
@@ -107,7 +125,7 @@ function DrawerAppBar({ currPage }) {
           open={mobileOpen}
           onClose={handleDrawerToggle}
           ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
+            keepMounted: true,
           }}
           sx={{
             display: {
@@ -122,7 +140,7 @@ function DrawerAppBar({ currPage }) {
         </Drawer>
       </Box>
       <Toolbar />
-    </Box>
+    </>
   )
 }
 

src/organizers.json

@@ -1,62 +1,62 @@
 [
   {
-    "name": "Anuj Kothari",
+    "name": "Lina Chihoub",
     "title": "Co-Director",
-    "image": "anuj"
+    "image": "lina_chihoub"
   },
   {
-    "name": "Qijia (Joy) Liu",
+    "name": "Zora Mardjoko",
     "title": "Co-Director",
-    "image": "joy"
+    "image": "zora_mardjoko"
   },
   {
-    "name": "Minnie Kim",
+    "name": "Jackie Li",
     "title": "Creative",
-    "image": "minnie"
+    "image": "jackie_li"
   },
   {
-    "name": "Jackie Li",
+    "name": "Rachel Lin",
     "title": "Creative",
-    "image": "jackie"
+    "image": "rachel_lin"
   },
   {
-    "name": "Sahishnu Hanumolu",
+    "name": "Zihao Zhou",
     "title": "Outreach",
-    "image": "sahishnu"
+    "image": "zihao_zhou"
   },
   {
     "name": "Melody Cheng",
     "title": "Outreach",
-    "image": "melody"
+    "image": "melody_cheng"
   },
   {
-    "name": "Yuying Fan",
+    "name": "Joseph Dattilo",
     "title": "Dev",
-    "image": "yuying"
+    "image": "joseph_dattilo"
   },
   {
-    "name": "Vincent Cai",
+    "name": "Millie Gu",
     "title": "Dev",
-    "image": "vincent"
+    "image": "millie_gu"
   },
   {
-    "name": "Lina Chihoub",
+    "name": "Mackenzie Coultoff",
     "title": "Sponsorship",
-    "image": "lina"
+    "image": "blank"
   },
   {
-    "name": "Lyndsey Barrett",
+    "name": "Akshat Parthiban",
     "title": "Sponsorship",
-    "image": "lyndsey"
+    "image": "14"
   },
   {
-    "name": "Helena Zhang",
+    "name": "August Fu",
     "title": "Logistics",
-    "image": "helena"
+    "image": "august_fu"
   },
   {
-    "name": "Ishaan Lal",
+    "name": "Caroline Chen",
     "title": "Logistics",
-    "image": "ishaan"
+    "image": "caroline_chen"
   }
 ]

src/pages/about.js

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { useStaticQuery, graphql } from 'gatsby'
+
+import Footer from '../components/Footer'
+import OrganizerCard from '../components/OrganizerCard'
+import Navbar from '../components/Navbar'
+
+import '../styles/about.css'
+import landingImage from '../images/landing-image.png'
+import timelineImage from '../images/timeline.png'
+import mobileTimelineImage from '../images/mobile-timeline.png'
+import organizers from '../organizers.json'
+
+export function Head() {
+  return (
+    <>
+      <title>PennApps - The world&apos;s first college hackathon</title>
+      <link rel="stylesheet" href="https://use.typekit.net/tri7gwo.css" />
+    </>
+  )
+}
+
+export default function About() {
+  const imageData = useStaticQuery(graphql`
+    query {
+      allFile(filter: { relativeDirectory: { eq: "organizers" } }) {
+        nodes {
+          name
+          childImageSharp {
+            gatsbyImageData(
+              width: 200
+              height: 200
+             )
+          }
+        }
+      }
+    }
+  `)
+  const organizerImages = Object.fromEntries(
+    imageData.allFile.nodes.map(node => [node.name, node.childImageSharp.gatsbyImageData]),
+  )
+
+  return (
+    <div className="landing">
+      <Navbar />
+      {/* <div className="landing-info">
+        <div className="landing-info-text">Applications for PennAppsXXIV are open!</div>
+        <div className="landing-info-btn-container">
+          <a href="http://2023f.pennapps.com/">
+            <button className="landing-info-btn" type="button">GO TO SITE</button>
+          </a>
+        </div>
+      </div> */}
+      <div className="landing">
+        <img className="landing-img" src={landingImage} alt="Landing Header" />
+      </div>
+      <div className="landing-page-container">
+        <div className="about-pennapps">
+          <h3>About PennApps</h3>
+          <div>
+            Founded in the fall of 2009, PennApps was the nation’s first student-run college
+            hackathon. Since then, it has spurred a revolution in the way engineering students
+            develop and showcase their skills, spawning an entire “league” of hackathons across the
+            nation. In past years, over a thousand students from the U.S. and other countries like
+            Switzerland, Canada, England, and Singapore have converged in Philadelphia for the
+            spring and fall editions of the event for a weekend of creation and discovery. Both
+            beginners and experts alike will work together, learn and compete to become better
+            engineers and work on awesome projects.
+          </div>
+        </div>
+        {/* <div className="timeline">
+          <h3>Event Timeline</h3>
+          <div className="timeline-img-wrapper">
+            <picture>
+              <source
+                media="(min-width: 680px)"
+                srcSet={timelineImage}
+              />
+              <img
+                src={mobileTimelineImage}
+                alt="Timeline Image"
+                className="timeline-img"
+              />
+            </picture>
+          </div>
+          <p>Reach out to [email protected] if you have any questions!</p>
+    </div> */}
+        <div className="organizers">
+          <h3>Organizers</h3>
+          <div className="organizers-grid">
+            {organizers.map(organizer => (
+              <OrganizerCard
+                key={organizer.image}
+                name={organizer.name}
+                title={organizer.title}
+                image={organizerImages[organizer.image]}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}

src/pages/diversity-fellows.js

@@ -6,7 +6,6 @@ import Footer from '../components/Footer'
 import ApplicationsOpenSvg from '../images/applications-open.svg'
 import ApplicationsClosedSvg from '../images/applications-closed.svg'
 import '../styles/ambassadors.css'
-import QRCode from 'qrcode.react'; 
 
 export function Head() {
   return (
@@ -18,9 +17,6 @@ export function Head() {
 }
 
 export default function DiversityFellows() {
-  // add a state variable to hold the URL for the QR Code: 
-  const [qrText, setQrText] = React.useState(''); 
-
   return (
     <div>
       <Navbar currPage="DIVERSITY FELLOWS" />
@@ -51,17 +47,10 @@ export default function DiversityFellows() {
                   to tell us more about you! We want to know how your background and experiences have given you a unique perspective, and how you would implement this perspective at PennApps XXIV.
                   <br />
                   <br />
-                  Applications are due on Sunday, July 16th, at 11:59 PM EST.
+                  Stay tuned for Diversity Fellow 2024!
                 </div>
               </div>
 
-              {/* Add QR code generator */} 
-              <div className="qr-code-generator"> 
-                <h3>Apply to be a Diversity Fellow!</h3> 
-                <QRCode value="https://docs.google.com/forms/d/e/1FAIpQLSeWCWk6Ahr1Kdwq0Swat1d27r7MWPPsme2Us8p6s-6Nyx_s-A/viewform" /> 
-                <p>Scan the QR code to access the form</p>
-              </div>
-
             </div>
           </div>
           <hr className="section-divider" />