feat: hook section complete with new animation

Author: cd-bash

src/components/logo/styles.css

@@ -11,6 +11,7 @@
     }
 
     p {
+        margin-top: 9px;
         text-align: center;
         text-transform: uppercase;
         font-family: "Handjet", sans-serif;

src/components/top-nav/index.ts

@@ -0,0 +1,20 @@
+type NavLinkItem = [
+    name: string,
+    path: string,
+]
+
+const navLinks: NavLinkItem[] = [
+    ['Side Quests', '/projects'],
+    ['About', '/about'],
+    ['Logs', '/logs'],
+    ['Contact', '/contact'],
+]
+
+export function buildTopNav() {
+    const navBox = document.createElement("div");
+    const ul = document.createElement("ul");
+
+
+
+
+}

src/views/home.ts

@@ -14,8 +14,6 @@ export function homeView() {
   page.appendChild(hookSection());
   page.appendChild(philosophySection());
 
-
-
   return page;
 }
 
@@ -26,8 +24,8 @@ function hookSection() {
   const videoBg = createVideoBackground();
   const wrapper = createWrapper();
   const article = document.createElement('article');
-  const hookTitle = writeTitle("h1", "When was the last time you finished a game?");
-  const hookText = writeParagraph("CD-Labs’ initiative is to design complete gaming experiences for busy lives.");
+  const hookTitle = writeTitle("h1", "When was the last time you <span class='highlight'>finished</span> a game?");
+  const hookText = writeParagraph("CD-Labs’ initiative is to design <b>complete</b> gaming experiences for <b>busy lives</b>.");
   const arrowDownBtn = arrowButton();
 
   hook.className = 'hook';

src/views/styles.css

@@ -22,6 +22,13 @@
         .hook {
             h1, p {
                 text-shadow: 0 4px 55px rgba(0, 0, 0, 0.65);
+                max-width: 1160px;
+
+                .highlight {
+                    text-decoration: underline;
+                    text-decoration-color: #3BFFC5;
+                    text-underline-offset: 20px;
+                }
             }
 
             article {

src/views/utils/assets/cd-labs-home-page-hook-animation.mp4

@@ -1,6 +1,6 @@
 import {BackgroundChoice, threeBackground} from "../../components/three-background";
-import HOME_VIDEO_WEBM from './assets/cd-anim.webm';
-import HOME_VIDEO_MP4 from './assets/cd-anim.mp4';
+import HOME_VIDEO_WEBM from './assets/cd-labs-home-page-hook-animation.webm';
+import HOME_VIDEO_MP4 from './assets/cd-labs-home-page-hook-animation.mp4';
 
 export function createThreeBackground(choice: BackgroundChoice) {
     const viewBox = document.getElementById('view-box')!;
@@ -17,11 +17,20 @@ export function createThreeBackground(choice: BackgroundChoice) {
 export function createVideoBackground() {
     const background = document.createElement('video');
     background.className = 'video-background';
-    background.src = HOME_VIDEO_WEBM;
-    background.src = HOME_VIDEO_MP4;
     background.autoplay = true;
     background.loop = true;
     background.muted = true;
 
+    const sourceWebm = document.createElement('source');
+    sourceWebm.src = HOME_VIDEO_WEBM;
+    sourceWebm.type = 'video/webm';
+
+    const sourceMp4 = document.createElement('source');
+    sourceMp4.src = HOME_VIDEO_MP4;
+    sourceMp4.type = 'video/mp4';
+
+    background.appendChild(sourceWebm);
+    background.appendChild(sourceMp4);
+
     return background;
 }

src/views/utils/assets/cd-labs-home-page-hook-animation.webm

@@ -6,14 +6,14 @@
 
 export function writeTitle(importance: string,text: string) {
     const title = document.createElement(importance);
-    title.textContent = text;
+    title.innerHTML = text;
 
     return title;
 }
 
 export function writeParagraph(text: string) {
     const paragraph = document.createElement("p");
-    paragraph.textContent = text;
+    paragraph.innerHTML = text;
 
     return paragraph;
 }
@@ -22,7 +22,7 @@ export function writeLink(text: string, href: string) {
     const link = document.createElement('a');
     link.className = "link";
     link.href = href;
-    link.textContent = text;
+    link.innerHTML = text;
     link.target = "_blank";
 
     return link;