draft: projects

.gitignore

@@ -1 +1,2 @@
 public/
+static/processed_images

sass/style.scss

@@ -1,5 +1,6 @@
 $primary-color: #505050;
 $primary-color-dark: #282828;
+$primary-color-darker: #212121;
 $primary-color-light: #7c7c7c;
 
 $secondary-color: #333f58;
@@ -9,6 +10,7 @@ $secondary-color-dark: #09192f;
 $background-color: #121212;
 $text-color: #e2e2e2;
 $panel-color: $primary-color-dark;
+$panel-color-dark: $primary-color-darker;
 $toolbar-color: $primary-color;
 
 @font-face {
@@ -341,6 +343,49 @@ article.post .post-date {
   margin-bottom: 1em;
 }
 
+.project-cards {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.project-card {
+  width: 100%;
+  background-color: $panel-color-dark;
+  margin: 0.75em;
+  padding: 0 0.75em;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+@media only screen and (min-width: 600px) {
+  .project-card {
+    width: 45%;
+  }
+}
+
+@media only screen and (min-width: 800px) {
+  .project-card {
+    width: 30%;
+  }
+}
+
+.project-card:hover {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.project-card a {
+  text-decoration: none;
+}
+
+.project-card h2 {
+  text-align: center;
+}
+
+.project-card img {
+  max-width: 100%;
+}
+
 /* CV */
 
 .cv.panel {

templates/index.html

@@ -24,11 +24,23 @@ Curriculum Vitae
 </a>
 </div>
 <div class="link">
+<a href="{{ get_url(path='/projects') }}">
+{{ load_data(path='static/bug.svg') | safe }}
+Projects
+</a>
+</div>
+<div class="link">
 <a href="{{ get_url(path='/blog') }}">
 {{ load_data(path='static/post.svg') | safe }}
 Blog
 </a>
 </div>
+<div class="link">
+<a href="{{ get_url(path='/gallery') }}">
+{{ load_data(path='static/image.svg') | safe }}
+Photos
+</a>
+</div>
 </div>
 </section>
 {% endblock %}