# Personal Info

Personal resume/portfolio one-pager with a fixed left icon sidebar, skill bars, timeline, filterable horizontal portfolio carousel, pricing and contact form.

## Overview

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

## Live Preview

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

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

## Page Sections

| Section | Description |
|---|---|
| Left sidebar nav | #nav with logo P, 7 icon tabs (#tab-left, sel-driven active state) and copyright; #nav-button toggles it on mobile. |
| Intro | Avatar, name Pardn Chiu, role, GitHub/LinkedIn icons, Contact button and an animated Scroll Down mouse indicator over image/section-0.svg background. |
| About Me | Photo, bio text, 4 percentage skill bars (span[percent]) and 4 stat items (5y, 7y, +20, +40). |
| Services | 3 cards: iOS, front-end, back-end development. |
| Experience | Two columns of timeline items: education entries and work entries (UMD你的博客, JOBALL找專家, Pardn Ltd). |
| Portfolios | ALL / Web / iOS filter tabs and #body-portfolio horizontal column-flow grid with prev/next buttons; items generated by JS. |
| Pricing | 3 price cards (30k / 120k / 30k) with Contact mail buttons. |
| Clients | #body-client horizontal slider of 2 testimonial cards with prev/next buttons. |
| Get In Touch | Form with name, email, subject, message and a Send Message link (no submit logic). |

## Interactions

- js/index.js: #nav-button toggles .show on #nav and swaps its icon between fa-bars and fa-chevron-left.
- Portfolio: 20 placeholder items with random tag-key 1|2 built via "a"._({...},["img"._(src)])._open(href); tab click sets #body-portfolio[tag-filter] and resets scrollLeft, CSS shows matching items.
- Prev/next buttons page #body-portfolio and #body-client by scrollLeft = page * clientWidth + gap (16px when PDRenderKit global vw &lt;= 414, else 24px).
- Sidebar tab click jumps document.body.scrollTop to the summed heights of preceding #body children; body scroll listener sets #tab-left sel=0..6 (scroll-spy, vh/3 offset).
- js/index.js is included twice in index.html (head and before &lt;/head&gt;), and the portfolio prev/next handlers are also bound twice inside the file, so handlers and generated items are duplicated.

## 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) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js | - | ./js/index.js |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_nav.scss`, `_section-0.scss`, `_section-1.scss`, `_section-2.scss`, `_section-3.scss`, `_section-4.scss`, `_section-5.scss`, `_section-6.scss`, `_section-7.scss` |

index.scss: reset, body scroll container with 8rem left padding at &gt;=800px for the sidebar, linear-move keyframe; partials map 1:1 to the 8 sections plus _nav (fixed sidebar, sel-based icon highlight). _section-0 uses ../image/section-0.svg and a mouse-animate keyframe; _section-1 generates skill-bar widths with @for 1..100 over [percent]; _section-4 generates [tag-filter]/[tag-key] filter rules with @for. Palette vars (brand/fine/info/error/hint, 9 steps each) are in an inline &lt;style&gt; in index.html.

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

## Techniques

- SCSS @for loops generating attribute selectors ([percent="n"]::after width, [tag-filter="n"] [tag-key="n"]).
- content: attr(percent) "%" to print the value from an HTML attribute.
- Horizontal paged gallery using flex-flow: column wrap with calc()-computed height and overflow hidden, paged via scrollLeft.
- Filter by toggling max-width/opacity transitions instead of display.
- Five 9-step color scales as CSS custom properties; breakpoints 414px, 480px, 640px, 800px, 1024px.

## External Assets

- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (avatar, photos, portfolio and client placeholders)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230610.jpg (og/twitter image)

## Related

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