Carousel skeleton completed

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "build/index.js",
   "scripts": {
-    "build": "webpack & tsc",
+    "build": "webpack & tsc & time /T",
     "watch": "npm-watch build"
   },
   "watch": {

src/public/components/Carousel.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface CarouselProps {}
+interface CarouselState {}
+
+export default class Carousel extends Component<CarouselProps, CarouselState> {
+	constructor(props: CarouselProps) {
+		super(props);
+		this.state = {};
+	}
+
+	private scrollToNext(e: MouseEvent) {
+		// implement later
+	}
+
+	public render() {
+		return <div className="carousel">
+			{this.props.children}
+			<div className="carousel-next" onClick={this.scrollToNext.bind(this)}>&gt;</div>
+		</div>;
+	}
+}

src/public/components/CarouselItem.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface CarouselItemProps {
+	location: string;
+	workshopName: string;
+	image: string;
+}
+interface CarouselItemState {}
+
+export default class CarouselItem extends Component<CarouselItemProps, CarouselItemState> {
+	constructor(props: CarouselItemProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <div className="carousel-item">
+			<img src={this.props.image}></img>
+			<a href={this.props.location}>{this.props.workshopName}</a>
+		</div>;
+	}
+}

src/public/components/HorizontalSection.tsx

@@ -3,6 +3,7 @@ import React, {Component} from "react";
 interface HorizontalSectionProps {
 	link: string;
 	title: string;
+	row?: boolean;
 }
 interface HorizontalSectionState {}
 
@@ -15,7 +16,9 @@ export default class HorizontalSection extends Component<HorizontalSectionProps,
 	public render() {
 		return <div className="horizontal-section">
 			<a className="section-title" href={this.props.link}>{this.props.title}</a>
+			<div className={this.props.row ? "row-group" : "col-group"}>
 				{this.props.children}
+			</div>
 		</div>;
 	}
 }

src/public/components/ImageSlideshow.tsx

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

src/public/components/TopNav.tsx

@@ -20,8 +20,11 @@ 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>
 				{navLinks}
+			</div>
+			<div className="bottom-bar"></div>
 		</div>;
 	}
 }

src/public/css/styles.css

@@ -1,22 +1,4 @@
-::-webkit-scrollbar {
+
-	width: 10px;
-}
-::-webkit-scrollbar-button,
-::-webkit-scrollbar-corner {
-	display: none;
-}
-::-webkit-scrollbar-thumb {
-	background: #ececec;
-}
-::-webkit-scrollbar-thumb:hover {
-	background: #e2e2e2;
-}
-::-webkit-scrollbar-thumb:active {
-	background: #b8b8b8;
-}
-::-webkit-scrollbar-track {
-	background: #383838;
-}
 
 /* Color vars should go here */
 :root {
@@ -26,8 +8,23 @@
 	--grey: #c4d2e3;
 	--black: #1f1f1f;
 	--white: #eeeeee;
+	--accent: #ffe419;
 }
 
+* {
+	scrollbar-width: auto;
+	scrollbar-color: var(--black) transparent;
+}
+*::-webkit-scrollbar {
+	width: 0.6em;
+}
+*::-webkit-scrollbar-track {
+	background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+	background-color: var(--black);
+	border-radius: 10px;
+}
 html {
 	color: var(--black);
 	font-family: "Open Sans", sans-serif;
@@ -36,13 +33,14 @@ body {
 	margin: 0;
 }
 
+/* Top nav styles */
 .top-nav {
 	width: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 	background-color: var(--dark-blue);
 	align-items: center;
-	position: fixed;
+	position: relative;
 }
 .logo {
 	width: 10em;
@@ -56,10 +54,75 @@ body {
 	margin-right: 0.75em;
 	text-decoration: none;
 }
-
 .top-nav .nav-link:nth-of-type(1) {
 	margin-left: auto;
 }
+.bottom-bar {
+	width: 100%;
+	height: 0.25em;
+	background-color: var(--accent);
+}
+.nav-container {
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+/* */
+.horizontal-section {
+	padding: 2em;
+	width: auto;
+	display: flex;
+	flex-direction: column;
+	padding-left: 15%;
+	padding-right: 15%;
+	font-size: 1.2em;
+}
+.column-group {
+	display: flex;
+	flex-direction: column;
+}
+.row-group {
+	display: flex;
+	flex-direction: row;
+}
+.section-title {
+	color: var(--med-blue);
+	font-size: 2.2em;
+	text-decoration: none;
+	width: fit-content;
+}
+.section-title:hover {
+	text-decoration: underline;
+}
+.carousel-item {
+	display: flex;
+    flex-direction: column;
+    padding: 1em;
+    background: ghostwhite;
+    box-shadow: 3px 3px 5px 1px grey;
+	margin: 0 1em;
+}
+.carousel {
+	display: flex;
+	overflow-x: auto;
+	padding: 1em 0;
+}
+.carousel :first-child {
+	margin-left: 0;
+}
+.carousel :last-child {
+	margin-right: 0;
+}
+
+/* Image slideshow styles */
+.slideshow-image {
+	width: 22em;
+	height: auto;
+}
+.image-slideshow {
+	margin-right: 1em;
+}
 
 /* Responsive queries go here */
 @media screen and (max-width: 760px) {

src/public/index.tsx

@@ -2,9 +2,39 @@ 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";
+import ImageGallery from "./components/ImageSlideshow";
+import Carousel from "./components/Carousel";
+import CarouselItem from "./components/CarouselItem";
 
-const ACTIVE_PAGES = ["Events","Officers","Projects","Resources","Sponsors"];
+// 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"];
+// Urls of team photos that will go in the "About" slideshow
+const TEAM_PHOTOS: string[] = [
+	"https://dummyimage.com/600x400/000/fff.png&text=image1",
+	"https://dummyimage.com/300x200/000/fff.png&text=image2",
+	"https://dummyimage.com/1200x800/000/fff.png&text=image3"
+];
+const EVENTS = [{
+	image: "img/event.png",
+	workshopName: "Workshop Name",
+	location: "/"
+},{
+	image: "img/event.png",
+	workshopName: "Workshop Name",
+	location: "/"
+},{
+	image: "img/event.png",
+	workshopName: "Workshop Name",
+	location: "/"
+},{
+	image: "img/event.png",
+	workshopName: "Workshop Name",
+	location: "/"
+},{
+	image: "img/event.png",
+	workshopName: "Workshop Name",
+	location: "/"
+}];
 
 interface MainProps {}
 interface MainState {}
@@ -16,13 +46,22 @@ 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/logo.png" alt="IEEE at UCSD Logo"></TopNav>
+			<HorizontalSection title="About" link="about:blank" row={true}>
+				<ImageGallery urls={TEAM_PHOTOS} alt="Team photos" delay={8000}></ImageGallery>
+				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?
+			</HorizontalSection>
+			<HorizontalSection title="Events" link="about:blank">
+				<Carousel>
+					{EVENTS.map(e=><CarouselItem {...e}/>)}
+				</Carousel>
+			</HorizontalSection>
+			<HorizontalSection title="Project Space" link="about:blank">
 				
-			<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>
 		</>;
 	}