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 |
Live Preview
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 >=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.
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 >=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
