pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

chore: update portfolio

Browse source
This commit is contained in:
Kim, Jimin 2023-06-29 22:24:35 +09:00
parent 0a0273062c
commit b6dd692633
11 changed files with 90 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -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",

BIN
apps/portfolio/public/img/portfolio/exyleio.avif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.5 KiB

0
apps/portfolio/public/img/portfolio/linux-setup-script.avif → apps/portfolio/public/img/portfolio/pompup.avif
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Before After
Before After

96
packages/blog-content/markdown/projects/developomp-site.md
View file

@ -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

24
packages/blog-content/markdown/projects/exyleio.md
View file

@ -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
---

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

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

8
packages/blog-content/markdown/projects/llama bot.md
View file

@ -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).

5
packages/blog-content/markdown/projects/mocha downloader.md
View file

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

24
packages/blog-content/markdown/projects/pompup.md Normal file
View file

@ -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

27
packages/blog-content/markdown/projects/wbm.md
View file

@ -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

13
packages/blog-content/markdown/projects/wbtimeline.md
View file

@ -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