New & improved style, removed blog

resources/css/style.css

@@ -7,7 +7,7 @@ html, body {
     width: 100%;
     margin: 0;
     padding: 0;
-    background-image: url(/img/background.webp);
+    background-color: #465e5e;
 }
 
 /** custom landing **/
@@ -44,7 +44,7 @@ html, body {
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: -100;
+    z-index: 1;
 }
 
 /** website **/
@@ -73,6 +73,7 @@ html, body {
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: stretch;
+    z-index: 2;
 }
 
 footer {
@@ -97,8 +98,11 @@ footer {
     flex-grow: 1;
     width: 120px;
     max-width: 120px;
-    height: 100%;
+    margin: 15px;
+    margin-right: 0px;
+    border-radius: 10px;
     background-color: rgb(34, 34, 34);
+    z-index: 2;
 }
 
 .menuContainer ul {
@@ -133,9 +137,14 @@ footer {
     flex-grow: 1;
     width: 400px;
     max-width: 400px;
-    height: 100%;
+    margin: 30px;
+    margin-left: 0px;
+    border-radius: 10px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
     overflow-y: scroll;
     background-color: rgb(219, 219, 219);
+    z-index: 2;
 }
 
 .submenuContainer h1 {
@@ -191,17 +200,22 @@ footer {
     overflow-y: scroll;
     transition: 0.5s;
     text-align: justify;
-    background-color: rgba(57, 57, 57, 0.649);
+    z-index: 2;
 }
 
-.contentContainer article{
+.contentContainer article {
     overflow-y: auto;
     margin-left: auto;
     margin-right: auto;
     box-sizing: border-box;
     max-width: 900px;
+    min-height: calc(100% - 20px);
     padding: 20px;
     background-color: rgb(219, 219, 219);
+    border-radius: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    z-index: 3;
 }
 
 .contentContainer article h5 {

resources/js/matrix.js

@@ -0,0 +1,85 @@
+// Canvas Matrix
+
+const hex = "0123456789ABCDEF".split("");
+const jap = "阪熊奈岡鹿梨阜埼茨栃媛".split("");
+
+const matrix = document.getElementById("matrix");
+matrix.height = window.innerHeight;
+matrix.width = window.innerWidth;
+const ctx = matrix.getContext("2d", { alpha: false });
+
+const font_size = 15;
+let columns = 0;
+let drops = [];
+const color = '#FFFFFF';
+let lastFrame = performance.now();
+
+const gradient = ctx.createLinearGradient(0, 0, matrix.width, 0);
+gradient.addColorStop(0, '#ff0000');
+gradient.addColorStop(1 / 7, '#ff8000');
+gradient.addColorStop(2 / 7, '#ffff00');
+gradient.addColorStop(3 / 7, '#00ff00');
+gradient.addColorStop(4 / 7, '#00ffff');
+gradient.addColorStop(5 / 7, '#0000ff');
+gradient.addColorStop(6 / 7, '#ff00ff');
+gradient.addColorStop(1, '#ff0040');
+
+
+
+function initDrop(pos) {
+    return { pos, speed: Math.random() * 3 + 0.2, text: jap[Math.floor(Math.random()*jap.length)], red: Math.random() > 0.99 };
+}
+
+function init() {
+    columns = matrix.width / font_size;
+    drops = [];
+    for(let x=0; x < columns; x++) drops[x] = initDrop(matrix.height);
+}
+
+function render() {
+        // ctx.clearRect(0, 0, matrix.width, matrix.height);
+        ctx.fillStyle = "#465e5e";
+        ctx.globalAlpha = 0.1;
+        ctx.fillRect(0, 0, matrix.width, matrix.height);
+        ctx.globalAlpha = 1.0;
+        
+        ctx.font = font_size + "px arial";
+        
+        for(let i=0; i < drops.length; i++){
+            const drop = drops[i];
+
+            if (drop.red) {
+                ctx.fillStyle = "red";
+            } else {
+                ctx.fillStyle = color;
+            }
+
+            ctx.fillText(jap[Math.floor(Math.random()*jap.length)], i*font_size, drop.pos*(font_size/2));
+            
+            if(drop.pos*(font_size/2) > matrix.height && Math.random() > 0.98) {
+                drops[i] = initDrop(0);
+            } else {
+                drop.pos += drop.speed;
+            }            
+        }
+}
+
+function renderLoop() {
+    const now = performance.now();
+
+    if ((now - lastFrame) > (1000 / 60)) {
+        render();
+        lastFrame = now;
+    }
+
+    requestAnimationFrame(renderLoop);
+}
+
+window.addEventListener('resize', () => {
+    init();
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    init();
+    requestAnimationFrame(renderLoop);
+});

resources/js/planet.js

@@ -72,8 +72,8 @@ function initLights() {
 async function initModels() {
     // Load Models
 
-    modelPlanet = (await loadModel('/models/LP_planet_only.glb')).scene;
-    modelMoon = (await loadModel('/models/LP_planet_moon.glb')).scene;
+    modelPlanet = (await loadModel('models/LP_planet_only.glb')).scene;
+    modelMoon = (await loadModel('models/LP_planet_moon.glb')).scene;
     
     
     modelPlanet.position.set(1, 1, 0);
@@ -123,10 +123,10 @@ function animateScene() {
 }
 
 // Main
-export function init() {
+export async function init() {
     initScene();
     initLights();
-    initModels();
+    await initModels();
     animateScene();
 }