Weekly Main Merge

Weekly Main Merge

Author: cd-bash

package-lock.json

@@ -11,5 +11,9 @@
   "devDependencies": {
     "typescript": "~5.6.2",
     "vite": "^6.0.5"
+  },
+  "dependencies": {
+    "@types/three": "^0.173.0",
+    "three": "^0.173.0"
   }
 }

package.json

@@ -0,0 +1,41 @@
+import './styles.css';
+
+export enum BreadcrumbCategory {
+    HOME = '#3BFFC5',
+    INTERACTIVE = '#3B62FF',
+    PROJECT = '#1E1E1E',
+}
+
+export type BreadcrumbsLink = [
+    name: string,
+    path: string,
+    category: BreadcrumbCategory,
+]
+
+//-----------------------------------------------------------------------
+
+export function breadcrumbs(links: BreadcrumbsLink[]) {
+    const breadcrumbsContainer = document.createElement('div');
+    const breadcrumbs = document.createElement('ul');
+
+    breadcrumbsContainer.className = 'breadcrumbs';
+    breadcrumbsContainer.appendChild(breadcrumbs);
+
+    links.forEach(BreadcrumbsLink => {
+        const [name, path, category] = BreadcrumbsLink;
+        const crumb = document.createElement('li');
+        const link = document.createElement('a');
+        const separator = document.createElement('span');
+
+        link.href = path;
+        link.textContent = name;
+        link.style.backgroundColor = category;
+        separator.textContent = '/';
+
+        breadcrumbs.appendChild(crumb);
+        crumb.appendChild(link);
+        crumb.appendChild(separator);
+    });
+
+    return breadcrumbsContainer;
+}

src/components/breadcrumbs/index.ts

@@ -0,0 +1,39 @@
+.breadcrumbs {
+    list-style-type: none;
+    margin: 10px 0 30px 0;
+    padding: 0;
+
+    ul {
+        list-style-type: none;
+        text-align: center;
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 5px;
+        line-height: 210%;
+        color: white;
+        font-family: "handjet", serif;
+    }
+
+    li a {
+        font-family: "handjet", serif;
+        font-weight: 700;
+        text-decoration: none;
+        color: black;
+        padding: 4px 6px;
+        margin-right: 5px;
+
+    }
+
+    li:last-child {
+        a {
+            color: white;
+        }
+        span {
+            display: none;
+        }
+    }
+}

src/components/breadcrumbs/styles.css

@@ -0,0 +1,15 @@
+import {updateBgObjects} from "./particules.ts";
+import {renderWithPostProcess} from "./post-process.ts";
+import {camera, cameraTarget} from "./scene.ts";
+import * as THREE from "three";
+
+let cameraLookAt = new THREE.Vector3(0, 0, 0);
+
+export const animate = () => {
+    requestAnimationFrame(animate);
+    camera.position.lerp(cameraTarget, 0.2);
+    camera.lookAt(cameraLookAt);
+
+    updateBgObjects();
+    renderWithPostProcess();
+}

src/components/three-background/animation-loop.ts

@@ -0,0 +1,19 @@
+import "./styles.css";
+import {initCamera, initCanvas, initScene, initStage, renderer} from "./scene.ts";
+import {initBgMeshes} from "./particules.ts";
+import {initPostProcess} from "./post-process.ts";
+import {animate} from "./animation-loop.ts";
+
+//-----------------------------------------------------------------------
+
+export function animatedBackground() {
+    initStage();
+    initScene();
+    initCanvas();
+    initCamera();
+    initBgMeshes();
+    initPostProcess();
+    animate();
+
+    return renderer.domElement;
+}

src/components/three-background/index.ts

@@ -0,0 +1,110 @@
+import * as THREE from "three";
+import {scene, windowHeight, windowWidth} from "./scene.ts";
+
+
+const meshWhiteMaterial = new THREE.MeshStandardMaterial( {
+    color: 0xdddddd,
+    wireframe: true,
+    emissive: 0xdddddd,
+    emissiveIntensity: 0.5,
+});
+
+const meshBlueMaterial = new THREE.MeshStandardMaterial( {
+    color: 0x3BFFC5,
+    wireframe: false,
+    emissive: 0x3BFFC5,
+    emissiveIntensity: 0.5,
+});
+
+
+
+//-----------------------------------------------------------------------
+
+export const initBgMeshes = () => {
+    for (let i = 0; i < 1000; i++) {
+        const meshSize = Math.random() * 30 + 5;
+        createBgMeshInMargins(
+            new THREE.IcosahedronGeometry(meshSize, 0),
+            meshWhiteMaterial
+        );
+    }
+
+    for (let i = 0; i < 100; i++) {
+        const meshSize = Math.random() * 30 + 5;
+        createBgMeshInMargins(
+            new THREE.CylinderGeometry(meshSize, meshSize, 5, 32),
+            meshBlueMaterial
+        );
+    }
+
+    createGiantWireSphere();
+    createBackdropPlane();
+}
+
+export const updateBgObjects = () => {
+    scene.children.forEach((child) => {
+        if (child instanceof THREE.Mesh && child.userData.rotationSpeed) {
+            child.rotation.x += child.userData.rotationSpeed.x;
+            child.rotation.y += child.userData.rotationSpeed.y;
+        }
+    });
+}
+
+//-----------------------------------------------------------------------
+
+const createBgMeshInMargins = (
+    spawnMesh: THREE.CylinderGeometry | THREE.IcosahedronGeometry | THREE.TorusGeometry | THREE.BoxGeometry,
+    meshMaterial: THREE.MeshStandardMaterial
+) => {
+    const x = pointInMargins();
+    const y = Math.random() * windowHeight * 15 - windowHeight * 7.5;
+    const z = Math.random() * -2000 - 200;
+
+    const mesh = new THREE.Mesh( spawnMesh, meshMaterial );
+
+    mesh.userData.rotationSpeed = {
+        x: Math.random() * 0.02 - 0.01,
+        y: Math.random() * 0.02 - 0.01
+    };
+
+    scene.add( mesh );
+    mesh.position.set(x, y, z);
+}
+
+
+const pointInMargins = () => {
+    const wrapper = 720;
+    let point: number;
+
+    if (Math.random() < 0.5) {
+        point = Math.random() * (windowWidth / 2 - wrapper * 2) - windowWidth / 2;
+    } else {
+        point = Math.random() * (windowWidth / 2 - wrapper * 2) + windowWidth / 2 + wrapper;
+    }
+
+    return point;
+}
+
+
+const createGiantWireSphere = () => {
+    const geometry = new THREE.IcosahedronGeometry(3250, 3);
+    const material = new THREE.MeshBasicMaterial( {
+        color: 0xdddddd,
+        wireframe: true,
+    } );
+
+    const sphere = new THREE.Mesh( geometry, material );
+    scene.add(sphere);
+    sphere.position.set(0, 0, 0);
+}
+
+
+const createBackdropPlane = () => {
+    const geometry = new THREE.PlaneGeometry(windowWidth * 20, windowHeight * 20, 32, 32);
+    const material = new THREE.MeshBasicMaterial({ color: 0x555555 });
+    const plane = new THREE.Mesh(geometry, material);
+    scene.add(plane);
+    plane.position.set(windowWidth, 0, -2000);
+};
+
+