+ Animated text

* Properly responsive banner image

themes/resume/layouts/index.html

@@ -23,10 +23,13 @@
 </nav>
 <div class="banner-container">
     <div class="fade-in-image">
-        <img class="img-fluid" src="/images/banner.jpg">
+        <img class="fluid" src="/images/banner.jpg">
+    </div>
+	<div class="headline">
+		<h1 class="headline-title reveal-text">{{.Site.Title}}</h1>
+		<p class="reveal-text" style="font-size: 2rem;">{{.Site.Params.Description}}</p>
+	</div>
 </div>
-    <h1 class="headline">{{.Site.Title}}</h1>
-    <h2 class="headline" style="bottom: 3%">{{.Site.Params.Description}}</h2>
 </div>
 </body>
 </html>

themes/resume/static/css/style.css

@@ -20,10 +20,10 @@ html {
 
 .fade-in-image {
   animation: fadeIn 3s;
-  -webkit-animation: fadeIn 5s;
+  -webkit-animation: fadeIn 3s;
-  -moz-animation: fadeIn 5s;
+  -moz-animation: fadeIn 3s;
-  -o-animation: fadeIn 5s;
+  -o-animation: fadeIn 3s;
-  -ms-animation: fadeIn 5s;
+  -ms-animation: fadeIn 3s;
 }
 @keyframes fadeIn {
   0% {opacity:0;}
@@ -50,15 +50,70 @@ html {
   100% {opacity:1;}
 }
 
+.fluid {
+	width: 100%;
+	max-height: 100vh;
+	object-fit: cover;
+	opacity: 0.6;
+}
 
 .headline {
     position: absolute;
-    font-weight: bold;
-    font-size: 5rem;
     bottom: 10%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
+
+.headline-title {
+	font-size: 4rem;
+	font-weight: bold;
+}
+
+.reveal-text {
+  animation: slideIn 1.2s;
+  animation-delay: 750ms;
+  color: transparent;
+  animation-fill-mode: forwards;
+
+  -webkit-animation: slideIn 1.2s;
+  -webkit-animation-delay: 750ms;
+  -webkit-animation-fill-mode: forwards;
+
+  -moz-animation: slideIn 1.2s;
+  -moz-animation-delay: 750ms;
+  -moz-animation-fill-mode: forwards;
+
+  -o-animation: slideIn 1.2s;
+  -o-animation-delay: 750ms;
+  -o-animation-fill-mode: forwards;
+
+  -ms-animation: slideIn 1.2s;
+}
+@keyframes slideIn {
+  0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
+  100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
+}
+
+@-moz-keyframes slideIn {
+  0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
+  100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
+}
+
+@-webkit-keyframes slideIn {
+  0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
+  100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
+}
+
+@-o-keyframes slideIn {
+  0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
+  100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
+}
+
+@-ms-keyframes slideIn {
+  0% {color: #dcdcdc; clip-path: inset(0 100% 0 0);}
+  100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
+}
+
 .banner-button {
     position: absolute;
     bottom: 16px;