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

Fixed and improved project description

Browse source
This commit is contained in:
Kim, Jimin 2022-03-05 16:53:22 +09:00
parent 31f0ad9b22
commit b7602e6cc1
1 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

40
markdown/portfolio/developomp.com.md
View file

@ -16,11 +16,16 @@ badges:
## Intro
developomp.com is my website built for blogging, data hosting, portfolio, resume, etc.
developomp.com is a website I built for blogging, data hosting, portfolio, resume, etc.
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.
## How it's used
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.
## How it works
The build process of the site can be subdivided into three major stages: _content generation_, _site building_, and _deployment_.
@ -36,29 +41,27 @@ These files are all saved in the `src/data` directory with exceptions for some i
The [markdown files](https://github.com/developomp/developomp-site/tree/master/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 features.
- Check the [`generate/parsemarkdown.ts`](https://github.com/developomp/developomp-site/blob/master/generate/parseMarkdown.ts) file to see the conversion logic.
- Check the [test post](/posts/test-post) to see all markdown related features.
- The conversion logic can be found in the [`generate/parsemarkdown.ts`](https://github.com/developomp/developomp-site/blob/master/generate/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 saved in the `src/data/icons` directory.
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#skills) are generated using the [EJS](https://ejs.co) library.
Then, other images such as the "programming skills" stats that can be seen in my [portfolio](/portfolio) and in my [github profile](https://github.com/developomp#skills).
- The [EJS](https://ejs.co) library is used for svg construction.
- The code can be found in [`generate/portfolio`](https://github.com/developomp/developomp-site/tree/master/generate/portfolio).
#### C. metadata
After all the contents are generated, json files containing metadata about the contents are generated.
This can then be imported in react for searching and listing.
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 such as my projects)
- `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
@ -69,10 +72,23 @@ Good old react build process using [react-scripts](https://www.npmjs.com/package
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 work is done in the client-side,
there is a possibility that the site is too slow to use for some users with outdated hardware especially for mobile users.
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.