Finish writing pages for projects

Discusser · Discusser · commit c44bf8232f26 · 2024-11-09T19:53:30.000+01:00
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.0",
 		"globals": "^15.12.0",
+		"highlight.js": "^11.10.0",
 		"lucide-svelte": "^0.456.0",
 		"mode-watcher": "^0.4.1",
 		"prettier": "^3.3.3",
@@ -36,6 +37,7 @@
 		"stylelint-config-tailwindcss": "^0.0.7",
 		"svelte": "^5.1.12",
 		"svelte-check": "^4.0.6",
+		"svelte-highlight": "^7.7.0",
 		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/home/ContactMe.svelte b/src/lib/components/home/ContactMe.svelte
@@ -5,16 +5,21 @@
 <div class="space-y-2">
 	<p class="text-2xl font-bold text-foreground">Contact</p>
 	<p>
-		You can contact me via <a class="text-blue-500" href="mailto:discussercodes@gmail.com">mail</a>,
-		or on Discord:
+		You can contact me via <a
+			target="_blank"
+			class="text-blue-500"
+			href="mailto:discussercodes@gmail.com">mail</a
+		>, or on Discord:
 	</p>
 	<div class="grid w-1/2 auto-cols-min grid-cols-2 gap-y-2">
 		<span>Email</span>
-		<a href="mailto:discussercodes@gmail.com" class="underline hover:text-foreground"
-			>discussercodes@gmail.com</a
+		<a
+			target="_blank"
+			href="mailto:discussercodes@gmail.com"
+			class="underline hover:text-foreground">discussercodes@gmail.com</a
 		>
 		<span>GitHub</span>
-		<a href="https://github.com/Discusser" class="underline">Discusser</a>
+		<a target="_blank" href="https://github.com/Discusser" class="underline">Discusser</a>
 		<span>Discord</span>
 		<div class="flex justify-start">
 			<button on:click={() => copyToClipboard('Discusser')} class="underline decoration-dotted">
diff --git a/src/lib/components/projects/Project.svelte b/src/lib/components/projects/Project.svelte
@@ -24,7 +24,7 @@
 			{project.label}
 		</p>
 		{#if project.hasGithub}
-			<Button href={getGithubURLForProject(project)} variant="outline" size="icon">
+			<Button target="_blank" href={getGithubURLForProject(project)} variant="outline" size="icon">
 				<IconBrandGithub />
 			</Button>
 		{/if}
diff --git a/src/lib/components/shared/Footer.svelte b/src/lib/components/shared/Footer.svelte
@@ -8,10 +8,10 @@
 		<div class="flex w-1/2">
 			<p class="flex-grow text-muted-foreground/50">Web page made by Discusser with Svelte</p>
 			<div class="flex space-x-4">
-				<a href="mailto:discussercodes@gmail.com">
+				<a target="_blank" href="mailto:discussercodes@gmail.com">
 					<IconMail />
 				</a>
-				<a href="https://github.com/Discusser">
+				<a target="_blank" href="https://github.com/Discusser">
 					<IconBrandGithub />
 				</a>
 			</div>
diff --git a/src/lib/components/shared/Video.svelte b/src/lib/components/shared/Video.svelte
@@ -31,7 +31,7 @@
 		{@render children?.()}
 		<source {src} />
 		<p>
-			Your browser can't display videos! Download the video <a href={src}>here</a>
+			Your browser can't display videos! Download the video <a target="_blank" href={src}>here</a>
 		</p>
 	</video>
 	<p class="text-sm">{alt}</p>
diff --git a/src/lib/constants/projects.ts b/src/lib/constants/projects.ts
@@ -51,7 +51,10 @@ export const columns: ColumnDef<Project>[] = [
       const snippet = createRawSnippet<[string | null]>((getUrl) => {
         const url = getUrl();
         return {
-          render: () => (url ? `<a class="text-blue-500" href=${url}>${url}</a>` : '<span></span>')
+          render: () =>
+            url
+              ? `<a class="text-blue-500" target="_blank" href=${url}>${url}</a>`
+              : '<span></span>'
         };
       });
       return renderSnippet(snippet, getGithubURLForProject(ctx.row.original));
@@ -135,6 +138,7 @@ export const MINESWEEPER = addProject({
   category: Category.Web,
   name: 'Minesweeper',
   hasGithub: true,
+  hasPage: true,
   notes: 'A minesweeper clone written in HTML and JS'
 });
 export const IMG_TO_ASCII = addProject({
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts"></script>
+
+<div class="flex flex-col space-y-4">
+	<p class="text-2xl font-bold text-foreground">Blog</p>
+	<p>
+		For now, this page is empty. I will add articles once I have something interesting to write
+		about.
+	</p>
+</div>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -13,12 +13,13 @@
 		using Dart along with Flutter, which was for my
 		<a
 			class="text-blue-500"
+			target="_blank"
 			href="https://pll.harvard.edu/course/cs50-introduction-computer-science">CS50</a
 		>
 		final project. To top it all off, I of course know JavaScript (along with HTML and CSS even if they
 		aren't programming languages). I've used Vue in the past, but now I'm making this website with Svelte
 		as I prefer it over Vue. My most worthy projects are available on my
-		<a class="text-blue-500" href="https://github.com/Discusser">GitHub</a> profile
+		<a class="text-blue-500" target="_blank" href="https://github.com/Discusser">GitHub</a> profile
 	</p>
 	<p>You can find a non-exhaustive list of my projects below:</p>
 	<ProjectsTable />
diff --git a/src/routes/projects/cpp/markovsentencegenerator/+page.svelte b/src/routes/projects/cpp/markovsentencegenerator/+page.svelte
@@ -9,6 +9,7 @@
 		specific event depends solely on the state attained at the previous event. For a more complete
 		description of these, feel free to consult the <a
 			class="text-blue-500"
+			target="_blank"
 			href="https://en.wikipedia.org/wiki/Markov_chain">Wikipedia article</a
 		>
 		on markov chains. Concretely, markov chains are used for autocompletion when typing. You can see
@@ -21,13 +22,13 @@
 		in the input file, the probability of a certain word appearing right after it. The
 		<code>big.json</code>
 		model in the GitHub repository is created from a few books, taken from
-		<a class="text-blue-500" href="https://www.gutenberg.org/">Project Gutenberg</a>. In this model,
-		the word "zinc" has a 50% chance to be followed by "and", 25% chance to be followed by
-		"Immersion" and a 25% chance to be followed by "A". This is essentially what a markov chain is.
-		After parsing the JSON file and storing the information into a data structure that is optimized
-		for our needs, the program will spout whole paragraphs on autocomplete from one starting word,
-		even if they tend to be nonsensical at times, which is normal, since the words proposed by the
-		model are just suggestions of the most common words.
+		<a target="_blank" class="text-blue-500" href="https://www.gutenberg.org/">Project Gutenberg</a
+		>. In this model, the word "zinc" has a 50% chance to be followed by "and", 25% chance to be
+		followed by "Immersion" and a 25% chance to be followed by "A". This is essentially what a
+		markov chain is. After parsing the JSON file and storing the information into a data structure
+		that is optimized for our needs, the program will spout whole paragraphs on autocomplete from
+		one starting word, even if they tend to be nonsensical at times, which is normal, since the
+		words proposed by the model are just suggestions of the most common words.
 	</p>
 	<p>Example prompt using a model based on the Frankenstein book:</p>
 	<code>
diff --git a/src/routes/projects/cpp/sxhkdrofi/+page.svelte b/src/routes/projects/cpp/sxhkdrofi/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Project from '$lib/components/projects/Project.svelte';
+	import Image from '$lib/components/shared/Image.svelte';
+	import { SXHKD_ROFI } from '$lib/constants/projects';
+</script>
+
+<Project project={SXHKD_ROFI}>
+	<p>
+		On my computer, I use linux (ubuntu) with <a
+			class="text-blue-500"
+			target="_blank"
+			href="https://github.com/baskerville/bspwm">bspwm</a
+		>, a window manager. In short, a window manager is a program that completely changes the way
+		windows work. In this case, bspwm offers you multiple desktops and arranges windows following a
+		<a
+			class="text-blue-500"
+			target="_blank"
+			href="https://en.wikipedia.org/wiki/Binary_space_partitioning">binary space partitioning</a
+		>
+		method. On top of that, the window manager offers a wide variety of shortcuts to control windows
+		without having to use the mouse. Since it can be hard to learn all the shortcuts, I decided to make
+		a program that displays all the shortcuts that bspwm uses. Since they're all just stored in a config
+		file, I simply read that file and output a formatted string containing each keybinding, which can
+		then be used by a program such as
+		<a target="_blank" href="https://github.com/davatorium/rofi">rofi</a>, which displays a menu on
+		the screen containing the keybindings.
+	</p>
+	<Image alt="A preview of SxhkdRofi" src="/sxhkd_rofi.png" />
+</Project>
diff --git a/src/routes/projects/python/+page.svelte b/src/routes/projects/python/+page.svelte
@@ -11,8 +11,9 @@
 		most Python libraries to be untyped, or to have weird types, which can make the editor think
 		that your code is wrong when it's completely fine, or think that your code is fine when it's
 		totally wrong. On top of that, Python is an interpreted language, which just makes it harder to
-		spot these types of errors. However, the calculator (<a href="https://www.numworks.com/"
-			>NumWorks</a
+		spot these types of errors. However, the calculator (<a
+			target="_blank"
+			href="https://www.numworks.com/">NumWorks</a
 		>) I got for school has a Python editor, which I use when I'm bored in class. With this, I've
 		made a few different projects, ranging from simple games like snake, or flappy bird, to more
 		sophisticated programs, such as my <i>magnum opus</i>, a 3D renderer. On top of that, I also
diff --git a/src/routes/projects/python/draw-2d/+page.svelte b/src/routes/projects/python/draw-2d/+page.svelte
@@ -6,7 +6,7 @@
 
 <Project project={DRAW_2D}>
 	<div class="flex items-stretch space-x-4">
-		<Image width="500" height="300" src="/" alt="Preview of the Draw 2D program" />
+		<!-- <Image width="500" height="300" src="/" alt="Preview of the Draw 2D program" /> -->
 		<p>
 			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
diff --git a/src/routes/projects/python/draw-3d/+page.svelte b/src/routes/projects/python/draw-3d/+page.svelte
@@ -6,20 +6,20 @@
 
 <Project project={DRAW_3D}>
 	<div class="flex items-stretch space-x-4">
-		<Image width="500" height="300" src="/" alt="Preview of the Draw 3D program" />
+		<!-- <Image width="500" height="300" src="/" alt="Preview of the Draw 3D program" /> -->
 		<p>
 			This is one of, if not my most complicated program I've made on my calculator. Weighing in at
 			a whopping {(7.36).toLocaleString()} kilobytes, this program allows rendering virtually any 3 dimensional
 			shape, with the ability to rotate, translate, and scale at will. I was only able to make this thanks
 			to my experience with OpenGL, which I learned through this
-			<a class="text-blue-500" href="https://learnopengl.com/">book</a> that I highly recommend for people
-			who want to learn 3D rendering. To be honest, the concept of the renderer itself is not that complex,
-			but the implementation took a long time and a lot effort. Most of the work was implementing transforms
-			and applying those to points. Fortunately, numpy provides a function to multiply matrices, which
-			helped a lot. All that was left for me to do was actually implement the different types of transformation
-			matrices, then multiply the coordinates of the points to draw with those matrices, and finally
-			add some interactivity to allow the user to control the shape(s) being displayed using the calculator's
-			keyboard.
+			<a target="_blank" class="text-blue-500" href="https://learnopengl.com/">book</a> that I highly
+			recommend for people who want to learn 3D rendering. To be honest, the concept of the renderer
+			itself is not that complex, but the implementation took a long time and a lot effort. Most of the
+			work was implementing transforms and applying those to points. Fortunately, numpy provides a function
+			to multiply matrices, which helped a lot. All that was left for me to do was actually implement
+			the different types of transformation matrices, then multiply the coordinates of the points to
+			draw with those matrices, and finally add some interactivity to allow the user to control the shape(s)
+			being displayed using the calculator's keyboard.
 		</p>
 	</div>
 </Project>
diff --git a/src/routes/projects/python/flappy-bird/+page.svelte b/src/routes/projects/python/flappy-bird/+page.svelte
@@ -6,7 +6,7 @@
 
 <Project project={FLAPPY_BIRD}>
 	<div class="flex items-stretch space-x-4">
-		<Image width="500" height="300" src="/" alt="Preview of the Flappy Bird program" />
+		<!-- <Image width="500" height="300" src="/" alt="Preview of the Flappy Bird program" /> -->
 		<p>
 			This program is a clone of the very famous mobile game, Flappy Bird. It was surprisingly easy
 			to make. The bird itself is a square, and the pipes are just rectangles. Since you only need
diff --git a/src/routes/projects/web/+page.svelte b/src/routes/projects/web/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ProjectsTable from '$lib/components/projects/ProjectsTable.svelte';
+</script>
+
+<div class="flex flex-col space-y-4">
+	<p class="text-2xl font-bold text-foreground">Web</p>
+	<p>
+		Web development is great, because you can make practically anything on the web. You can make
+		games, tools, or actual websites. I know how to use JS, HTML, and CSS. On top of that, I've
+		tried a few web frameworks over time such as Vue and Svelte (and also React very briefly), and
+		my favorite so far is Svelte, which is what I'm using for this website. I also highly prefer
+		TypeScript over JavaScript, simply because of types. I can't stand using a language where you
+		aren't certain of the type of the object you're dealing with.
+	</p>
+	<p>You can find most of my web projects here:</p>
+	<ProjectsTable categories={['web']} />
+</div>
diff --git a/src/routes/projects/web/game-of-life/+page.svelte b/src/routes/projects/web/game-of-life/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Project from '$lib/components/projects/Project.svelte';
+	import { GAME_OF_LIFE } from '$lib/constants/projects';
+</script>
+
+<Project project={GAME_OF_LIFE}>
+	<p>
+		This is an implementation of Conway's Game of Life written in TypeScript. You can adjust the
+		speed of game, draw/erase cells by dragging or clicking on the grid, adjust the zoom level, and
+		pause or resume the game. That's about all there is to the game anyway, so it's not like I
+		could've added anything else.
+	</p>
+	<p>
+		You can try it out <a
+			class="text-blue-500"
+			target="_blank"
+			href="https://discusser.is-a.dev/game-of-life/">here</a
+		>.
+	</p>
+</Project>
diff --git a/src/routes/projects/web/minesweeper/+page.svelte b/src/routes/projects/web/minesweeper/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Project from '$lib/components/projects/Project.svelte';
+	import { MINESWEEPER } from '$lib/constants/projects';
+</script>
+
+<Project project={MINESWEEPER}>
+	<p>
+		This is a clone of Minesweeper that I made mainly to try out Nuxt.js, which is just a framework
+		built on top on Vue. The game is pretty simple, but quite addicting.
+	</p>
+	<p>
+		You can try it <a
+			href="https://discusser.is-a.dev/Minesweeper/"
+			target="_blank"
+			class="text-blue-500">here</a
+		>.
+	</p>
+</Project>
diff --git a/src/routes/projects/web/website-generator/+page.svelte b/src/routes/projects/web/website-generator/+page.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Project from '$lib/components/projects/Project.svelte';
+	import { WEBSITE_GENERATOR } from '$lib/constants/projects';
+</script>
+
+<Project project={WEBSITE_GENERATOR}>
+	<p>
+		This program is a basic static website generator written in TypeScript. I wrote it purely out of
+		curiosity, and also because I wanted to write an HTML parser. The code used to parse the HTML is
+		in no way a model to be followed, as I wrote it in a short interval without really paying
+		attention to quality of code, and solely focusing on making it work. Either way, I'm still proud
+		of this project since it just works. Even if I wouldn't recommend using this, instructions on
+		how to use the program aswell as examples are available on the <a
+			href="https://github.com/Discusser/website-generator"
+			target="_blank"
+			class="text-blue-500">GitHub repository</a
+		>.
+	</p>
+</Project>
diff --git a/static/sxhkd_rofi.png b/static/sxhkd_rofi.png
