Skip to content

Commit

Permalink
Update site for 2024 launch (#238)
Browse files Browse the repository at this point in the history
  • Loading branch information
@waalbert
waalbert authored Feb 15, 2024
1 parent 3639319 commit 7209e0d
Show file tree
Hide file tree
Showing 14 changed files with 172 additions and 252 deletions.
Binary file modified public/favicon.ico
View file
Binary file not shown.
32 changes: 7 additions & 25 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,16 @@
import React from 'react';
import { Route, Switch, Router } from 'react-router-dom';
import history from './history';
import './App.scss';
import React from "react";
import { Route, Switch, Router } from "react-router-dom";
import history from "./history";
import "./App.scss";

import {
Home,
Schedule,
Resources,
Workshops,
NotFound
} from 'app/views';

import {
Nav
} from 'app/components';
import { Home, NotFound } from "app/views";

function App() {
return (
<div className='App'>
<div className="App">
<Router history={history}>
<Nav history={history} />
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/schedule' component={Schedule} />
<Route exact path='/resources' component={Resources} />
<Route exact path='/workshops' component={Workshops} />
<Route exact path='/devpost' component={() => window.location.replace("https://venushacks-2023.devpost.com/")} />
<Route exact path='/feedback' component={() => window.location.replace("https://docs.google.com/forms/d/e/1FAIpQLSeZn-cH2uNgX1w-WbBIzqTQ2qpT81Sk6jDdcDxvYAbJFe1UVg/viewform")} />
<Route exact path='/midway' component={() => window.location.replace("https://forms.gle/3imPJg2UWXGXjvGT7")} />
<Route exact path='/report' component={() => window.location.replace("https://forms.gle/xzPqKT4YgSWWdRqv8")} />
<Route exact path="/" component={Home} />
<Route path="*" component={NotFound} />
</Switch>
</Router>
Expand Down
8 changes: 4 additions & 4 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,22 @@

h4 {
font-size: 30px;
margin-bottom: .5em;
margin-bottom: 0.5em;
}

h3 {
font-size: 40px;
margin-bottom: .5em;
margin-bottom: 0.5em;
}

h2 {
font-size: 60px;
margin-bottom: .5em;
margin-bottom: 0.5em;
}

h1 {
font-size: 80px;
margin-bottom: .3em;
margin-bottom: 0.3em;
}

button {
Expand Down
215 changes: 39 additions & 176 deletions src/app/views/home/Home.js
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,46 @@
import React from "react";
import './Home.scss';

import FAQs from '../../components/faqs/FAQs';
import Footer from '../../components/footer/Footer';
import Team from '../../components/meet-team/team';
import Speakers from "../../components/speakers/speakers";

import "./Home.scss";

// TITLES
import vh_title from 'assets/images/titles/vh-worded-logo.png';
import about_title from 'assets/images/titles/vh-about.png';
import faq_title from 'assets/images/titles/vh-faq.png';
import sponsors_title from 'assets/images/titles/vh-sponsors.png';
import partners_title from 'assets/images/titles/vh-partners.png';
import speakers_title from 'assets/images/titles/vh-speakers.png';
import meet_team_title from 'assets/images/titles/vh-meet-the-team.png';


// SPONSORS
import coxenterprises from 'assets/images/sponsors/coxenterprises.png';
import odit from 'assets/images/sponsors/odit.png';
import costar from 'assets/images/sponsors/costar.png';
import corelogic from 'assets/images/sponsors/corelogic.png';
import antrepreneurcenter from 'assets/images/sponsors/antrepreneurcenter.png';

// PARTNERS
import acm from 'assets/images/partners/acm.png';
import ai from 'assets/images/partners/ai.png';
import ctc from 'assets/images/partners/ctc.png';
import design from 'assets/images/partners/design.png';
import googlecloud from 'assets/images/partners/googlecloud.png';
import hack from 'assets/images/partners/hack.png';
import icssc from 'assets/images/partners/icssc.png';
import vgdc from 'assets/images/partners/vgdc.jpeg';
import wics from 'assets/images/partners/wics.png';

import { VenusButton } from "app/components";

const VH_DATE = 'May 26-28, 2023';
const CONTACT_EMAIL = '[email protected]';
const CORPORATE_EMAIL = '[email protected]';
import vh_title from "assets/images/titles/vh-title-launch.svg";

// const VH_DATE = "May 26-28, 2023";
const VH_DATE = "Coming Soon!";
export default class Home extends React.Component {

constructor(props) {
super(props);
this.state = {
this.state = {
/* Number of "pages" needed to contain all content under
the about section (faqs, sponsors, meet team, etc).
This number is calculated in updateParallaxLayerHeight().
*/
contentHeight: 8
contentHeight: 8,
};
this.updateParallaxLayerHeight = this.updateParallaxLayerHeight.bind(this);
}

componentDidMount() {
window.addEventListener('resize', this.updateParallaxLayerHeight);
window.addEventListener("resize", this.updateParallaxLayerHeight);
}

componentWillUnmount() {
window.removeEventListener('resize', this.updateParallaxLayerHeight);
window.removeEventListener("resize", this.updateParallaxLayerHeight);
}

/**
* Calculates number of pages that all content under
* the about section (faqs, sponsors, meet team, etc)
* Calculates number of pages that all content under
* the about section (faqs, sponsors, meet team, etc)
* needs and updates this parallax layer
*/
updateParallaxLayerHeight() {
if (this._element && this._element.clientHeight) {
let contentHeight = this._element.clientHeight/window.innerHeight
let contentHeight = this._element.clientHeight / window.innerHeight;
this.setState({ contentHeight: contentHeight });
}
}

/**
* Used to remove floating effect of hero & about
* Used to remove floating effect of hero & about
* sections on smaller screens
*/
isMobileScreen() {
Expand All @@ -92,25 +56,25 @@ export default class Home extends React.Component {
renderSponsorLink(imgId, imgSrc, url) {
return (
<a href={url} target="_blank" rel="noopener noreferrer">
<img
id={imgId}
<img
id={imgId}
className="logo"
src={imgSrc}
src={imgSrc}
alt={"Sponsor: " + imgId}
// needed to resize parallax layer as each image loads
onLoad={this.updateParallaxLayerHeight}
/>
</a>
)
);
}

render() {
/**
* There are 3 main parallax layers:
* There are 3 main parallax layers:
* (1) hero section
* (2) about section
* (3) all other sections
*
*
* (1) and (2) take up one "page" each, where each page
* is equal to 100vh. All other sections are put into
* 1 parallax layer since each sections' number of pages vary
Expand All @@ -119,129 +83,28 @@ export default class Home extends React.Component {
*/
return (
<div className="Home">

{/* HERO **********************/}
<section id="hero">

<div id="astronaut-animation">
{/* These assets are a background of a div instead of imgs to prevent
{/* HERO **********************/}
<section id="hero">
<div id="astronaut-animation">
{/* These assets are a background of a div instead of imgs to prevent
them from being able to be saved to camera roll on iOS */}
<div id="boba" />
<div id="astronaut" />
<div id="laptop" />
<div id="cat" />
</div>

<div id="hero-right">
<img id="venushacks-title" src={vh_title} alt="VenusHacks Title Logo"/>
<h4 id="date">{VH_DATE}</h4>
<p id="tagline">UC Irvine's largest women-centric hackathon</p>
{/* <p id="tagline">Apps are now closed! If you applied, please check your email for your application status.</p> */}
<VenusButton text="DEVPOST" url="/devpost"/>
<VenusButton text="OPENING SLIDES" url="https://docs.google.com/presentation/d/1T5tyLHiz6wc2yIEScvUzOKGqBmmSwFMk8ldt_koBGPs"/>
<VenusButton text="FEEDBACK" url="/feedback"/>
<VenusButton text="MIDWAY CHECK IN" url="/midway"/>
</div>
<div id="planet" />
</section>

{/* ABOUT **********************/}
<section id="about">
<img className="section-title" src={about_title} alt="About"/>
<div id="about-text-container">
<p>
Planned in collaboration with&nbsp;
<a href="https://wics.ics.uci.edu/" target="_blank" rel="noopener noreferrer">WICS</a> and&nbsp;
<a href="https://hack.ics.uci.edu/" target="_blank" rel="noopener noreferrer">Hack at UCI</a>,&nbsp;
VenusHacks is UCI’s largest women-centric hackathon and will take place fully in-person in Spring 2023!
</p>
<p>
Our mission is to empower underrepresented groups by providing an
inclusive community to foster growth and creativity in computing.
VenusHacks will be open to participants of all experience levels, as
we aim to increase diversity in tech through support, exposure, and
community. Join us as we welcome high school (18+), undergraduate, and
graduate students to participate in our 36-hour (non-overnight) event that
includes networking, fun activities, educational workshops, and lots of coding!
</p>
</div>
</section>

<div ref={ref => {this._element = ref}}>

{/* FAQ ************************/}
<section id="faq">
<img className="section-title" src={faq_title} alt="FAQ" />
<FAQs/>
<p id="faq-contact-us">
Additional logistic questions? Contact us at&nbsp;
<a href={`mailto:${CONTACT_EMAIL}`} target="_top">
{CONTACT_EMAIL}
</a>.
</p>
</section>

{/* SPONSORS **********************/}
<section id="sponsors">
<img className="section-title" src={sponsors_title} alt="Sponsor" />
<div id="sponsors-container">
<div className="logo-wrapper largest">
{this.renderSponsorLink("coxenterprises", coxenterprises, "https://www.coxenterprises.com/")}
{this.renderSponsorLink("odit", odit, "https://odit.uci.edu/")}
</div>
<div className="logo-wrapper large">
{this.renderSponsorLink("costar", costar, "https://www.costar.com/")}
</div>
<div className="logo-wrapper medium">
{this.renderSponsorLink("corelogic", corelogic, "https://www.corelogic.com/")}
{this.renderSponsorLink("antrepreneurcenter", antrepreneurcenter, "https://antrepreneur.uci.edu/")}
</div>
</div>
<p className="sponsor-contact-us">
Join our movement, contact us at&nbsp;
<a href={`mailto:${CORPORATE_EMAIL}`} target="_top">
{CORPORATE_EMAIL}
</a>.
</p>
</section>

{/* PARTNERS **********************/}
<section id="partners">
<img className="section-title" src={partners_title} alt="Partners" />
<div id="partners-container">
<div className="logo-wrapper medium">
{this.renderSponsorLink("acm", acm, "https://acm-uci.org/")}
{this.renderSponsorLink("ai", ai, "https://aiclub.ics.uci.edu/")}
{this.renderSponsorLink("ctc", ctc, "https://ctc-uci.com/")}
{this.renderSponsorLink("design", design, "https://designatuci.com/")}
{this.renderSponsorLink("google cloud", googlecloud, "https://cloud.google.com/")}
{this.renderSponsorLink("hack", hack, "https://hack.ics.uci.edu/")}
{this.renderSponsorLink("icssc", icssc, "https://studentcouncil.ics.uci.edu/")}
{this.renderSponsorLink("vgdc", vgdc, "https://sites.google.com/uci.edu/vgdcuci/home")}
{this.renderSponsorLink("wics", wics, "https://wics.ics.uci.edu/")}
</div>
</div>
</section>

{/* SPEAKERS ******************/}
<section id="speakers">
<img className="section-title" src={speakers_title} alt="Speakers" />
<Speakers/>
</section>

{/* MEET THE TEAM ******************/}
{/* Use padding if there's no org photos */}
{/* <section id="padding" /> */}
<section id="meet-team">
<img className="section-title" src={meet_team_title} alt="Meet the Team" />
<Team/>
</section>
<div id="boba" />
<div id="astronaut" />
<div id="laptop" />
<div id="shiba-inu" />
</div>

{/* FOOTER ******************/}
<Footer/>

<div id="hero-right">
<img
id="venushacks-title"
src={vh_title}
alt="VenusHacks Title Logo"
/>
<h4 id="date">{VH_DATE}</h4>
<p id="tagline">UC Irvine's largest women-centric hackathon</p>
</div>
</section>
</div>
)
);
}
}
Loading

0 comments on commit 7209e0d

Please sign in to comment.