Temp version

src/public/components/Availability.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface AvailabilityProps {}
+interface AvailabilityState {
+	available: boolean;
+}
+
+export default class Availability extends Component<AvailabilityProps, AvailabilityState> {
+	constructor(props: AvailabilityProps) {
+		super(props);
+		this.state = {
+			available: false
+		};
+	}
+
+	public render() {
+		return <div className="availability">
+			{}
+		</div>;
+	}
+}

src/public/components/ButtonLink.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import {Component} from "react";
+
+interface ButtonLinkProps {
+	url: string;
+}
+interface ButtonLinkState {}
+
+export default class ButtonLink extends Component<ButtonLinkProps, ButtonLinkState> {
+	constructor(props: ButtonLinkProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return <button className="link-button" onClick={
+				(()=>(window.location as any)=this.props.url).bind(this)
+			}>
+			{this.props.children}
+		</button>;
+	}
+}

src/public/components/Carousel.tsx

@@ -2,21 +2,28 @@ import * as React from "react";
 import {Component} from "react";
 
 interface CarouselProps {}
-interface CarouselState {}
+interface CarouselState {
+	innerRef: React.Ref<HTMLDivElement>
+}
 
 export default class Carousel extends Component<CarouselProps, CarouselState> {
 	constructor(props: CarouselProps) {
 		super(props);
-		this.state = {};
+		this.state = {
+			innerRef: React.createRef()
+		};
 	}
 
 	private scrollToNext(e: MouseEvent) {
-		// implement later
+		let elem = (this.state.innerRef as any).current;
+		elem.scrollTo({left: elem.scrollWidth, behavior: "smooth"})
 	}
 
 	public render() {
 		return <div className="carousel">
+			<div className="carousel-inner" ref={this.state.innerRef}>
 				{this.props.children}
+			</div>
 			<div className="carousel-next" onClick={this.scrollToNext.bind(this)}>&gt;</div>
 		</div>;
 	}

src/public/components/HorizontalSection.tsx

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

src/public/css/styles.css

@@ -17,6 +17,7 @@
 }
 *::-webkit-scrollbar {
 	width: 0.6em;
+	height: 0.6em;
 }
 *::-webkit-scrollbar-track {
 	background: transparent;
@@ -49,7 +50,7 @@ body {
 }
 .nav-link {
 	color: var(--white);
-	font-size: 1.5em;
+	font-size: 1.6em;
 	margin-left: 0.75em;
 	margin-right: 0.75em;
 	text-decoration: none;
@@ -88,9 +89,11 @@ body {
 }
 .section-title {
 	color: var(--med-blue);
-	font-size: 2.2em;
+	font-size: 2.4em;
 	text-decoration: none;
 	width: fit-content;
+	padding-bottom: 0.15em;
+	font-weight: bold;
 }
 .section-title:hover {
 	text-decoration: underline;
@@ -98,23 +101,67 @@ body {
 .carousel-item {
 	display: flex;
     flex-direction: column;
-    padding: 1em;
-    background: ghostwhite;
+    background: white;
     box-shadow: 3px 3px 5px 1px grey;
 	margin: 0 1em;
 }
-.carousel {
+.carousel-inner {
 	display: flex;
 	overflow-x: auto;
 	padding: 1em 0;
 }
-.carousel :first-child {
-	margin-left: 0;
+.carousel {
+	position: relative;
 }
-.carousel :last-child {
-	margin-right: 0;
+.carousel::after, .carousel::before {
+	content: "";
+	width: 1em;
+	height: calc(100% - 0.6em);
+	position: absolute;
+	top: 0;
+	right: 0;
+	background: linear-gradient(270deg, white, transparent)
+}
+.carousel::before {
+	left: 0;
+	background: linear-gradient(90deg, white, transparent);
+}
+.carousel-next {
+	position: absolute;
+	right: -0.5em;
+	font-weight: 1000;
+	font-size: 2em;
+	border-radius: 1000px;
+	background: var(--med-blue);
+	color: var(--white);
+	width: 1.5em;
+	height: 1.5em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0.8;
+	top: calc(50% -  0.75em);
+	z-index: 1;
+	user-select: none;
+	cursor: pointer;
+}
+.carousel-inner::-webkit-scrollbar-thumb {
+	background-color: var(--grey);
+}
+.carousel-item a {
+	font-weight: 500;
+	color: var(--med-blue);
+	padding: 0.5em;
+}
+.carousel-item a:hover {
+	color: var(--sky-blue);
+}
+.carousel-item a:active {
+	color: var(--dark-blue)
+}
+.description-text {
+	font-size: 1.2em;
 }
-
 /* Image slideshow styles */
 .slideshow-image {
 	width: 22em;
@@ -122,6 +169,25 @@ body {
 }
 .image-slideshow {
 	margin-right: 1em;
+	float: left;
+	height: fit-content;
+	padding: 0 1em 1em 0;
+}
+
+.link-button {
+	padding: 0.5em;
+	background-color: var(--med-blue);
+	border-radius: 1em;
+	border: none;
+	font-size: 1.5em;
+	color: white;
+	margin-top: 1em;
+}
+.link-button:hover {
+	background-color: var(--sky-blue);
+}
+.link-button:active {
+	background-color: var(--dark-blue);
 }
 
 /* Responsive queries go here */

src/public/index.tsx

@@ -5,6 +5,7 @@ import HorizontalSection from "./components/HorizontalSection";
 import ImageGallery from "./components/ImageSlideshow";
 import Carousel from "./components/Carousel";
 import CarouselItem from "./components/CarouselItem";
+import ButtonLink from "./components/ButtonLink";
 
 // 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"];
@@ -14,6 +15,11 @@ const TEAM_PHOTOS: string[] = [
 	"https://dummyimage.com/300x200/000/fff.png&text=image2",
 	"https://dummyimage.com/1200x800/000/fff.png&text=image3"
 ];
+const PROJECT_SPACE: 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",
@@ -47,21 +53,32 @@ 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>
-			<HorizontalSection title="About" link="about:blank" row={true}>
+			<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?
+				</span>
 			</HorizontalSection>
-			<HorizontalSection title="Events" link="about:blank">
+			<HorizontalSection title="Events" link="about:blank" id="events">
 				<Carousel>
 					{EVENTS.map(e=><CarouselItem {...e}/>)}
 				</Carousel>
 			</HorizontalSection>
-			<HorizontalSection title="Project Space" link="about:blank">
-				
+			<HorizontalSection title="Project Space" link="about:blank" id="projects">
+				<ImageGallery urls={PROJECT_SPACE} alt="The IEEE Project Space" delay={8000}></ImageGallery>
+				<span className="description-text">
+					This is a description all about the project space and how amazingly awesome it is
+					and also how cool it is too. 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?
+				</span>
+				<br/>
+				<ButtonLink url="about:blank">Check all availability</ButtonLink>
 			</HorizontalSection>
 		</>;
 	}