Add projects and columns.

css/style.css

@@ -1,4 +1,8 @@
 @import url("https://fonts.googleapis.com/css?family=EB+Garamond|Raleway");
+a {
+  color: #1dc868;
+  text-decoration: none; }
+
 body {
   margin: 0px;
   padding: 0px;
@@ -9,11 +13,11 @@ body {
 header {
   text-align: center;
   margin: auto;
-  margin-bottom: 20px; }
+  margin-bottom: 10px; }
 
 div.name {
   font-size: 1.25em;
-  margin: 25px;
+  margin: 20px;
   font-family: "Raleway", serif; }
 
 h1 {
@@ -45,6 +49,27 @@ div.contact-content {
   padding-left: 5px;
   font-weight: bold; }
 
+div.horizontal-list {
+  display: flex;
+  flex-direction: horizontal; }
+  div.horizontal-list section, div.horizontal-list div {
+    flex-grow: 1; }
+
+div.project-container {
+  flex-basis: 25%; }
+  div.project-container h2 {
+    display: inline;
+    margin: 0px; }
+
+a.project-link {
+  color: black;
+  font-weight: bold;
+  display: flex;
+  align-items: center; }
+
+svg.project-link-icon {
+  height: 1em; }
+
 main {
   margin: auto;
   max-width: 90%; }

resume.html

@@ -24,7 +24,8 @@
         </header>
 
         <main>
-            <section>
+            <div class="horizontal-list">
+                <section style="flex-basis: 55%;">
                     <h1>Education</h1>
                     <div class="section-content">
                         Oregon State University, Corvallis, OR <br>
@@ -43,6 +44,40 @@
                         low-level development.<br>
                     </div>
                 </section>
+            </div>
+            <section>
+                <h1>Projects</h1>
+                <div class="horizontal-list section-content">
+                    <div class="project-container">
+                        <a class="project-link" href="https://github.com/DanilaFe/pegasus">
+                            <h2>pegasus</h2>
+                            <i data-feather="link" class="project-link-icon"></i>
+                        </a>
+                        LALR parser generator for the C and Crystal languages.
+                    </div>
+                    <div class="project-container">
+                        <a class="project-link" href="https://github.com/DanilaFe/chalk">
+                            <h2>chalk</h2>
+                            <i data-feather="link" class="project-link-icon"></i>
+                        </a>
+                        Compiler from a small language into CHIP-8 bytecode.
+                    </div>
+                    <div class="project-container">
+                        <a class="project-link" href="https://github.com/DanilaFe/abcs">
+                            <h2>abcs</h2>
+                            <i data-feather="link" class="project-link-icon"></i>
+                        </a>
+                        Calculator program with a complete embedded programming language.
+                    </div>
+                    <div class="project-container">
+                        <a class="project-link" href="https://github.com/DanilaFe/Scylla">
+                            <h2>scylla</h2>
+                            <i data-feather="link" class="project-link-icon"></i>
+                        </a>
+                        Elm-based purely functional front end for the Matrix chat protocol.
+                    </div>
+                </div>
+            </section>
             <section>
                 <h1>Technical Experience</h1>
 

scss/style.scss

@@ -4,8 +4,14 @@ $text-font: 'Raleway';
 $big-font: 'Raleway';
 $color-main: #36e281;
 $color-secondary: darken($color-main, 10%);
+$color-link: $color-secondary;
 $color-text: black;
 
+a {
+    color: $color-link;
+    text-decoration: none;
+}
+
 body {
     margin: 0px;
     padding: 0px;
@@ -17,12 +23,12 @@ body {
 header {
     text-align: center;
     margin: auto;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 div.name {
     font-size: 1.25em;
-    margin: 25px;
+    margin: 20px;
     font-family: $big-font, serif;
 }
 
@@ -60,6 +66,35 @@ div.contact-content {
     font-weight: bold;
 }
 
+div.horizontal-list {
+    display: flex;
+    flex-direction: horizontal;
+
+    section, div {
+        flex-grow: 1;
+    }
+}
+
+div.project-container {
+    flex-basis: 25%;
+
+    h2 {
+        display: inline;
+        margin: 0px;
+    }
+}
+
+a.project-link {
+    color: $color-text;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+}
+
+svg.project-link-icon {
+    height: 1em;
+}
+
 main {
     margin: auto;
     max-width: 90%;