wip: pixel frid

Author: cd-bash

src/components/pixel-grid/index.ts

@@ -0,0 +1,40 @@
+import './styles.css';
+
+// --------------------------------------------------------------------------------
+
+export function createPixelGrid(options: {
+    rows: number;
+    cols: number;
+    pixelSize: number;
+    colors: string[];
+    emptyBias?: 'left' | 'right' | 'none';
+    emptyRatio?: number; // 0 to 1, how many cells are empty in the biased area
+}) {
+    const { rows, cols, pixelSize, colors, emptyBias = 'none', emptyRatio = 0.5 } = options;
+    const grid = document.createElement('div');
+    grid.className = 'pixel-grid';
+    grid.style.gridTemplateRows = `repeat(${rows}, ${pixelSize}px)`;
+    grid.style.gridTemplateColumns = `repeat(${cols}, ${pixelSize}px)`;
+
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+            let isEmpty = false;
+            if (emptyBias === 'left' && c < cols / 2) {
+                isEmpty = Math.random() < emptyRatio;
+            } else if (emptyBias === 'right' && c >= cols / 2) {
+                isEmpty = Math.random() < emptyRatio;
+            }
+            if (!isEmpty) {
+                const pixel = document.createElement('div');
+                pixel.className = 'pixel';
+                pixel.style.background = colors[Math.floor(Math.random() * colors.length)];
+                grid.appendChild(pixel);
+            } else {
+                const empty = document.createElement('div');
+                empty.className = 'pixel pixel-empty';
+                grid.appendChild(empty);
+            }
+        }
+    }
+    return grid;
+}

src/components/pixel-grid/styles.css

@@ -0,0 +1,21 @@
+.pixel-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.pixel {
+    width: 100%;
+    height: 100%;
+    opacity: 0.7;
+    transition: background 0.2s;
+}
+.pixel-empty {
+    background: transparent !important;
+    opacity: 0;
+}

src/views/home/index.ts

@@ -1,6 +1,7 @@
 import './styles.css';
 import {arrowButton, createVideoBackground, createWrapper, writeParagraph, writeTitle} from "../utils";
 import {homePageContent} from "../../content/home";
+import { createPixelGrid } from '../../components/pixel-grid';
 
 export type HomePageContentStructure = {
     readonly hookHeading: string;
@@ -62,18 +63,28 @@ function philosophySection() {
 
   section.className = 'philosophy';
   section.style.backgroundImage = `url('${homePageContent.philosophy.sectionBG}')`;
-  article.appendChild(title);
 
+  // Create pixel grid using the component
+  const pixelGrid = createPixelGrid({
+    rows: 18,
+    cols: 36,
+    pixelSize: 24,
+    colors: ['#3BFFC5', '#222', '#fff'],
+    emptyBias: 'left',
+    emptyRatio: 0.7
+  });
+
+
+
+  section.appendChild(pixelGrid);
+
+  article.appendChild(title);
   homePageContent.philosophy.paragraphs.forEach(paragraph => {
     const p = writeParagraph(paragraph);
     article.appendChild(p);
   })
-
   wrapper.appendChild(article);
   section.appendChild(wrapper);
 
   return section;
 }
-
-
-

src/views/home/styles.css

@@ -1,5 +1,13 @@
 #home-page {
 
+    #wrapper {
+        z-index: 2;
+    }
+
+    h2 {
+        margin-bottom: 50px;
+    }
+
     section {
         width: 100%;
         min-height: 100vh;
@@ -9,16 +17,16 @@
         box-sizing: border-box;
     }
 
+    .highlight {
+        text-decoration: underline;
+        text-decoration-color: #3BFFC5;
+        text-underline-offset: 20px;
+    }
+
     .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 {
@@ -31,6 +39,7 @@
             height: 100vh;
 
             .hook-text {
+                font-size: 1.5em;
                 margin-top: 75px;
                 margin-bottom: 20px;
                 max-width: 630px;
@@ -40,8 +49,19 @@
 
     .philosophy {
         article {
-
+            position: relative;
+            display: flex;
+            width: 45%;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start; /* <-- left-align children */
+            height: 100vh;
         }
 
+        p {
+            max-width: 60%;
+            margin-bottom: 30px;
+            text-align: left;
+        }
     }
 }

src/views/styles.css

@@ -4,182 +4,12 @@
     font-family: 'Inter', sans-serif;
 
     #wrapper {
-        width: 95%;
+        width: 90%;
         margin: 0 auto;
     }
 }
 
-#view-box {
-    height: 100%;
-    font-family: "Cabin", sans-serif;
-
-
-    #view-wrapper {
-        width: 95%;
-        margin: 0 auto;
-        padding-top: 60px;
-
-        section {
-            margin:0;
-            padding: 58px 0;
-            clear: both;
-        }
-
-        .showcase {
-            margin: 50px 0;
-            width: 100%;
-            border: #080808 solid 3px;
-        }
-
-        .video-showcase::before, .video-showcase::after {
-            content: "";
-            display: block;
-            width: 100%;
-            padding-top: 65px;
-            z-index: -2;
-            background-image: url("utils/assets/video-showcase-decoration.png");
-            background-blend-mode: multiply;
-            background-repeat: repeat-x;
-            filter: invert(100%) sepia(100%) hue-rotate(240deg) saturate(100%);
-        }
-
-        .video-showcase::before {
-            margin-bottom: -15px;
-        }
-
-        .video-showcase::after {
-            margin-top: -15px;
-            transform: scaleY(-1);
-        }
-
-        .video-showcase video {
-            width: 100%;
-            border-radius: 15px;
-            z-index: 5;
-            position: relative;
-        }
-
-        .gallery-content {
-            padding-top: 20px;
-        }
-
-        .gallery-content img {
-            object-fit: cover;
-            width: 45%;
-            aspect-ratio:1/1;
-            margin: 10px 0;
-            margin-right: 4%;
-            border: 2px solid #505050;
-            border-radius: 10px;
-        }
-
-        .link {
-            font-family: "Handjet", serif;
-            display: inline-block;
-            color: #828282;;
-            font-size: 2.5em;
-            font-weight: normal;
-            padding: 0 30px 15px 0;
-            text-align: center;
-            text-decoration-color: #3BFFC5;
-        }
-
-        #home-page {
-            .cd-covers-selection {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 40px;
-                justify-items: center;
-                align-items: center;
-                width: 170%; /* wider than wrapper */
-                max-width: none;
-                margin-left: -35%; /* center and overflow */
-                position: relative;
-                z-index: 1;
-                padding: 40px 0;
-
-            }
-        }
-
-        #about-page {
-
-            .intro {
-                text-align: center;
-                padding-bottom: 50px;
-                display: block;
-            }
-
-            .title {
-                font-family: "Handjet", serif;
-                font-size: 2.5em;
-                font-weight: 600;
-                color: #3BFFC5;
-                text-transform: lowercase;
-            }
 
-            .grid-category {
-                display: grid;
-                padding: 50px 0 0 0;
-                margin: 0 0 25px 0;
-                border-top: 2px dashed #505050;
-                grid-template-columns: repeat(6, 1fr);
-                gap: 2%;
-
-                h2 {
-                    grid-column: span 6;
-                }
-
-                .grid-item {
-                    margin: 0 0 50px 0;
-                    grid-column: span 3;
-
-
-                    .subtitle {
-                        color: white;
-                    }
-
-                    .text {
-                        font-size: 1em;
-                    }
-                }
-            }
-
-            .achievements, .profile-links {
-                border-top: 2px dashed #505050;
-                padding: 50px 0 0 0;
-                margin: 0 0 25px 0;
-
-                .item {
-                    margin: 0 0 50px 0;
-                }
-            }
-
-        }
-
-        #home-page {
-
-            h1 {
-                margin: 0 auto 50px auto;
-
-            }
-
-            .intro-block {
-                text-align: center;
-            }
-
-        }
-    }
-
-    .three-background {
-        position: fixed;
-        background-color: #000000;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -15;
-    }
-}
 
 
 

src/views/utils/styles.css

@@ -37,10 +37,10 @@ h6 {
 }
 
 p {
-    font-size: 1.5em;
+    font-size: 1em;
     font-weight: normal;
     color: white;
-    line-height: 110%;
+    line-height: 130%;
     margin: 0;
 }