From b6dd6926330d6acd31527cbceeb403de8b710983 Mon Sep 17 00:00:00 2001 From: developomp Date: Thu, 29 Jun 2023 22:24:35 +0900 Subject: [PATCH] chore: update portfolio --- .vscode/settings.json | 4 + .../public/img/portfolio/exyleio.avif | Bin 2555 -> 0 bytes .../{linux-setup-script.avif => pompup.avif} | Bin .../markdown/projects/developomp-site.md | 96 +++++------------- .../blog-content/markdown/projects/exyleio.md | 24 ----- .../markdown/projects/linux setup script.md | 23 ----- .../markdown/projects/llama bot.md | 8 +- .../markdown/projects/mocha downloader.md | 5 +- .../blog-content/markdown/projects/pompup.md | 24 +++++ .../blog-content/markdown/projects/wbm.md | 27 +++-- .../markdown/projects/wbtimeline.md | 13 ++- 11 files changed, 90 insertions(+), 134 deletions(-) delete mode 100644 apps/portfolio/public/img/portfolio/exyleio.avif rename apps/portfolio/public/img/portfolio/{linux-setup-script.avif => pompup.avif} (100%) delete mode 100644 packages/blog-content/markdown/projects/exyleio.md delete mode 100644 packages/blog-content/markdown/projects/linux setup script.md create mode 100644 packages/blog-content/markdown/projects/pompup.md 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 51795ffb77df0506e225ffc27a0e937c0c0bb6a6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2555 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 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