Personal Info
Personal resume/portfolio one-pager with a fixed left icon sidebar, skill bars, timeline, filterable horizontal portfolio carousel, pricing and contact form.
Overview
Live Preview
Open the example in a new tab
Page Sections
Interactions
- js/index.js: #nav-button toggles .show on #nav and swaps its icon between fa-bars and fa-chevron-left.
- Portfolio: 20 placeholder items with random tag-key 1|2 built via "a".({...},["img".(src)])._open(href); tab click sets #body-portfolio[tag-filter] and resets scrollLeft, CSS shows matching items.
- Prev/next buttons page #body-portfolio and #body-client by scrollLeft = page * clientWidth + gap (16px when PDRenderKit global vw <= 414, else 24px).
- Sidebar tab click jumps document.body.scrollTop to the summed heights of preceding #body children; body scroll listener sets #tab-left sel=0..6 (scroll-spy, vh/3 offset).
- js/index.js is included twice in index.html (head and before </head>), and the portfolio prev/next handlers are also bound twice inside the file, so handlers and generated items are duplicated.
Dependencies
Styling
index.scss: reset, body scroll container with 8rem left padding at >=800px for the sidebar, linear-move keyframe; partials map 1:1 to the 8 sections plus _nav (fixed sidebar, sel-based icon highlight). _section-0 uses ../image/section-0.svg and a mouse-animate keyframe; _section-1 generates skill-bar widths with @for 1..100 over [percent]; _section-4 generates [tag-filter]/[tag-key] filter rules with @for. Palette vars (brand/fine/info/error/hint, 9 steps each) are in an inline <style> in index.html.
cd target/20230610
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- SCSS @for loops generating attribute selectors ([percent="n"]::after width, [tag-filter="n"] [tag-key="n"]).
- content: attr(percent) "%" to print the value from an HTML attribute.
- Horizontal paged gallery using flex-flow: column wrap with calc()-computed height and overflow hidden, paged via scrollLeft.
- Filter by toggling max-width/opacity transitions instead of display.
- Five 9-step color scales as CSS custom properties; breakpoints 414px, 480px, 640px, 800px, 1024px.
External Assets
