changes to files

content/projects/programming/_index.md

@@ -0,0 +1,7 @@
++++
+template = "blog.html"
+title = "Programming"
++++
+This is where you'll find my coding projects.
+
+ ## Projects

content/projects/programming/neovim_theme/index.md

@@ -0,0 +1,39 @@
++++
+title = "My Neovim Custom Theme"
+date = "2025-10-17"
++++
+I use Neovim as my main IDE and text editor. Since I started using Neovim, I've been using the [Catppuccin](https://catppuccin.com/) theme, until one day I was blessed by stumbling across [vimcolours](https://vimcolors.org/) and realised I can create my own horrible theme to strain my eyes.
+
+<img src="neovim_horrid.png" alt="Horrid Theme" style="width:1200px;height:600px;">
+
+After five minutes of this I realised I actually don't like my eyes being strained, so I decided to make something that was easier for them to look at. I made the background grey, and added more purple because that's my favourite colour. 
+
+<img src="neovim_purple.png" alt="Better Theme" style="width:1200px;height:600px;">
+
+## How? 
+Okay so the way this works is to download the `theme.vim` file (after customising your theme) into a `colors` directory within your neovim configuration directory (in `~/.config/nvim`). 
+
+![colors directory](colors_directory.png)
+
+Then you can put these two lines into the `init.lua` file, replacing my `gay7.vim` with whatever your theme is: 
+```lua
+vim.opt.termguicolors = true
+vim.cmd("colorscheme gay7")
+```
+
+## My Colours:
+The colours I used were taken from the colour scheme of my website:
+```scss
+$white: #FFFFFF;
+$black: #000000;
+$purple: #962FFE;
+$pink: #FFA0E3;
+$periwinkle: #EBD7FF;
+$yoghurt: #d1e6ff;
+$red: #FF3030;
+$orange: #FF7930;
+$yellow: #FFF530;
+$green: #45FF30;
+$cyan: #30FFEA;
+$blue: #30A9FF;
+```

content/projects/programming/p5.js_attempt/index.md

@@ -0,0 +1,45 @@
++++
+title = "Attempt at p5.js on my Website"
+date = "2025-10-19"
++++
+I think it's cool I can have a simple graphics canvas on my website. I'm using [p5.js](https://p5js.org/) because it's simple and I'm familiar with it, having used it in high school. 
+
+## Using an HTML iframe
+An [HTML iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) is a way to display a web page within a web page. The following HTML line is going to display my p5.js sketch from the online editor.  
+
+```html
+<iframe src="https://editor.p5js.org/CJSatnarine/sketches/DHA_3rPSq" width="800px" height="800px"></iframe>
+```
+<iframe src="https://editor.p5js.org/CJSatnarine/sketches/DHA_3rPSq" width="800px" height="800px"></iframe>
+
+However, I don't like this. It shows the code, the entire editor, and you can click my username to see the scripts I wrote when I was still in highschool. Horrifying. I just want to display the canvas. 
+
+## Attempt at using an HTML canvas
+I looked into the HMTL file of the p5,js editor and saw that they had a script HTML element that pulled the p5.js library into the project, so I just copied that and pasted it into my header section of my HTML file:
+```html
+<script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
+```
+
+And then had a simple test JavaScript file with p5.js code on it:
+```js
+function setup() {
+  let canvas = createCanvas(800, 800);
+  canvas.parent('p5'); 
+}
+
+function draw() {
+  background(225);
+  ellipse(mouseX, mouseY, 50, 50);
+}
+```
+
+And added this canvas with the ID `p5` to my webpage:
+```html
+<canvas id="p5"/>
+```
+
+However, the canvas didn't show up and I got these errors in the developer's console on my browser:
+
+![errors!!](errors.png)
+
+What did this even mean? I have no clue. I was so lost with this for hours. I'll return to trying to put p5.js on my website at a later time.