Merge pull request #89 from citrushack/rj-develop

Completed live site.

components/Countdown.js

@@ -0,0 +1,36 @@
+import React from "react";
+import Image from "next/image";
+import Countdown from "react-countdown";
+import Livestyles from "../styles/Live.module.css";
+
+// Random component
+const Completionist = () => (
+  <h1 className={Livestyles.timer}>Hacking has ended!</h1>
+);
+
+// Renderer callback with condition
+const renderer = ({ days, hours, minutes, seconds, completed }) => {
+  if (completed) {
+    // Render a completed state
+    return <Completionist />;
+  } else {
+    // Render a countdown
+    return (
+      <>
+        <h1 className={Livestyles.timer}>
+          Citrus Hack 2021 <br />
+          {days}d : {hours}hr : {minutes}min : {seconds}s left!
+        </h1>
+      </>
+    );
+  }
+};
+
+export default function CountdownTimer() {
+  return (
+    <>
+      <Countdown date={"2021-04-11T09:00:00"} renderer={renderer} />
+      <div className={Livestyles.border1}></div>
+    </>
+  );
+}

components/Nav.js

@@ -1,6 +1,6 @@
 import Navstyles from "../styles/Nav.module.css";
-import { Link, animateScroll as scroll } from "react-scroll";
-import { Link as nextLink } from "next/link";
+import { Link as ScrollLink, animateScroll as scroll } from "react-scroll";
+import Link from "next/link";
 import styled from "@emotion/styled";
 import { useIsAuthenticated, useSignIn } from "react-auth-kit";
 import logo from "../public/logoRevised.png";
@@ -30,7 +30,7 @@ const StickyNav = styled.nav(
 const NavigationLinks = ({ title, href }) => (
   <>
     <div className={Navstyles.navlistlink}>
-      <Link
+      <ScrollLink
         to={href}
         spy={true}
         smooth={true}
@@ -39,7 +39,7 @@ const NavigationLinks = ({ title, href }) => (
         className="link"
       >
         {title}
-      </Link>
+      </ScrollLink>
     </div>
   </>
 );
@@ -73,13 +73,13 @@ export default function Nav() {
       <StickyNav isMobile isHome={isHome}>
         <div className={Navstyles.navlistcontainer}>
           <div>
-            <Link to="/">
+            <ScrollLink to="/">
               <img
                 className={Navstyles.logos}
                 src={logo}
                 alt="Citrushack 2021 Logo"
               />
-            </Link>
+            </ScrollLink>
           </div>
           <div className={Navstyles.links}>
             {!isMobile && isHome && (
@@ -106,9 +106,14 @@ export default function Nav() {
               <NavigationLinks title="Sponsors" href="Sponsors" />
             )}
 
-            {/* <nextLink href="/live">
-              <a>Live</a>
-            </nextLink> */}
+            {/* Uncomment when live site is online */}
+            {/* {!isMobile && isHome && (
+              <div className={Navstyles.navlistlink}>
+                <Link href="/live">
+                  <a>Live</a>
+                </Link>
+              </div>
+            )} */}
 
             {/* Only reason why this isn't part of a class is of the CSS classes being different. DO NOT CHANGE */}
             {!isAuthenticated() && (

package.json

@@ -29,6 +29,7 @@
     "react": "17.0.1",
     "react-accessible-accordion": "^3.3.3",
     "react-auth-kit": "^1.4.3",
+    "react-countdown": "^2.3.1",
     "react-device-detect": "^1.15.0",
     "react-dom": "17.0.1",
     "react-dropzone": "^11.2.4",

pages/live.js

@@ -1,16 +1,182 @@
-
+import React from "react";
+import Image from "next/image";
 import Container from "../components/Container";
+import CountdownTimer from "../components/Countdown";
+import Sponsors from "./sponsors";
+
+import Livestyles from "../styles/Live.module.css";
+import styles from "../styles/Common.module.css";
+
+const Judge = ({ picture, username, title }) => {
+  return (
+    <div className={Livestyles.judge}>
+      <div className={Livestyles.judgePicture}>
+        <Image
+          src={picture}
+          alt="Judge profile picture"
+          width={100}
+          height={100}
+        />
+      </div>
+      <caption>
+        <h3>{username}</h3>
+        <p>{title}</p>
+      </caption>
+    </div>
+  );
+};
 
 export default function Live() {
   return (
     <Container main>
-      <div>
-        <h1>Live Page</h1>
-        <h2>00:00:00</h2>
-        <h2>Judges</h2>
-        <h2>Schedule</h2>
-        <h2>Resources</h2>
-        <h2>Sponsors</h2>
+      <div className={styles.container}>
+        <CountdownTimer />
+        <h2 className={Livestyles.title}>Judges</h2>
+        <div className={Livestyles.judgeWrapper}>
+          <div>
+            <Judge
+              picture="/judges/Elmer.jpg"
+              username="Elmer Thomas"
+              title="Software Engineer @ Twilio"
+            />
+            <Judge
+              picture="/judges/cam.jpg"
+              username="Cameron Morin"
+              title="Consultant @ AWS"
+            />
+            <Judge
+              picture="/judges/maureen.jpg"
+              username="Angela Malangit"
+              title="IEEE@UCR President"
+            />
+
+            <Judge
+              picture="/judges/psiala.jpg"
+              username="Lucca Psiala"
+              title="ACM@UCR President"
+            />
+            <Judge
+              picture="/judges/crites.jpg"
+              username="Brian Crites"
+              title="Software Engineer 
+              @ Piñata Farms"
+            />
+            <Judge
+              picture="/judges/pham.jpg"
+              username="John Pham"
+              title="Sr. Software Engineer 
+              @ Smartsheet"
+            />
+            <Judge
+              picture="/judges/acharya.jpg"
+              username="Aditya Acharya"
+              title="UCR Alumnus"
+            />
+            <Judge
+              picture="/judges/shin.jpg"
+              username="John Shin"
+              title="Software Engineer @ Raytheon"
+            />
+          </div>
+          <div>
+            <Judge
+              picture="/judges/ong.jpeg"
+              username="Eric Ong"
+              title="Software Engineer @ OpenTable"
+            />
+
+            <Judge
+              picture="/judges/salloum.jpg"
+              username="Mariam Salloum"
+              title="Assistant Professor @ UCR"
+            />
+            <Judge
+              picture="/judges/hazel.jpg"
+              username="Hazel Nguyen"
+              title="UCR Alumnus"
+            />
+            <Judge
+              picture="/judges/tsan.jpg"
+              username="Sandy Tsan"
+              title="UCR Alumnus"
+            />
+            <Judge
+              picture="/judges/Lependu.jpg"
+              username="Paea Lependu"
+              title="Assistant Professor @ UCR"
+            />
+            <Judge
+              picture="/judges/poole.jpg"
+              username="Jacob Poole"
+              title="Electrical Engineer at Applied Medical"
+            />
+            <Judge
+              picture="/judges/james.jpg"
+              username="James Luo"
+              title="UCR Alumnus"
+            />
+          </div>
+          <div>
+            <Judge
+              picture="/judges/syris.jpg"
+              username="Syris Norelli"
+              title="Autopilot Software Engineer @ Tesla"
+            />
+            <Judge
+              picture="/judges/jed.jpg"
+              username="Jed Schwendiman"
+              title="Assistant Dean for Development"
+            />
+            <Judge
+              picture="/judges/downey.jpg"
+              username="Kelly Downey"
+              title="CS Lecturer"
+            />
+            <Judge
+              picture="/judges/williamshiao.jpg"
+              username="Will Shiao"
+              title="UCR PhD Student"
+            />
+            <Judge
+              picture="/judges/goyal.jpg"
+              username="Neal Goyal"
+              title="Technical Program Manager 
+              @ Paypal"
+            />
+            <Judge
+              picture="/logoRevised.png"
+              username="Bradley Evans"
+              title="Security Research @ UCR"
+            />
+            <Judge
+              picture="/judges/papalexakis.jpg"
+              username="Vagelis Papalexakis"
+              title="Assistant Professor @ UCR"
+            />
+          </div>
+        </div>
+        <div className={Livestyles.border2}></div>
+        <h2 className={Livestyles.title}>Schedule</h2>
+        <iframe
+          className={Livestyles.schedule}
+          src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQKLXBJ7Aogv3r3wWA_oL5fwE2puEkTK-ZFZpmfMjJx2n62LkgyYfHlZ2LNez7cjw/pubhtml?gid=1015411112&amp;single=true&amp;widget=true&amp;headers=false"
+          width="1250"
+          scrolling="no"
+          frameborder="0"
+          marginheight="0"
+          marginwidth="0"
+        ></iframe>
+        <div className={Livestyles.border3}></div>
+        <h2 className={Livestyles.title}>Resources</h2>
+        <a
+          className={Livestyles.resource}
+          href="https://github.com/citrushack/CitrusHackResources"
+          target="_blank"
+        >
+          Citrus Hack Resources
+        </a>
+        <div className={Livestyles.border4}></div>
+        <Sponsors />
       </div>
     </Container>
   );

styles/Live.module.css

@@ -0,0 +1,90 @@
+.timer {
+  font-size: 63px;
+  text-align: center;
+  line-height: 2;
+}
+.title {
+  font-size: 40px;
+  font-weight: 700;
+}
+.judgeWrapper {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin: 0;
+}
+
+.judge {
+  display: flex;
+  margin: 0 10px;
+  align-items: center;
+}
+.judgePicture img {
+  border-radius: 50%;
+  width: 75px;
+  height: auto;
+}
+
+.judge caption {
+  margin-left: 10px;
+  text-align: left;
+}
+.schedule {
+  min-height: 100vh;
+}
+.resource {
+  font-size: 25px;
+  margin-bottom: 40px;
+  font-weight: 700;
+  color: #000;
+  border-bottom: 2px solid transparent;
+  transition: all 200ms ease-in-out;
+}
+.resource svg{
+  font-size: 10px;
+}
+.resource:hover {
+  color: #ff6060;
+  border-bottom: 2px solid #ff6060;
+}
+.border1{
+  width: 1200px;
+  height: 200px;
+  background-image: url("../public/backgrounds/Branch1.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+.border2{
+  width: 1200px;
+  height: 200px;
+  background-image: url("../public/backgrounds/Branch2.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+.border3{
+  width: 1200px;
+  height: 200px;
+  background-image: url("../public/backgrounds/Branch3.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+.border4{
+  width: 1200px;
+  height: 200px;
+  background-image: url("../public/backgrounds/Branch4.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+@media (max-width: 768px) {
+  .timer {
+    font-size: 32px;
+  }
+  .schedule {
+    max-width: 50%;
+    padding: 0 20px;
+  }
+}

styles/Nav.module.css

@@ -15,6 +15,7 @@
 .links {
   display: flex;
   align-items: center;
+  padding-right: 10px;
 }
 .logos {
   width: auto;