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

Live Preview

Open the example in a new tab

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 <script> 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.

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 <body>
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)