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

Live Preview

Open the example in a new tab

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 <typing text>' 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&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.

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 <style>: --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"] > 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)