Add projects - protfolio

_includes/_headbar.liquid

@@ -11,8 +11,9 @@
   </nav>
   <nav>
     <ul class="pages-menu">
-      <li><a href="/"><h2>Articles</h2></a></li> 
-      <li><a href="/about.html"><h2>About me</h2></a></li> 
+      <li><a href="/"><h2 {% if page.slug == "index" %} class="active-page" {% endif %}>Articles</h2></a></li> 
+      <li><a href="/projects.html"><h2 {% if page.slug == "projects" %} class="active-page" {% endif %}>Projects</h2></a></li> 
+      <li><a href="/about.html"><h2{% if page.slug == "about" %} class="active-page" {% endif %}>About me</h2></a></li> 
     </ul>
   </nav>
 </header>

about.liquid

-title: "@MNivoliez blog: About me"
+title: "@MNivoliez Blog: About me"
 layout: default.liquid
 data:
   lang: en

projects.liquid

+title: "@MNivoliez Blog: Projects"
+layout: default.liquid
+data:
+  lang: en
+---
+<article class="project-card">
+  <iframe class="project-cover" src="https://www.youtube.com/embed/RNpgW7T4oU8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+  <div class="project-description">
+    <h2 class="project-title">Koda, Kiyomori's Guardian</h2>
+    
+    <p>Koda Kiyomori's Guardian is a game I am working on as programmer with a team of 17 people in the scope of our formation at Gamagora. The project is 3.5 months old and is Unity based.</p>
+  </div>
+</article>
+
+<article class="project-card">
+  <img class="project-cover" src="https://raw.githubusercontent.com/mnivoliez/GGS-2018-Magnet/master/screenshot.png" alt="Crazy Orbit screenshot">
+  <div class="project-description">
+    <h2 class="project-title">Crazy Orbit</h2>
+    
+    <p>Crazy Orbit is a game made with Unity during the Global Game Jam 2018. I was one of the two programmer on this project.</p>
+    <a class="project-readmore" href="https://github.com/mnivoliez/GGS-2018-Magnet">Code<i style="vertical-align: bottom;" class="material-icons">code</i></a>
+  </div>
+</article>
+
+<article class="project-card">
+  <img class="project-cover" src="/images/raytracer_cover.png" alt="Raytracer render">
+  <div class="project-description">
+    <h2 class="project-title">Raytracer</h2>
+    
+    <p>This project was realized with Rust in the scope of the rendering course at Gamagora.</p>
+    <a class="project-readmore" href="https://gitlab.deep-nope.me/mnivoliez/raytracer">Code<i style="vertical-align: bottom;" class="material-icons">code</i></a>
+  </div>
+</article>
+
+<article class="project-card">
+  <iframe class="project-cover" src="https://www.youtube.com/embed/PWygfnB7oVw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+  <div class="project-description">
+    <h2 class="project-title">Boids</h2>
+    
+    <p>This project was realized with Rust in the scope of the complex system course at Gamagora. It is simple inmplementation of boids using GGEZ.</p>
+    <a class="project-readmore" href="https://gitlab.deep-nope.me/mnivoliez/courses-gamagora/tree/master/systeme_complexe/boids">Code<i style="vertical-align: bottom;" class="material-icons">code</i></a>
+  </div>
+</article>
+

style.css

@@ -64,6 +64,9 @@ nav a h2 {
 nav a h2:hover {
   border-bottom: 3px solid var(--text-color);
 }
+.active-page {
+  border-bottom: 3px solid var(--text-color);
+}
 
 @media (max-width: 41em) {
   header nav {
@@ -139,4 +142,60 @@ footer {
   align-self: flex-end;
 }
 
+.project-card {
+  border-radius: 5px;
+  display: flex;
+  flex-direction: row;
+  padding: 8px;
+  max-height: 200px;
+}
+
+.project-card:nth-of-type(n+1) {
+  margin-bottom: 5px;
+}
+
+.project-card:nth-of-type(2n) {
+  flex-flow: row-reverse;
+}
+
+.project-cover {
+  max-width: 40%;
+}
+
+.project-card:nth-of-type(2n + 1) > .project-cover {
+  border-radius: 5px 0px 0px 5px;
+}
+
+.project-card:nth-of-type(2n) > .project-cover {
+  border-radius: 0px 5px 5px 0px;
+}
+
+.project-description {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.project-card:nth-of-type(2n) > .project-description {
+  padding-right: 10px;
+}
+
+.project-card:nth-of-type(2n + 1) > .project-description {
+  padding-left: 20px;
+}
+
+.project-title {
+  text-decoration: none;
+  color: var(--title-color) !important; 
+}
 
+.project-readmore {
+  color: var(--text-color) !important;
+  text-decoration: none;
+  padding: 2px;
+  justify-content: center;
+  border-radius: 2px;
+  display: inline-block;
+  background-color: rgb(76, 175, 80);
+  align-self: flex-end;
+}