<repo_name>qwerhacks/QWERHacks2022<file_sep>/src/components/Resources.js
import React from "react";

function Resources(props) {

  return (
    <div>
      <img src={require("../img/mlh-trust-badge-2021-white.png")} alt="mlh badge" class="mlh" width="120px" />
      <h1>RESOURCES</h1>

      
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://qwer-hacks-2021.devpost.com/project-gallery" target="_blank">project gallery!!!!</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://qwer-hacks-2021.devpost.com/project-gallery" target="_blank">check out all of your project submissions (and winners!!!) from qwer hacks 2021</a>
        </div>
      </div>


      {/* mlh code of conduct */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" target="_blank">mlh code of conduct</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" target="_blank">please read through this before participating in our event!</a>
        </div>
      </div>

      {/* how to safely attend qwerhacks */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://drive.google.com/file/d/15draOrpYUXQrvzcShnqW3ziShfaRQSP-/view?usp=sharing" target="_blank">how to safely attend our hackathon</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://drive.google.com/file/d/15draOrpYUXQrvzcShnqW3ziShfaRQSP-/view?usp=sharing" target="_blank">
            we affirm our commitment to making participation in this hackathon discreet, and we will work with participants every
            step of the way to ensure their comfort and safety. in the following guide, we’re going to be offering our own tips,
            tricks, and advice as to how you can attend this hackathon safely!
          </a>
        </div>
      </div>

      {/* how to attend a virtual hackathon */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://drive.google.com/file/d/1QV9o3asHa10RkXd8lsvC3fkjKIG7kq-z/view?usp=sharing" target="_blank">how to attend a virtual hackathon</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://drive.google.com/file/d/1QV9o3asHa10RkXd8lsvC3fkjKIG7kq-z/view?usp=sharing" target="_blank">
            Are you scared of attending your first hackathon? Are you a hackathon veteran who’s never attended a virtual one before? Then this guide is for you!
          </a>
        </div>
      </div>

      {/* judging criteria */}

      {/* to survive on this shore */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://www.tosurviveonthisshore.com/" target="_blank">to survive on this shore</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://www.tosurviveonthisshore.com/" target="_blank">
            photographs and interviews with transgender and gender nonconforming older adults: a project by <NAME> and <NAME>
          </a>
        </div>
      </div>

      {/* creating a trans inclusive workspace */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://hbr.org/2020/03/creating-a-trans-inclusive-workplace" target="_blank">creating a trans inclusive workspace</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://hbr.org/2020/03/creating-a-trans-inclusive-workplace" target="_blank">
            only when people feel totally authentic and connected with their organizations can they achieve their full potential at work!
          </a>
        </div>
      </div>

      {/* te reo māori speech recognition: a story of community, trust, and sovereignty */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://www.youtube.com/watch?v=sGQy0r_icWc" target="_blank">te reo māori speech recognition: a story of community, trust, and sovereignty</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://www.youtube.com/watch?v=sGQy0r_icWc" target="_blank">
            <NAME> discusses the collection of 300+ hours of labeled speech corpus which enabled the creation of an automatic speech recognizer using mozilla’s deepspeech. they now use it to accelerate the transcription of native speaker archives, using tech to create systems that preserve indigenous languages.
          </a>
        </div>
      </div>

      {/* whose land */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://www.whose.land/en/" target="_blank">whose land</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://www.whose.land/en/" target="_blank">
            since we're all going to be in different places for qwer hacks this year, take a moment to figure out and acknowledge the land you're on:)
          </a>
        </div>
      </div>

      {/* queer vocab in asl */}
      <div class="qanda">
        <div class="question">
          <a class="code-of-conduct" href="https://www.youtube.com/watch?v=8HX0HGa-pok" target="blank">them | queer vocab in asl</a>
        </div>
        <div class="answer">
          <a class="code-of-conduct" href="https://www.youtube.com/watch?v=8HX0HGa-pok" target="blank">
            in this video, nyle dimarco and chella man walk through the essentials of queer vocabulary in american sign language and the variety of ways to communicate!
          </a>
        </div>
      </div>



    </div>



  );

}

export default Resources;<file_sep>/src/components/Menu.js
import React, { useState } from "react";
import Navbar from "./Navbar";

function Menu() {
  const [showNav, setshowNav] = useState(false);

  function handleClick(e) {
    setshowNav(!showNav);
    console.log("showNav is now " + showNav);
  }

  return (
    <div class="header">
      <div class="menu" id="hamburger" onClick={handleClick}>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <div class="something">
        <div class="head">QWER HACKS</div>
      </div>
      { showNav && <div className="mobile-nav" onClick={handleClick}> <Navbar /></div >}
    </div >

  );

}


export default Menu;<file_sep>/src/index.js
import React from "react";
import ReactDOM from "react-dom";
import './index.css';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Menu from "./components/Menu";

import Home from "./components/Home";
import Apply from "./components/Apply";
import Faq from "./components/Faq";
import Schedule from "./components/Schedule";
import Sponsors from "./components/Sponsors";
import Mentors from "./components/Mentors";
import Resources from "./components/Resources";


const rootElement = document.getElementById("root");
ReactDOM.render(
   <BrowserRouter>
   <div>
      <Menu/>
   </div>
   <div className="content">
    <div className="desktop-nav"><Navbar/></div>
    <div className="container">
    <Switch>
     <Route exact path="/" component={Home} />
     <Route path="/apply" component={Apply} />
     <Route path="/faq" component={Faq} />
     <Route path="/schedule" component={Schedule} />
     <Route path="/sponsors" component={Sponsors} />
     <Route path="/mentors" component={Mentors} />
     <Route path="/resources" component={Resources} />
   </Switch>
   </div>
   </div>
   <div>
      <Footer/>
   </div>
   </BrowserRouter>
   ,
   rootElement
);<file_sep>/src/components/Sponsors.js
import React from "react";

   function Sponsors(props) {

        return (
          <div>
            <img src={require("../img/mlh-trust-badge-2021-white.png")} alt="mlh badge" class="mlh" width="120px"/> 
            <h1><div>SPONSORS</div> 
            <div class="subtitle">//our <a class="edit" href="https://drive.google.com/file/d/17rk7LLz3M1pvERu4jV5smDqKyXVDLIkI/view?usp=sharing" target="_blank">sponsorship deck</a> + <a class="edit" href="https://tinyurl.com/qwer-sponsor" target="_blank">sponsorship form</a></div>
            </h1>
            {/* <p><b>contact us by email, facebook, or instagram if you're interested in sponsoring qwer hacks 2021!</b></p> */}
            <div class="sponsor-class">
                <b>#include &lt;spirit tier&gt;</b> 
                <div class="sponsors">
                    <a class="spons-img" href="https://www.xilinx.com/" target="_blank"> <img src={require("../img/xilinx.png")} alt="xilinx logo" width="90px"/> </a>
                </div>
            </div>
            <div class="sponsor-class">
                <b>#include &lt;harmony tier&gt;</b>
                <div class="sponsors">
                    <a class="spons-img" href="https://www.att.com" target="_blank"><img src={require("../img/att.png")} alt="att logo" width="90px"/></a>
                    <a class="spons-img" href="https://robinhood.com/us/en/" target="_blank"><img src={require("../img/robinhood2.png")} alt="robinhood logo" width="90px"/></a>
                </div>
            </div>
            <div class="sponsor-class">
                <b>#include &lt;life tier&gt;</b>
                <div class="sponsors">
                    <a class="spons-img" href="https://www.facebook.com/" target="_blank"><img src={require("../img/facebook.png")} alt="facebook logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.northropgrumman.com/" target="_blank"><img src={require("../img/northrop.png")} alt="northop logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.pimco.com" target="_blank"><img src={require("../img/pimco.png")} alt="pimco logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.fmglobal.com/" target="_blank"><img src={require("../img/fmglobal.png")} alt="fmglobal logo" width="90px"/></a>
                    <a class="spons-img" href="https://aerospace.org/" target="_blank"><img src={require("../img/aerospace.png")} alt="aerospace logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.chevron.com/" target="_blank"><img src={require("../img/chevron.png")} alt="chervon logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.marathonpetroleum.com/" target="_blank"><img src={require("../img/marathon.png")} alt="marathon logo" width="90px"/></a>
                    <a class="spons-img" href="http://hackp.ac/mlh-stickermule-hackathons" target="_blank"><img src={require("../img/stickermule2.png")} alt="stickermule logo" width="90px"/></a>
                </div>
            </div>
            <h1>PARTNERS</h1>
            <div class="sponsor-class">
                <div class="sponsors">
                    <a class="spons-img" href="https://www.swe.ucla.edu/" target="_blank"><img src={require("../img/swe.png")} alt="swe-ucla logo" width="100px"/></a>
                    <a class="spons-img" href="https://teachla.uclaacm.com" target="_blank"><img src={require("../img/acm-teachla-updated.png")} alt="teach LA logo" width="90px"/></a>
                    <a class="spons-img" href="https://w.uclaacm.com" target="_blank"><img src={require("../img/acm-w-updated.png")} alt="acm-w logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.instagram.com/queersinstem/" target="_blank"><img src={require("../img/qtstem.png")} alt="acm-w logo" width="90px"/></a>
                    <a class="spons-img" href="http://bruinentrepreneurs.org/" target="_blank"><img src={require("../img/be.png")} alt="be logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.uclaacm.com/" target="_blank"><img src={require("../img/acm-impact.png")} alt="be logo" width="100px"/></a>
                    <a class="spons-img" href="https://uclaacmai.github.io/" target="_blank"><img src={require("../img/acm-ai.png")} alt="be logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.uclaallbrains.org/" target="_blank"><img src={require("../img/allbrains.png")} alt="all brains logo" width="90px"/></a>
                    <a class="spons-img" href="https://www.uclaacm.com/" target="_blank"><img src={require("../img/acm.png")} alt="acm logo" width="90px"/></a>
                </div>
            </div>
          </div>

        );

    }

    export default Sponsors;<file_sep>/src/components/Mentors.js
import React from "react";

function Mentors(props) {

    return (
        <div>
            <img src={require("../img/mlh-trust-badge-2021-white.png")} alt="mlh badge" class="mlh" width="120px" />
            <h1>MENTORS
            <div class="subtitle">//<a class="edit" href="https://tinyurl.com/qwer-hacks-collab" target="blank"> interested in mentoring?</a></div>
            </h1>
            <div class="mentors">
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/raksha.png")} alt="raksha" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="http://raksha.gay" target="blank" class="mentor-name"><NAME> (she/her/hers)</a></div>
                        <div class="mentor-info">Raksha is a software engineer at Google by day and community organizer by night. she is passionate about building a tech future for the many, not just the few. Raksha organizes with DSA Tech Action, Manhattan Community Board 4, and through freelance writing.
                        ask Raksha about <b>Java, Typescript/Javascript, technical communication, webdev, data structures, resume feedback, and git(hub)!</b>
                        </div>
                    </div>
                </div>
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/moss.png")} alt="moss" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://www.linkedin.com/in/annegail-moreland" target="blank" class="mentor-name"><NAME> (they/them/theirs)</a></div>
                        <div class="mentor-info">Moss is a software engineer at Travelers Insurance. they
                        recently graduated as a Cognitive Computer Science Major and are passionate
                        about solving complex problems for the greater benefit of humankind.
                        they are perpetually working towards learning new skills, finding the best ways to teach others,
                        and building the future, ethics first. ask Moss about <b> machine learning, NLP, and algorithmic bias!</b>
                        </div>
                    </div>
                </div>
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/lucas.jpg")} alt="lucas" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://soldaini.net" target="blank" class="mentor-name"><NAME> (he/him/his)</a></div>
                        <div class="mentor-info">Luca is an applied scientist at Amazon Alexa working on question-answering models.
                        his team builds algorithms that answer users' questions by searching on the web. he identifies as queer and pan. 
                        ask Luca about
                         <b> machine learning, NLP, and artificial intelligence!</b> </div>
                    </div>
                </div>
                {/* <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/christine.png")} alt="christine" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://www.linkedin.com/in/christine-keech-026b81173/" target="blank" class="mentor-name"><NAME> (she/her/hers)</a></div>
                        <div class="mentor-info">I am a student living a semi-false life in a conservative area.
                         I do this to protect myself but I want to change this! I have been working to find others in my community to meet and bond with.
                         </div>
                    </div>
                </div> */}
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/lynn.jfif")} alt="lynn" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://www.linkedin.com/in/lynnmatar/" target="blank" class="mentor-name"><NAME> (she/her/hers)</a></div>
                        <div class="mentor-info">Lynn is a Lebanese Bisexual Computer Science student at Illinois Tech that wants to spread awareness about mental health and help the LGBTQ+ community.
                        ask Lynn about
                         <b> Python, Java, debugging, and github!</b></div>
                    </div>
                </div>
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/aru.png")} alt="aru" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://www.linkedin.com/in/aru-bhola/" target="blank" class="mentor-name"><NAME> (she/her/hers)</a></div>
                        <div class="mentor-info">Aru is a second year computer engineering student who just wants to build robots. ask Aru about
                         <b> C/C++ and Hardware Design Language!</b></div>
                    </div>
                </div>
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/yogendra.jfif")} alt="yogendra" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://studentambassadors.microsoft.com/en-US/profile/4146" target="blank" class="mentor-name"><NAME> (he/him/his)</a></div>
                        <div class="mentor-info"> Yogendrasingh is a student in Mumbai, India at NMIMS University. 
                        he has mentored at several hackathons
                        and loves seeing people grow and learn in such a short span of time.
                        ask Yogendrasingh about
                         <b> web development, AI/ML, and debugging!</b></div>
                    </div>
                </div>
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/martin.jfif")} alt="martin" width="160px" />
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://www.linkedin.com/in/martin-stoyanov-745b4272/" target="blank" class="mentor-name"><NAME> (he/him/his)</a></div>
                        <div class="mentor-info"> Martin is the co-founder of Emailio, an iOS developer, Thiel Fellowship recipient, and the youngest founder to graduate from Y Combinator.
                         ask Martin about <b> React, iOS development, and turning your project into a startup!</b></div>
                    </div>
                </div>
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/matt.png")} alt="facebook logo" width="160px"/>
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://matthewwang.me" target="blank" class="mentor-name"><NAME> (he/him/his)</a></div>
                        <div class="mentor-info">Matt is a third-year CS + Math-Econ student at UCLA who's passionate about using computers to make the world a fairer place. 
                        He spends most of his time at ACM Teach LA, trying to make computer science education more accessible!
                        ask Matt about <b> HTML/CSS/JS, MV frameworks (React, Angular, etc), general frontend/backend design, and deploying an application + server admin</b>
                        </div>
                    </div>
                </div>
                <div class="people">
                    <div class="mentor-image">
                        <img src={require("../img/ariel_z.png")} alt="facebook logo" width="160px"/>
                    </div>
                    <div class="mentor-text">
                        <div><a href="https://www.arielzucker.com" target="blank" class="mentor-name"><NAME> (she/her/hers)</a></div>
                        <div class="mentor-info"><NAME> is the founder and co-CEO of CNT Productions, where she directs and produces socially charged content with a bite. 
                        She is also the Director of Digital Live Production at YEA! 
                        Impact where she coordinates virtual live events. 
                        Her work has been recognized by Outfest and NBC Out, amongst others, and her virtual events have
                         included collaborations with Netflix, Disney+, Hovercast, and more. Ask Ariel about  
                         <b> creative collaboration, impact producing, virtual live broadcasting.</b>
                        </div>
                    </div>
                </div>
        
            </div>
        </div>
    );

}

export default Mentors;<file_sep>/README.md


# Wrong Repository
see https://github.com/qwerhacks/QWERHACKS-website-2022


<file_sep>/src/components/Navbar.js
import "../index.css";
import React from "react";
import {NavLink } from "react-router-dom";

    function Navbar() {

        return (
        
            <div class="nav" id="nbar">
                <div class="buttons">
                    <NavLink exact className = "text-link" to="/"><button type="button" id="about" class="b">home</button></NavLink>
                    <NavLink className = "text-link" to="/apply"><button type="button" id="faq" class="b">apply!</button></NavLink>
                    <NavLink className = "text-link" to="/faq"><button type="button" id="sched" class="b">faq</button></NavLink>
                    <NavLink className = "text-link" to="/schedule"><button type="button" id="sandp" class="b">schedule</button></NavLink>
                    <NavLink className = "text-link" to="/sponsors"><button type="button" id="resources" class="b">sponsors</button></NavLink>
                    <NavLink className = "text-link" to="/mentors"><button type="button" id="resources" class="b">mentors</button></NavLink>
                    <NavLink className = "text-link" to="/resources"><button type="button" id="resources" class="b">resources</button></NavLink>
                </div>
                <div class="social_media">
                    <div class="icon">
                        <a href="https://www.facebook.com/qwerhacks/" target="_blank"><img src={require("../img/fb-icon.png")} alt="facebook logo" width="30px"/></a>
                    </div>
                    <div class="icon">
                        <a href="https://www.instagram.com/qwerhacks/" target="_blank"><img src={require("../img/ig-icon.png")} alt="instagram logo" width="30px"/></a>
                    </div>
                    <div class="icon"> 
                        <a href="mailto:<EMAIL>"><img src={require("../img/email-icon.png")} alt="email logo" width="30px"/></a>
                    </div>
                    <div class="icon"> 
                        <a href="https://twitter.com/qwerhacks" target="_blank"><img src={require("../img/icon-twitter.png")} alt="twitter logo" width="30px"/></a>
                    </div>
                </div>
            </div>

        );
    }

    export default Navbar;


<file_sep>/src/components/Faq.js
import React from "react";

   function Faq(props) {

        return (
          
          <div class="faq">
            <img src={require("../img/mlh-trust-badge-2021-white.png")} alt="mlh badge" class="mlh" width="120px"/> 

            <h1>FAQ</h1>

            <div class="qanda">
                <div class="question">
                  who can come?
                </div>
                <div class="answer">
                  anyone who is 18 or older, a member (or ally) of the LGBTQIA+ community, and enrolled
                  in a postsecondary academic institution is invited to participate!
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                  how will teams work?
                </div>
                <div class="answer">
                  you can sign up as a team of up to four members. but make sure that all 
                  your team members submit an application! if you don’t have a team before the event, 
                  don’t worry! we will help you find fellow hackers once the event starts :^)
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                  what can i create?
                </div>
                <div class="answer">
                  absolutely anything you want –– websites, apps, UI, you name it! 
                  we encourage you to create a product that positively impacts the LGBTQIA+ community or 
                  any other underrepresented group in tech.
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                  how much does it cost?
                </div>
                <div class="answer">
                  it's free, babey!
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                  can allies attend?
                </div>
                <div class="answer">
                  yes! we welcome anyone who supports our mission of increasing the visibility 
                  of our community in tech :)
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                  sounds great, how can i apply?
                </div>
                <div class="answer">
                  go to our apply page and fill out the google form!
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                  what is tikkl?
                </div>
                <div class="answer">
                  tikkl is a live events platform that we are using to stream qwerhacks events like speeches and workshops.
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                how do i attend keynote speeches?
                </div>
                <div class="answer">
                you can watch them live on tikkl!
                </div>
            </div>


            <div class="qanda">
                <div class="question">
                how do i attend workshops?
                </div>
                <div class="answer">
                one of two ways, but both on tikkl! for streamed workshops, you can watch them in the same way you watched the keynote speeches. 
                for interactive workshops, a zoom link will be posted on tikkl! when it’s time for the workshop to start, click on the link and you can hop right in.
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                how do i talk to my team?
                </div>
                <div class="answer">
                on our discord! once you register with your team, you’ll have your own dedicated voice and text channel on the server you can use to talk to your teammates!
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                how do i talk to mentors?
                </div>
                <div class="answer">
                on our discord! we have multiple channels for mentorship questions. if you’re wondering about which specific mentors are available, you can look at the speakers tab on tikkl.
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                how will judging work?
                </div>
                <div class="answer">
                you’ll submit a two minute video of your project on our devpost, and from there the judges will watch and score! there will be no live q&#38;a portion.
                </div>
            </div>

            <div class="qanda">
                <div class="question">
                what will i do while i wait for judging to happen?
                </div>
                <div class="answer">
                vibeeeee with us. we’ll be having our third identity specific mentorship group meeting for those participating, and fun low commitment activities for those who aren’t!
                </div>
            </div>


          </div>
        );

    }

    export default Faq;