it works i guess lol

blog/content/_index.md

@@ -7,3 +7,5 @@ Hey... I'm CJ! But you can call me CJ... As you can tell, this website is curren
 Any way, I'm an aspriring graphics programmer from Waterloo, Ontario. 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.
 
+<canvas id="canvas"/>
+

blog/public/extra.css

@@ -0,0 +1 @@
+body{background-color:#000;font-family:"Roboto Mono"}#construction{position:absolute;color:#f5f5f5;top:10px;width:100%;text-align:center;z-index:100;display:block}a:link,a:visited,a:hover,a:active{color:#962ffe;background-color:rgba(0,0,0,0);text-decoration:none}h1{color:#962ffe}p{color:#fff}center{color:#962ffe}

blog/public/main.js

@@ -0,0 +1,67 @@
+import * as THREE from 'three';
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+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);
+
+// Resizing the camera position based on window width. 
+if (window.innerWidth <= 400) {
+    camera.position.z = 6.5;
+}
+if (window.innerWidth > 400 && 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);
+scene.add(light);
+
+// OBJ loader. 
+const objectLoader = new OBJLoader();
+objectLoader.load(
+    "/wolf_head.obj",
+    function(object) {
+        console.log(object);
+        modelObject = object;
+        object.traverse((child) => {
+            // 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.wireframe = true;
+                child.material.wireframeLinewidth = 1;
+                child.material.emissive = (new THREE.Color().setHex(0x962FFE));
+            }
+        });
+
+        scene.add(object);
+    },
+    function(xhr) {
+        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+    },
+    function(error) {
+        console.log('an error happened', error);
+    }
+);
+
+// Animate function.
+function animate() {
+    modelObject.rotateY(-THREE.MathUtils.degToRad(1));
+    renderer.render(scene, camera);
+}

blog/public/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);
+});

blog/static/main.js

@@ -1,4 +1,3 @@
-import './style.css';
 import * as THREE from 'three';
 import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 

blog/templates/base.html

@@ -5,8 +5,20 @@
     <meta charset="utf-8">
     <title>{{ config.extra.site_name }}</title>
 
-    <link rel="stylesheet" href="{{ get_url(path="/extra.css") }}" />
+    <link rel="stylesheet" href="/extra.css" />
 
+
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/"
+            }
+    }
+    </script>
+
+    <script type="module" src="/main.js"></script>
+    <script type="module" src="/window.js"></script>
 </head>
 
 <body>

blog/templates/index.html

@@ -1,24 +1,6 @@
 {% extends "base.html" %}
 
-<head>
-
-    <script type="importmap">
-    {
-        "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
-            }
-    }
-    </script>
-
-    <script type="module" src="/main.js"></script>
-    <script type="module" src="/window.js"></script>
-
-</head>
-
 {% block content %}
-
-<body>
     <h1 class="title">
         {{ section.title }}
     </h1>
@@ -26,5 +8,4 @@
     <p>{{ section.content | safe }}</p>
 
     <p><a href="{{ get_url(path='@/blog/_index.md') }}">Posts</a>.</p>
-</body>
 {% endblock content %}