window resizing and other small changes

dist/index.html

@@ -6,7 +6,8 @@
     <meta charset=" utf-8">
     <title> CJ Satnarine </title>
 
-  <script type="module" crossorigin src="/assets/index-B1ZRUS1T.js"></script>
+    <canvas id="canvas"></canvas>
+  <script type="module" crossorigin src="/assets/index-t7JyoB65.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-BjZe3bm5.css">
 </head>
 
@@ -32,19 +33,21 @@
         <p>
             Any way, I'm an aspriring graphics programmer from Waterloo, Ontario.
 
-            I've got a few interests weird interests in linguistics, history, maths, 3D animation, game development, and
+
+            I've got a few weird interests in linguistics, history, maths, 3D animation, game development, and
             art.
             Currently, I'm spending a lot of my time learning a lot of things relating to my interests.
             You can check out my <a href="https://github.com/CJSatnarine" target="_blank">Github</a> to see what I'm up
             to.
         </p>
+    </body>
 
+    <footer>
         <center>
             <a href="https://evilr.ing/cjsatnarine/previous">&lt;</a>
             <a href="https://evilr.ing">EVILRING</a>
             <a href="https://evilr.ing/cjsatnarine/next">&gt;</a>
         </center>
-
-    </body>
+    </footer>
 
 </html>

index.html

@@ -6,7 +6,9 @@
     <meta charset=" utf-8">
     <title> CJ Satnarine </title>
 
+    <canvas id="canvas"></canvas>
     <script type="module" src="/main.js"></script>
+    <script type="module" src="/window.js"></script>
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -39,13 +41,14 @@
             You can check out my <a href="https://github.com/CJSatnarine" target="_blank">Github</a> to see what I'm up
             to.
         </p>
+    </body>
 
+    <footer>
         <center>
             <a href="https://evilr.ing/cjsatnarine/previous">&lt;</a>
             <a href="https://evilr.ing">EVILRING</a>
             <a href="https://evilr.ing/cjsatnarine/next">&gt;</a>
         </center>
-
-    </body>
+    </footer>
 
 </html>

main.js

@@ -1,19 +1,31 @@
+import './style.css';
 import * as THREE from 'three';
 import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-
-// Vite import for files.
 import headURL from "./models/wolf_head.obj?url";
 
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-const renderer = new THREE.WebGLRenderer();
+
 let modelObject = new THREE.Object3D;
 
+// Rendering.
+const renderer = new THREE.WebGLRenderer({
+    canvas: document.querySelector('#canvas'),
+});
+renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setAnimationLoop(animate);
 document.body.appendChild(renderer.domElement);
 
-camera.position.z = 3;
+// Resizing the camera position based on window width. 
+if (window.innerWidth <= 650) {
+    camera.position.z = 5.5;
+}
+else if (window.innerWidth > 650 && window.innerWidth <= 915) {
+    camera.position.z = 4.5;
+} else {
+    camera.position.z = 3.5;
+}
 
 // Lighting. 
 const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
@@ -30,7 +42,7 @@ objectLoader.load(
             // instance of is apparently the reason god made typescript 
             if (child instanceof THREE.Mesh) {
                 // Create material for the mesh.  
-                child.material = new THREE.MeshStandardMaterial({color: 0x962FFE});
+                child.material = new THREE.MeshStandardMaterial({ color: 0x962FFE });
                 child.material.wireframe = true;
                 child.material.wireframeLinewidth = 1;
                 child.material.emissive = (new THREE.Color().setHex(0x962FFE));
@@ -47,6 +59,7 @@ objectLoader.load(
     }
 );
 
+// Animate function.
 function animate() {
     modelObject.rotateY(-THREE.MathUtils.degToRad(1));
     renderer.render(scene, camera);

package-lock.json

@@ -5,11 +5,12 @@
   "packages": {
     "": {
       "dependencies": {
-        "three": "^0.174.0"
+        "three": "^0.174.0",
+        "three.js": "^0.77.1"
       },
       "devDependencies": {
         "gh-pages": "^6.3.0",
-        "vite": "^6.2.0"
+        "vite": "^6.2.2"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
@@ -1453,6 +1454,23 @@
       "integrity": "sha512-p+WG3W6Ov74alh3geCMkGK9NWuT62ee21cV3jEnun201zodVF4tCE5aZa2U122/mkLRmhJJUQmLLW1BH00uQJQ==",
       "license": "MIT"
     },
+    "node_modules/three.js": {
+      "version": "0.77.1",
+      "resolved": "https://registry.npmjs.org/three.js/-/three.js-0.77.1.tgz",
+      "integrity": "sha512-lVMYlBXhhHlZtsF+cQdev6WCm2fSWs3I+A6Z63j6TBmkVXOYgdo9AUCRemfsw5mllqWx23VubJ5Qt8/uWKQpJA==",
+      "dependencies": {
+        "three": "0.77.0"
+      }
+    },
+    "node_modules/three.js/node_modules/three": {
+      "version": "0.77.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.77.0.tgz",
+      "integrity": "sha512-YWEp8ahs2l+6fAFVbanLVQoSBwVq5jDct3nZdBSHHXb5I/w5oy/LCMAzIOAguKWclRqcjR4W1BeP5QBnftGbpA==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1490,9 +1508,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz",
-      "integrity": "sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz",
+      "integrity": "sha512-yW7PeMM+LkDzc7CgJuRLMW2Jz0FxMOsVJ8Lv3gpgW9WLcb9cTW+121UEr1hvmfR7w3SegR5ItvYyzVz1vxNJgQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,10 +1,11 @@
 {
   "dependencies": {
-    "three": "^0.174.0"
+    "three": "^0.174.0",
+    "three.js": "^0.77.1"
   },
   "devDependencies": {
     "gh-pages": "^6.3.0",
-    "vite": "^6.2.0"
+    "vite": "^6.2.2"
   },
   "scripts": {
     "build": "vite build",

style.css

@@ -13,7 +13,10 @@ body {
     display: block;
 }
 
-a:link, a:visited, a:hover, a:active {
+a:link,
+a:visited,
+a:hover,
+a:active {
     color: rgb(150, 47, 254);
     background-color: transparent;
     text-decoration: none;

window.js

@@ -0,0 +1,10 @@
+// Refreshes the page when the browser is resized. 
+window.addEventListener('resize', function(event) {
+    if (window.RT) {
+        clearTimeout(window.RT);
+    }
+
+    window.RT = setTimeout(function() {
+        window.location.reload(false); /* false to get page from cache */
+    }, 200);
+});