Add nav styles and image slideshow

.gitignore

@@ -1,3 +1,4 @@
 build
 dist
 node_modules
+src/public/fonts

src/public/components/HorizontalSection.tsx

@@ -0,0 +1,21 @@
+import React, {Component} from "react";
+
+interface HorizontalSectionProps {
+	link: string;
+	title: string;
+}
+interface HorizontalSectionState {}
+
+export default class HorizontalSection extends Component<HorizontalSectionProps, HorizontalSectionState> {
+	constructor(props: HorizontalSectionProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <div className="horizontal-section">
+			<a className="section-title" href={this.props.link}>{this.props.title}</a>
+			{this.props.children}
+		</div>;
+	}
+}

src/public/components/ImageGallery.tsx

@@ -0,0 +1,36 @@
+import React, {Component} from "react";
+
+interface ImageGalleryProps {
+	urls: string[];
+	delay: number;
+	alt: string;
+}
+interface ImageGalleryState {
+	progress: number;
+}
+
+export default class ImageGallery extends Component<ImageGalleryProps, ImageGalleryState> {
+	private interval: number;
+
+	constructor(props: ImageGalleryProps) {
+		super(props);
+		this.state = {
+			progress: 0
+		};
+		this.interval = setInterval(this.changeImage.bind(this), this.props.delay) as any as number;
+	}
+
+	private changeImage(): void {
+		if (this.state.progress < this.props.urls.length) {
+			this.setState({progress: this.state.progress + 1});
+		} else {
+			this.setState({progress: 0});
+		}
+	}
+
+	public render() {
+		return <div className="image-gallery">
+			<img className="slideshow-image" src={this.props.urls[this.state.progress]} alt={this.props.alt}></img>
+		</div>;
+	}
+}

src/public/components/ImageScrollPanel.tsx

@@ -0,0 +1,17 @@
+import React, {Component} from "react";
+
+interface ImageScrollPanelProps {
+	imageUrls: string[];
+}
+interface ImageScrollPanelState {}
+
+export default class ImageScrollPanel extends Component<ImageScrollPanelProps, ImageScrollPanelState> {
+	constructor(props: ImageScrollPanelProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <></>;
+	}
+}

src/public/components/NavLink.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-
-interface NavLinkProps {
-	url: string;
-	text: string;
-}
-interface NavLinkState {}
-
-export default class NavLink extends React.Component<NavLinkProps, NavLinkState> {
-	constructor(props: NavLinkProps) {
-		super(props);
-		this.state = {};
-	}
-
-	public render() {
-		return <div className="nav-link">
-			<a href={this.props.url}>{this.props.text}</a>
-		</div>;
-	}
-}

src/public/components/TopNav.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import NavLink from "./NavLink";
 
 interface TopNavProps {
 	image: string;
 	links: string[];
+	names: string[];
 	alt: string;
 }
 interface TopNavState {}
@@ -15,8 +15,8 @@ export default class TopNav extends React.Component<TopNavProps, TopNavState> {
 	}
 
 	public render() {
-		let navLinks = this.props.links.map(name=>{
+		let navLinks = this.props.links.map((url, i)=>{
-			return <NavLink text={name} url={"/"+name.toLowerCase()} key={name}></NavLink>;
+			return <a className="nav-link" href={url} key={this.props.names[i]}>{this.props.names[i]}</a>;
 		});
 
 		return <div className="top-nav">

src/public/css/fonts.css

@@ -0,0 +1,108 @@
+/* open-sans-300 - latin */
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 300;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-regular - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 400;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-600 - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 600;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-500 - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 500;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-700 - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 700;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-800 - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 800;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-300italic - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 300;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-500italic - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 500;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-italic - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 400;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-600italic - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 600;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-700italic - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 700;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  /* open-sans-800italic - latin */
+  @font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 800;
+	src: local(''),
+		 url('../fonts/open-sans-v27-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		 url('../fonts/open-sans-v27-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }

src/public/css/styles.css

@@ -20,7 +20,45 @@
 
 /* Color vars should go here */
 :root {
+	--dark-blue: #00629b;
+	--med-blue: #4486c4;
+	--sky-blue: #6ab7ff;
+	--grey: #c4d2e3;
+	--black: #1f1f1f;
+	--white: #eeeeee;
+}
 
+html {
+	color: var(--black);
+	font-family: "Open Sans", sans-serif;
+}
+body {
+	margin: 0;
+}
+
+.top-nav {
+	width: 100%;
+    display: flex;
+    flex-direction: row;
+	background-color: var(--dark-blue);
+	align-items: center;
+	position: fixed;
+}
+.logo {
+	width: 10em;
+	height: auto;
+	padding: 0.5em;
+}
+.nav-link {
+	color: var(--white);
+	font-size: 1.5em;
+	margin-left: 0.75em;
+	margin-right: 0.75em;
+	text-decoration: none;
+}
+
+.top-nav .nav-link:nth-of-type(1) {
+	margin-left: auto;
 }
 
 /* Responsive queries go here */

src/public/index.tsx

@@ -1,6 +1,10 @@
 import * as ReactDom from "react-dom";
 import * as React from "react";
 import TopNav from "./components/TopNav";
+import HorizontalSection from "./components/HorizontalSection";
+import ImageGallery from "./components/ImageGallery";
+
+const ACTIVE_PAGES = ["Events","Officers","Projects","Resources","Sponsors"];
 
 interface MainProps {}
 interface MainState {}
@@ -12,8 +16,14 @@ class Main extends React.Component<MainProps, MainState> {
 	}
 	public render() {
 		return <>
-			<TopNav links={["Events","Officers","Projects","Resources","Sponsors"]} 
+			<TopNav names={ACTIVE_PAGES} links={ACTIVE_PAGES.map(e=>"/" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"></TopNav>
-				image="img/logo.png" alt="IEEE at UCSD Logo"></TopNav>
+			
+			<HorizontalSection title="About" link="about:blank">
+				<ImageGallery urls={["https://images.unsplash.com/photo-1637266702043-287eb7d2b5b2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80",
+									"https://images.unsplash.com/photo-1637278643503-3a49c91b7000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
+									"https://images.unsplash.com/photo-1637278643503-3a49c91b7000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"]}
+					alt="Team photos" delay={2000}></ImageGallery>
+			</HorizontalSection>
 		</>;
 	}
 }

src/public/template.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 	<title>$TITLE</title>
+	<link rel="stylesheet" type="text/css" href="css/fonts.css" media="screen">
 	<link rel="stylesheet" type="text/css" href="$CSSFILE" media="screen">
 	<link rel="icon" href="img/favicon.png" type="image/png">
 	<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">