aughhhh

blog/config.toml

@@ -0,0 +1,18 @@
+# The URL the site will be built for
+base_url = "https://cjsatnarine.github.io/"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here
+site_name = "CJ Satnarine"
+user_name = "CJ Satnarine"

blog/content/_index.md

@@ -0,0 +1,9 @@
++++
+template = "index.html"
+title = "CJ Satnarine"
++++
+Hey... I'm CJ! But you can call me CJ... As you can tell, this website is currently under construction. I'll be updating it slowly as I learn more web development. I'm remaking this website with [Zola](https://www.getzola.org/) because I want to write blogs and devlogs in the future.
+
+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.
+

blog/content/blog/_index.md

@@ -0,0 +1,8 @@
++++
+title = "List of blog posts"
+sort_by = "date"
+template = "blog.html"
+page_template = "blog-page.html"
++++
+
+amogus

blog/content/blog/another.md

@@ -0,0 +1,10 @@
++++
+title = "testing second blog"
+date = "2025-03-14"
++++
+
+This is the second blog post I have made here. 
+
+### Interesting facts. 
+There are no interesting facts. 
+[This is a link to my GitHub.](https://github.com/CJSatnarine)

blog/content/blog/first_blog.md

@@ -0,0 +1,10 @@
++++
+title = "testing first blog"
+date = "2025-03-14"
++++
+
+This is the first blog post I have made here. 
+
+### Interesting facts. 
+There are no interesting facts. 
+[This is a link to my GitHub.](https://github.com/CJSatnarine)

blog/sass/extra.scss

@@ -0,0 +1,35 @@
+body {
+    background-color: black;
+    font-family: 'Roboto Mono';
+}
+
+#construction {
+    position: absolute;
+    color: whitesmoke;
+    top: 10px;
+    width: 100%;
+    text-align: center;
+    z-index: 100;
+    display: block;
+}
+
+a:link,
+a:visited,
+a:hover,
+a:active {
+    color: rgb(150, 47, 254);
+    background-color: transparent;
+    text-decoration: none;
+}
+
+h1 {
+    color: rgb(150, 47, 254);
+}
+
+p {
+    color: white;
+}
+
+center {
+    color: rgb(150, 47, 254);
+}

blog/static/main.js

@@ -0,0 +1,68 @@
+import './style.css';
+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/static/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/templates/base.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>{{ config.extra.site_name }}</title>
+
+    <link rel="stylesheet" href="{{ get_url(path="/extra.css") }}" />
+
+</head>
+
+<body>
+    <section class="section">
+        <div class="container">
+            {% block content %} {% endblock %}
+        </div>
+    </section>
+</body>
+
+</html>

blog/templates/blog-page.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1 class="title">
+    {{ page.title }}
+</h1>
+
+<p class="subtitle"><strong>{{ page.date }}</strong></p>
+{{ page.content | safe }}
+{% endblock content %}

blog/templates/blog.html

@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1 class="title">
+    {{ section.title }}
+</h1>
+
+<!-- Not sure what this page stuff is but I reckon I'll find out soon enough. -->
+<ul>
+    {% for page in section.pages %}
+    <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+    {% endfor %}
+</ul>
+
+{% endblock content %}

blog/templates/index.html

@@ -0,0 +1,30 @@
+{% 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>
+
+    <p>{{ section.content | safe }}</p>
+
+    <p><a href="{{ get_url(path='@/blog/_index.md') }}">Posts</a>.</p>
+</body>
+{% endblock content %}

dist/index.html

@@ -40,6 +40,7 @@
             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>
@@ -50,4 +51,5 @@
         </center>
     </footer>
 
+
 </html>

index.html

@@ -7,8 +7,6 @@
     <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>
 
@@ -41,6 +39,7 @@
             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>
@@ -51,4 +50,7 @@
         </center>
     </footer>
 
+    <script type="module" src="/main.js"></script>
+    <script type="module" src="/window.js"></script>
+
 </html>

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "build": "vite build",
     "preview": "vite preview",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "dev": "vite"
   }
 }