diff --git a/.vscode/settings.json b/.vscode/settings.json index bd3bf60..4567d0a 100644 --- a/.vscode/settings.json +++ b/.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", diff --git a/apps/portfolio/public/img/portfolio/exyleio.avif b/apps/portfolio/public/img/portfolio/exyleio.avif deleted file mode 100644 index 51795ff..0000000 Binary files a/apps/portfolio/public/img/portfolio/exyleio.avif and /dev/null differ diff --git a/apps/portfolio/public/img/portfolio/linux-setup-script.avif b/apps/portfolio/public/img/portfolio/pompup.avif similarity index 100% rename from apps/portfolio/public/img/portfolio/linux-setup-script.avif rename to apps/portfolio/public/img/portfolio/pompup.avif diff --git a/packages/blog-content/markdown/projects/developomp-site.md b/packages/blog-content/markdown/projects/developomp-site.md index 7bcfbac..9e0a86d 100644 --- a/packages/blog-content/markdown/projects/developomp-site.md +++ b/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 diff --git a/packages/blog-content/markdown/projects/exyleio.md b/packages/blog-content/markdown/projects/exyleio.md deleted file mode 100644 index 2b9bfb6..0000000 --- a/packages/blog-content/markdown/projects/exyleio.md +++ /dev/null @@ -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 ---- diff --git a/packages/blog-content/markdown/projects/linux setup script.md b/packages/blog-content/markdown/projects/linux setup script.md deleted file mode 100644 index 313ba73..0000000 --- a/packages/blog-content/markdown/projects/linux setup script.md +++ /dev/null @@ -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. diff --git a/packages/blog-content/markdown/projects/llama bot.md b/packages/blog-content/markdown/projects/llama bot.md index eee3571..893f5a5 100644 --- a/packages/blog-content/markdown/projects/llama bot.md +++ b/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). diff --git a/packages/blog-content/markdown/projects/mocha downloader.md b/packages/blog-content/markdown/projects/mocha downloader.md index 6d4fffe..5d3f224 100644 --- a/packages/blog-content/markdown/projects/mocha downloader.md +++ b/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. diff --git a/packages/blog-content/markdown/projects/pompup.md b/packages/blog-content/markdown/projects/pompup.md new file mode 100644 index 0000000..53d2124 --- /dev/null +++ b/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 diff --git a/packages/blog-content/markdown/projects/wbm.md b/packages/blog-content/markdown/projects/wbm.md index 599b6e8..cf58ade 100644 --- a/packages/blog-content/markdown/projects/wbm.md +++ b/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)

Overlay image

-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].

Installer image

-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 diff --git a/packages/blog-content/markdown/projects/wbtimeline.md b/packages/blog-content/markdown/projects/wbtimeline.md index 4158ea2..7ca6197 100644 --- a/packages/blog-content/markdown/projects/wbtimeline.md +++ b/packages/blog-content/markdown/projects/wbtimeline.md @@ -16,4 +16,15 @@ badges: - html5 --- - + + +## 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