From b502ab2216a2d7925c3b5180d8887fe424dc7adc Mon Sep 17 00:00:00 2001
From: Phuntsok Drak-pa <phundrak@phundrak.fr>
Date: Sun, 10 Feb 2019 17:07:46 +0100
Subject: [PATCH] now it looks like something

---
 index.html     | 295 ++++++++++++++++++++++++++++++++++++++-----------
 style/main.css | 165 +++++++++++++++++++++++----
 2 files changed, 374 insertions(+), 86 deletions(-)
diff --git a/index.html b/index.html
index 9868267..b1da547 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,18 @@
 
 <body>
     <div class="ribbon">
-        <h1>Lucien Cartier-Tilet</h1>
-        <h2>Étudiant Informatique</h2>
+        <div>
+            <div class="header-container">
+                <h1>Lucien Cartier-Tilet</h1>
+                <div class="highlight-h1"></div>
+            </div>
+        </div>
+        <div>
+            <div class="header-container">
+                <h2>Étudiant Informatique</h2>
+                <div class="highlight-h2"></div>
+            </div>
+        </div>
         <ul class="ribbon-links">
             <li><a href="#cont-xp">Expérience</a></li>
             <li><a href="#cont-skills">Compétences</a></li>
@@ -32,24 +42,45 @@
     <div class="sidebar">
         <img class="side-picture center" src="https://cdn.phundrak.fr/img/photo.jpg" />
         <div class="side-card">
-            <h4>Contact</h4>
+            <div>
+                <div class="header-container">
+                    <h4>Contact</h4>
+                    <div class="highlight-h4"></div>
+                </div>
+            </div>
             <div class="side-content">
                 <a href="mailto:phundrak@phundrak.fr">phundrak@phundrak.fr</a>
+                <p>+33.(0)6.83.90.56.89</p>
             </div>
         </div>
         <div class="side-card">
-            <h4>Situation Professionnelle</h4>
+            <div>
+                <div class="header-container">
+                    <h4>Situation Pro</h4>
+                    <div class="highlight-h4"></div>
+                </div>
+            </div>
             <p class="side-content">Étudiant, tuteur</p>
             <p class="side-content">Ouvert aux opportunités</p>
         </div>
         <div class="side-card">
-            <h4>Présentation</h4>
+            <div>
+                <div class="header-container">
+                    <h4>Présentation</h4>
+                    <div class="highlight-h4"></div>
+                </div>
+            </div>
             <p class="side-content">Actuellement étudiant depuis Septembre 2016 en licence d’informatique à l’Université Vincennes Saint-Denis (Paris VIII), je fût également directeur technique et développeur de voix de synthèse chez VoxWave de Septembre 2012 à Juillet 2018.</p>
             <p class="side-content">Mes centres d’intérêt sont variés, allant de la programmation à l’audio en passant par la linguistique ; je parle par ailleurs courrament en anglais en plus du français (ma langue maternelle).</p>
         </div>
         <div class="side-card">
-            <h4>Mes liens</h4>
-            <ul>
+            <div>
+                <div class="header-container">
+                    <h4>Mes liens</h4>
+                    <div class="highlight-h4"></div>
+                </div>
+            </div>
+            <ul class="side-links">
                 <li><a href="https://labs.phundrak.fr/phundrak">GitLab</a></li>
                 <li><a href="https://github.com/phundrak">Github</a></li>
                 <li><a href="https://langue.phundrak.fr/">Site de linguistique</a></li>
@@ -57,32 +88,55 @@
                 <li><a href="https://youtube.com/phundrak">YouTube</a></li>
                 <li><a href="https://instagram.com/phundrak">Instagram</a></li>
             </ul>
+            <br/>
         </div>
     </div>
     <div class="content">
-        <div id="cont-xp">
-            <div class="xp">
-                <h3>Expériences Professionnelles</h3>
-                <ul>
-                    <li class="list-lvl1">
-                        <h5>Directeur Technique, Développeur</h5>
-                        <p>VoxWave</p>
-                        <p>Septembre 2012 à Juillet 2018</p>
-                        <ul>
-                            <li>Programmation de voix de synthèse</li>
-                            <li>Recherches linguistiques</li>
-                            <li>Support utilisateur</li>
-                            <li>Formation de recrues</li>
-                        </ul>
-                    </li>
-                </ul>
+        <div id="cont-xp" class="card">
+            <div>
+                <div class="header-container">
+                    <h3>Expériences Professionnelles</h3>
+                    <div class="highlight-h3"></div>
+                </div>
             </div>
+            <ul class="card card-lvl2">
+                <li class="list-lvl1">
+                    <div>
+                        <div class="header-container">
+                            <h4>Directeur Technique, Développeur</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
+                    <p>VoxWave</p>
+                    <p>Septembre 2012 à Juillet 2018</p>
+                    <ul class="two-col-ul">
+                        <li>Programmation de voix de synthèse</li>
+                        <li>Recherches linguistiques</li>
+                        <li>Support utilisateur</li>
+                        <li>Formation de recrues</li>
+                    </ul>
+                </li>
+            </ul>
         </div>
-        <div>
-            <h3>Compétences</h3>
-            <ul>
+        <div id="cont-skills" class="card">
+
+            <div>
+                <div class="header-container">
+                    <h3>Compétences</h3>
+                    <div class="highlight-h3"></div>
+                </div>
+            </div>
+
+            <ul class="card card-lvl2">
                 <li class="list-lvl1" id="skills-cs">
-                    <h4>Informatique</h4>
+                    <div>
+                        <div class="header-container">
+                            <h4>Informatique</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <ul>
                         <li>
                             <p class="skill-name">Programmation</p>
@@ -92,7 +146,7 @@
                         </li>
                         <li>
                             <p class="skill-name">Outils de développement</p>
-                            <ul class="skill-list">
+                            <ul class="skill-list two-col-ul">
                                 <li>Emacs</li>
                                 <li>Git</li>
                                 <li>JetBrains CLion</li>
@@ -106,19 +160,21 @@
                         </li>
                         <li>
                             <p class="skill-name">Systèmes d’exploitation</p>
-                            <ul class="skill-list">
+                            <ul class="skill-list two-col-ul">
                                 <li>GNU/Linux (Arch Linux, Debian, Ubuntu)</li>
                                 <li>Microsoft Windows XP/7/8.1/10</li>
                             </ul>
                         </li>
                         <li>
                             <p class="skill-name">Synthèse vocale</p>
-                            <p class="skill-description">Développement de banques vocales pour VOCALOID3, Alter/Ego, Chipspeech, UTAU</p>
-                            <p class="skill-description">Utilisation de VOCALOID2/3/4, Alter/Ego, Chipspeech, UTAU, CeVIO Creative Studio</p>
+                            <ul class="skill-list two-col-ul">
+                                <li>Développement de banques vocales pour VOCALOID3, Alter/Ego, Chipspeech, UTAU</li>
+                                <li>Utilisation de VOCALOID2/3/4, Alter/Ego, Chipspeech, UTAU, CeVIO Creative Studio</li>
+                            </ul>
                         </li>
                         <li>
                             <p class="skill-name">Son</p>
-                            <ul class="skill-list">
+                            <ul class="skill-list two-col-ul">
                                 <li>FL Studio</li>
                                 <li>iZotope RX 4/5/6</li>
                                 <li>T-RackS CS</li>
@@ -137,8 +193,14 @@
                     </ul>
                 </li>
                 <li class="list-lvl1" id="skills-lang">
-                    <h4>Langues Parlées</h4>
-                    <ul>
+                    <div>
+                        <div class="header-container">
+                            <h4>Langues Parlées</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
+                    <ul class="two-col-ul">
                         <li>
                             <h5>Français</h5>
                             <p>Langue maternelle</p>
@@ -154,52 +216,93 @@
                     </ul>
                 </li>
                 <li class="list-lvl1" id="skills-other">
-                    <h4>Autres</h4>
+                    <div>
+                        <div class="header-container">
+                            <h4>Autres</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <ul>
                         <li>
                             <h5>Linguistique</h5>
-                            <p>Connaissances des concepts grammaticaux, de morphologie, de syntaxe et de phonétique</p>
+                            <p>Connaissances des concepts grammaticaux, de morphologie, de syntaxe et de phonétique.</p>
                         </li>
                         <li>
                             <h5>Création de langues</h5>
-                            <p>Des exemples peuvent être trouvés <a href="https://langue.phundrak.fr">sur mon site de linguistique</a></p>
+                            <p>Des exemples peuvent être trouvés <a href="https://langue.phundrak.fr">sur mon site de linguistique</a>.</p>
                         </li>
                         <li>
                             <h5>Création d’univers fictifs</h5>
-                            <p>Création d’un univers fictif complexe pour mon roman en cours d’écriture</p>
+                            <p>Création d’un univers fictif complexe pour mon roman en cours d’écriture.</p>
                         </li>
                     </ul>
                 </li>
             </ul>
         </div>
-        <div id="cont-training">
-            <h3>Formations</h3>
-            <ul>
+        <div id="cont-training" class="card">
+            <div>
+                <div class="header-container">
+                    <h3>Formations</h3>
+                    <div class="highlight-h3"></div>
+                </div>
+            </div>
+            <ul class="card card-lvl2">
                 <li class="list-lvl1">
-                    <h5>Licence d’Informatique</h5>
+                    <div>
+                        <div class="header-container">
+                            <h4>Licence d’Informatique</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <p>Université Vincennes-Saint-Denis (Paris VIII)</p>
                     <p>Depuis Septembre 2016</p>
                     <p class="train-description">Formation en programmation et sciences de l’informatique</p>
                 </li>
                 <li class="list-lvl1">
-                    <h5>Anglais LLCE</h5>
+                    <div>
+                        <div class="header-container">
+                            <h4>Anglais LLCE</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <p>Université Lumière Lyon 2</p>
                     <p>Septembre 2013 à Mai 2015</p>
                     <p class="train-description">Formation d’Anglais en fillière Langue, Littérature et Civilisations Étrangères (LLCE)</p>
                 </li>
                 <li class="list-lvl1">
-                    <h5>Baccalauréat</h5>
+                    <div>
+                        <div class="header-container">
+                            <h4>Baccalauréat</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <p>Lycée de la Plaine de l’Ain</p>
                     <p>Septembre 2010 à Juillet 2013</p>
                     <p class="train-description">Baccalauréat série Scientifique spécialisation Sciences de l’Ingénieur, mention bien</p>
                 </li>
             </ul>
         </div>
-        <div id="cont-hobbies">
-            <h3>Loisirs</h3>
-            <ul>
+        <div id="cont-hobbies" class="card">
+            <div>
+                <div class="header-container">
+                    <h3>Loisirs</h3>
+                    <div class="highlight-h3"></div>
+                </div>
+            </div>
+
+            <ul class="card card-lvl2">
                 <li class="list-lvl1">
-                    <h5>Écriture</h5>
+                    <div>
+                        <div class="header-container">
+                            <h4>Écriture</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <ul>
                         <li>Écriture de roman, de nouvelles et de scénarios de jeux de rôles</li>
                         <li>Constructions d’univers fictifs</li>
@@ -207,14 +310,26 @@
                     </ul>
                 </li class="list-lvl1">
                 <li class="list-lvl1">
-                    <h5>Musique</h5>
+                    <div>
+                        <div class="header-container">
+                            <h4>Musique</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <ul>
                         <li>Utilisation de voix de synthèse</li>
                         <li>Mixage et mastering audio</li>
                     </ul>
                 </li>
                 <li class="list-lvl1">
-                    <h5>Lectures</h5>
+                    <div>
+                        <div class="header-container">
+                            <h4>Lectures</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <ul>
                         <li>Livres de programmation (actuellement <i>Clean Code</i> par Robert C. Martin)</li>
                         <li>Livres de linguistique (principalement par Mark Rosenfelder)</li>
@@ -222,7 +337,13 @@
                     </ul>
                 </li>
                 <li class="list-lvl1">
-                    <h5>Jeux</h5>
+                    <div>
+                        <div class="header-container">
+                            <h4>Jeux</h4>
+                            <div class="highlight-h4"></div>
+                        </div>
+                    </div>
+
                     <ul>
                         <li>RPG (série des Elder Scrolls, ...)</li>
                         <li>RTS (Hearts of Iron IV)</li>
@@ -231,38 +352,80 @@
                 </li>
             </ul>
         </div>
-        <div id="cont-portfolio">
-            <h3>Portfolio</h3>
-            <ul>
+        <div id="cont-portfolio" class="card">
+            <div>
+                <div class="header-container">
+                    <h3>Portfolio</h3>
+                    <div class="highlight-h3"></div>
+                </div>
+            </div>
+
+            <ul class="card card-lvl2">
                 <li class="list-lvl1">
-                    <a class="port-proj-link" href="https://dict.phundrak.fr/">ConlangDict</a>
-                    <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/dictionary-conlangs">source</a>
+                    <div>
+                        <div class="header-container">
+                            <h4>ConlangDict</h4>
+                            <div class="highlight-h4"></div>
+                        </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>
                 </li>
                 <li class="list-lvl1">
-                    <a class="port-proj-link" href="https://langue.phundrak.fr/">Langues Construites de P’undrak</a>
-                    <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/langue-phundrak-fr">source</a>
+                    <div>
+                        <div class="header-container">
+                            <h4>Langues Construites de P’undrak</h4>
+                            <div class="highlight-h4"></div>
+                        </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>
                 </li>
                 <li class="list-lvl1">
-                    <a class="port-proj-link" href="https://phundrak.fr/git">Tutoriel sarcastique sur Git</a>
-                    <a class="port-proj-src" href="https://github.com/Phundrak/tutoriel-git">source</a>
+                    <div>
+                        <div class="header-container">
+                            <h4>Tutoriel sarcastique sur Git</h4>
+                            <div class="highlight-h4"></div>
+                        </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>
                 </li>
                 <li class="list-lvl1">
-                    <a class="port-proj-link" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">Chat en réseau</a>
-                    <a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">source</a>
+                    <div>
+                        <div class="header-container">
+                            <h4>Chat en réseau</h4>
+                            <div class="highlight-h4"></div>
+                        </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>
                 </li>
                 <li class="list-lvl1">
-                    <a class="port-proj-link" href="http://gl4d.api8.fr/FR/">GL4Dummies</a>
-                    <a class="port-proj-src" href="https://github.com/noalien/GL4Dummies">source</a>
+                    <div>
+                        <div class="header-container">
+                            <h4>GL4Dummies</h4>
+                            <div class="highlight-h4"></div>
+                        </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>
                 </li>
                 <li class="list-lvl1">
-                    <a class="port-proj-link" href="https://github.com/GitSquared/edex-ui">eDEX UI</a>
-                    <a class="port-proj-src" href="https://github.com/GitSquared/edex-ui">source</a>
+                    <div>
+                        <div class="header-container">
+                            <h4>eDEX UI</h4>
+                            <div class="highlight-h4"></div>
+                        </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>
                 </li>
             </ul>
         </div>
diff --git a/style/main.css b/style/main.css
index dc0c2c4..6bd3ec8 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
+@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&subset=latin-ext,vietnamese');
+
 body {
     display: grid;
     grid-template-areas:
@@ -8,14 +11,28 @@ body {
 
 a {
     text-decoration: none;
+    color: #2c3e50;
+    text-decoration: none;
+    font-style: italic;
+    border-bottom: 5px solid #2c3e50;
+    transition: color 0.2s, border-bottom-color 0.2s;
 }
 
+
 a:hover {
-    text-decoration: underline;
+    color: #8e44ad;
+    border-bottom-color: #8e44ad;
+    transition: color 0.4s, border-bottom-color 0.4s;
 }
 
-.sidebar, .content {
-    /* margin: 10px; */
+h1,
+h2 {
+    margin: 0;
+    padding: 0 20px;
+}
+
+.sidebar,
+.content {
     padding: 10px;
     background-color: #bdc3c7;
     color: black;
@@ -27,30 +44,20 @@ a:hover {
     margin-right: auto;
 }
 
-.list-lvl1, .list-lvl1 a {
-    background-color: #34495e;
-    color: #ecf0f1;
-}
-
 /* ribbon ********************************************************************/
 
 .ribbon {
     grid-area: ribbon;
     padding: 0;
     margin: 0;
-    /* background: #2c3e50; */
     background-color: #2c3e50;
 }
 
-.ribbon, .ribbon a {
+.ribbon,
+.ribbon a {
     color: #ecf0f1;
 }
 
-h1, h2 {
-    margin: 0;
-    padding: 0 20px;
-}
-
 .ribbon-links {
     display: table;
     list-style-type: none;
@@ -60,6 +67,7 @@ h1, h2 {
     width: 100%;
     white-space: nowrap;
 }
+
 .ribbon-links li {
     display: table-cell;
     float: left;
@@ -75,7 +83,7 @@ h1, h2 {
 
 .sidebar {
     grid-area: sidebar;
-    margin: 10px 5px 10px 0;
+    margin: 10px 5px 10px 10px;
     width: 300px;
 }
 
@@ -88,7 +96,8 @@ h1, h2 {
     background-color: #ecf0f1;
 }
 
-.side-card h4, .side-content {
+.side-card h4,
+.side-content {
     padding: 10px 1em;
     margin: 0;
 }
@@ -97,15 +106,131 @@ p.side-content {
     padding: 0.5em 1em;
 }
 
+.side-links {
+    line-height: 1.5em;
+}
+
 /* content *******************************************************************/
 
 .content {
     grid-area: content;
-    margin: 10px 0 10px 5px;
+    margin: 10px 10px 10px 5px;
 }
 
-.content div {
+.card {
     background-color: #ecf0f1;
     padding: 10px;
-    margin: 10px;
+    margin: 40px 10px;
+    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
+    transition: box-shadow 0.2s;
+}
+
+.card:hover {
+    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.7);
+    transition: box-shadow 0.3s;
+}
+
+.card-lvl2 {
+    margin: 10px 10px 20px 20px;
+    padding-left: 0;
+    background-color: #bdc3c7;
+}
+
+.list-lvl1,
+.list-lvl1 a {
+    background-color: #bdc3c7;
+    list-style: none;
+}
+
+.list-lvl1 {
+    padding: 10px;
+}
+
+.list-lvl1 h4 {
+    margin-block-start: 0.5em;
+    margin-block-end: 1em;
+}
+
+.two-col-ul {
+    collumns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+}
+
+/* highlights ****************************************************************/
+h1,h2,h3,h4,h5 {
+    font-family: 'Alfa Slab One', serif;
+    font-weight: 300;
+    margin: 0;
+    z-index: 20;
+    position: relative;
+}
+
+h1 {
+    font-size: 4em;
+}
+
+h2 {
+    font-size: 3em;
+}
+
+h3 {
+    font-size: 2em;
+}
+
+h4 {
+    font-size: 1.2em;
+}
+
+.header-container {
+    display: inline-block;
+}
+
+.highlight-h1, .highlight-h2, .highlight-h3, .highlight-h4, .highlight-h5 {
+    position: relative;
+    left: -10px;
+    width: 120%;
+    max-width: 90vw;
+    z-index: 10;
+}
+
+.highlight-h1 {
+    background-color: #1abc9c !important;
+    height: 48px;
+    top: -48px;
+}
+
+.highlight-h2 {
+    background-color: #f1c40f !important;
+    height: 34px;
+    top: -34px;
+}
+
+.highlight-h3 {
+    background-color: #2ecc71 !important;
+    height: 24px;
+    top: -24px;
+}
+
+.highlight-h4 {
+    background-color: #e67e22 !important;
+    height: 24px;
+    top: -26px;
+    left: 0;
+    width: 110%;
+}
+
+.list-lvl1 .highlight-h4 {
+    background-color: #e67e22 !important;
+    height: 24px;
+    top: -34px;
+    left: 0;
+    left: -10px;
+    width: 120%;
+}
+
+.highlight-h5 {
+    background-color: #9b59b6 !important;
+    height: 12px;
+    top: -12px;
 }
