CJSatnarine/cjsatnarine.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy CJSatnarine/CJSatnarine.github.io to CJSatnarine/CJSatnarine.github.io:gh-pages

Browse Source
This commit is contained in:
GitHub Actions
2025-08-14 07:55:03 +00:00
commit dce765feea
36 changed files with 3528 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.nojekyll Normal file
View File

3
404.html Normal file
View File

@@ -0,0 +1,3 @@
<!doctype html>
<title>404 Not Found</title>
<h1>404 Not Found</h1>

61
blog/anxieties/index.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="title" class="title">
The Anxieties
</h1>
<h3 id="subtitle" class="subtitle"><strong>[CJ Satnarine] | 2025-04-26 </strong></h3>
<p>I have created this website as my portfolio. However, there is a reason why I haven't showed anything in my portfolio. I am scared of some company taking my works and using it to train their generative AIs. It isn't fair. But it's a strange fear. Sometimes I don't care about them and I just create things for the sake of creating them, for the love of the craft. With that mind set, I'll just keep creating the things I'm passionate about, and keep posting them on this website.</p>
<p>I stopped using Instagram because, to me, it's hell. I don't want to use Instagram, or Pinterest, or even YouTube any more because they don't care about us creators. So, if I were to leave these platforms, what choices do I have? I have this website for my portfolio, of course. But I wouldn't be seen by other people. I don't know if I want to be seen or not, but a portfolio is, well, a display of my work. I didn't start creating just to show other people my work, I created for the sake of creating. Other than this website, there's Artstation. I never posted there before, but maybe when I get better I'll post there. I am <strong>NOT</strong> going to post my work on LinkedIn. I absolutely hate that platform. Everyone seems there seems so fake. Perhaps I hate the professional, corporate culture there.</p>
<p>Maybe I don't want to share my work on the major platforms. That's a selfish thought, isn't it? Yes, no one is going to see my work. It will be kept all to myself. But that isn't me. I want to share to inspire others to create, as others have inspired me to create. I want to help others learn, and I want to see the amazing things they create. My happiness comes from others discovering and expressing their passions. I'm constantly struggling with myself, fighting between the urge to isolate myself from everything (online and in person) and the urge to spend more time with people. I can't seem to find a balance.</p>
<p>I don't know why I'm sharing this here. I don't know a lot of things. But what I do know is that this is <em>my</em> website. I've been told that it wasn't professional enough. I don't care. I can share whatever I wish on this website. So I'll share this bit of me with you. After writing all of that, I have decided to post my works here. The companies will keep stealing work, there's not doubt about that, but I'll keep creating and sharing. Thank you for reading this little rant of mine. Sorry for wasting your time, it could have been spent doing something productive.</p>
<p>Tschau.</p>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

BIN
blog/first-blog/html_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

69
blog/first-blog/index.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="title" class="title">
First blog post: Website Stuff
</h1>
<h3 id="subtitle" class="subtitle"><strong>[CJ Satnarine] | 2025-03-21 </strong></h3>
<p>This is the first blog post I have made here, or any where for that matter. The entire purpose of this blog was to test out how it would be to write one.</p>
<h2 id="in-the-beginning">In the beginning...</h2>
<p>This website project started as a plain, unstyled HTML file that had a couple of changes occasionally.
<img src="https://cjsatnarine.github.io/blog/first-blog/html_image.png" alt="html_image" /></p>
<h2 id="the-head">The Head</h2>
<p>The idea for the head came from a project I was working on (a <a href="https://github.com/CJSatnarine/tiny_renderer">tiny renderer</a>), where a wireframe render inspired me to add a rotating wireframe furry wolf head to my personal website.</p>
<center><img src="output.gif" width="640" height="360"/></center>
<p>To accomplish this, I created a wolf head in Blender and exported it in a Wavefront .obj format. I used <a href="https://threejs.org/">Three.js</a> to render the wolf head on the website. This version of the website is where I also started using CSS.</p>
<p>I should note that this was the first time I was working with JavaScript and CSS, and if it wasn't for some amazing people guiding me and answering my questions, I would have probably not made it this far. To deploy this website, I used Vite.</p>
<h2 id="zola">Zola</h2>
<p>I love using markdown. I prefer it over most other markup languages, and I write most of my notes in it. When I found out I could use markdown for web dev, I started to replace my previous website design to use Zola (mostly so I can get help from a friend that uses/recommended it). This took me about a week to do, somehow.</p>
<h2 id="what-next">What next?</h2>
<p>I plan on uploading more work onto here: projects, devlogs, art or animations, and more blogs.</p>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

BIN
blog/first-blog/output.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 MiB

BIN
blog/first-blog/website_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

64
blog/index.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Blog Posts (Rants)
</h1>
<ul>
<li><a id="blog_colour" href="https://cjsatnarine.github.io/blog/plans/">Plans</a></li>
<li><a id="blog_colour" href="https://cjsatnarine.github.io/blog/anxieties/">The Anxieties</a></li>
<li><a id="blog_colour" href="https://cjsatnarine.github.io/blog/first-blog/">First blog post: Website Stuff</a></li>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

81
blog/plans/index.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="title" class="title">
Plans
</h1>
<h3 id="subtitle" class="subtitle"><strong>[CJ Satnarine] | 2025-05-03 </strong></h3>
<p>As an excuse for a post, I decided to share my plans for the next few months (or possibly longer). This is also a way to pressure myself to commit to these things that I want to do, as this post serves as a reminder to myself.</p>
<h2 id="volunteering">Volunteering</h2>
<p>I started volunteering at a computer recycling centre, and I absolutely love helping out there. I plan to keep going for as long as I can.</p>
<h2 id="studies">Studies</h2>
<p>There are a lot of things I want to study. I'm unemployed and currently not going to school, so I have abundant free time. I'm not going to school is because I learn slower compared to most people. School moves too quickly for me. What should take a few hours to learn for other people usually takes me a few days. Oh, and post-secondary education is expensive. The resources I need to learn stuff is available freely on the internet, so I'm going to make use of that.</p>
<h3 id="stem"><em>STEM</em></h3>
<p>It has been way too long since I've studied any sort of maths, so I really need to get back at it. My focus would be linear algebra and geometry, as they are essential for understanding graphics programming. I want to learn more about circuitry and computer engineering (which I'm learning a lot while volunteering for a computer recycling centre). I need to relearn a lot of Computer Science stuff as well (such as data structures and algorithms).</p>
<h3 id="linguistics"><em>Linguistics</em></h3>
<p>My main focus for now isn't to study languages, as much as I would want to. I'm going to spend less time with linguistics and more time with the maths and tech projects.</p>
<h3 id="animation"><em>Animation</em></h3>
<p>I'm planning to study a lot of films (not only animated films) to better understand film making and animation. I plan on diving deeper, far deeper from where I left off in my Blender learning journey a few years ago. I'll start learning scary things like Sculpting and Compositing.</p>
<h2 id="projects">Projects</h2>
<p>The projects are mostly for reinforcing the studying, but there are some things I want to try out and experiment.</p>
<h3 id="graphics-programming"><em>Graphics Programming</em></h3>
<p>I will be working on a few projects to better further my understanding on graphics as a whole. My goal by the end of this is to create a graphics engine for rasterizing and raytracing. I also want to experiment a lot with shaders. They used to scare me when I was younger but now I'm probably older and less scared of shader programming. I think for these projects I'll work in OpenGL.</p>
<h3 id="animation-1"><em>Animation</em></h3>
<p>I'm going to be using the knowledge from my animation studies (and assistance from the ✨animation sibling✨) to make my own animations. I will be working mainly in Blender.</p>
<h3 id="game-development"><em>Game Development</em></h3>
<p>I have a few game development projects in mind (in particular, Slugbury 2), but I'm going to focus more on the graphics programming projects. I'm going to spend most of my game development in Godot.</p>
<h3 id="music"><em>Music</em></h3>
<p>I want to learn music but it seems very scary. The only musical instrument I played was a recorder in 2018 and I sucked at it. I'm going to try to dabble a bit in LMMS and Audacity. There's also an electric guitar of the ✨music sibling✨ I can borrow and learn that but that's going to take too much effort and time.</p>
<h2 id="thoughts">Thoughts</h2>
<p>Okay, so I have a lot planned (as vaguely as they're written here LOL). How am I going to do so much in so little time? I don't know, honestly. A lot of my future projects and studying require a lot of time. I'm having a hard time finding a balance between all the things I want to do, and with the way things is going I seem to be doing things based on how I feel at the time. I'm going to try to set myself a schedule, with a focus on learning maths and a mix of graphics programming and animation.</p>
<p>I expect a lot from these plans and I hope follow through with them. There's a high chance I end up not doing a lot of the things here, and that's fine (as long as I study and understand the maths and make a few animations). I'm not sure how to end this but I hope you enjoy whatever I make in the future.</p>
<p>Tschau.</p>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

0
colours.css Normal file
View File

85
index.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 class="title">
CJ Satnarine
</h1>
<p><center>
<p>
<a id="vaxandi_forritari" href="/projects/vaxandi_forritari/"> vaxandi forritari </a> |
<a id="aspiring_game_developer" href="/projects/aspiring_game_developer/"> aspiring game developer </a> |
<a id="amateur_linguist" href="/projects/amateur_linguist/"> amateur linguist </a> |
<a id="frolicking_photographer" href="/projects/frolicking_photographer/"> frolicking photographer </a> |
<a id="adventuring_animator" href="/projects/adventuring_animator/"> adventuring animator </a> |
<a id="music_enjoyer" href="/projects/music_enjoyer/">music enjoyer </a>
</p>
</center>
<p>Hey, I'm CJ! I'm an aspiring graphics programmer/technical artist/game developer from Waterloo. I like coding and animating and languages and computers and reading and music.</p>
<p>I attended Software Engineering Technology at Conestoga College between September 2023 and August 2024. Turned out software engineering wasn't my cup of tea, so I dropped out. Nowadays I'm just working on projects, volunteering at <a href="https://www.theworkingcentre.org/projects/computer-recycling/">Computer Recycling at the Working Centre</a>, and trying to teach myself a few things.</p>
<blockquote>
<p>I do not use generative AI in any of my work. At this moment, I do not plan on using generative AI because I do not need it: my goal is to learn, not to just get things done.</p>
</blockquote>
<h2 id="check-out-my-stuff-on">Check out my stuff on:</h2>
<ul>
<li><a href="https://github.com/CJSatnarine">GitHub</a> (All my coding projects are here)</li>
<li><a href="https://www.youtube.com/@CJSatnarine">YouTube</a> (I'll upload something soon, probably)</li>
<li><a href="https://www.artstation.com/cjsatnarine">ArtStation</a> (I don't even use this but I guess maybe in the future I will)</li>
<li><a href="https://www.instagram.com/cjsatnarine/">Instagram</a> (I'm not on there so often)</li>
<li><a href="https://www.linkedin.com/in/cj-satnarine-a1a8b6293/">LinkedIn</a> (As much as I try, I can't take that soul-crushing website seriously. I'll try to post some stuff there.)</li>
<li><a href="https://medium.com/@cjsatnarine">Medium</a> (I'll post blogs here eventually)</li>
</ul>
<h2 id="feel-free-to-contact-me-via">Feel free to contact me via:</h2>
<ul>
<li><code>.just_cj</code> : Discord</li>
<li><code>cjsatnarine@protonmail.com</code> : E-mail
<canvas id="rendering_canvas"/></li>
</ul>
</p>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

74
main.js Normal file
View File

@@ -0,0 +1,74 @@
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('#rendering_canvas'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);
// Change location of canvas.
let footer = document.querySelector('#footer');
let canvas = document.querySelector('#rendering_canvas');
footer.before(canvas);
// Resizing the camera position based on window width.
// TODO: This HAS to be changed to be better bruv what even is this??
if (window.innerWidth <= 400) {
camera.position.z = 6.5;
}
else 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() {
let degrees = -0.5;
modelObject.rotateY(degrees * (Math.PI / 180));
renderer.render(scene, camera);
}

63
projects/adventuring_animator/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="adventuring_animator" class="title">
Adventuring Animator
</h1>
<p>I want to start making more animations and art. This is where I show my animations and artwork. I fell in love with <em>Blender</em> while learning to programme at age 16. My introduction came from Media Arts class, where I initially learnt Blender for making assets for Unity. I fell in love with creating models and experimenting with shaders. The following two years of high school were spent developing my skills in the software. After graduating highschool, I stopped using the software to focus on software engineering for college for about two years. Now I hope to revisit this old passion of mine, and also venture into the unknown territory of digital art with <em>Krita</em>.</p>
<h2 id="projects">Projects</h2>
<h6 id="projects-coming-soon">Projects coming soon!</h6>
<ul>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

80
projects/amateur_linguist/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="amateur_linguist" class="title">
Amateur Linguist
</h1>
<p>Languages are cool. I like languages. I want to languages. Here you will find my linguistics projects.</p>
<p>As a young child, I have had an interest in linguistics. For a while, I was grinding Duolingo, but that felt more of a game than actually learning, so I stopped that and tried learning languages through other means. My native tongue is <em>English</em>, but I find interest in these other languages:</p>
<ul>
<li><em>Deutsch</em>: currently learning both Hochdeutsch and Schwiizerdütsch from my Swiss friends</li>
<li><em>Español</em>: learnt some Spanish when I was younger, not really good at it but I can barely hold a conversation</li>
<li><em>Français</em>: learnt a bit in school, but my French is really bad as I often confuse Parisian French with Swiss French</li>
<li><em>Nederlands</em>: learnt some when I was younger, I'm not as good as I used to be</li>
<li><em>Dansk</em>: an unfortunate event occured</li>
<li><em>Íslenska</em>: I know this cool Icelandic guy and the language is so cool because they still use þorn</li>
<li><em>Norsk</em>: Norwegian is interesting but I already know some Danish and I'm not sure if I want to learn Danish but less funny-sounding</li>
<li><em>Lingua Latina</em>: learnt a bit in school, pretty cool language</li>
<li><em>ελληνικά</em>: Greek is kinda cool, I wanna learn it in the future</li>
<li><em>Русский</em>: I have no interest in learning Russian but I am going to torture myself by learning Russian just to read Tolstoy's War and Peace its original language</li>
<li><em>Suomi</em>: my brother is learning Finnish so I might learn it as well for the funnies</li>
<li><em>Davvisámegiella</em>: I discovered Northern Sámi through music, and I think it's a cool language</li>
<li><em>Kalaallisut</em>: Greenlandic was also discovered through music, I think it's also cool</li>
</ul>
<p>Unfortunately, I do not think I'll be able to learn all of these languages. That's fine, I'm happy about learning as much as I can.</p>
<h2 id="projects">Projects</h2>
<h6 id="projects-coming-soon">Projects coming soon!</h6>
<ul>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

75
projects/aspiring_game_developer/index.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="aspiring_game_developer" class="title">
Aspiring Game Developer
</h1>
<p>I think graphics are cool. I really like graphics. When I grow up I want to be a graphics programmer. For now I can learn how to be a game developer while playing around with graphics stuff. Here you'll find those learning projects.</p>
<p>My admiration for computer graphics and game development grew with my interests in programming and 3D animation. Throughout the years, I have used (and plan to use) a couple of game engines:</p>
<ul>
<li><em>Unity</em>: this was where I learnt how to program in C#, and where most of my experience lies in terms of game engines (picked it up in 2021)</li>
<li><em>Godot</em>: learning Godot because I love FOSS, I use C# instead of GDScript for scripting (picked it up in 2025)</li>
<li><em>UPBGE</em>: tried out <a href="https://upbge.org/#/">Blender's game engine</a> for a few months but I wasn't a fan of scripting in Python so I ditched it</li>
<li><em>GDevelop</em>: yeah no</li>
<li><em>LÖVE</em>: tried it out but it was more of a playground than using it as an actual game engine</li>
<li><em>Pygame</em>: did a bit in highschool, but that's about it</li>
<li><em>Kyzen</em>: soon to be first beta tester of <a href="https://github.com/luut189/kyzen">Kyzen 2D game engine</a></li>
</ul>
<p>Since July of 2024, I have been trying teaching myself graphics programming (it's difficult but I love it). Currently, I am teaching myself <em>OpenGL</em> and <em>GLSL</em>. Eventually, I hope to move onto something modern like <em>Vulkan</em> once I'm more experienced. I also hope to experiment more with <em>Godot Shader Language</em> in Godot. I am currently using <em>Godot</em> for my game development projects.</p>
<h2 id="projects">Projects</h2>
<ul>
<li><a id="blog_colour" href="https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/">Raytracer</a></li>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

BIN
projects/aspiring_game_developer/raytracer-in-a-weekend/failedRender.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 279 KiB

BIN
projects/aspiring_game_developer/raytracer-in-a-weekend/funny.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

98
projects/aspiring_game_developer/raytracer-in-a-weekend/index.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="title" class="title">
Raytracer
</h1>
<p><a href="https://github.com/CJSatnarine/Raytracer">GitHub Link</a></p>
<p>I started working on this raytracer on the 3rd of July, 2024. It was my first graphics programming project, and I learnt quite a bit doing it. To make this raytracer, I followed the books <a href="https://raytracing.github.io/books/RayTracingInOneWeekend.html"><em>Ray Tracing in One Weekend</em></a> and <a href="https://raytracing.github.io/books/RayTracingTheNextWeek.html"><em>Ray Tracing: The Next Week</em></a>. This was programmed in C++, and for majority of this I was just following through with the code of the books while taking in the important concepts.</p>
<blockquote>
<p>TLDR: I learnt to use CMake to build the project. I rendered the images to PPM files. I basically followed the code in the books to make the raytracer.</p>
</blockquote>
<h3 id="some-images-i-made-d">Some images I made :D</h3>
<p>Here's an happy accident I ran into when I had a typo in my code, I think it looks cool:</p>
<p><img src="https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/failedRender.png" alt="happy accident" /></p>
<p>Here's my face on a sphere because I thought it was funny at the time:</p>
<p><img src="https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/funny.png" alt="face on a sphere" /></p>
<h6 id="more-images-is-coming-soon-lol">more images is coming soon LOL</h6>
<h3 id="how-the-programme-works">How the programme works:</h3>
<p>In the <code>main.cpp</code> file, there are a bunch of functions that are supposed to render something. I have a switch statement that just assign the different scenes to render. A sort of lazy menu.</p>
<p><img src="https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/sceneChooser.png" alt="Scene Chooser" /></p>
<h2 id="cmake">CMake</h2>
<p>It was the first time I used CMake to build a project to run on different platforms. I'm not sure what else to say, it's CMake. It did take me a while to get this stuff working so there's that.</p>
<h2 id="ppm-images">PPM Images</h2>
<p>This was the first time I had ever came across the <a href="https://en.wikipedia.org/wiki/Netpbm">PPM image format (it's somewhere on this Wikipedia article I swear, just go look for it)</a>. Prior to this I genuinely had no idea how you could send data to files and stuff like that. The PPM is really simple to work with. I'll summarise it by a screenshot of the little rant I sent to my best friend's dms:</p>
<p><img src="https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/screenshot.png" alt="screenshot image" /></p>
<p>As you can see, very epic balls.
However, I didn't explain what the first 3 lines of the PPM file represented.</p>
<p>The first line, the <code>P3</code>, represents a two-byte magic number. For these files, the magic number works as some sort of identifier to show what type of file we're dealing with. To avoid going on a rant aboutb PPM files, I'm just going to say that the <code>P3</code> means that we're dealing with an RGB colour image in ASCII.</p>
<p>The second line, where it shows two numbers (<code>400 255</code>), is the number of columns and rows (respectively) in the image.</p>
<p>The third line, <code>255</code>, tells us the maximum colour.</p>
<p>Everything after the third line (the group of 3 RGB values) are the RGB values of each individual pixel per line.</p>
<h3 id="writing-to-ppm-files">Writing to PPM Files</h3>
<p>I'll also summarise the writing to PPM files bit by another part of the rant directed to my best friend's dms:</p>
<p><img src="https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/screenshot_code.png" alt="screenshot code image" /></p>
<p>The top 3 lines discussed earlier were printed to the console earlier in the code. This was where I learnt how to use the redirectional operators, even though it was already taught in my college classes but I guess I wasn't a good student lol. Any way, that code produced the following image:</p>
<p><img src="https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/pixels.png" alt="pixels image" /></p>
<h2 id="the-raytracer">The Raytracer</h2>
<p>Okay so the way this works is that a raytracer sends rays through pixels and calculates the colour for each ray sent. The steps are basically:</p>
<ol>
<li>Calculate the ray from the camera through the pixel.</li>
<li>Determine which objects in the scene the ray intersects. Those objects will be rendered.</li>
<li>Computer a colour for the closest intersection point.</li>
</ol>
<p>Building this took a lot of maths, which the book would explain in a much better way than I ever could.What I would be explaining some of the cool topics I learnt while following this book.</p>
<h3 id="camera-stuff">Camera Stuff</h3>
<p>Cameras are, like, important. It's how we see into the scene. 🤯 But ya, cameras have aspect ratios. It's basically the ratio of the image width and the image height. For this raytracer, the height of the image is calculated with the image's aspect ratio and the width (<code>image_height = image_width / (aspect_ratio)</code>), so you only have to tweak the width when working on resizing the image and also keep the desired aspect ratio.</p>
<p>Viewports are also pretty important. It's a virtual rectangle in the 3D world that holds the grid of image pixel locations. We need this to pass through all the scene rays.</p>
<p>A problem here is that the camera centre is at some point in 3D space, and the pixel grid starts from the top left cornr and ends at the bottom right with the last pixel. To get them to work together, the rendering starts from the top left to the top right, and then to the next row im a similar fashion, through the rest of rows until the last pixel. Vectors from the left edge to the right edge, and the upper edge to the lower edge are used to navigate the grid. The pixel grid is also inset from the viewport by half a pixel distance so that the viewport is evenly divided into width and height identical regions.</p>
<h6 id="i-ll-update-the-rest-of-the-page-when-i-understand-the-concepts-well-enough-to-explain-them-yeah-there-s-a-lot-of-maths-here-that-i-don-t-have-a-full-grasp-of-yet">I'll update the rest of the page when I understand the concepts well enough to explain them. Yeah there's a lot of maths here that I don't have a full grasp of, yet.</h6>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

BIN
projects/aspiring_game_developer/raytracer-in-a-weekend/pixels.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
projects/aspiring_game_developer/raytracer-in-a-weekend/sceneChooser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
projects/aspiring_game_developer/raytracer-in-a-weekend/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
projects/aspiring_game_developer/raytracer-in-a-weekend/screenshot_code.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

64
projects/frolicking_photographer/index.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="frolicking_photographer" class="title">
Frolicking Photographer
</h1>
<p>I managed to get my hands on an old Nikon D70s camera, so I'll try to learn photography from that.</p>
<h2 id="projects">Projects</h2>
<ul>
<li><a id="blog_colour" href="https://cjsatnarine.github.io/projects/frolicking_photographer/nikon-camera/">Nikon D70s</a></li>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

BIN
projects/frolicking_photographer/nikon-camera/dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
projects/frolicking_photographer/nikon-camera/fungi_friends.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 KiB

BIN
projects/frolicking_photographer/nikon-camera/fungi_on_moon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

61
projects/frolicking_photographer/nikon-camera/index.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="title" class="title">
Nikon D70s
</h1>
<p>Some time in the July of 2025, I managed to get my hands on a Nikon D70s DSLR that was sitting around for years. I got it with a <code>Nikon NIKKOR 70-300mm f/4.0-5.6 D AF ED Lens</code> and a <code>Nikon DX SWM ED IF Aspherical 67 AF-S Nikkor 18-70mm 1:3.5-4.5G ED</code>. Honestly, I don't know what any of this means, but with time I'll learn. I was hoping to learn photography with this camera, however, we have a problem:</p>
<p><img src="https://cjsatnarine.github.io/projects/frolicking_photographer/nikon-camera/fungi_friends.png" alt="Fungi in lens" /></p>
<p>It seems that though the nearly one decade of the camera sitting around has allowed a colony of fungi to reside in both lenses. Even though I have computer refurbishing experience, I am genuinely too afraid to open up the lenses because I'm not confident I would be able to put them together.The above image is from the <code>70-300mm</code> lens, which looks pretty bad. The other lens, the <code>18-70mm</code>, isn't as <em>bad</em>, but the fungi is still pretty visible:</p>
<p><img src="https://cjsatnarine.github.io/projects/frolicking_photographer/nikon-camera/fungi_on_moon.png" alt="Fungi with moon" /></p>
<p>I'm going to have to fix this eventually. Somehow. Anyway, here's one of the first pictures I took with the camera:</p>
<p><img src="https://cjsatnarine.github.io/projects/frolicking_photographer/nikon-camera/dark.png" alt="dark" /></p>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

71
projects/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 class="title">
My Stuff
</h1>
<p>This is where you'll find my projects. They're split into different categories, for my different interests. Each project would have a <em>somewhat</em> detailed description of what I did, what I learnt, and that sort of stuff.</p>
<ul>
<li><a id="vaxandi_forritari" href="https://cjsatnarine.github.io/projects/vaxandi_forritari/">vaxandi forritari</a></li>
<li><a id="aspiring_game_developer" href="https://cjsatnarine.github.io/projects/aspiring_game_developer/">aspiring game developer</a></li>
<li><a id="amateur_linguist" href="https://cjsatnarine.github.io/projects/amateur_linguist/">amateur linguist</a></li>
<li><a id="frolicking_photographer" href="https://cjsatnarine.github.io/projects/frolicking_photographer/">frolicking photographer</a></li>
<li><a id="adventuring_animator" href="https://cjsatnarine.github.io/projects/adventuring_animator/">adventuring animator</a></li>
<li><a id="music_enjoyer" href="https://cjsatnarine.github.io/projects/music_enjoyer/">music enjoyer</a></li>
</ul>
<ul>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

63
projects/music_enjoyer/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 id="music_enjoyer" class="title">
Music Enjoyer
</h1>
<p>I like music. I listen to a lot of music. I want to learn how to make music. Here you'll find my music projects. I plan to use <a href="https://lmms.io/">LMMS</a> to make this music.</p>
<h2 id="projects">Projects</h2>
<h6 id="projects-coming-soon">Projects coming soon!</h6>
<ul>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

76
projects/vaxandi_forritari/index.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Vaxandi Forritari
</h1>
<p>This is where you'll find my coding projects, tech projects, anything that's coding but isn't <a id="aspiring_graphics_programmer" href="/projects/aspiring_game_developer/">game development</a>.</p>
<p>The phrase <em><strong>Vaxandi Forritari</strong></em> is Icelandic for <em><strong>learning programmer</strong></em>. I'm still learning a lot, so I'm a <em>vaxandi forritari</em> in a way. I discovered my love for programming in highschool at the age of 16, when I was learning to use the Unity game engine. I'm familiar with the following programming languages:</p>
<ul>
<li><em>C#</em>: learnt it in 2021 for scripting in Unity</li>
<li><em>Java</em>: learnt it in Computer Science class in highschool, spent most of my time in Grades 11 and 12 using Java</li>
<li><em>Processing</em>: used it for making graphics in Media Arts class in highschool</li>
<li><em>Python</em>: learnt it for scripting with the <a href="https://docs.blender.org/api/current/index.html">Blender Python API</a>, later used it to try out Pygame and <a href="https://upbge.org/#/">Blender's game engine</a></li>
<li><em>Arduino</em>: this is C but I learnt this before learning C/C++, used it in Computer Engineering classes in highschool</li>
<li><em>C/C++</em>: used a bit of it for programming <a href="https://mirobo.tech/ubmp4">Mirobo UBMP4s</a> in high school Computer Engineering classes, learnt way more in college when persuing software engineering</li>
<li><em>6808 Assembly</em>: learnt it in college and I never want to touch it again (I actually have an interest in it but I'll touch it again when I'm older and (probably) wiser)</li>
<li><em>HTML, CSS</em>: learnt it to make this website</li>
<li><em>JavaScript</em>: learnt it to script in Three.js</li>
<li><em>Lua</em>: used to configure Neovim, used a bit with LÖVE</li>
</ul>
<h2 id="projects">Projects</h2>
<h6 id="projects-coming-soon">Projects coming soon!</h6>
<ul>
</ul>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

4
robots.txt Normal file
View File

@@ -0,0 +1,4 @@
User-agent: *
Disallow:
Allow: /
Sitemap: https://cjsatnarine.github.io/sitemap.xml

51
sitemap.xml Normal file
View File

@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://cjsatnarine.github.io/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/blog/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/blog/anxieties/</loc>
<lastmod>2025-04-26</lastmod>
</url>
<url>
<loc>https://cjsatnarine.github.io/blog/first-blog/</loc>
<lastmod>2025-03-21</lastmod>
</url>
<url>
<loc>https://cjsatnarine.github.io/blog/plans/</loc>
<lastmod>2025-05-03</lastmod>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/adventuring_animator/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/amateur_linguist/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/aspiring_game_developer/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/aspiring_game_developer/raytracer-in-a-weekend/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/frolicking_photographer/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/frolicking_photographer/nikon-camera/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/music_enjoyer/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/projects/vaxandi_forritari/</loc>
</url>
<url>
<loc>https://cjsatnarine.github.io/stuff_I_like/</loc>
</url>
</urlset>

85
stuff_I_like/index.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CJ Satnarine</title>
<link rel="stylesheet" href="/style.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
<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>
<nav>
<a href="https://cjsatnarine.github.io/">Home</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/blog/"><strike>Rants</strike> Posts</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/projects/">My Stuff</a>
<span id="text"> | </span><a href="https://cjsatnarine.github.io/stuff_I_like/">Stuff I Like</a>
<hr>
</nav>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Stuff I Like
</h1>
<p><h2 id="music">Music</h2>
<p>This is in no way all of my favourite artists, there are too many to list. These are just the ones I really enjoy and don't mind sharing:</p>
<ul>
<li><em>Molchat Doma</em></li>
<li><em>LOOK MUM NO COMPUTER</em></li>
<li><em>FIBEL</em>: I really like their songs Winter and Unique.</li>
<li><em>HARBOUR</em></li>
<li><em>Provinz</em>: I just listened to them a lot when I was learning German.</li>
<li><em>DOUBLECAMP</em></li>
<li><em>Emil Kárlsen</em>: I really enjoyed his song Muohta and the album Nagirvárrái. His music was my introduction to the Northern Sámi language.</li>
<li><em>Dorian Concept</em></li>
<li><em>tomcbumpz</em></li>
<li><em>Pogo</em></li>
<li><em>Home</em></li>
<li><em>Nanook</em>: I really like their song Ingerlaliinnaleqaagut. It was my introduction to the Greenlandic language.</li>
</ul>
<h2 id="films-and-animations">Films and Animations</h2>
<ul>
<li><em>The Seventh Seal/Det Sjunde Inseglet</em> (1957, Ingmar Bergman)</li>
<li><em>Godland/Volaða Land</em> (2022, Hlynur Pálmason)</li>
<li><em>Bob</em> (by <a href="https://www.youtube.com/@infinityburrito5299/featured">InfinityBurrito</a>)</li>
<li><em>The Transformers</em> (1984-1987)</li>
</ul>
<h2 id="games">Games</h2>
<p>I'm not really a gamer but these are some stuff I liked:</p>
<ul>
<li><em>Sable</em> (Shedworks)</li>
<li><em>Plants vs. Zombies</em> (Popcap Games)</li>
<li><em>Viewfinder</em> (Sad Owl Studios)</li>
</ul>
</p>
</div>
</section>
</body>
<footer id="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>
<p> Made with <a href="https://www.getzola.org/">Zola</a></p>
</center>
</footer>
</html>

1
style.css Normal file
View File

@@ -0,0 +1 @@
body{background-color:#000;font-family:"Roboto Mono";font-size:large}a:link,a:visited,a:hover,a:active{color:#962ffe;background-color:rgba(0,0,0,0);text-decoration:none}h1{font-size:2.5em;color:#962ffe}h2{color:#30a9ff}h3{color:#45ff30}h4{color:#fff530}h5{color:#ff7930}h6{color:#ff3030}blockquote>p{color:#ffa0e3}ul li{color:#ebd7ff}ol li{color:#ebd7ff}code{color:#ffa0e3}li{color:#fff}em,strong{color:#ffa0e3}hr{background:linear-gradient(to right, #962ffe, #962ffe, #30a9ff, #45ff30, #fff530, #ff7930, #ff3030, #ff3030);height:5px;border:0}#vaxandi_forritari{color:#962ffe}#aspiring_game_developer{color:#30a9ff}#amateur_linguist{color:#45ff30}#frolicking_photographer{color:#fff530}#adventuring_animator{color:#ff7930}#music_enjoyer{color:#ff3030}#subtitle{color:#962ffe}#text,p{color:#ebd7ff}

10
window.js Normal file
View File

@@ -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);
});

2289
wolf_head.obj Normal file
View File

File diff suppressed because it is too large Load Diff