Add officer images

src/public/components/Availability.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 import {Component} from "react";
 
-interface AvailabilityProps {}
+interface AvailabilityProps {
+	checkUrl: string;
+}
 interface AvailabilityState {
 	available: boolean;
 }
@@ -13,6 +15,9 @@ export default class Availability extends Component<AvailabilityProps, Availabil
 			available: false
 		};
 	}
+	private checkAvailable() {
+		
+	}
 
 	public render() {
 		return <div className="availability">

src/public/components/Carousel.tsx

@@ -15,8 +15,8 @@ export default class Carousel extends Component<CarouselProps, CarouselState> {
 	}
 
 	private scrollToNext(e: MouseEvent) {
-		let elem = (this.state.innerRef as any).current;
-		elem.scrollTo({left: elem.scrollWidth, behavior: "smooth"})
+		let elem = (this.state.innerRef as any).current as HTMLDivElement;
+		elem.scrollBy({left: elem.parentElement.getBoundingClientRect().width, behavior: "smooth"})
 	}
 
 	public render() {

src/public/components/Officer.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface OfficerProps {
+	name: string;
+	position: string;
+	photo: string;
+}
+interface OfficerState {}
+
+export default class Officer extends Component<OfficerProps, OfficerState> {
+	constructor(props: OfficerProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <div className="officer">
+			<img className="officer-image" src={this.props.photo}></img>
+			<span className="officer-name">{this.props.name}</span>
+			<span className="officer-position">{this.props.position}</span>
+		</div>;
+	}
+}

src/public/components/TopNav.tsx

@@ -21,7 +21,7 @@ export default class TopNav extends React.Component<TopNavProps, TopNavState> {
 
 		return <div className="top-nav">
 			<div className="nav-container">
-				<img className="logo" src={this.props.image} alt={this.props.alt}></img>
+				<img className="logo" srcSet={`${this.props.image} 2x`} alt={this.props.alt}></img>
 				{navLinks}
 			</div>
 			<div className="bottom-bar"></div>

src/public/css/styles.css

@@ -1,5 +1,3 @@
-
-
 /* Color vars should go here */
 :root {
 	--dark-blue: #00629b;
@@ -7,8 +5,12 @@
 	--sky-blue: #6ab7ff;
 	--grey: #c4d2e3;
 	--black: #1f1f1f;
-	--white: #eeeeee;
-	--accent: #ffe419;
+	--white: #F2F6FF;
+	--accent: #FFCD00;
+}
+
+#root {
+	background-color: var(--white);
 }
 
 * {
@@ -44,13 +46,15 @@ body {
 	position: relative;
 }
 .logo {
-	width: 10em;
+	width: 20em;
 	height: auto;
 	padding: 0.5em;
+	margin-left: 1em;
+	image-rendering: -webkit-optimize-contrast;
 }
 .nav-link {
 	color: var(--white);
-	font-size: 1.6em;
+	font-size: 1.5em;
 	margin-left: 0.75em;
 	margin-right: 0.75em;
 	text-decoration: none;
@@ -86,6 +90,10 @@ body {
 .row-group {
 	display: flex;
 	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: space-between;
+	column-gap: 2.5em;
 }
 .section-title {
 	color: var(--med-blue);
@@ -120,11 +128,11 @@ body {
 	position: absolute;
 	top: 0;
 	right: 0;
-	background: linear-gradient(270deg, white, transparent)
+	background: linear-gradient(270deg, var(--white), transparent)
 }
 .carousel::before {
 	left: 0;
-	background: linear-gradient(90deg, white, transparent);
+	background: linear-gradient(90deg, var(--white), transparent);
 }
 .carousel-next {
 	position: absolute;
@@ -152,9 +160,11 @@ body {
 	font-weight: 500;
 	color: var(--med-blue);
 	padding: 0.5em;
+	text-decoration: none;
 }
 .carousel-item a:hover {
 	color: var(--sky-blue);
+	text-decoration: underline;
 }
 .carousel-item a:active {
 	color: var(--dark-blue)
@@ -162,6 +172,9 @@ body {
 .description-text {
 	font-size: 1.2em;
 }
+.carousel-item img {
+	max-width: 20em;
+}
 /* Image slideshow styles */
 .slideshow-image {
 	width: 22em;
@@ -182,6 +195,7 @@ body {
 	font-size: 1.5em;
 	color: white;
 	margin-top: 1em;
+	cursor: pointer;
 }
 .link-button:hover {
 	background-color: var(--sky-blue);
@@ -190,6 +204,31 @@ body {
 	background-color: var(--dark-blue);
 }
 
+.officer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	padding: 1em 0;
+	width: 10em;
+}
+.officer-image {
+	aspect-ratio: 1 / 1;
+	max-width: 10em;
+	max-height: 10em;
+}
+.officer-name {
+	font-weight: bold;
+	font-size: 1.2em;
+	text-align: center;
+	margin-bottom: 0.15em;
+}
+.officer-position {
+	font-style: italic;
+	font-size: 1.1em;
+	text-align: center;
+}
+
 /* Responsive queries go here */
 @media screen and (max-width: 760px) {
 	

src/public/index.tsx

@@ -6,6 +6,8 @@ import ImageGallery from "./components/ImageSlideshow";
 import Carousel from "./components/Carousel";
 import CarouselItem from "./components/CarouselItem";
 import ButtonLink from "./components/ButtonLink";
+import Availability from "./components/Availability";
+import Officer from "./components/Officer";
 
 // The links that are on the top nav bar that link to a lowercase version of their page
 const ACTIVE_PAGES: string[] = ["About","Events","Officers","Projects","Resources","Sponsors"];
@@ -42,6 +44,104 @@ const EVENTS = [{
 	location: "/"
 }];
 
+const officers = [{
+	name: "Sarp User",
+	position: "Chair",
+	photo: "img/sarp.jpg"
+},{
+	name: "Parth Desai",
+	position: "Vice Chair Finance",
+	photo: "img/parth.jpg"
+},{
+	name: "Derek Cantor",
+	position: "Vice Chair Internal",
+	photo: "img/derek.jpg"
+},{
+	name: "Clyde Baron Rapinan",
+	position: "Vice Chair Events",
+	photo: "img/clyde.jpg"
+},{
+	name: "Danny Vo",
+	position: "Vice Chair Projects",
+	photo: "img/danny.jpg"
+},{
+	name: "Nick Petrone",
+	position: "Webmaster",
+	photo: "img/nick.jpg"
+},{
+	name: "Jiawen Yu",
+	position: "Technical Chair",
+	photo: "img/jiawen.jpg"
+},{
+	name: "Victor Ku",
+	position: "Technical Chair",
+	photo: "img/victor.jpg"
+},{
+	name: "Sunny Chu",
+	position: "Technical Chair",
+	photo: "img/sunny.jpg"
+},{
+	name: "Samyak Karnavat",
+	position: "Social Chair",
+	photo: "img/samyak.jpg"
+},{
+	name: "Tasnia Jamal",
+	position: "Social Chair",
+	photo: "img/tasnia.jpg"
+},{
+	name: "Hector Montenegro",
+	position: "Robocup Soccer Chair",
+	photo: "img/hector.jpg"
+},{
+	name: "Zhiqiang Pi",
+	position: "Quarterly Projects Chair",
+	photo: "img/zhiqiang.jpg"
+},{
+	name: "Kevin Chang",
+	position: "Quarterly Projects Chair",
+	photo: "img/kevin.jpg"
+},{
+	name: "Benjamin Tang",
+	position: "Project Space Chair",
+	photo: "img/benjamin.jpg"
+},{
+	name: "Narek Boghozian",
+	position: "Project Drive Chair",
+	photo: "img/narek.jpg"
+},{
+	name: "Jason Liang",
+	position: "Professional Chair",
+	photo: "img/jason.jpg"
+},{
+	name: "Vuong Bui",
+	position: "Professional Chair",
+	photo: "img/vuong.jpg"
+},{
+	name: "Thanh Tong",
+	position: "PR Chair - Graphics",
+	photo: "img/thanh.jpg"
+},{
+	name: "Abby Hackbarth",
+	position: "PR Chair - Graphics",
+	photo: "img/abby.jpg"
+},{
+	name: "Brigette Hacia",
+	position: "PR Chair - Marketing",
+	photo: "img/brigette.jpg"
+},{
+	name: "Darin Tsui",
+	position: "Outreach Chair",
+	photo: "img/darin.jpg"
+},{
+	name: "Soyon Kim",
+	position: "Outreach Chair",
+	photo: "img/soyon.jpg"
+},{
+	name: "Niklas Chang",
+	position: "Events Coordinator",
+	photo: "img/niklas.jpg"
+}];
+
 interface MainProps {}
 interface MainState {}
 
@@ -52,15 +152,12 @@ class Main extends React.Component<MainProps, MainState> {
 	}
 	public render() {
 		return <>
-			<TopNav names={ACTIVE_PAGES} links={ACTIVE_PAGES.map(e=>"#" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"></TopNav>
+			<TopNav names={ACTIVE_PAGES} links={ACTIVE_PAGES.map(e=>"#" + e.toLowerCase())} image="img/IEEEUCSD.png" alt="IEEE at UCSD Logo"></TopNav>
 			<HorizontalSection title="About" link="about:blank" id="about">
 				<ImageGallery urls={TEAM_PHOTOS} alt="Team photos" delay={8000}></ImageGallery>
 				<span className="description-text">
-					This is the about IEEE text that should describe all about our organization. 
-					This text should be a succinct summary of what we're all about. Lorem, ipsum dolor
-					sit amet consectetur adipisicing elit. Soluta voluptate eligendi vero enim, qui 
-					fugiat eveniet consectetur quis, quas deleniti perferendis minus commodi ducimus 
-					ipsum necessitatibus voluptates sed dolor neque?
+					<strong>We are dedicated to helping develop students into professional Engineers</strong><br/><br/>
+					As an organization, we strive to provide opportunities to students both at UC San Diego and in the larger STEM community to gain hands-on experience with autonomous robotics and its various disciplines. Throughout the year, we host dozens of events and workshops to teach skills not frequently taught in the classroom, as well as outreach events for students looking to give back to the STEM community. We also provide professional development and other resources to help students achieve their true potential as they develop into professional engineers.
 				</span>
 			</HorizontalSection>
 			<HorizontalSection title="Events" link="about:blank" id="events">
@@ -78,8 +175,12 @@ class Main extends React.Component<MainProps, MainState> {
 					ipsum necessitatibus voluptates sed dolor neque?
 				</span>
 				<br/>
+				<Availability checkUrl="/">Check all availability</Availability>
 				<ButtonLink url="about:blank">Check all availability</ButtonLink>
 			</HorizontalSection>
+			<HorizontalSection title="Officers" link="about:blank" id="officers" row={true}>
+				{officers.map(o=><Officer name={o.name} position={o.position} photo={o.photo} key={o.name}></Officer>)}
+			</HorizontalSection>
 		</>;
 	}
 }