Personal Page With Blog
Multi-page personal site (home, portfolio, blog, post) from view/*.html partials on PDRenderKit 1.2.0, with JS masonry and Markdown viewer.
Overview
| Item | Value |
|---|---|
| Created | 2023-06-21 |
| Category | Blog Examples |
| HTML files | index.html, portfolio.html, blog.html, blog-content.html, view/nav.html, view/header.html, view/portfolio.html, view/service.html, view/about.html, view/skill.html, view/client.html, view/contact.html, view/footer.html, view/blog-content.html |
| Source | target/20230621 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Nav (view/nav.html) | Sticky nav with brand link and :for links HOME / PORTFOLIO / BLOG; hamburger @click=tab toggles the mobile menu below 800px. |
| Header (view/header.html) | Headline, subheading and GitHub / LinkedIn buttons with reveal animation. |
| Portfolio (view/portfolio.html) | JS masonry of placeholder figures from the page's global ary (8 on index, 24 on portfolio.html) with auto-built ALL/TAG1/TAG2/TAG3 filter tabs. |
| Service (view/service.html) | 6 icon articles via :for over icon names with interpolated class fa-{{ e }}. |
| About (view/about.html) | Photo with decorative image/about.svg, bio and two 3-item timelines. |
| Skill (view/skill.html) | 8 circular pie indicators with shuffled :year values 1..8, animated when revealed. |
| Client (view/client.html) | 5 testimonial cards in a horizontal looping carousel with prev/next buttons. |
| Contact (view/contact.html) | :model form (name, email, message) with @click=send alert, beside an embedded Google Maps iframe. |
| Footer (view/footer.html) | Copyright and :for icon links (GitHub, LinkedIn, mail). |
| Blog list (blog.html) | Two-column layout: author card, 8 post links to blog-content.html, prev/next page links; sidebar with search, latest 4 posts, topics and tags; mobile floating bottom search bar. |
| Blog post (blog-content.html + view/blog-content.html) | Article header, details/summary table of contents, PDMarkdownKit viewer rendering the PDMarkdownKit README, prev/next post links, same sidebar. |
Interactions
- js/index.js and js/blog.js create new PD({id: "body"}) with nav items; each view/*.html script creates its own PD instance and, in next(), registers its *.delay elements with the shared delay_observer.
- Reveal: IntersectionObserver removes .delay, sets done=1 after 700ms (wipe overlay ::after), removes .at after 1300ms; skill pies animate on [done="1"][year].
- updateShadow(): nav box-shadow and .float-bottom shadow scale with body scroll position (0..32px).
- view/portfolio.html: absolute-positioned masonry placing each item in the shortest column (1/2/3 columns at <480 / 480 / 1024px), tag filter tabs set filter-key and updatePortfolio() re-lays out with opacity, debounced 300ms window.onresize relayout.
- view/client.html: clones the cards for an endless loop and animates scrollLeft with setInterval (10ms) on prev/next, jumping to the middle copy at either end.
- js/blog.js (module): fetches https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md and, on pages with section[name=blog-content], mounts a PDMarkdownKit viewer before section.page; also offsets the sticky sidebar top when taller than the viewport.
- In js/blog.js the tab event is an arrow function using this.$pre(), so the mobile menu toggle on blog pages has no element as this.
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.2.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.2.0/dist/PDRenderKit.js |
| PDMarkdownKit (ES module, blog pages) | 1.6.0 | https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/dist/PDMarkdownKit.module.js |
| Google Maps embed iframe | - | https://www.google.com/maps/embed?pb=... |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js (index.html, portfolio.html) | - | ./js/index.js |
| js/blog.js (blog.html, blog-content.html) | - | ./js/blog.js (type=module) |
Styling
| Item | Value |
|---|---|
| SCSS entry | sass/index.scss |
| Output CSS | css/index.css |
| Partials | function/_hsbTohsl.scss, _init.scss, _nav.scss, _header.scss, _blog.scss, _portfolio.scss, _service.scss, _about.scss, _skill.scss, _client.scss, _contact.scss, _footer.scss, animation/_section-3.scss, animation/_pie.scss, animation/_bg-move.scss |
function/_hsbTohsl defines hsb()/hsba() SCSS functions converting HSB to HSL; _init holds reset, breakpoint vars ($_800: 50rem etc.) and HSB-derived color scales (brand/success/notify/error/info/border). index.scss defines the global .at/.delay/[done] reveal with a gradient wipe ::after and a rotated a.hint watermark. _skill @imports animation/_pie and uses @for over [done][year] for pie rotation; _blog covers list/post/sidebar (sticky), details TOC and .float-bottom; _client handles [row] layouts. animation/_bg-move is present but not imported. Inline <style> sets --col-brand-5 #f1c50e and --gradient-col.
cd target/20230621
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- PDRenderKit PD templating: :path partials, :for, {{ }} incl. inside attributes (:class="... fa-{{ e }}"), :model, @click, next() lifecycle hook.
- Custom SCSS @function for HSB to HSL color conversion and generated color scales.
- Shortest-column masonry with absolute positioning computed in JS; filter via opacity/left transitions.
- Reveal wipe effect: ::after with 300% three-band gradient whose background-position is animated via [done] attribute.
- details/summary TOC, position: sticky nav and sidebar, backdrop-filter, max-width 799.99px / min-width 480, 640, 800, 1024px breakpoints.
External Assets
- https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md (fetched as blog post content)
- https://www.google.com/maps/embed?pb=... (contact map iframe)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230621.jpg (og/twitter image)
