add labrador

public/labrador/labrador.md

@@ -0,0 +1 @@
+# Labrador assets go in this folder

src/components/Navbar/index.tsx

@@ -36,16 +36,27 @@ function Toolbar({ collapsed }: { collapsed: Boolean }) {
 						onClick={() => setMobileLinksVisible(false)}
 					>
 						<div className={styles.navLinkModal}>
-							{/* <Link href="/about" passHref>
-                <a className={`link ${styles.navLink}`}>/about</a>
-              </Link> */}
+							{/* <Link
+								href="/about"
+								passHref
+								className={`link ${styles.navLink}`}
+							>
+								/about
+							</Link> */}
 							<Link
 								href="/tech"
 								passHref
 								className={`link ${styles.navLink}`}
 							>
 								/tech
 							</Link>
+							<Link
+								href="/labrador"
+								passHref
+								className={`link ${styles.navLink}`}
+							>
+								/labrador
+							</Link>
 							<Link
 								href="/design"
 								passHref
@@ -65,16 +76,27 @@ function Toolbar({ collapsed }: { collapsed: Boolean }) {
 				) : null}
 			</div>
 			<div className={styles.navLinkContainer}>
-				{/* <Link href="/about" passHref>
-          <a className={`link ${styles.navLink}`}>/about</a>
-        </Link> */}
+				{/* <Link
+						href="/about"
+						passHref
+						className={`link ${styles.navLink}`}
+					>
+						/about
+					</Link> */}
 				<Link
 					href="/tech"
 					passHref
 					className={`link ${styles.navLink}`}
 				>
 					/tech
 				</Link>
+				<Link
+					href="/labrador"
+					passHref
+					className={`link ${styles.navLink}`}
+				>
+					/labrador
+				</Link>
 				<Link
 					href="/design"
 					passHref

src/pages/labrador.tsx

@@ -0,0 +1,86 @@
+// import Image from 'next/image';
+import Project from 'components/Project';
+import Timeline from 'components/Timeline';
+import Typography from 'components/Typography';
+import BaseLayout from 'layouts/BaseLayout';
+import styles from 'styles/Labrador.module.scss';
+
+export default function Labrador() {
+	return (
+		<BaseLayout collapsedNavBar>
+			<div className={styles.pageContent}>
+				<Typography variant="header">Labrador</Typography>
+				<div className={styles.aboutSection}>
+					<Typography variant="body">
+						The Labrador committee works on new projects from the
+						ground-up that tech may take on in the future. Think of
+						Labrador like ScottyLabs&apos; own internal
+						&quot;startup&quot; accelerator for tech projects.
+					</Typography>
+				</div>
+				<Timeline className={styles.projectTimeline}>
+					<Project
+						title="Veg"
+						softwareIcons={[
+							'javascript',
+							'typescript',
+							// 'react-native',
+							// 'firebase',
+						]}
+						description="Centralized grocery and expense management for housemates. Automated receipt splitting and shopping list tracking."
+						// link="https://N/A.com/"
+						// image={
+						// 	<Image
+						// 		src="/labrador/N/A.png"
+						// 		width={1920}
+						// 		height={1080}
+						// 		alt="N/A"
+						// 	/>
+						// }
+					/>
+					<Project
+						title="CMUMaps"
+						softwareIcons={[
+							'typescript',
+							'nextjs',
+							'react',
+							'mongodb',
+							// 'applemapkit'
+						]}
+						description="Google Maps for CMU. Indoor room-level navigation, information, and availability for all buildings across the CMU campus."
+						// link="https://N/A.com/"
+						// image={
+						// 	<Image
+						// 		src="/labrador/N/A.png"
+						// 		width={1920}
+						// 		height={1080}
+						// 		alt="N/A"
+						// 	/>
+						// }
+					/>
+					<Project
+						title="CMUSeats"
+						softwareIcons={[
+							'javascript',
+							'typescript',
+							'mongodb',
+							// 'express',
+							'react',
+						]}
+						description="Crowdsourced study spot availability platform (starting with Gates)."
+						// link="https://N/A.com/"
+						// image={
+						// 	<Image
+						// 		src="/labrador/N/A.png"
+						// 		width={1920}
+						// 		height={1080}
+						// 		alt="N/A"
+						// 	/>
+						// }
+					/>
+					<Project title="Join the team!" />
+				</Timeline>
+			</div>
+		</BaseLayout>
+	);
+}

src/styles/Labrador.module.scss

@@ -0,0 +1,61 @@
+@import './variables.scss';
+@import './mixins.scss';
+
+.pageContainer {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	justify-content: space-between;
+}
+
+.pageContent {
+	width: 80%;
+	margin: 3em auto 0 auto;
+
+	@include down($breakpoint-lg) {
+		width: 90%;
+	}
+}
+
+.aboutSection {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2em;
+	margin-top: 1em;
+
+	@include down($breakpoint-sm) {
+		grid-template-columns: none;
+		grid-template-rows: 1fr;
+	}
+}
+
+.softwareIconContainer {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	gap: 2em;
+
+	@include down($breakpoint-sm) {
+		gap: 1em;
+		justify-content: space-between;
+	}
+}
+
+.softwareIcon {
+	height: 64px;
+	width: 64px;
+
+	@include down($breakpoint-sm) {
+		height: 48px;
+		width: 48px;
+	}
+
+	@include down($breakpoint-xs) {
+		height: 36px;
+		width: 36px;
+	}
+}
+
+.projectTimeline {
+	margin-top: 5em;
+}