chore: update portfolio

.vscode/settings.json

@@ -11,6 +11,7 @@
         "bspwm",
         "cairographics",
         "classnet",
+        "createreactapp",
         "deno",
         "developomp",
         "developomp's",
@@ -39,12 +40,15 @@
         "linaria",
         "nodedotjs",
         "noto",
+        "planetscale",
         "pnpm",
         "pocketbase",
         "polybar",
         "Pomky",
+        "pompup",
         "precompress",
         "rainmeter",
+        "statcounter",
         "sxhkd",
         "tailwindcss",
         "tauri",

packages/blog-content/markdown/projects/developomp-site.md

@@ -9,89 +9,41 @@ badges:
   - typescript
   - javascript
   - nodedotjs
+  - pnpm
   - firebase
   - amazonaws
   - react
+  - svelte
+  - vite
+  - createreactapp
+  - eslint
+  - prettier
   - html5
+  - markdown
+  - tailwindcss
+  - postcss
   - css3
+  - sass
 ---
 
-## Intro
+## Introduction
 
-developomp.com is a website I built for blogging, data hosting, portfolio, resume, etc.
+developomp-site is a monorepo managed by [turborepo](https://turbo.build/repo)
+and pnpm workspace.
 
-It is a static, single page application built with [react](https://reactjs.org) framework.
-It is hosted on [google firebase](https://firebase.google.com), and domain registered with [AWS](https://aws.amazon.com) Route 53.
+- https://developomp.com - about me, built with **SvelteKit**
+- https://blog.developomp.com - Blogging site, built with **React + CRA**
+- https://portfolio.developomp.com - Portfolio, built with **React + Vite**
 
-## How it's used
+The following services/technologies are used by the project:
 
-The portfolio page doubles as a project description page where it lists some interesting aspects of the project.
-It's basically a developer's note where I show parts I put extra effort and want people to know about it.
+- **Google Firebase** - site hosting & CDN
+- **GitHub Action** - Automated Building & Deployment
+- **AWS Route 53** - Domain Management
 
-## How it works
+## Interesting Stuff
 
-The build process of the site can be subdivided into three major stages: _content generation_, _site building_, and _deployment_.
+- [markdown parsing][markdown-parsing]
+- [test post](https://blog.developomp.com/posts/test-post)
 
-### 1. content generation
-
-Before the site ever gets to deal with react stuff, a sort of content pre-processing should take place.
-In this stage, markdown files are rendered to HTML, svg images are constructed, and json files containing metadata are generated.
-These files are all saved in the `src/data` directory with exceptions for some image files which are saved in the `public/img` directory.
-
-#### A. HTML generation
-
-The [markdown files](https://github.com/developomp/developomp-site/tree/16cb0ee44dbf2545951c6422e7ba442ca5c33cde/packages/blog-content/markdown) are rendered to HTML using the [markdown-it](https://github.com/markdown-it/markdown-it) library.
-Various extensions are used in this stage to extend markdown features such as footnotes, mathematical expressions, and code blocks.
-
-- Check the [test post](/posts/test-post) to see all markdown related features.
-- The conversion logic can be found in the [`packages/blog-content/src/parseMarkdown.ts`](https://github.com/developomp/developomp-site/blob/16cb0ee44dbf2545951c6422e7ba442ca5c33cde/packages/blog-content/src/parseMarkdown.ts) file.
-
-#### B. images
-
-After the all the text contents are parsed, svg images are constructed.
-
-First, icons from [simple-icons](https://github.com/simple-icons/simple-icons) that are used by the site are copied to the `src/data/icons` directory.
-Then, other images such as the "programming skills" stats that can be seen in the [portfolio](/portfolio) page and in my [github profile](https://github.com/developomp#development-skills) are generated using the [EJS](https://ejs.co) library.
-
-- The code can be found in [`packages/blog-content/src/portfolio`](https://github.com/developomp/developomp-site/tree/16cb0ee44dbf2545951c6422e7ba442ca5c33cde/packages/blog-content/src/portfolio).
-
-#### C. metadata
-
-After dealing with all the contents, json files containing metadata are generated.
-These can then be imported by react for searching and listing.
-
-Files generated in this stage includes:
-
-- `src/data/map.json` (contains information about regular blog posts and pages)
-- `src/data/portfolio.json` (contains information about portfolio related data)
-- `src/data/search.json` (contains searchable [elasticlunr](https://github.com/weixsong/elasticlunr.js) index for the search page)
-
-### 2. site building
-
-Good old react build process using [react-scripts](https://www.npmjs.com/package/react-scripts).
-
-### 3. deployment
-
-The site is deployed to firebase.
-
-## Features
-
-### Reactive UI
-
-The site is designed to work on displays of any sizes.
-Horizontal overflows are properly dealt with in small displays,
-and contents have a maximum width so it looks beautiful on ultra-wide displays.
-
-### Searching
-
-The search feature usually involves a server or service like [algolia](https://www.algolia.com).
-However, the searching logic is in the client side so there's no task that requires a server aside from static site hosting.
-
-## Limitations
-
-Because all the computation is done in the client-side,
-there is a possibility for the site to be too slow to use some users with outdated hardware (especially mobile users).
-
-Also, since the search operation also happens in the client-side,
-the client has to download every blog posts in the site for the search feature to work.
-This may be a issue for users with slow/limited access to the internet.
+[markdown-parsing]: https://github.com/developomp/developomp-site/tree/081855a4ecb6f5bf74b76758c358ea54b465b2b7/packages/blog-content

packages/blog-content/markdown/projects/exyleio.md

@@ -1,24 +0,0 @@
----
-name: Exyle.io
-overview: A free and simple community-driven competitive online multiplayer fps game
-image: /img/portfolio/exyleio.avif
-repo: https://github.com/exyleio
-badges:
-  - githubactions
-  - docker
-  - typescript
-  - javascript
-  - nodedotjs
-  - rust
-  - csharp
-  - godotengine
-  - pocketbase
-  - redis
-  - linode
-  - firebase
-  - amazonaws
-  - svelte
-  - html5
-  - css3
-  - gnubash
----

packages/blog-content/markdown/projects/linux setup script.md

@@ -1,23 +0,0 @@
----
-name: Arch Linux setup script
-overview: My Arch Linux desktop setup
-image: /img/portfolio/linux-setup-script.avif
-repo: https://github.com/developomp/setup
-badges:
-  - githubpages
-  - githubactions
-  - linux
-  - python
----
-
-## Introduction
-
-Properly setting up a desktop takes a lot of time.
-Installing all of your favorite applications and configuring them to your liking is no easy task.
-The primary purpose of this project is to solve this exact problem by automating the process of installation and configuration of applications and system.
-
-## How does it work?
-
-[Github pages](https://pages.github.com) allows the developers to deploy a static site directly from their repositories.
-I have set up a [github action](https://docs.github.com/en/actions) so that the content of the bootstrap script gets copied over to the `index.html` file in the `gh-pages` branch so it can be downloaded from https://setup.developomp.com/.
-This script then clones the rest of the repository upon execution so it can start doing its thing.

packages/blog-content/markdown/projects/llama bot.md

@@ -9,5 +9,9 @@ badges:
   - typescript
 ---
 
-The llama bot is a discord bot made for the [Llama's Pyjamas community discord server](discord.gg/2fsar34APa).
-It is written in typescript and uses the [sapphire framework](https://sapphirejs.dev).
+## Introduction
+
+The llama bot is a discord bot made for the
+[Llama's Pyjamas community discord server](discord.gg/2fsar34APa).
+It is written in typescript and uses the
+[sapphire framework](https://sapphirejs.dev).

packages/blog-content/markdown/projects/mocha downloader.md

@@ -15,4 +15,7 @@ badges:
   - css3
 ---
 
-Mocha Downloader is a cross-platform desktop download manager built with web technologies.
+## Introduction
+
+Mocha Downloader is a cross-platform desktop download manager app built with
+web technologies.

packages/blog-content/markdown/projects/pompup.md

@@ -0,0 +1,24 @@
+---
+name: Pompup
+overview: My Arch Linux desktop setup
+image: /img/portfolio/pompup.avif
+repo: https://github.com/developomp/pompup
+badges:
+  - githubactions
+  - githubpages
+  - gnubash
+  - go
+  - linux
+  - python
+---
+
+## Introduction
+
+Pompup is my third attempt at making my personal post-install utility for
+[Arch Linux](https://archlinux.org).
+
+Here are the past versions:
+
+1. https://github.com/developomp/setup-script-sh - Third version written in Shell Script
+2. https://github.com/developomp/setup-script-py - Second version written in Python
+3. https://github.com/developomp/pompup - First version written in Shell Go

packages/blog-content/markdown/projects/wbm.md

@@ -17,26 +17,31 @@ badges:
   - tauri
 ---
 
-## Intro
+## Introduction
 
-War Brokers Mods (WBM) is a mod for the game [War Brokers](https://warbrokers.io).
+The War Brokers Mods (WBM) is a mod for the game
+[War Brokers](https://warbrokers.io) consisting of 3 sub-projects:
 
-## The mod
-
-Built with C#, it uses [BepInEx](https://github.com/BepInEx/BepInEx) framework to patch different aspects of the game.
-
-## OBS Overlay
+- [mod][mod] - Built with C#, it uses the [BepInEx][bepinex] framework to patch
+  different aspects of the game
+- [OBS overlay][overlays] - Customizable overlays for [OBS studio](https://github.com/obsproject/obs-studio)
 
 <p align="center">
 	<img alt="Overlay image" src="/img/portfolio/wbm-overlays.avif" />
 </p>
 
-Overlays for [OBS studio](https://github.com/obsproject/obs-studio). Built with standard web technologies (html, css, js).
-
-## Installer
+- [installer][installer] - Utility for installing updating the mod. Built with [tauri][tauri],
+  [rust][rust], [svelte][svelte], and [tailwind css][tailwindcss].
 
 <p align="center">
 	<img alt="Installer image" src="/img/portfolio/wbm-installer.avif" />
 </p>
 
-A simple cross-platform installer and update manager. Built with [tauri](https://github.com/tauri-apps/tauri), [rust](https://github.com/rust-lang/rust), [svelte](https://github.com/sveltejs/svelte), and [tailwind css](https://github.com/tailwindlabs/tailwindcss).
+[mod]: https://github.com/War-Brokers-Mods/WBM
+[overlays]: https://github.com/War-Brokers-Mods/WBM-Overlays
+[installer]: https://github.com/War-Brokers-Mods/WBM-installer
+[bepinex]: https://github.com/BepInEx/BepInEx
+[tauri]: https://github.com/tauri-apps/tauri
+[rust]: https://github.com/rust-lang/rust
+[svelte]: https://github.com/sveltejs/svelte
+[tailwindcss]: https://github.com/tailwindlabs/tailwindcss

packages/blog-content/markdown/projects/wbtimeline.md

@@ -16,4 +16,15 @@ badges:
   - html5
 ---
 
-<!-- add yew to badges -->
+<!-- add yew to badges https://github.com/simple-icons/simple-icons/issues/7122 -->
+
+## Introduction
+
+wbtimeline is an experimental project made as an excuse to use [deno][deno]
+and [rust][rust]. The most notable thing about this project is that the frontend
+code is entirely written in the rust programming language by the power of the
+[yew][yew] framework.
+
+[deno]: https://github.com/denoland/deno
+[rust]: https://github.com/rust-lang/rust
+[yew]: https://github.com/yewstack/yew