jiliana
GitHub
commit
71794dfd01
5 changed files with 119 additions and 56 deletions
|
|
@ -12,7 +12,7 @@ Please create a new branch for development (i.e. `[NAME]-dev`). Pushing directly
|
|||
|
||||
To build the site, run `npm run build`.
|
||||
|
||||
To view the site on your local network, run `npm build/index.js`. View the site at [localhost:9000](http://localhost:9000).
|
||||
To view the site on your local network, run `npm run serve`. View the site at [localhost:9000](http://localhost:9000).
|
||||
|
||||
### Images
|
||||
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ a:hover {
|
|||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
|
@ -273,11 +273,59 @@ a:hover {
|
|||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* .involve-card > img {
|
||||
width: 20em;
|
||||
margin-bottom: 1em;
|
||||
.committees {
|
||||
border-radius: 50% 50% 0 0 / 4rem;
|
||||
transform: translateY(-4rem);
|
||||
}
|
||||
|
||||
.committee-card {
|
||||
padding: 1.75em 3em;
|
||||
border: var(--main) solid 0.37em;
|
||||
border-radius: 1.5em;
|
||||
color: var(--secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin: 1em;
|
||||
background-color: var(--main);
|
||||
background-blend-mode: multiply;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
.committee-img {
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
overflow: hidden;
|
||||
border-radius: 0.2em;
|
||||
} */
|
||||
width: 10;
|
||||
}
|
||||
|
||||
.committee-card img {
|
||||
display: block;
|
||||
transition: transform 0.4s;
|
||||
width: 20em;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.committee-card:hover img {
|
||||
transform: scale(1.1);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.committee-title {
|
||||
font-size: 3em;
|
||||
color: var(--secondary);
|
||||
margin-bottom: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.committee-description {
|
||||
font-size: 1.25em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.links {
|
||||
font-size: 1.5em;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ import TopBar from "./components/TopBar";
|
|||
import { ACTIVE_PAGES, SOCIALS, EMAIL, OFFICERS } from "./Config";
|
||||
import Splash from "./components/Splash";
|
||||
import DefaultSection from "./components/DefaultSection";
|
||||
import InvolveBox from "./components/InvolveBox";
|
||||
import SocialCard from "./components/SocialCard";
|
||||
import Carousel from "./components/Carousel";
|
||||
import Footer from "./components/Footer";
|
||||
import CommitteeBox from "./components/CommitteeBox";
|
||||
|
||||
class Main extends React.Component {
|
||||
constructor() {
|
||||
|
|
@ -27,36 +27,36 @@ class Main extends React.Component {
|
|||
<DefaultSection
|
||||
title="Join us!"
|
||||
paragraphs={[
|
||||
"Interested in gaining experience of event planning and development, meeting new friends, and learning more about IEEE? Join one of our committees as an IEEEntern!",
|
||||
"Interested in gaining experience in event planning and development, meeting new friends, and learning more about IEEE? Join one of our committees as an IEEEntern!",
|
||||
]}
|
||||
></DefaultSection>
|
||||
<DefaultSection className={"our-comms"} title="Our Committees">
|
||||
<DefaultSection className={"committees"} title="Our Committees">
|
||||
<div className="cards">
|
||||
<InvolveBox
|
||||
boxTitle=""
|
||||
<CommitteeBox
|
||||
boxTitle="Technical Committee"
|
||||
image="/assets/img/committees/technical.webp"
|
||||
description="Technical Committee"
|
||||
></InvolveBox>
|
||||
<InvolveBox
|
||||
boxTitle=""
|
||||
description="The Technical Committee is responsible for maintaining and improving the organization's technical skills program. Through developing, planning, and executing a minimum of six technical events throughout the year, this chair seeks to improve students’ technical skills. Events can include PCB, soldering, hardware, and software. You can build anything with students!"
|
||||
></CommitteeBox>
|
||||
<CommitteeBox
|
||||
boxTitle="Social Committee"
|
||||
image="/assets/img/committees/social.webp"
|
||||
description="Social Committee"
|
||||
></InvolveBox>
|
||||
<InvolveBox
|
||||
boxTitle=""
|
||||
description="The Social Committee is in charge of planning and executing social events that create bonding opportunities for officers and our student members. Interested in arranging a hike at Torrey Pines? Sharing some free food and drinks in Warren Mall? Going out for an escape room challenge? There are tons of ideas waiting for you to implement!"
|
||||
></CommitteeBox>
|
||||
<CommitteeBox
|
||||
boxTitle="Professional Committee"
|
||||
image="/assets/img/committees/professional.webp"
|
||||
description="Professional Committee"
|
||||
></InvolveBox>
|
||||
<InvolveBox
|
||||
boxTitle=""
|
||||
description="The Professional Committee is responsible for maintaining and improving the organization’s professional development program. Through developing, planning, and executing a minimum of six professional events throughout the year, such as, workshops on developing professional skills, company (sponsor) information sessions, tech talks, tours, and the annual ECE day (partnered with the VC External), this committee seeks to improve students’ professional skills."
|
||||
></CommitteeBox>
|
||||
<CommitteeBox
|
||||
boxTitle="PR Committee"
|
||||
image="/assets/img/committees/pr.webp"
|
||||
description="PR Committee"
|
||||
></InvolveBox>
|
||||
<InvolveBox
|
||||
boxTitle=""
|
||||
description="The PR Comittee is responsible for creating and printing flyers, photographs, and other media. They also aid in managing the Branch's social media presence by distributing the news of the Branch's events, projects, and outreach."
|
||||
></CommitteeBox>
|
||||
<CommitteeBox
|
||||
boxTitle="Outreach Committee"
|
||||
image="/assets/img/committees/outreach.webp"
|
||||
description="Outreach Committee"
|
||||
></InvolveBox>
|
||||
description="The Outreach Committee is responsible for hosting outreach events that will benefit K-12 students within the STEM fields including the annual Boy Scout STEM Merit Badge Fair, Girls STEM Fair, and Sumobot Robotics Competition. Up for the challenge to explain Ohm's Law to a 10-year-old?"
|
||||
></CommitteeBox>
|
||||
</div>
|
||||
</DefaultSection>
|
||||
|
||||
|
|
|
|||
29
src/public/components/CommitteeBox.tsx
Normal file
29
src/public/components/CommitteeBox.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import * as React from "react";
|
||||
import { Component } from "react";
|
||||
|
||||
interface CommitteeBoxProps {
|
||||
boxTitle: string;
|
||||
image: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default class CommitteeBox extends Component<CommitteeBoxProps> {
|
||||
constructor(props: CommitteeBoxProps) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div className="committee-card"
|
||||
style = {{ backgroundImage: `url(${this.props.image})` }}>
|
||||
<div className="committee-title">
|
||||
{this.props.boxTitle}
|
||||
</div>
|
||||
<div className="committee-description">
|
||||
{this.props.description}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,6 @@ export default class InvolveBox extends Component<InvolveBoxProps> {
|
|||
}
|
||||
|
||||
public render() {
|
||||
if (this.props.boxTitle) {
|
||||
return (
|
||||
<a
|
||||
href={"/" + this.props.boxTitle.toLowerCase()}
|
||||
|
|
@ -29,18 +28,5 @@ export default class InvolveBox extends Component<InvolveBoxProps> {
|
|||
</div>
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="involve-card">
|
||||
<div className="involve-title">{this.props.boxTitle}</div>
|
||||
<div className="involve-img">
|
||||
<img src={this.props.image}></img>
|
||||
</div>
|
||||
<div className="involve-description">
|
||||
{this.props.description}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue