diff --git a/pages/_includes/layout.njk b/pages/_includes/layout.njk
index 94397b2..925fdd7 100755
--- a/pages/_includes/layout.njk
+++ b/pages/_includes/layout.njk
@@ -4,7 +4,7 @@ username: Laureηt
 
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ username }}</title>
@@ -12,39 +12,46 @@ username: Laureηt
     <link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
     <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
     <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
-</head>
-<body>
-    
+  </head>
+  <body>
+
     <header>
-        <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
-        <span class="blink" style="display:inline;">_</span>
+      <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
+      <span class="blink" style="display:inline;">_</span>
     </header>
-    
+
     {{ content | safe }}
 
     <footer>
-        &copy; {% year %} {{ username }}
+      &copy; {% year %}
+      {{ username }}
     </footer>
 
     <script>
-        var elm_mouseover = document.querySelectorAll('[data-chaffle]');
-        var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
-  
-        Array.prototype.forEach.call(elm_mouseover, function (el) {
+      var elm_mouseover = document.querySelectorAll('[data-chaffle]');
+      var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
+
+      Array
+        .prototype
+        .forEach
+        .call(elm_mouseover, function (el) {
           var chaffle = new Chaffle(el)
           el.addEventListener('mouseover', function () {
             chaffle.init();
           });
         });
-  
-        Array.prototype.forEach.call(elm_onload, function (el) {
+
+      Array
+        .prototype
+        .forEach
+        .call(elm_onload, function (el) {
           var chaffle = new Chaffle(el)
           chaffle.init();
-          setInterval(function(){
+          setInterval(function () {
             chaffle.init();
           }, 10000)
-          });
+        });
     </script>
-</body>
+  </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/_includes/layout_eportfolio.njk b/pages/_includes/layout_eportfolio.njk
index d0b7ae1..98e26a5 100755
--- a/pages/_includes/layout_eportfolio.njk
+++ b/pages/_includes/layout_eportfolio.njk
@@ -4,7 +4,7 @@ username: Laureηt
 
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ username }}</title>
@@ -12,15 +12,15 @@ username: Laureηt
     <link rel="stylesheet" href="{{ '/css/blink.css' | url }}">
     <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | url }}">
     <script src="{{ '/javascript/chaffle.min.js' | url }}"></script>
-</head>
-<body>
-    
+  </head>
+  <body>
+
     <header style="margin-bottom: 0;">
-        <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
-        <span class="blink" style="display:inline;">_</span>
-        {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
+      <span data-chaffle-onload="" data-chaffle="en">{{ username }}</span>
+      <span class="blink" style="display:inline;">_</span>
+      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
     </header>
-    
+
     <hr style="margin-top: .5em;">
     {{ content | safe }}
 
@@ -30,28 +30,35 @@ username: Laureηt
     </div>
 
     <footer>
-        &copy; {% year %} {{ username }}
+        &copy; {% year %}
+      {{ username }}
     </footer>
 
     <script>
-        var elm_mouseover = document.querySelectorAll('[data-chaffle]');
-        var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
-  
-        Array.prototype.forEach.call(elm_mouseover, function (el) {
+      var elm_mouseover = document.querySelectorAll('[data-chaffle]');
+      var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
+
+      Array
+        .prototype
+        .forEach
+        .call(elm_mouseover, function (el) {
           var chaffle = new Chaffle(el)
           el.addEventListener('mouseover', function () {
             chaffle.init();
           });
         });
-  
-        Array.prototype.forEach.call(elm_onload, function (el) {
+
+      Array
+        .prototype
+        .forEach
+        .call(elm_onload, function (el) {
           var chaffle = new Chaffle(el)
           chaffle.init();
-          setInterval(function(){
+          setInterval(function () {
             chaffle.init();
           }, 10000)
-          });
+        });
     </script>
-</body>
+  </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/css/main.css b/pages/css/main.css
index 768b5a1..c5ad437 100755
--- a/pages/css/main.css
+++ b/pages/css/main.css
@@ -14,6 +14,8 @@ body {
   max-width: 40em;
   margin: 0 auto;
   padding: 1em;
+  animation: intro .3s both;
+  animation-delay: .15s;
 }
 
 body,
@@ -89,6 +91,7 @@ footer {
   body {
     font-size: 17px;
   }
+
   ol,
   ul {
     padding-left: 17px;
@@ -112,3 +115,14 @@ header>ul>li {
   display: inline;
   margin-right: .5em;
 }
+
+
+@keyframes intro {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
