# Simplify Blog

Two-column personal blog SPA rendered entirely by JS (PDRenderKit 1.0.1): sticky left profile/nav, right pane swapping list, article, about and contact views.

## Overview

| Item | Value |
|---|---|
| Created | 2023-07-12 |
| Category | Blog Examples |
| HTML files | `index.html` |
| Source | [target/20230712](https://github.com/pardnio/demo-web/tree/main/target/20230712) |

## Live Preview

<iframe src="/target/20230712/" title="Simplify Blog" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20230712/)

## Page Sections

| Section | Description |
|---|---|
| Left profile panel (#section-left) | Name 'PARDN CHIU', intro text, HOME/ABOUT/CONTACT menu (ul[index] marks the active item), social icon links, copyright. |
| Post list (.list) | 10 article cards (image, title, excerpt, date, category) and a static pager (‹ 1 2 3 ›). |
| Article view (.article) | Hero figure, h1, meta line and rich text body (h3/h4/h6, lists, links), plus an 'ALL POSTS' back button. |
| About view | Self-introduction with skill list, project link (JOBALL) and contact list, ending with a 'Get in touch' button. |
| Contact view (.contact) | Heading, two paragraphs and Name/Email/message inputs with a 'Get in touch' button (no submit handler). |

## Interactions

- js/index.js: _CLICK_HOME / _CLICK_ABOUT / _CLICK_CONTACT replace the whole body via body.__child() and reset scrollTop, acting as client-side view switching.
- Clicking a list card calls _CLICK_ARTICLE to show the article view; 'ALL POSTS' returns to the list.
- Social icons use PDRenderKit ._open(url) to open external links.

## Dependencies

| Name | Version | Source |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.0.1 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.1/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only) | - | declared in SCSS; no font stylesheet is linked, so it relies on a locally installed font or the sans-serif fallback |
| Montserrat (font-family only) | - | declared in SCSS; not loaded by any stylesheet |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_section-left.scss`, `_section-right.scss`, `_list.scss`, `_article.scss` |

index.scss holds the reset, safe-area vars and the body flex layout (column on mobile, row at &gt;=800px); _section-left styles the sticky profile sidebar, _section-right the content pane and buttons and imports _list (post cards) and _article (article typography). Colors use var(--color-dark-*), var(--width-max) and var(--bgcolor), which are not defined anywhere in this folder.

```bash
cd target/20230712
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## Techniques

- Whole DOM built in JS with PDRenderKit string-tag syntax: ('section' + '#id')._([...children]), array ._$() mapping, ._click(), 'fa-...'._fa icons.
- Tag names assembled from single-letter globals (_0_, __0, _0...) passed into an IIFE, e.g. [_s,_e,_c,_t,_i,_o,_n].$str('').
- position: sticky sidebar at &gt;=800px; breakpoints 480/640/800/1280px; aspect-ratio card images (16/10, 2/1, 3/1).
- env(safe-area-inset-*) CSS vars, hidden scrollbars, lazy image placeholder for img[data-src] via a 1px GIF and gradient.

## External Assets

- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (all placeholder images)
- https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20230712.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20230712

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)