From 2727102fa6fa40359209657dc6e3ff21a0b34a56 Mon Sep 17 00:00:00 2001
From: Phuntsok Drak-pa <phundrak@phundrak.fr>
Date: Thu, 14 Feb 2019 03:44:52 +0100
Subject: [PATCH] Added portfolio element, updated style

---
 index.html     | 89 ++++++++++++++++++++++++++++++--------------------
 style/main.css |  7 +++-
 2 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 52414fc..42935c6 100644
--- a/index.html
+++ b/index.html
@@ -107,8 +107,8 @@
                     <div class="highlight-h3"></div>
                 </div>
             </div>
-            <ul class="card card-lvl2">
-                <li class="list-lvl1">
+            <ul>
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Directeur Technique, Développeur</h4>
@@ -141,8 +141,8 @@
                 </div>
             </div>
 
-            <ul class="card card-lvl2">
-                <li class="list-lvl1" id="skills-cs">
+            <ul>
+                <li class="list-lvl1 card card-lvl2" id="skills-cs">
                     <div>
                         <div class="header-container">
                             <h4>Informatique</h4>
@@ -235,7 +235,7 @@
                         </li>
                     </ul>
                 </li>
-                <li class="list-lvl1" id="skills-lang">
+                <li class="list-lvl1 card card-lvl2" id="skills-lang">
                     <div>
                         <div class="header-container">
                             <h4>Langues Parlées</h4>
@@ -276,7 +276,7 @@
                         </li>
                     </ul>
                 </li>
-                <li class="list-lvl1" id="skills-other">
+                <li class="list-lvl1 card card-lvl2" id="skills-other">
                     <div>
                         <div class="header-container">
                             <h4>Autres</h4>
@@ -326,8 +326,8 @@
                     <div class="highlight-h3"></div>
                 </div>
             </div>
-            <ul class="card card-lvl2">
-                <li class="list-lvl1">
+            <ul>
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Licence d’Informatique</h4>
@@ -343,7 +343,7 @@
                     <p>Depuis Septembre 2016</p>
                     <p class="train-description">Formation en programmation et sciences de l’informatique</p>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Anglais LLCE</h4>
@@ -359,7 +359,7 @@
                     <p>Septembre 2013 à Mai 2015</p>
                     <p class="train-description">Formation d’Anglais en filière Langue, Littérature et Civilisations Étrangères (LLCE)</p>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Baccalauréat</h4>
@@ -385,8 +385,8 @@
                 </div>
             </div>
 
-            <ul class="card card-lvl2">
-                <li class="list-lvl1">
+            <ul>
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Écriture</h4>
@@ -399,8 +399,8 @@
                         <li>Constructions d’univers fictifs</li>
                         <li>Construction de langues</li>
                     </ul>
-                </li class="list-lvl1">
-                <li class="list-lvl1">
+                </li>
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Musique</h4>
@@ -413,7 +413,7 @@
                         <li>Mixage et mastering audio</li>
                     </ul>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Lectures</h4>
@@ -427,7 +427,7 @@
                         <li>Tolkien (Seigneur des Anneaux, Silmarillion, La Chute de Gondolin, ...)</li>
                     </ul>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Jeux</h4>
@@ -451,8 +451,20 @@
                 </div>
             </div>
 
-            <ul class="card card-lvl2">
-                <li class="list-lvl1">
+            <ul>
+                <li class="list-lvl1 card card-lvl2">
+                    <div>
+                        <div class="header-container">
+                            <h4>Output-VT100</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+                    <p>Crate (bibliothèque) Rust permettant l’activation des caractères échapés ANSI dans les shells CMD et PowerShell de Windows.</p>
+                    <p>
+                        <a class="port-proj-link" href="https://crates.io/crates/output_vt100">(lien)</a>
+                        <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/output-vt100-rs">(source)</a></p>
+                </li>
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>ConlangDict</h4>
@@ -460,10 +472,11 @@
                         </div>
                     </div>
                     <p>Dictionnaire bilingue en ligne entre langues naturelles et langues construites, le serveur est codé en Python basé sur Django&nbsp;2.</p>
-                    <a class="port-proj-link" href="https://dict.phundrak.fr/">(lien)</a>
-                    <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/dictionary-conlangs">(source)</a>
+                    <p>
+                        <a class="port-proj-link" href="https://dict.phundrak.fr/">(lien)</a>
+                        <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/dictionary-conlangs">(source)</a></p>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Langues Construites de P’undrak</h4>
@@ -471,10 +484,11 @@
                         </div>
                     </div>
                     <p>Site web de linguistique contenant mes fichiers de travail sur mes langues construites. Écrit en org-mode, exporté en HTML et PDF via Emacs.</p>
-                    <a class="port-proj-link" href="https://langue.phundrak.fr/">(lien)</a>
-                    <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/langue-phundrak-fr">(source)</a>
+                    <p>
+                        <a class="port-proj-link" href="https://langue.phundrak.fr/">(lien)</a>
+                        <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/langue-phundrak-fr">(source)</a></p>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Tutoriel sarcastique sur Git</h4>
@@ -482,10 +496,11 @@
                         </div>
                     </div>
                     <p>Tutoriel sarcastique sur Git, écrit pour débutants souhaitant démarrer avec une utilisation de Git pour gérer leurs projets. Écrit en org-mode, exporté en HTML et PDF via Emacs.</p>
-                    <a class="port-proj-link" href="https://phundrak.fr/git">(lien)</a>
-                    <a class="port-proj-src" href="https://github.com/Phundrak/tutoriel-git">(source)</a>
+                    <p>
+                        <a class="port-proj-link" href="https://phundrak.fr/git">(lien)</a>
+                        <a class="port-proj-src" href="https://github.com/Phundrak/tutoriel-git">(source)</a></p>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>Chat en réseau</h4>
@@ -493,10 +508,11 @@
                         </div>
                     </div>
                     <p>Projet d’université de chat en ligne se lançant dans un terminal. Écrit en Rust.</p>
-                    <a class="port-proj-link" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">(lien)</a>
-                    <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">(source)</a>
+                    <p>
+                        <a class="port-proj-link" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">(lien)</a>
+                        <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">(source)</a></p>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>GL4Dummies</h4>
@@ -504,10 +520,11 @@
                         </div>
                     </div>
                     <p>Participation au développement de GL4Dummies, un framework en C pour faciliter le développement en C avec OpenGL pour débutants en programmation graphique 2D et 3D.</p>
-                    <a class="port-proj-link" href="http://gl4d.api8.fr/FR/">(lien)</a>
-                    <a class="port-proj-src" href="https://github.com/noalien/GL4Dummies">(source)</a>
+                    <p>
+                        <a class="port-proj-link" href="http://gl4d.api8.fr/FR/">(lien)</a>
+                        <a class="port-proj-src" href="https://github.com/noalien/GL4Dummies">(source)</a></p>
                 </li>
-                <li class="list-lvl1">
+                <li class="list-lvl1 card card-lvl2">
                     <div>
                         <div class="header-container">
                             <h4>eDEX UI</h4>
@@ -515,8 +532,10 @@
                         </div>
                     </div>
                     <p>Participation au développement d’eDEX UI, une interface desktop futuristique.</p>
-                    <a class="port-proj-link" href="https://github.com/GitSquared/edex-ui">(lien)</a>
-                    <a class="port-proj-src" href="https://github.com/GitSquared/edex-ui">(source)</a>
+                    <p>
+                        <a class="port-proj-link" href="https://github.com/GitSquared/edex-ui">(lien)</a>
+                        <a class="port-proj-src" href="https://github.com/GitSquared/edex-ui">(source)</a>
+                    </p>
                 </li>
             </ul>
         </div>
diff --git a/style/main.css b/style/main.css
index c5f01b0..1154274 100644
--- a/style/main.css
+++ b/style/main.css
@@ -166,7 +166,7 @@ p.side-content {
 }
 
 .card-lvl2 {
-    margin: 10px 10px 20px 20px;
+    margin: 10px 20px 20px 20px;
     padding-left: 0;
     background-color: #2c3e50;
     color: #ecf0f1;
@@ -193,6 +193,11 @@ p.side-content {
     -moz-columns: 2;
 }
 
+.content > .card > ul {
+    padding: 0;
+
+}
+
 /* highlights ****************************************************************/
 h1,h2,h3,h4,h5 {
     font-family: 'Alfa Slab One', serif;