Ice video bg animation

Author: James Harris

assets/css/app.css

@@ -235,12 +235,39 @@ main section.skills .skills-chart text {
 }
 
 main header {
-	padding: 1em;
+    position: relative;
 	grid-area: header;
-	text-align: center;
-	background-color: var(--colors-dark-grey);
 	border-bottom-right-radius: 2px;
 	border-bottom-left-radius: 2px;
+    background: var(--colors-dark-grey);
+}
+
+main header .head-container {
+    padding: 1em;
+    text-align: center;
+    z-index: 1;
+}
+
+#video-bg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    opacity: 0.3;
+
+    animation: animate-video 23s ease-in-out infinite;
+}
+
+@keyframes animate-video {
+    0% {opacity: 0;}
+    10% {opacity: 0.1;}
+    20% {opacity: 0.5;}
+    60% {opacity: 0.3;}
+    80% {opacity: 0.1;}
+    100% {opacity: 0.01;}
 }
 
 main header h1 {

assets/video/video-bg.mp4

@@ -122,14 +122,19 @@
 
 	<main>
 		<header>
-			<img src="/assets/svg/logo.svg" alt="JH" width="100">
-
-			<h1>
-				<span>James</span>
-				<span>Harris</span>
-			</h1>
-			<hr class="thin">
-			<h2>Web Architect UX</h2>
+            <video id="video-bg" muted autoplay loop>
+                <source src="/assets/video/video-bg.mp4" type="video/mp4">
+            </video>
+            <div class="head-container">
+                <img src="/assets/svg/logo.svg" alt="JH" width="100">
+
+                <h1>
+                    <span>James</span>
+                    <span>Harris</span>
+                </h1>
+                <hr class="thin">
+                <h2>Web Architect UX</h2>
+            </div>
 		</header>
 
 		<h3>MY STORY</h3>