feat: [#91] content structure for the home page

Author: cd-bash

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

@@ -0,0 +1,22 @@
+import {HomePageContentStructure} from "../../views";
+
+import HOOK_VIDEO_WEBM from './assets/cd-labs-home-page-hook-animation.webm';
+import HOOK_VIDEO_MP4 from './assets/cd-labs-home-page-hook-animation.mp4';
+
+import PHILOSOPHY_BG from './assets/philosophy-background-temp.png';
+
+export const homePageContent: HomePageContentStructure = {
+    hookHeading: "When was the last time you <span class='highlight'>finished</span> a game?",
+    hookBody: "CD-Labs’ initiative is to design <b>complete</b> gaming experiences for <b>busy lives</b>.",
+    hookVideoWebm: HOOK_VIDEO_WEBM,
+    hookVideoMp4: HOOK_VIDEO_MP4,
+
+    philosophy: {
+        sectionBG: PHILOSOPHY_BG,
+        header: "Games that respect <span class='highlight'>your time.</span>",
+        paragraphs: [
+            "I believe gaming should be an escape, not a second job. But as games have gotten bigger and more demanding, it's become harder to find the time to even finish one.",
+            "That's why I started cd-labs. My goal is to deliver compact, complete gaming experiences that honor your schedule. Each game is a focused, handcrafted quest meant to be enjoyed in a single sitting or over a few evenings.",
+        ]
+    }
+}

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

@@ -1,8 +1,20 @@
-import {arrowButton, createVideoBackground, createWrapper, writeParagraph, writeTitle} from "./utils";
+import './styles.css';
+import {arrowButton, createVideoBackground, createWrapper, writeParagraph, writeTitle} from "../utils";
+import {homePageContent} from "../../content/home";
 
-export type HomePageContent = {
-    readonly title: string;
-    readonly introText: string;
+export type HomePageContentStructure = {
+    readonly hookHeading: string;
+    readonly hookBody: string;
+    readonly hookVideoWebm: string;
+    readonly hookVideoMp4: string;
+
+    readonly philosophy: SectionContent;
+}
+
+export type SectionContent = {
+    readonly sectionBG: string;
+    readonly header: string;
+    readonly paragraphs: string[];
 }
 
 // --------------------------------------------------------------------------------
@@ -21,11 +33,11 @@ export function homeView() {
 
 function hookSection() {
   const hook = document.createElement('section');
-  const videoBg = createVideoBackground();
+  const videoBg = createVideoBackground(homePageContent.hookVideoWebm, homePageContent.hookVideoMp4);
   const wrapper = createWrapper();
   const article = document.createElement('article');
-  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 hookTitle = writeTitle("h1", homePageContent.hookHeading);
+  const hookText = writeParagraph(homePageContent.hookBody);
   const arrowDownBtn = arrowButton();
 
   hook.className = 'hook';
@@ -46,15 +58,17 @@ function philosophySection() {
   const section = document.createElement('section');
   const wrapper = createWrapper();
   const article = document.createElement('article');
-  const title = writeTitle("h2", "Games that respect your time.");
-  const text_a = writeParagraph("I believe gaming should be an escape, not a second job. But as games have gotten bigger and more demanding, it's become harder to find the time to even finish one.");
-  const text_b = writeParagraph("That's why I started cd-labs. My goal is to deliver compact, complete gaming experiences that honor your schedule. Each game is a focused, handcrafted quest meant to be enjoyed in a single sitting or over a few evenings.");
+  const title = writeTitle("h2", homePageContent.philosophy.header);
 
   section.className = 'philosophy';
-
+  section.style.backgroundImage = `url('${homePageContent.philosophy.sectionBG}')`;
   article.appendChild(title);
-  article.appendChild(text_a);
-  article.appendChild(text_b);
+
+  homePageContent.philosophy.paragraphs.forEach(paragraph => {
+    const p = writeParagraph(paragraph);
+    article.appendChild(p);
+  })
+
   wrapper.appendChild(article);
   section.appendChild(wrapper);
 

src/content/home/assets/philosophy-background-temp.png

@@ -0,0 +1,47 @@
+#home-page {
+
+    section {
+        width: 100%;
+        min-height: 100vh;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .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 {
+            margin: 0 15%;
+            display: flex;
+            text-align: center;
+            flex-direction: column; /* Stack children vertically */
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+
+            .hook-text {
+                margin-top: 75px;
+                margin-bottom: 20px;
+                max-width: 630px;
+            }
+        }
+    }
+
+    .philosophy {
+        article {
+
+        }
+
+    }
+}

src/content/home/index.ts

@@ -1,6 +1,6 @@
 import "./styles.css";
 
-export * from "./home";
+export * from "./home/";
 export * from "./projectCollection.ts";
 export * from "./project.ts";
 export * from "./about.ts";

src/views/home.ts renamed to src/views/home/index.ts

@@ -7,47 +7,6 @@
         width: 95%;
         margin: 0 auto;
     }
-
-    #home-page {
-        
-        section {
-            width: 100%;
-            min-height: 100vh;
-            height: 100vh;
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        .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 {
-                margin: 0 15%;
-                display: flex;
-                text-align: center;
-                flex-direction: column;      /* Stack children vertically */
-                justify-content: center;
-                align-items: center;
-                height: 100vh;
-
-                .hook-text {
-                    margin-top: 75px;
-                    margin-bottom: 20px;
-                    max-width: 630px;
-                }
-            }
-        }
-    }
 }
 
 #view-box {