Personal Page
Purple-themed developer portfolio one-pager (PARDN CHIU) with hero, about, services, JS-generated portfolio grid, testimonials and subscribe band.
Overview
| Item | Value |
|---|---|
| Created | 2023-06-07 |
| Category | Personal Examples |
| HTML files | index.html |
| Source | target/20230607 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Fixed nav | Brand Pardn Ltd, items HOME / ABOUT / SERVICE / PORTFOLIO / CLIENT / CONTACT (HOME has .sel), hamburger button; no handlers attached. |
| Header | "I AM PARDN CHIU / SENIOR FULL-STACK DEVELOPER" with GitHub and CONTACT buttons beside image/header.png. |
| About (num=0) | image/section-0.jpg with offset box-shadow, LET ME INTRODUCE MYSELF text and LinkedIn button. |
| Services (num=1) | 4 cards: iOS, front-end, back-end, full-stack development with Font Awesome icons. |
| Portfolio (num=2) | ALL / WEB / IOS filter tabs (static), #portfolio grid filled with 20 placeholder images by inline script, static pager dots. |
| Testimonials (num=3) | 4 client cards with avatar and quote plus static pager dots. |
| Subscribe (num=4) | Gradient band with email input and Subscribe button (no handler). |
| Footer | Copyright and mail / GitHub / LinkedIn icons. |
Interactions
- Inline script on DOMContentLoaded calls PDRenderKit LazyListener() and builds 20 album items with "a".(["img"._({src})]) into a DocumentFragment, appended via portfolio._child().
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 |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |
Styling
| Item | Value |
|---|---|
| SCSS entry | sass/index.scss |
| Output CSS | css/index.css |
Single-file SCSS (no partials): reset, fixed nav with .sel underline, header glass card, [num="0"]..[num="4"] section blocks, footer, and a linear-move keyframe animating gradient background-position on buttons and cards. HSL brand scale vars (--col-brand-lightest..darkest, hue 271) and --width-max 1280px live in an inline <style> in index.html.
cd target/20230607
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- HSL color scale as CSS custom properties (7 steps of hue 271).
- Animated gradients: linear-gradient + @keyframes linear-move shifting background-position.
- PDRenderKit element factory "tag"._(children|attrs) and element._child() for DOM building; _LazyListener() lazy image loader.
- Breakpoints 640px, 644px, 800px, 1024px; backdrop-filter blur; offset box-shadow decoration.
External Assets
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (testimonial and portfolio placeholders)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230607.jpg (og/twitter image)
