update

sass/general.scss

@@ -0,0 +1,14 @@
+.flex-col {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+
+.flex-row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+}
+

sass/project.scss

@@ -0,0 +1,17 @@
+.project-wrapper {
+	justify-content: start;
+	align-items: start;
+}
+
+.left-bar {
+	width: 15rem;
+	justify-content: start;
+	align-items: start;
+	border-right: thin solid var(--c-blue);
+	margin-right: 2.5rem;
+	padding: 0 2.5rem;
+
+	h2 {
+		padding-bottom: 2.5rem;
+	}
+}

sass/project_list.scss

@@ -0,0 +1,25 @@
+.project-list  {
+	h1 {
+		margin-bottom: 2rem;
+		font-size: 2rem;
+	}
+	.project {
+		margin-bottom: 3rem;
+
+		.title {
+			text-decoration: none;
+			font-size: 1.2rem;
+			font-weight: bold;
+		}
+		
+		.description {
+			font-style: italic;
+			margin-bottom: .5rem;
+			margin-top: .5rem;
+		}
+		hr {
+			margin-bottom: .5rem;
+		}
+	}
+
+}

sass/style.scss

@@ -1,10 +1,3 @@
-body {
-	--base-padding: .5rem 1rem;
-    --base-margin: 2rem;
-    --background: #111111;
-    --color: #ffffff;
-}
-
 * {
 	margin: 0;
 	padding: 0;
@@ -62,7 +55,7 @@ nav {
 
 a { color: var(--color); }
 a:visited { color: var(--color); }
-a:hover { color: red; }
+a:hover { color: var(--a-hover); }
 
 @media (min-width: 400px) {
 	nav .links {

sass/vars.scss

@@ -0,0 +1,14 @@
+* {
+	--base-padding: .5rem 1rem;
+	--base-margin: 2rem;
+
+	--c-white: #ffffff;
+	--c-gray: #111111;
+	--c-red: #FF3A20;
+	--c-darkblue: #02081e;
+	--c-blue: #5B85AA;
+
+	--a-hover: var(--c-red);
+	--color: var(--c-white);
+	--background: var(--c-gray);
+}