Use media query to nicely display in-browser

css/style.css

@@ -12,6 +12,14 @@ body {
   font-family: "Raleway";
   line-height: 1.3em;
   font-size: 14px; }
+  @media not print {
+    body {
+      max-width: 215.9mm;
+      margin-top: 10px;
+      padding-top: 5px;
+      margin-left: auto;
+      margin-right: auto;
+      box-shadow: 0px 0px 5px #dadada; } }
 
 header {
   text-align: center;
@@ -80,8 +88,13 @@ main {
 div.section-content {
   margin-left: 20px; }
 
-div.position-location {
+div.position, div.project-container {
+  margin-bottom: 15px; }
+
+div.position-location, div.project-quip {
   color: #4d4c4c; }
 
 section {
   page-break-inside: avoid; }
+  section.page-padding {
+    padding-top: 15px; }

resume.html

@@ -47,38 +47,77 @@
             </div>
             <section>
                 <h1>Projects</h1>
-                <div class="horizontal-list section-content">
+                <div class="section-content">
+                    <div class="project-container">
+                        <a class="project-link" href="https://danilafe.com">
+                            <h2>danilafe.com</h2>
+                            <i data-feather="link" class="project-link-icon"></i>
+                        </a>
+                        <div class="project-quip">Blog containing a series on compiler development.</div>
+                        <ul>
+                            <li>Teaches compiler development from the bottom up using common technologies such as Flex,
+                                Bison and LLVM.</li>
+                            <li>Provides complete implementation of the compiler at each stage of the process,
+                                encouraging experimentation and understanding.</li>
+                            <li>Contains 25,000+ words in 9+ posts, each with an associated compiler version.</li>
+                        </li>
+                    </div>
                     <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 class="project-quip">LALR parser generator for the C and Crystal languages.</div>
+                        <ul>
+                            <li>Provides a set of programs for creating LALR(1) parsers.</li>
+                            <li>Supports the C and Crystal languages, exposing an API for the implementation of parsers for
+                                other languages.</li>
+                            <li>Generates parsers with diverse functionalities, from building parse trees to using
+                                semantic actions.</li>
+                            <li>Defines a generic syntax for semantic actions to maximize code reuse.</li>
+                        </li>
                     </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 class="project-quip">Compiler from a small language into CHIP-8 bytecode.</div>
+                        <ul>
+                            <li>Employs a Crystal implementation of parser combinators to parse language.</li>
+                            <li>Compiles code to intermediate assembly language, then to CHIP-8 bytecode.</li>
+                            <li>Supports in-text representation of sprites for easy editing.</li>
+                        </li>
                     </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 class="project-quip">Calculator program with a complete embedded programming language.</div>
+                        <ul>
+                            <li>Interfaces with GNU MPFR to perform arbitrary precision aritmetic.</li>
+                            <li>Provides complete language supporting parametric polymorphism, partial function
+                                application and higher order functions.</li>
+                            <li>Uses hand-written parser to allow for the definition of arbitrary operators
+                                at runtime.</li>
+                        </ul>
                     </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 class="project-quip">Elm-based purely functional front end for the Matrix chat protocol.</div>
+                        <ul>
+                            <li>Defines a purely functioal reactive web interface using the Model-Update-View architecture.</li>
+                            <li>Employs lazy evaluation to optimize common operations.</li>
+                            <li>Implements part of the Matrix standard for open source, decentralized communication.</li>
+                        </ul>
                     </div>
                 </div>
             </section>
-            <section>
+            <section class="page-padding">
                 <h1>Technical Experience</h1>
 
                 <div class="section-content">
@@ -97,10 +136,10 @@
                         <div class="position-location">Northwest Advanced Programming Workshop | Summer 2017</div>
                         <ul>
                             <li>Designed and implemented a desktop calculator application with a focus on usability and feature-completeness.</li>
-                            <li>Worked on a variety of components, including parsing input through a custom regular expression engine, evaluating expressions through Taylor Series, and UI design</li>
+                            <li>Worked on a variety of components, including parsing input through a custom regular expression engine, evaluating expressions through Taylor Series, and UI design.</li>
                             <li>Profiled and debugged application in order to find inefficiencies, reducing computation time by 60%.</li>
                             <li>Led a small team using the git version control system.</li>
-                            <li>Exercised public speaking and communication skills by reporting progress to supervisor and presenting to other teams.</li>
+                            <li>Presented progress to supervisor and other participating teams.</li>
                         </ul>
                     </div>
 

scss/style.scss

@@ -22,6 +22,15 @@ body {
     font-family: $text-font;
     line-height: 1.3em;
     font-size: 14px;
+
+    @media not print {
+        max-width: 215.9mm;
+        margin-top: 10px;
+        padding-top: 5px;
+        margin-left: auto;
+        margin-right: auto;
+        box-shadow: 0px 0px 5px #dadada;
+    }
 }
 
 header {
@@ -108,10 +117,18 @@ div.section-content {
     margin-left: 20px;
 }
 
-div.position-location {
+div.position, div.project-container {
+    margin-bottom: 15px;
+}
+
+div.position-location, div.project-quip {
     color: lighten($color-text, 30%);
 }
 
 section {
     page-break-inside: avoid;
+
+    &.page-padding {
+        padding-top: 15px;
+    }
 }