個人介紹

以 QuickUI 0.6.2 製作的個人作品集頁：首頁打字效果標題與漂浮漸層圓，作品集依 ?type= 篩選並可複製連結分享。

概要

區塊	說明
導覽列	標題取自 {{ nav.title }}（目前頁名），以 :for 渲染 Home / Portfolio 頁籤按鈕、GitHub / LinkedIn 連結與行動版選單鈕。
行動版選單	ul#mobile-tab 含相同頁籤（錨點綁定 e.href）與社群連結，以 show class 顯示。
首頁（:if="isHome"）	「Hello / I'm 打字文字」標題與閃爍假游標、介紹文字、Code / GitHub 按鈕、以 :path="image/home.svg" 內嵌 SVG 與 image/temp1.png。
作品集（:else）	分類頁籤（ALL / LAPTOP / LANDSCAPE / CITY，由範例資料產生）與 lazyload 圖片格線，每格附開啟／分享操作。

new QUI({ id: 'body', data, event, when })，page / type 取自網址參數（?page=portfolio&type=...）。
event.page 不重新載入即切換 isHome 與頁籤 class，並重新啟動打字效果。
event.dynamicInput：以 setInterval 每 8 秒刪除並重打 #typing-area，輪播 iOS工程師／網站工程師／程式設計師／Pardn Chiu。
event.expand：800px 以下第一次點擊展開分類列，第二次點擊才導向 data-href。
event.copy：以 QuickUI 的 String.$copy 複製圖片網址，顯示「已複製」500ms。
event.show 對 #mobile-tab 加上 show。

名稱	版本	來源
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

項目	內容
SCSS 入口	`sass/index.scss`
輸出 CSS	`css/index.css`
Partials	`_home.scss`, `_portfolio.scss`, `_about.scss`

index.scss 含 reset、導覽列、行動版選單與動態漸層圓；_home 為主視覺與打字游標；_portfolio 為分類列與格線；_about 樣式 div.about，HTML 未使用。

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

QuickUI 模板語法：{{ }}、:for、:if / :else、:class、:href、:data-*、:lazyload、:path（內嵌 SVG）、@click。
inline <style> 主題變數：--clr-txt、--clr-grad-start / -end、--clr-main、--clr-bg、--grid-interval、--grid-radius、--grid-radio。
以 ::before / ::after 搭配 aspect-ratio 與無限 keyframes 製作漂浮漸層圓；backdrop-filter 模糊面板。
Sass @for 產生 [data-target="N"] > li 選取頁籤規則；格線寬度以 calc() 搭配 var(--grid-interval)。
行動優先斷點 480 / 640 / 800 / 960 / 1024 / 1440px。

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)