# Personal Introduction

Personal portfolio page on QuickUI 0.6.2: Home with typing-effect title and floating gradient blobs, Portfolio grid filtered by ?type= with copy-link share.

## Overview

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

## Live Preview

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

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

## Page Sections

| Section | Description |
|---|---|
| Nav | Title from {{ nav.title }} (current page name), Home / Portfolio tab buttons rendered with :for, GitHub / LinkedIn links and a mobile menu button. |
| Mobile tab sheet | ul#mobile-tab with the same tabs (anchors bound to e.href) and social links, shown via the 'show' class. |
| Home (:if="isHome") | 'Hello / I'm &lt;typing text&gt;' heading with blinking fake caret, intro text, Code / GitHub buttons, inline SVG via :path="image/home.svg" and image/temp1.png. |
| Portfolio (:else) | Category tabs (ALL / LAPTOP / LANDSCAPE / CITY derived from sample data) and a lazy-loaded image grid where each tile has 開啟 / 分享 actions. |

## Interactions

- new QUI({ id: 'body', data, event, when }) with page / type read from URL search params (?page=portfolio&amp;type=...).
- event.page switches isHome and tab classes without reload, then restarts the typing effect.
- event.dynamicInput: setInterval loop deletes and retypes #typing-area through iOS工程師 / 網站工程師 / 程式設計師 / Pardn Chiu every 8s.
- event.expand: under 800px the first tap expands the category tab list, a second tap navigates to its data-href.
- event.copy: copies the image URL with QuickUI String.$copy and shows '已複製' for 500ms.
- event.show adds 'show' to #mobile-tab.

## Dependencies

| Name | Version | Source |
|---|---|---|
| QuickUI | 0.6.2 | https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.2/dist/QuickUI.js |
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only, not loaded by the page) | - | sass/index.scss font-family declaration |

## Styling

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

index.scss holds the reset, nav, mobile tab sheet and animated gradient circles; _home styles the hero and typing caret; _portfolio the tab bar and grid; _about styles div.about, which the HTML does not use.

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

## Techniques

- QuickUI template syntax: {{ }}, :for, :if / :else, :class, :href, :data-*, :lazyload, :path (inline SVG), @click.
- Theme CSS variables in inline &lt;style&gt;: --clr-txt, --clr-grad-start / -end, --clr-main, --clr-bg, --grid-interval, --grid-radius, --grid-radio.
- Floating gradient circles via ::before / ::after with aspect-ratio and infinite keyframes; backdrop-filter blur panels.
- Sass @for generates [data-target="N"] &gt; li selected-tab rules; grid widths via calc() with var(--grid-interval).
- Mobile-first breakpoints 480 / 640 / 800 / 960 / 1024 / 1440px.

## External Assets

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- https://pardn.io/web-template/image/20230320.jpg (og:image; canonical also points to /target/20230320)
- image/home.svg, image/temp1.png (relative, included in folder)

## Related

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