wip: new home page and view system

Author: cd-bash

package-lock.json

@@ -5,5 +5,5 @@
     
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Handjet:[email protected]&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Handjet:[email protected]&display=swap&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 `

src/heads/default.ts

@@ -1,15 +1,9 @@
 import { router } from "./core/router";
-import {buildVerticalNav} from "./components/vertical-nav";
-import {buildProjectPage} from "./content/projects";
-import {homeView, aboutView, contactView, buildViewBase, projectCollectionView, renderView} from "./views";
+import {homeView, buildViewBase, renderView} from "./views";
 
 
 const routes = [
     { path: '', handler: () => renderView(homeView()) },
-    { path: '/projects', handler: () => renderView(projectCollectionView()) },
-    { path: '/projects/:id', handler: (params) => buildProjectPage(params?.id) },
-    { path: '/about', handler: () => renderView(aboutView()) },
-    { path: '/contact', handler: () => renderView(contactView()) },
 ];
 
 routes.forEach(route => router.registerRoute(route.path, route.handler));
@@ -19,10 +13,8 @@ routes.forEach(route => router.registerRoute(route.path, route.handler));
 function init() {
     const body = document.getElementsByTagName("body")[0];
     const contentPage = buildViewBase();
-    const verticalNav = buildVerticalNav();
 
     body.appendChild(contentPage);
-    contentPage.appendChild(verticalNav);
 
     router.handleRoute(window.location.pathname);
 }

src/index.ts

@@ -1,6 +1,4 @@
-import {createThreeBackground, writeParagraph, writeTitle} from "./utils";
-import {BackgroundChoice} from "../components/three-background";
-import {cdCover} from "../components/cd-cover";
+import {createWrapper, writeParagraph, writeTitle} from "./utils";
 
 export type HomePageContent = {
     readonly title: string;
@@ -10,37 +8,38 @@ export type HomePageContent = {
 // --------------------------------------------------------------------------------
 
 export function homeView() {
-  const article = document.createElement('article');
-  const introBlock = document.createElement('div');
-  const pageTitle = writeTitle("h1", "pick a track");
-  const pageText = writeParagraph("Welcome to my hub! I’m CD-BASH, a creative developer based in Montreal.");
+  const page = document.createElement('div');
+  page.id = 'home-page';
+
+  page.appendChild(hookSection());
 
-  article.id = 'home-page';
-  introBlock.className = 'intro-block';
 
-  createThreeBackground(BackgroundChoice.Home);
-  introBlock.appendChild(pageTitle);
-  introBlock.appendChild(pageText);
-  article.appendChild(introBlock);
-  article.appendChild(cdCoverSelection());
 
-  return article;
+  return page;
 }
 
 // --------------------------------------------------------------------------------
 
-function cdCoverSelection() {
-  const cdCovers = document.createElement('div');
-  cdCovers.className = 'cd-covers-selection';
+function hookSection() {
+  const hook = document.createElement('section');
+  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 arrowDownBtn = document.createElement('button');
 
-  const projectCover = cdCover();
-  const aboutCover = cdCover();
-  const logsCover = cdCover();
+  hook.className = 'hook';
+  hookTitle.className = "hook-title";
+  hookText.className = "hook-text";
 
-  cdCovers.appendChild(projectCover);
-  cdCovers.appendChild(aboutCover);
-  cdCovers.appendChild(logsCover);
+  article.appendChild(hookTitle);
+  article.appendChild(hookText);
+  article.appendChild(arrowDownBtn);
+  wrapper.appendChild(article);
+  hook.appendChild(wrapper);
 
-  return cdCovers;
+  return hook;
 }
 
+
+

src/views/home.ts

@@ -10,27 +10,23 @@ export * from "./contact.ts";
 // --------------------------------------------------------------------------------
 
 export function buildViewBase() {
-    const viewBox = document.createElement('div');
-    const viewWrapper = document.createElement('div');
-    viewBox.id = 'view-box';
-    viewWrapper.id = 'view-wrapper';
-
-    viewBox.appendChild(viewWrapper);
-    return viewBox;
+    const view = document.createElement('div');
+    view.id = 'view';
+    return view;
 }
 
-export function renderView(view: HTMLElement) {
-    const viewWrapper = clearView();
-    viewWrapper.appendChild(view);
+export function renderView(newView: HTMLElement) {
+    const cleanView = clearView();
+    cleanView.appendChild(newView);
 }
 
 // --------------------------------------------------------------------------------
 
 function clearView() {
-    const cleanViewWrapper = document.getElementById('view-wrapper')!;
-    cleanViewWrapper?.childNodes.forEach((childNode) => {
-        cleanViewWrapper.removeChild(childNode);
-    });
+    const view = document.getElementById('view')!;
+    while (view.firstChild) {
+        view.removeChild(view.firstChild);
+    }
 
-    return cleanViewWrapper;
+    return view;
 }

src/views/index.ts

@@ -1,21 +1,14 @@
 body {
     background-color: black;
+    margin: 0;
 }
 
-h1 {
+h1, h2 {
     margin: 0;
-    max-width: 75%;
+    font-family: "Inter", sans-serif;
     font-size: 6em;
-    line-height: 75%;
-    color: white;
-    text-transform: lowercase;
-}
-
-h2 {
-    margin: 0 0 20px 0;
-    font-size: 1.2em;
+    line-height: 100%;
     color: white;
-    text-transform: uppercase;
 }
 
 h3 {
@@ -43,10 +36,10 @@ h6 {
 }
 
 p {
-    font-size: 2em;
+    font-size: 1.5em;
     font-weight: normal;
-    color: #828282;
-    line-height: 150%;
+    color: white;
+    line-height: 110%;
     margin: 0;
 }
 
@@ -60,14 +53,56 @@ p.description {
     font-size: 0.9em;
 }
 
+#view {
+    height: 100%;
+    font-family: 'Inter', sans-serif;
+
+    #wrapper {
+        width: 95%;
+        margin: 0 auto;
+    }
+
+    #home-page {
+        
+        section {
+            width: 100vw;
+            min-height: 100vh;
+            height: 100vh;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        .hook {
+
+            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 {
-    padding-left: 280px;
     height: 100%;
     font-family: "Cabin", sans-serif;
 
 
     #view-wrapper {
-        width: 720px;
+        width: 95%;
         margin: 0 auto;
         padding-top: 60px;
 

src/views/styles.css

@@ -4,4 +4,10 @@ export * from "./backgrounds-utils.ts";
 
 export function scrollTop() {
     window.scrollTo(0, 0);
+}
+
+export function createWrapper() {
+    const wrapper = document.createElement('div');
+    wrapper.id = 'wrapper';
+    return wrapper;
 }

src/views/utils/index.ts

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}