Add animation to text presentation

2 files changed, 18 insertions, 3 deletions

diff --git a/left.m4 b/left.m4
index 205f251..54656e3 100644
--- a/left.m4
+++ b/left.m4
@@ -4,7 +4,7 @@ include(s/imgM/lt.svg)
 <aside id="side-bar">
 include(s/imgM/acheLogo.svg)
   <h2> Ache </h2>
-  <div id="desc"><div id="desc_intro">Éternel étudiant en Math-Info.<br><span class="about">Autodidacte passionné,<br>désormais ingénieur.</span></div><br>  <span class="about">GNU\Linux, C, C++, Python, Math, autohébergement, décentralisation, P2P, commun, ... <br> </span><br></div>
+  <div id="desc"><div id="desc_intro">Éternel étudiant en Math-Info.<br><span class="about">Autodidacte passionné,<br><div class="type_wrap"><span class="type">désormais ingénieur.</span></div></span></div><br>  <span class="about">GNU\Linux, C, C++, Python, Math, autohébergement, décentralisation, P2P, commun, ... <br> </span><br></div>
   <nav>
     <ul>
         <li class="sommaire_blien"><a href="/" title="L'accueil">home</a>
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index c21c583..8c589f9 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -42,8 +42,6 @@
     margin: 0 auto;
     display: block;
   }
-
-
   @media #{$gt-gsm} {
     position: fixed;
     top: 0;
@@ -82,6 +80,23 @@
 .about {
   font-size: 0.8em;
   color: #666;
+  font-family: monospace;
+  align-items: center;
+  justify-content: center;
+}
+.about > .type_wrap {
+  display: inline-flex;
+}
+.type_wrap > .type {
+  animation: typing 1.5s steps(22);
+  width: 20ch;
+  white-space: nowrap;
+  overflow: hidden;
+}
+@keyframes typing {
+  0% {
+    width: 0;
+  }
 }
 .about_bar {
   display: inline-block;