Scheduled merge from dev to main

Author: cd-bash

src/components/breadcrumbs/index.ts

@@ -0,0 +1,33 @@
+import './styles.css';
+
+export type cdCoverContent = {
+    readonly coverTitle: string;
+    readonly coverDescription: string;
+    readonly coverImage: string;
+}
+
+// --------------------------------------------------------------------------------
+
+export function cdCover() {
+    const cdItem = document.createElement('div');
+    const cover = document.createElement('div');
+    const textBlurb = document.createElement('div');
+    const title = document.createElement('p');
+    const description = document.createElement('p');
+
+    cdItem.className = 'cd-cover';
+    cover.className = 'cover-image';
+    textBlurb.className = 'cover-text-blurb';
+    title.className = 'cover-title';
+    description.className = 'cover-description';
+
+    title.textContent = "test";
+    description.textContent = 'This is a test description for the CD cover.';
+
+    textBlurb.appendChild(title);
+    textBlurb.appendChild(description);
+    cdItem.appendChild(cover);
+    cdItem.appendChild(textBlurb);
+
+    return cdItem;
+}

src/components/breadcrumbs/styles.css

@@ -0,0 +1,11 @@
+.cd-cover {
+    max-width: 100%;
+    text-align: center;
+}
+
+.cover-image {
+    width: 100%;
+    height: 250px;
+    background-color: #3BFFC5;
+}
+

src/components/cd-cover/index.ts

@@ -0,0 +1,17 @@
+import './styles.css';
+
+const textContent = '< End of line />';
+
+//-----------------------------------------------------------------------
+
+export function endOfLine() {
+    const section = document.createElement("section");
+    const text = document.createElement("p");
+
+    section.className = 'end-of-line';
+    text.className = 'end-of-line';
+    text.textContent = textContent;
+
+    section.appendChild(text);
+    return section;
+}

src/components/cd-cover/styles.css

@@ -0,0 +1,40 @@
+p.end-of-line {
+    padding: 50px 0;
+    font-family: "handjet", sans-serif;
+    font-size: 2em;
+    font-weight: 300;
+    color: #828282;
+    line-height: 150%;
+    margin: 0;
+    position: relative;
+    animation: none;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+section.end-of-line:hover {
+    p.end-of-line {
+        animation: glitch 1s infinite;
+    }
+}
+
+@keyframes glitch {
+    0% {
+        text-shadow: 2px 2px #13573F, -2px -2px #3BFFC5;
+    }
+    20% {
+        text-shadow: -2px -2px #13573F, 2px 2px #3BFFC5;
+    }
+    40% {
+        text-shadow: 2px -2px #13573F, -2px 2px #3BFFC5;
+    }
+    60% {
+        text-shadow: -2px 2px #13573F, 2px -2px #3BFFC5;
+    }
+    80% {
+        text-shadow: 2px 2px #13573F, -2px -2px #3BFFC5;
+    }
+    100% {
+        text-shadow: -2px -2px #13573F, 2px 2px #3BFFC5;
+    }
+}

src/components/end-of-line/index.ts

@@ -0,0 +1,100 @@
+import * as THREE from "three";
+import {scene} from "./scene.ts";
+
+let gridSpheres: { mesh: THREE.Mesh, dist: number }[] = [];
+let backgroundGridSpheres: { mesh: THREE.Mesh, baseY: number }[] = [];
+let backgroundGridSpheres2D: { mesh: THREE.Mesh, baseY: number }[][] = [];
+
+export const initHomePage = () => {
+    createWavyGridFloor();
+    createBackgroundGrid();
+    animateWaves();
+}
+
+const createWavyGridFloor = () => {
+    const size = 1000;
+    const divisions = 40;
+    const step = size / divisions;
+    const halfSize = size / 2;
+
+    const sphereGeometry = new THREE.SphereGeometry(4, 8, 8);
+    const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x3BFFC5, wireframe: true });
+
+    gridSpheres = [];
+
+    for (let i = 0; i <= divisions; i++) {
+        for (let j = 0; j <= divisions; j++) {
+            const x = -halfSize + i * step;
+            const z = -halfSize + j * step;
+            const dist = Math.sqrt(x * x + z * z) / halfSize; // normalized [0,1]
+            const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+            sphere.position.set(x, 0, z);
+            scene.add(sphere);
+            gridSpheres.push({ mesh: sphere, dist });
+        }
+    }
+}
+
+const createBackgroundGrid = () => {
+    const size = 10000;
+    const divisions = 50;
+    const step = size / divisions;
+    const halfSize = size / 2;
+
+    const sphereGeometry = new THREE.SphereGeometry(3, 8, 8);
+    const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
+
+    backgroundGridSpheres = [];
+    backgroundGridSpheres2D = [];
+
+    // Create spheres and store in 2D array
+    for (let i = 0; i <= divisions; i++) {
+        backgroundGridSpheres2D[i] = [];
+        for (let j = 0; j <= divisions; j++) {
+            const x = -halfSize + i * step;
+            const z = -halfSize + j * step - 500;
+            const dist = Math.sqrt(x * x + z * z) / halfSize;
+            const amplitude = -2500;
+            const baseY = -2500 - dist * amplitude;
+            const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+            sphere.position.set(x, baseY, z);
+            scene.add(sphere);
+            const sphereObj = { mesh: sphere, baseY };
+            backgroundGridSpheres.push(sphereObj);
+            backgroundGridSpheres2D[i][j] = sphereObj;
+        }
+    }
+
+    // Link neighbors with lines
+    const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.3, transparent: true });
+    for (let i = 0; i <= divisions; i++) {
+        for (let j = 0; j <= divisions; j++) {
+            const current = backgroundGridSpheres2D[i][j].mesh.position;
+            // Link to right neighbor
+            if (i < divisions) {
+                const right = backgroundGridSpheres2D[i + 1][j].mesh.position;
+                const geometry = new THREE.BufferGeometry().setFromPoints([current, right]);
+                const line = new THREE.Line(geometry, lineMaterial);
+                scene.add(line);
+            }
+            // Link to bottom neighbor
+            if (j < divisions) {
+                const bottom = backgroundGridSpheres2D[i][j + 1].mesh.position;
+                const geometry = new THREE.BufferGeometry().setFromPoints([current, bottom]);
+                const line = new THREE.Line(geometry, lineMaterial);
+                scene.add(line);
+            }
+        }
+    }
+}
+
+const animateWaves = () => {
+    const time = performance.now() * 0.001;
+    for (const { mesh, dist } of gridSpheres) {
+        const { x, z } = mesh.position;
+        const amplitude = 20 + dist * 60;
+        mesh.position.y = Math.sin(0.01 * (x + z) + time) * amplitude - 500;
+    }
+
+    requestAnimationFrame(animateWaves);
+}

src/components/end-of-line/styles.css

@@ -1,18 +1,36 @@
 import "./styles.css";
-import {initCamera, initScene, initStage, renderer} from "./scene.ts";
+import {changeDepth, initCamera, initScene, initStage, renderer} from "./scene.ts";
 import {initBgMeshes} from "./particules.ts";
 import {initPostProcess} from "./post-process.ts";
 import {animate} from "./animation-loop.ts";
+import {initHomePage} from "./homeGrid.ts";
+
+export enum BackgroundChoice {
+    Home,
+    Project,
+}
 
 //-----------------------------------------------------------------------
 
-export function animatedBackground() {
+export function threeBackground(choice: BackgroundChoice) {
     initStage();
     initScene();
     initCamera();
-    initBgMeshes();
+
+    if (choice === BackgroundChoice.Home) {
+        initHomePage();
+    }
+
+    if (choice === BackgroundChoice.Project) {
+        initBgMeshes();
+    }
+
     initPostProcess();
     animate();
 
     return renderer.domElement;
+}
+
+export function updateBackground(newCameraDepth: number) {
+    changeDepth(newCameraDepth);
 }

src/components/three-background/homeGrid.ts

@@ -5,6 +5,7 @@ export let renderer: THREE.WebGLRenderer,
     scene: THREE.Scene,
     camera: THREE.PerspectiveCamera,
     cameraTarget = new THREE.Vector3(0, 0 ,800),
+    cameraDepth = 800,
     windowWidth = window.innerWidth,
     windowHeight = window.innerHeight;
 
@@ -50,7 +51,10 @@ export const initCamera = () => {
         aspectRatio,
         nearPlane,
         farPlane);
-    camera.position.z = 800;
+}
+
+export function changeDepth(newDepth: number) {
+    cameraDepth = newDepth;
 }
 
 
@@ -71,8 +75,8 @@ const onMouseMove = (event: MouseEvent) => {
     cameraTarget.y = mouseY * mouseSensitivity;
 
     cameraTarget.clamp(
-        new THREE.Vector3(-cameraTilt, -cameraTilt, 800),
-        new THREE.Vector3(cameraTilt, cameraTilt, 800)
+        new THREE.Vector3(-cameraTilt, -cameraTilt, cameraDepth),
+        new THREE.Vector3(cameraTilt, cameraTilt, cameraDepth)
     );
 }