Add projects and columns.

This commit is contained in:
Danila Fedorin 2019-03-06 18:55:35 -08:00
parent f32d565975
commit eacbf2b438
3 changed files with 115 additions and 20 deletions

View File

@ -1,4 +1,8 @@
@import url("https://fonts.googleapis.com/css?family=EB+Garamond|Raleway"); @import url("https://fonts.googleapis.com/css?family=EB+Garamond|Raleway");
a {
color: #1dc868;
text-decoration: none; }
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
@ -9,11 +13,11 @@ body {
header { header {
text-align: center; text-align: center;
margin: auto; margin: auto;
margin-bottom: 20px; } margin-bottom: 10px; }
div.name { div.name {
font-size: 1.25em; font-size: 1.25em;
margin: 25px; margin: 20px;
font-family: "Raleway", serif; } font-family: "Raleway", serif; }
h1 { h1 {
@ -45,6 +49,27 @@ div.contact-content {
padding-left: 5px; padding-left: 5px;
font-weight: bold; } 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 { main {
margin: auto; margin: auto;
max-width: 90%; } max-width: 90%; }

View File

@ -24,23 +24,58 @@
</header> </header>
<main> <main>
<section> <div class="horizontal-list">
<h1>Education</h1> <section style="flex-basis: 55%;">
<div class="section-content"> <h1>Education</h1>
Oregon State University, Corvallis, OR <br> <div class="section-content">
<em>Bachelor of Science</em>, Computer Science, <br> Oregon State University, Corvallis, OR <br>
Expected June 2020 <br> <em>Bachelor of Science</em>, Computer Science, <br>
4.0 GPA Expected June 2020 <br>
</div> 4.0 GPA
</section> </div>
<section> </section>
<h1>Technical Skills</h1> <section>
<h1>Technical Skills</h1>
<div class="section-content"> <div class="section-content">
<em>Languages:</em> C, C++, Java, Kotlin, JavaScript, Haskell, Python, Haxe<br> <em>Languages:</em> C, C++, Java, Kotlin, JavaScript, Haskell, Python, Haxe<br>
<em>Operating Systems:</em> MacOS, Linux<br> <em>Operating Systems:</em> MacOS, Linux<br>
<em>Additional Skills:</em> Experience with compiler design, algorithm efficiency, <em>Additional Skills:</em> Experience with compiler design, algorithm efficiency,
low-level development.<br> 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> </div>
</section> </section>
<section> <section>

View File

@ -4,8 +4,14 @@ $text-font: 'Raleway';
$big-font: 'Raleway'; $big-font: 'Raleway';
$color-main: #36e281; $color-main: #36e281;
$color-secondary: darken($color-main, 10%); $color-secondary: darken($color-main, 10%);
$color-link: $color-secondary;
$color-text: black; $color-text: black;
a {
color: $color-link;
text-decoration: none;
}
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
@ -17,12 +23,12 @@ body {
header { header {
text-align: center; text-align: center;
margin: auto; margin: auto;
margin-bottom: 20px; margin-bottom: 10px;
} }
div.name { div.name {
font-size: 1.25em; font-size: 1.25em;
margin: 25px; margin: 20px;
font-family: $big-font, serif; font-family: $big-font, serif;
} }
@ -60,6 +66,35 @@ div.contact-content {
font-weight: bold; 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 { main {
margin: auto; margin: auto;
max-width: 90%; max-width: 90%;