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">
-			{this.props.children}
+			<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: white;
-    background: ghostwhite;
     box-shadow: 3px 3px 5px 1px grey;
 	margin: 0 1em;
 }
-.carousel {
+.carousel-inner {
 	display: flex;
 	overflow-x: auto;
 	padding: 1em 0;
 }
-.carousel :first-child {
+.carousel {
-	margin-left: 0;
+	position: relative;
 }
-.carousel :last-child {
+.carousel::after, .carousel::before {
-	margin-right: 0;
+	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>
-				This is the about IEEE text that should describe all about our organization. 
+				<span className="description-text">
-				This text should be a succinct summary of what we're all about. Lorem, ipsum dolor
+					This is the about IEEE text that should describe all about our organization. 
-				sit amet consectetur adipisicing elit. Soluta voluptate eligendi vero enim, qui 
+					This text should be a succinct summary of what we're all about. Lorem, ipsum dolor
-				fugiat eveniet consectetur quis, quas deleniti perferendis minus commodi ducimus 
+					sit amet consectetur adipisicing elit. Soluta voluptate eligendi vero enim, qui 
-				ipsum necessitatibus voluptates sed dolor neque?
+					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>
 		</>;
 	}