From eacbf2b43888492133cedba948f454cdc6dc3a97 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Wed, 6 Mar 2019 18:55:35 -0800
Subject: [PATCH] Add projects and columns.

---
 css/style.css   | 29 +++++++++++++++++++--
 resume.html     | 67 +++++++++++++++++++++++++++++++++++++------------
 scss/style.scss | 39 ++++++++++++++++++++++++++--
 3 files changed, 115 insertions(+), 20 deletions(-)

diff --git a/css/style.css b/css/style.css
index 41dec18..18a7845 100644
--- a/css/style.css
+++ b/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%; }
diff --git a/resume.html b/resume.html
index ec32df5..826ec32 100644
--- a/resume.html
+++ b/resume.html
@@ -24,23 +24,58 @@
         </header>
 
         <main>
-            <section>
-                <h1>Education</h1>
-                <div class="section-content">
-                    Oregon State University, Corvallis, OR <br>
-                    <em>Bachelor of Science</em>, Computer Science, <br>
-                    Expected June 2020 <br>
-                    4.0 GPA
-                </div>
-            </section>
-            <section>
-                <h1>Technical Skills</h1>
+            <div class="horizontal-list">
+                <section style="flex-basis: 55%;">
+                    <h1>Education</h1>
+                    <div class="section-content">
+                        Oregon State University, Corvallis, OR <br>
+                        <em>Bachelor of Science</em>, Computer Science, <br>
+                        Expected June 2020 <br>
+                        4.0 GPA
+                    </div>
+                </section>
+                <section>
+                    <h1>Technical Skills</h1>
 
-                <div class="section-content">
-                    <em>Languages:</em> C, C++, Java, Kotlin, JavaScript, Haskell, Python, Haxe<br>
-                    <em>Operating Systems:</em> MacOS, Linux<br>
-                    <em>Additional Skills:</em> Experience with compiler design, algorithm efficiency,
-                    low-level development.<br>
+                    <div class="section-content">
+                        <em>Languages:</em> C, C++, Java, Kotlin, JavaScript, Haskell, Python, Haxe<br>
+                        <em>Operating Systems:</em> MacOS, Linux<br>
+                        <em>Additional Skills:</em> Experience with compiler design, algorithm efficiency,
+                        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>
diff --git a/scss/style.scss b/scss/style.scss
index 2a0ecf4..03de0cf 100644
--- a/scss/style.scss
+++ b/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%;