# Personal Profile (2023-05-12)

Single-page personal résumé site rendered entirely by PDRenderKit from a PDConfig object: Home typing hero, About Me profile/skills, Portfolio grid.

## Overview

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

## Live Preview

<iframe src="/target/20230512/" title="Personal Profile (2023-05-12)" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## Page Sections

| Section | Description |
|---|---|
| Mobile nav | nav with #show-nav button toggling body.show to reveal the left bar |
| Left bar (section.left-bar) | Fixed sidebar: avatar, name, Facebook/Instagram/GitHub/LinkedIn links, Home / About Me / Portfolio tabs, copyright footer |
| Home (section.home) | Full-height background photo (local image/cgfaces_*.jpg) with greeting, typing title cycling PDConfig.home.line2.list and intro lines |
| About Me (section.about) | 關於我 heading, avatar + info list (age, education, email, phone, site, GitHub), 4 fact tiles, 技能 skill bars by years, 專案 and 報價 timelines |
| Portfolio (section.portfolio) | Grid of 20 generated placeholder cards (image + title) from PDConfig.portfolio |

## Interactions

- index.html inline &lt;script&gt; defines global PDConfig (home / about / portfolio data); body is empty and js/index.js builds the whole DOM with PDRenderKit element builder ("tag.class"._([...]), _click, _go, _open)
- Tab routing via ?page=home|about|portfolio: setHome / setAbout / setPortfolio update the query with $url.__query().__history(), move .sel and replace section.right-body children (__child)
- On load "button.sel".$.click() renders the page matching the query
- js/index.js setHome → updateTitle: typing/erasing animation on #typing-area every 8s using setInterval/setTimeout
- #show-nav toggles body.show to open/close the sidebar on narrow screens

## 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.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | G-L5VYEZPVXX | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Page stylesheet (compiled SCSS) | - | ./css/index.css |
| Page script | - | ./js/index.js |
| Home background photo | - | ./image/cgfaces_e5d2485f-d7b9-45ba-a525-e45a237fe958.jpg (via css/index.css url(../image/...)) |
| Noto Sans TC (font-family only, no webfont loaded) | - | not loaded; falls back to sans-serif unless installed locally |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_left-bar.scss`, `_home.scss`, `_about.scss` |

index.scss holds resets, :root vars (--tab-width 0/240/360px, --head-width at 800/1024px) and the portfolio grid (--album-row-width 1/2/3 columns); _left-bar styles the fixed sidebar, _home the background hero with ::before overlay, _about the profile, fact tiles, skill bars ([year=N] loop) and timelines.

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

## Techniques

- Data-driven SPA: content in a config object, DOM built entirely in JS, no markup in &lt;body&gt;
- Query-string routing with history update instead of separate HTML files
- CSS variables redefined inside media queries (800px / 1024px) to resize sidebar and avatar
- Skill bars via attribute selectors [year=N] generated by SCSS loop and content: attr(skill) / attr(year) "年"
- Fixed sidebar with responsive breakpoints at 414/640/800/1024/1280/1440px

## External Assets

- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230512.jpg (og:image / twitter:image)
- https://pardn.io/web-template/target/20230512 (canonical / og:url)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
- ../image/cgfaces_e5d2485f-d7b9-45ba-a525-e45a237fe958.jpg (relative from css/, resolves inside the folder)

## Related

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