feat: [#100] about page integration

Author: cd-bash

src/components/pixel-grid/index.ts

@@ -41,8 +41,6 @@ export function createPixelGrid(config: GRID_CONFIG, alignment: 'left' | 'right'
 function createCanvasElement(): HTMLCanvasElement {
     const canvas = document.createElement('canvas');
     canvas.className = 'pixel-grid';
-    canvas.style.width = '100%';
-    canvas.style.height = '100%';
     canvas.style.display = 'block';
     return canvas;
 }

src/content/about/index.ts

@@ -1,65 +1,53 @@
-import {AboutContentStructure} from "../../views";
+import { AboutPageContentStructure } from '../../views/about/';
 
-export const aboutContent: AboutContentStructure = {
-    title: "About",
-    subtitle: "Me, myself and I",
-    introTagline: "Charles Doucet (cd)",
-    introText: "I’m a Montreal-based designer with a passion for technology and interactive media, driven by my curiosity and thirst for knowledge.",
-    gridCategory: [
-        {
-            title: "Education",
-            items: [
-                {
-                    title: "Computation Arts (BAC)",
-                    subtitle: "Concordia University",
-                    text: "2016 - 2019 / Graduated with Distinction"
-                },
-                {
-                    title: "Graphic Design (TEC)",
-                    subtitle: "Cégep du Vieux Montréal",
-                    text: "2011 - 2014"
-                }
-            ]
-        },
-        {
-            title: "Professional Experience",
-            items: [
-                {
-                    title: "Lead Designer",
-                    subtitle: "Behaviour Interactive",
-                    text: "October 2021 - Present"
-                },
-                {
-                    title: "UX / UI Designer",
-                    subtitle: "Voxco Software",
-                    text: "April 2015 - October 2021"
-                },
-                {
-                    title: "Game Developer",
-                    subtitle: "Independent",
-                    text: "April 2018 - Present"
-                }
-            ]
-        }
-    ],
-    achievements: [
-        {
-            title: "Undergraduate Fellow Award",
-            description: "Given by Milieux at Concordia. Became a member of TAG (Technoculture, Art and Games) research centre."
-        },
-        {
-            title: "Platinum every Soulsborne games",
-            description: "Yep, you read that right. I have earned every trophy from Demon Souls to Elden Ring (even Dark Souls 2)."
-        }
-    ],
-    profileLinks: [
-        {
-            text: "LinkedIn",
-            link: "https://www.linkedin.com/in/charlesdouc/"
-        },
-        {
-            text: "GitHub",
-            link: "https://github.com/cdoucet/",
-        }
-    ]
+export const aboutContent: AboutPageContentStructure = {
+    manifesto: {
+        introTitle: "About cd-labs",
+        header: "The manifesto for <span class='highlight'>shorter games</span>",
+        paragraphs: [
+            "Look at the achievements for any major blockbuster game. The trophy for completing the final chapter is often one of the rarest. The data tells a clear story: a huge percentage of players never see the credits roll.",
+            "It isn't a lack of passion; it's a lack of time. As our lives get busier, 100-hour epics filled with repetitive tasks begin to feel like a second job. The industry is selling promises of vast worlds that, for most people, will remain largely unexplored.",
+            "This pursuit of scale also leads to bloated budgets, immense pressure on development teams, and a reliance on safe, overused formulas to justify the investment. Creativity is often the first casualty of this cycle.",
+            "Shorter, focused games are the elegant solution. They respect the player's time and intelligence. They allow for healthier, more creative development. They deliver a complete, handcrafted story with a satisfying conclusion. This isn't about making 'less' of a game; it's about making 'more' of the parts that truly matter.",
+        ],
+        alignment: 'right',
+    },
+
+    ctaBannerA: {
+        header: "Save your progress",
+        body: "Don't lose your place in our story. Follow along for development checkpoints, sneak peeks, and insights into our design process.",
+        buttons: [
+            { text: "Follow on Instagram", path: "#", styleType: "primary", contrastMode: 'light' },
+            { text: "See logs", path: "#", styleType: "secondary", contrastMode: 'light' }
+        ],
+        alignment: 'right'
+    },
+
+    path: {
+        header: "Why I chose a <span class='highlight'>different path</span>.",
+        paragraphs: [
+            "With a decade of experience, I've cultivated a diverse professional background as a marketing designer, UX/UI designer for web applications, and game developer. My core passion lies in games and interactive media—a burgeoning field that's reshaping the world and fostering innovation.",
+            "Initially, I thought my path was in AAA studios, but I soon realized that design often takes a back seat there. Large productions typically stick to proven formulas to reduce risk. This makes sense, given the millions invested in game development and the critical need for success. However, many projects ultimately fail, games are canceled, teams are laid off, and the cycle continues. That is why, after four years of valuable experience, I decided to leave the AAA world and commit to a different path.",
+        ],
+        alignment: 'left',
+    },
+
+    initiative: {
+        header: "The <span class='highlight'>cd-labs</span> initiative",
+        paragraphs: [
+            "My commitment is to a different model for game development—one that’s faster, more creative, and built on a foundation of unique ideas instead of market speculation. The goal is to deliver smaller, yet complete, gaming experiences centered around innovative and engaging mechanics.",
+            "This approach also aims to bring players closer to the development world. By working transparently and involving the community in the process, I can deliver regular, polished, and affordable games that truly respect the player’s time.",
+        ],
+        alignment: 'right',
+    },
+
+    ctaBannerB: {
+        header: "Join our journey",
+        body: "Be part of something exciting! Follow us on social media and stay updated with our latest news and developments.",
+        buttons: [
+            { text: "Follow on Twitter", path: "#", styleType: "primary", contrastMode: 'light' },
+            { text: "Like on Facebook", path: "#", styleType: "secondary", contrastMode: 'light' }
+        ],
+        alignment: 'left'
+    },  
 }

src/index.ts

@@ -1,11 +1,12 @@
 import {buildMainLogo, changeLogoOnScroll} from "./components/logo";
 import { router } from "./core/router";
-import {homeView, buildViewBase, renderView} from "./views";
+import {homeView, aboutView, buildViewBase, renderView} from "./views";
 import {buildTopNav} from "./components/top-nav";
 
 
 const routes = [
     { path: '', handler: () => renderView(homeView()) },
+    { path: '/about', handler: () => renderView(aboutView()) },
 ];
 
 routes.forEach(route => router.registerRoute(route.path, route.handler));

src/views/about.ts

@@ -0,0 +1,50 @@
+import { writeParagraph, writeTitle, createWrapper } from "../utils";
+
+export type AboutSectionContent = {
+    readonly introTitle?: string;
+    readonly header: string;
+    readonly paragraphs: string[];
+    readonly alignment: 'left' | 'right';
+}
+
+// --------------------------------------------------------------------------------
+
+export function createAboutSection(content: AboutSectionContent) {
+    const section = document.createElement('section');
+    const wrapper = createWrapper();
+    const article = document.createElement('article');
+
+    section.className = `about-section ${content.alignment}`;
+
+    if (content.introTitle) {
+        article.appendChild(introTitle(content.introTitle));
+    }
+
+    article.appendChild(writeTitle("h2", content.header));
+    article.appendChild(sectionParagraphs(content.paragraphs));
+
+    wrapper.appendChild(article);
+    section.appendChild(wrapper);
+    
+    return section;
+}
+
+// --------------------------------------------------------------------------------
+
+function sectionParagraphs(paragraphs: string[]) {
+    const paragraphsContainer = document.createElement('div');
+    paragraphsContainer.className = 'paragraphs-container';
+    
+    paragraphs.forEach(text => {
+        const p = writeParagraph(text);
+        paragraphsContainer.appendChild(p);
+    });
+    return paragraphsContainer;
+}
+
+function introTitle(text: string) {
+    const intro = document.createElement('h3');
+    intro.className = 'intro-title';
+    intro.innerHTML = text;
+    return intro;
+}

src/views/about/aboutSection.ts

@@ -0,0 +1,39 @@
+import './styles.css';
+import { GRID_CONFIG } from '../../components/pixel-grid';
+import { createPixelGridBackground } from '../utils/backgrounds-utils';
+import { AboutSectionContent, createAboutSection } from "./aboutSection";
+import { createPixelBannerCTA, CallToActionOptions } from "../common/call-to-action";
+import { aboutContent } from "../../content/about";
+
+const pixelGridConfigs: GRID_CONFIG = {
+    rows: 2,
+    colors: ['#0f0f0f', '#2a2a2a', '#181818']
+}
+
+export type AboutPageContentStructure = {
+    readonly manifesto: AboutSectionContent;
+    readonly ctaBannerA: CallToActionOptions;
+    readonly path: AboutSectionContent;
+    readonly initiative: AboutSectionContent;
+    readonly ctaBannerB: CallToActionOptions;
+}
+
+// --------------------------------------------------------------------------------
+
+export function aboutView() {
+    const page = document.createElement('div');
+    page.id = 'about-page';
+
+    const firstSection = createAboutSection(aboutContent.manifesto);
+    firstSection.classList.add('first-section');
+    firstSection.appendChild(createPixelGridBackground('left', pixelGridConfigs));
+
+    page.appendChild(firstSection);
+    page.appendChild(createPixelBannerCTA(aboutContent.ctaBannerA));
+    page.appendChild(createAboutSection(aboutContent.path));
+    page.appendChild(createAboutSection(aboutContent.initiative));
+    page.appendChild(createPixelBannerCTA(aboutContent.ctaBannerB));
+
+    return page;
+}
+