Bump version to v1.2.1

Change particle color and ammount
Massive performance improvement in background rendering
2025-04-02 18:56:24 -07:00 · 2025-03-31 20:08:30 -07:00 · 2025-03-31 19:59:16 -07:00 · 2025-03-31 16:36:32 -07:00 · 2025-03-31 16:11:31 -07:00 · 2025-03-31 15:54:51 -07:00
13 changed files with 313 additions and 89 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,49 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "htmlWhitespaceSensitivity": "ignore",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.scss",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.svelte",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    },
+    {
+      "files": "*.js",
+      "options": {
+        "useTabs": true
+      }
+    },
+    {
+      "files": "*.ts",
+      "options": {
+        "useTabs": true
+      }
+    }
+  ]
+}
--- a/README.md
+++ b/README.md
@ -1,4 +1,5 @@
 # Colormatic Website
+
 [colormatic.org](https://colormatic.org)

 This project uses SvelteKit along with TypeScript and Sass. It's configured for static site generation (SSG) and prerendering at compile time to create a simple static website for Nginx to serve, with very little client-side rendering (CSR).
@ -6,22 +7,37 @@ This project uses SvelteKit along with TypeScript and Sass. It's configured for
 The Colormatic website is developed with accordance to modern web standards, however a legacy website will be available in the future for older/less capable browsers.

 To download the project, run:
+
 ```
 git clone git@git.colormatic.org:ColormaticStudios/Colormatic-Website.git
 cd Colormatic-Website
 npm install
 ```
+
 You can run the project locally with:
+
 ```
 npm run dev
 ```
+
 Or you can build the project for release with:
+
 ```
 npm run build
 ```
+
 After the project has been built, you can preview the release build with:
+
 ```
 npm run preview
 ```

-Bootstrap Icons are licensed under the [MIT](https://opensource.org/license/MIT) license.
+Before submitting a push or pull request, run:
+
+```
+npm run format
+```
+
+To format your code according to the project code format. Remember to never fight the formatter.
+
+[Bootstrap Icons](https://icons.getbootstrap.com/) are licensed under the [MIT](https://opensource.org/license/MIT) license.
--- a/package.json
+++ b/package.json
@ -1,26 +1,29 @@
 {
-	"name": "colormatic-website",
-	"version": "1.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"sass": "^1.83.4",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
-	},
-	"dependencies": {
-		"bootstrap-icons": "^1.11.3"
-	}
+  "name": "colormatic-website",
+  "version": "1.2.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "format": "prettier -w .",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
+    "sass": "^1.83.4",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "bootstrap-icons": "^1.11.3"
+  }
 }
--- a/src/component/bg.svelte
+++ b/src/component/bg.svelte
@ -50,9 +50,11 @@
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (event) => {
        dark_theme = event.matches;
-        gradientsArray.forEach((gradient: Gradient) => {
+        for (let i = 0; i < gradientsArray.length; i++) {
+          let gradient = gradientsArray[i];
          gradient.color = getRandomColor();
-        });
+          gradient.prepareBuffer();
+        }
      });

    resize();
@ -187,7 +189,7 @@
      ctx.save();
      // The source images are black, so we are inverting them
      // different amounts to get different shades of gray
-      ctx.filter = dark_theme ? "invert(0.25)" : "invert(0.75)";
+      ctx.filter = dark_theme ? "invert(0.15)" : "invert(0.8)";

      // Draw center of rotation
      // ctx.beginPath();
@ -219,20 +221,44 @@
    radius: number;
    color: string;
    alpha: number;
+    renderingBuffer: HTMLCanvasElement;
    constructor() {
      super();
      this.radius = Math.random() * 500 + 300;
      this.color = getRandomColor();
      this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
+      this.renderingBuffer = document.createElement(
+        "canvas",
+      ) as HTMLCanvasElement;
+
+      // One-shot buffer adjustment
+      this.renderingBuffer.width = this.radius * 2;
+      this.renderingBuffer.height = this.radius * 2;
+      canvasDpiScaler(
+        this.renderingBuffer,
+        this.renderingBuffer.getContext("2d") as CanvasRenderingContext2D,
+      );
+      this.prepareBuffer();
    }

-    draw() {
-      const gradient = ctx.createRadialGradient(
-        this.x,
-        this.y,
+    prepareBuffer() {
+      let bctx = this.renderingBuffer.getContext(
+        "2d",
+      ) as CanvasRenderingContext2D;
+
+      bctx.clearRect(
        0,
-        this.x,
-        this.y,
+        0,
+        this.renderingBuffer.width,
+        this.renderingBuffer.height,
+      );
+
+      const gradient = ctx.createRadialGradient(
+        this.radius,
+        this.radius,
+        0,
+        this.radius,
+        this.radius,
        this.radius,
      );
      gradient.addColorStop(0, this.color);
@ -241,19 +267,26 @@
      } else {
        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
      }
-      ctx.globalAlpha = this.alpha;
-      ctx.fillStyle = gradient;
-      ctx.beginPath();
-      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-      ctx.closePath();
-      ctx.fill();
-      ctx.globalAlpha = 1.0;
+      bctx.globalAlpha = this.alpha;
+      bctx.fillStyle = gradient;
+      bctx.beginPath();
+      bctx.arc(this.radius, this.radius, this.radius, 0, Math.PI * 2);
+      bctx.closePath();
+      bctx.fill();
+    }
+
+    draw() {
+      ctx.drawImage(
+        this.renderingBuffer,
+        this.x - this.radius,
+        this.y - this.radius,
+      );
    }
  }

  function init() {
    particlesArray = [];
-    for (let i = 0; i < 20; i++) {
+    for (let i = 0; i < 50; i++) {
      particlesArray.push(new Particle());
    }
    gradientsArray = [];
--- a/src/component/footer.svelte
+++ b/src/component/footer.svelte
@ -1,7 +1,8 @@
 <footer>
  <p>© 2025 Colormatic Studios, All Rights Reserved.</p>
  <p>
-    <a href="mailto:support@colormatic.org">support@colormatic.org</a> |
+    <a href="mailto:support@colormatic.org">support@colormatic.org</a>
+    |
    <a href="mailto:support@colormatic.org">contact@colormatic.org</a>
  </p>
 </footer>
--- a/src/component/navbar.svelte
+++ b/src/component/navbar.svelte
@ -29,11 +29,13 @@
      class="git-icon"
      target="_blank"
      rel="noopener noreferrer"
-      aria-label="Colormatic Git"><i class="bi bi-git"></i></a
-    >
-    <button on:click={toggleModalMenu} class="menu-button" aria-label="menu"
-      ><i class="bi bi-list"></i></button
+      aria-label="Colormatic Git"
    >
+      <i class="bi bi-git"></i>
+    </a>
+    <button on:click={toggleModalMenu} class="menu-button" aria-label="menu">
+      <i class="bi bi-list"></i>
+    </button>
  </div>
 </nav>

@ -46,9 +48,9 @@ Svelte modal example, https://svelte.dev/playground/modal
 <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 <span on:click={modalMenuProcessClick} id="pages" class="modalbg hidden">
  <div>
-    <button on:click={toggleModalMenu} class="close" aria-label="Close"
-      ><i class="bi bi-x"></i></button
-    >
+    <button on:click={toggleModalMenu} class="close" aria-label="Close">
+      <i class="bi bi-x"></i>
+    </button>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/zakarya">Zakarya</a></li>
@ -57,15 +59,19 @@ Svelte modal example, https://svelte.dev/playground/modal
        <a
          href="https://git.colormatic.org"
          target="_blank"
-          rel="noopener noreferrer">Colormatic Git</a
+          rel="noopener noreferrer"
        >
+          Colormatic Git
+        </a>
      </li>
      <li>
        <a
          href="https://auth.colormatic.org"
          target="_blank"
-          rel="noopener noreferrer">Colormatic ID</a
+          rel="noopener noreferrer"
        >
+          Colormatic ID
+        </a>
      </li>
      <li><a href="/about">About</a></li>
    </ul>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -22,6 +22,24 @@

 <svelte:head>
  <title>Colormatic</title>
+  <meta
+    name="description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta name="keywords" content="Open Source, Non Profit" />
+  <link rel="canonical" href="https://colormatic.org" />
+
+  <meta property="og:title" content="Colormatic" />
+  <meta
+    property="og:description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/colormatic_logo.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <main>
@ -41,8 +59,10 @@
      <a
        href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
        target="_blank"
-        rel="noopener noreferrer">Quality First Person Controller</a
+        rel="noopener noreferrer"
      >
+        Quality First Person Controller
+      </a>
    </h1>
    <p>An actually good first person controller for the Godot Engine.</p>

@ -52,8 +72,10 @@
      <a
        href="https://git.colormatic.org/ColormaticStudios/godot-bson"
        target="_blank"
-        rel="noopener noreferrer">BSON for Godot</a
+        rel="noopener noreferrer"
      >
+        BSON for Godot
+      </a>
    </h1>
    <p>A BSON serializer/deserializer for the Godot Engine</p>
  </div>
@ -69,8 +91,11 @@
      Check up on progress and changes at <a
        href="https://git.colormatic.org/ColormaticStudios/Colormatic-Website"
        target="_blank"
-        rel="noopener noreferrer">ColormaticStudios/Colormatic-Website</a
-      >.
+        rel="noopener noreferrer"
+      >
+        ColormaticStudios/Colormatic-Website
+      </a>
+      .
    </p>
  </div>
 </main>
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -1,5 +1,23 @@
 <svelte:head>
  <title>Colormatic - About</title>
+  <meta
+    name="description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta name="keywords" content="Open Source, Non Profit" />
+  <link rel="canonical" href="https://colormatic.org/about/" />
+
+  <meta property="og:title" content="Colormatic - About" />
+  <meta
+    property="og:description"
+    content="Colormatic is a non-profit project by Zakarya dedicated to creation."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/colormatic_logo.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org/about/" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <spacer></spacer>
--- a/src/routes/studios/+page.svelte
+++ b/src/routes/studios/+page.svelte
@ -1,5 +1,32 @@
 <svelte:head>
  <title>Colormatic Studios</title>
+  <meta
+    name="description"
+    content="Colormatic Studios is a creative studio dedicated to giving life to
+    Colormatic's projects. We are currently just a small group of passionate
+    volunteers working to build inspiring, intuitive and innovative creative
+    works."
+  />
+  <meta
+    name="keywords"
+    content="Open Source, Not for Profit, Game Development, World Building"
+  />
+  <link rel="canonical" href="https://colormatic.org/studios/" />
+
+  <meta property="og:title" content="Colormatic Studios" />
+  <meta
+    property="og:description"
+    content="Colormatic Studios is a creative studio dedicated to giving life to
+    Colormatic's projects. We are currently just a small group of passionate
+    volunteers working to build inspiring, intuitive and innovative creative
+    works."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/colormatic_logo.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org/studios/" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <main>
@ -11,8 +38,10 @@
        <a
          href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
          target="_blank"
-          rel="noopener noreferrer">Quality First Person Controller</a
+          rel="noopener noreferrer"
        >
+          Quality First Person Controller
+        </a>
      </h1>
      <div class="project-grid-box-contents">
        <img
@ -27,8 +56,10 @@
        <a
          href="https://git.colormatic.org/ColormaticStudios/godot-bson"
          target="_blank"
-          rel="noopener noreferrer">BSON for Godot</a
+          rel="noopener noreferrer"
        >
+          BSON for Godot
+        </a>
      </h1>
      <div class="project-grid-box-contents">
        <img
@ -74,22 +105,28 @@
          <a
            href="https://mastodon.social/@colormaticstudios"
            target="_blank"
-            rel="noopener noreferrer">Mastodon</a
+            rel="noopener noreferrer"
          >
+            Mastodon
+          </a>
        </li>
        <li>
          <a
            href="https://www.instagram.com/colormaticstudios/"
            target="_blank"
-            rel="noopener noreferrer">Instagram</a
+            rel="noopener noreferrer"
          >
+            Instagram
+          </a>
        </li>
        <li>
          <a
            href="https://www.youtube.com/@colormaticstudios"
            target="_blank"
-            rel="noopener noreferrer">Youtube</a
+            rel="noopener noreferrer"
          >
+            Youtube
+          </a>
        </li>
      </ul>
      <ul class="linktree">
@ -97,22 +134,28 @@
          <a
            href="https://git.colormatic.org/ColormaticStudios"
            target="_blank"
-            rel="noopener noreferrer">Colormatic Git</a
+            rel="noopener noreferrer"
          >
+            Colormatic Git
+          </a>
        </li>
        <li>
          <a
            href="https://github.com/ColormaticStudios"
            target="_blank"
-            rel="noopener noreferrer">GitHub</a
+            rel="noopener noreferrer"
          >
+            GitHub
+          </a>
        </li>
        <li>
          <a
            href="https://bsky.app/profile/colormaticstudios.bsky.social"
            target="_blank"
-            rel="noopener noreferrer">Bluesky</a
+            rel="noopener noreferrer"
          >
+            Bluesky
+          </a>
        </li>
      </ul>
    </div>
--- a/src/routes/video/+page.svelte
+++ b/src/routes/video/+page.svelte
@ -100,6 +100,7 @@

 <svelte:head>
  <title>Video Player</title>
+  <meta property="og:type" content="video" />
 </svelte:head>

 <spacer></spacer>
--- a/src/routes/zakarya/+page.svelte
+++ b/src/routes/zakarya/+page.svelte
@ -1,5 +1,26 @@
 <svelte:head>
  <title>Colormatic - Zakarya</title>
+  <meta
+    name="description"
+    content="I am a software and game developer, I run Colormatic and Colormatic
+  Studios, and I primarily study computer science, psychology, and
+  linguistics."
+  />
+  <link rel="canonical" href="https://colormatic.org/zakarya/" />
+
+  <meta property="og:title" content="Colormatic - Zakarya" />
+  <meta
+    property="og:description"
+    content="I am a software and game developer, I run Colormatic and Colormatic
+  Studios, and I primarily study computer science, psychology, and
+  linguistics."
+  />
+  <meta
+    property="og:image"
+    content="https://colormatic.org/img/zakarya-icon.svg"
+  />
+  <meta property="og:url" content="https://colormatic.org/zakarya/" />
+  <meta property="og:type" content="website" />
 </svelte:head>

 <main>
@ -30,29 +51,37 @@
          <a
            href="https://mstdn.party/@zakarya"
            target="_blank"
-            rel="noopener noreferrer">Mastodon</a
+            rel="noopener noreferrer"
          >
+            Mastodon
+          </a>
        </li>
        <li>
          <a
            href="https://ko-fi.com/zakarya"
            target="_blank"
-            rel="noopener noreferrer">Ko-fi</a
+            rel="noopener noreferrer"
          >
+            Ko-fi
+          </a>
        </li>
        <li>
          <a
            href="https://www.youtube.com/@czakarya"
            target="_blank"
-            rel="noopener noreferrer">Youtube</a
+            rel="noopener noreferrer"
          >
+            Youtube
+          </a>
        </li>
        <li>
          <a
            href="https://github.com/CZakarya"
            target="_blank"
-            rel="noopener noreferrer">GitHub</a
+            rel="noopener noreferrer"
          >
+            GitHub
+          </a>
        </li>
        <!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
      </ul>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,20 +1,20 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true
-	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true
+  }
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,6 +1,6 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";

 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 });
Author	SHA1	Message	Date
Zakarya	2ce9e6955f	Bump version to v1.2.1	2025-04-02 18:56:24 -07:00
Zakarya	a3a774b964	Change particle color and ammount	2025-03-31 20:08:30 -07:00
Zakarya	ac3d579254	Massive performance improvement in background rendering Turns out the performance bottleneck was actually rendering the gradients every frame, so they are now rendering to a buffer when the page loads once and that buffer is being rendered as an image every frame. No functionality has been changed; but it runs so much faster and is much more efficient on mobile devices.	2025-03-31 19:59:16 -07:00
Zakarya	db0ed8cb42	Add page metadata for each page and enable prettier-plugin-svelte	2025-03-31 16:36:32 -07:00
Zakarya	2c21504279	Add prettier-plugin-svelte	2025-03-31 16:11:31 -07:00
Zakarya	4b05bb519e	Bump package.json version to the right number	2025-03-31 15:54:51 -07:00
Zakarya	e7aba82655	Welcome, Prettier.	2025-03-31 15:51:57 -07:00