Update workflow file

Author: Discusser

.github/workflows/deploy.yml renamed to .github/workflows/deploy_pages.yml

@@ -3,47 +3,38 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
 jobs:
   build_site:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
-      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
           version: 8
           cache: pnpm
-
       - name: Install dependencies
         run: pnpm install
-
       - name: build
         env:
- BASE_PATH: '/${{ github.event.repository.name }}'
-        run: |
- pnpm run build
-
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: pnpm run build
       - name: Upload Artifacts
         uses: actions/upload-pages-artifact@v3
         with:
- path: 'build/'
-
+          path: 'build/'
   deploy:
     needs: build_site
     runs-on: ubuntu-latest
-
-    permissions:
-      pages: write
-      id-token: write
-
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-
+    permissions:
+      pages: write
+      id-token: write
     steps:
-      - name: Deploy
+      - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

src/lib/components/shared/Image.svelte

@@ -5,22 +5,31 @@
 
 	let {
 		alt,
+		width,
+		height,
 		class: className,
 		...restProps
 	}: {
 		alt?: string;
+		width: string;
+		height: string;
 		class?: string;
 	} & HTMLImgAttributes = $props();
 
 	let loading: boolean = $state(true);
 </script>
 
 <div class="h-full space-y-2 text-center">
-	<div class="h-full w-full">
+	<div
+		class="h-full w-full"
+		style="{width ? 'width:' + width + 'px;' : ''}{height ? 'height:' + height + 'px;' : ''}"
+	>
 		<Skeleton class="h-full w-full {!loading ? 'hidden' : ''}" />
 		<img
 			onload={() => (loading = false)}
 			onerror={() => (loading = false)}
+			{width}
+			{height}
 			{...restProps}
 			{alt}
 			class={twMerge(

src/routes/projects/python/draw-2d/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Image from '$lib/components/shared/Image.svelte';
+</script>
+
+<div class="flex flex-col space-y-4">
+	<p class="text-2xl font-bold text-foreground">Draw 2D</p>
+	<p></p>
+	<div class="flex items-stretch space-x-4">
+		<div class="flex-[2]">
+			<Image height="300" src="/" alt="Preview of the Draw 2D program" />
+		</div>
+		<p class="flex-[3]">
+			This is one of the first programs that I made on my calculator, and it sort of served as a
+			stepping stone towards greater programs. It's very basic, and allows you to draw pixels
+			individually, adjust brush size, move the cursor, change the color.
+		</p>
+	</div>
+</div>