Enhance cinematic finance portfolio with video backgrounds and UI#168
Open
hannopo1 wants to merge 38 commits into
Open
Enhance cinematic finance portfolio with video backgrounds and UI#168hannopo1 wants to merge 38 commits into
hannopo1 wants to merge 38 commits into
Conversation
…tfolio Full self-contained HTML/CSS/JS portfolio featuring Bloomberg-inspired dark design, Chart.js KPI dashboards, Power BI architecture docs, IFRS/VAT case studies, DAX code blocks, bilingual (EN/AR) content, and animated particle canvas — targeting GCC/MENA finance executive roles for 2026. https://claude.ai/code/session_01LoTHSt1ss6C4GShbAh7tK5
- Feature 3: upgrade reveal ease to cubic-bezier(.22,1,.36,1) at 420ms, add data-reveal="up|left|right|scale" directional variants, 60ms auto-stagger per sibling index, 15% IntersectionObserver threshold - Feature 4: inject bottom gradient accent bar on KPI cards, deepen ambient hover halo (mint + blue dual-glow), layered radial gradient surface on chart cards - Full light-mode and prefers-reduced-motion overrides for all new rules https://claude.ai/code/session_01LoTHSt1ss6C4GShbAh7tK5
Cinematic Executive Finance Portfolio — full transformation
CodeRabbit Generated Unit Tests: Add unit tests
Full-screen entry experience overlays the site on first load: - MP4 video plays muted/looped as atmospheric background - Gradient overlay preserves text contrast - Cormorant Garamond display name with aurora gradient on first name - Staggered fade-in animations for badge, name, tagline, rule, and CTA - "Enter Portfolio" button with glow hover and arrow icon - Animated scroll-hint dots at bottom - Dismissed via click, Enter / Space / Escape keys - Smooth scale+fade exit animation - Respects prefers-reduced-motion - body.splash-lock prevents scroll while splash is active Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Add cinematic splash screen with video background
Full-section cinematic video plays behind both the portrait and text columns of the cover/hero area: - MP4 sits at z-index 0, absolutely filling the entire section - Dual-axis gradient overlay (left-to-right + top-to-bottom) keeps the portrait and text fully readable - cover-art background overridden to transparent so the video shows - Portrait gains a video-aware drop-shadow for depth - prefers-reduced-motion hides the video gracefully Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Self-contained version of the portfolio with both the splash-screen and hero-section videos embedded as base64 data URIs. Runs as a single HTML file with no assets/ folder required — open directly, email, or host anywhere. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Implements the Arabic-requested القوائم القابلة للطي (Expandable ListView / Master-Detail) pattern: - Sections 3 (positioning) through 16 (education) collapse into clean, tappable title rows; cover, summary and branding stay full-width - Clicking a section title (or its eyebrow) opens a full-screen detail page that slides in, carrying that section's full content - Back button + browser history/popstate + deep-link via #hash - Escape closes; focus trap and focus restore for accessibility - Charts auto-resize when revealed inside the detail view - Full RTL support (slides from the left, mirrored chevrons) - Gated on .dl-ready so no-JS and print show full content - Respects prefers-reduced-motion - Standalone single-file build regenerated to match Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Three concrete fixes, all verified via a jsdom integration harness (233 unit tests still green): 1. Navigation double-fire — top-nav links to a detail section (Skills, Experience, Portfolio, KPIs, Dashboard, Credentials) fired BOTH the legacy smooth-scroll AND the accordion open, so the page scrolled behind the overlay. The accordion's link interception now runs in the capture phase with stopPropagation, pre-empting the smooth-scroll for detail sections only; cover/summary/branding, mailto and external links are untouched. 2. Dead click zone — the whole collapsed row showed cursor:pointer but only the <h2> and eyebrow opened the detail. Added a section-level click handler (ignoring clicks on links/buttons/the panel) so the entire row is genuinely tappable. open() is idempotent so no double firing with the title trigger. 3. Non-idempotent init — if the load event fired twice (bfcache restore, etc.) the builder duplicated every panel/overlay (28 instead of 14). Added an inited guard. Standalone single-file build regenerated to match. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
The base layout already scaled (section padding 22px on phones, overflow-x guard, breakpoints throughout); this closes the device-edge gaps in the splash / hero-video / detail-view additions: - viewport-fit=cover + env(safe-area-inset-*) padding so the splash content and detail-view bar clear notches/rounded corners - Splash no longer clips its CTA on short or landscape phones: overflow-y:auto + margin:auto centers when it fits and scrolls when it doesn't; a max-height:600px query shrinks the name, tightens spacing, and hides the scroll hint - Tablet (721–1024px): comfortable single-column hero text padding - Phone (≤600px): stronger vertical gradient on the hero video for text contrast, tighter detail-view padding - Tiny phones (≤380px): icon-only Back button so the detail title never wraps Standalone single-file build regenerated. All 233 tests pass. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Add financial dashboard portfolio
…-bmfhci Revert "Add financial dashboard portfolio"
Add a visual-only redesign layer (premium-redesign-2026) inspired by
Apple / Linear / Notion / Stripe / Arc / Material Design 3. Functionality,
content, navigation, accordion logic, charts and IA are untouched.
Scope is strictly the two contexts that render sections 3–16:
- collapsed accordion list rows
- the full-screen detail view (.dv-body)
Cover, Summary, Branding and the global theme are never affected.
Highlights:
- 8pt spacing system + design tokens (--rd-*) + 16/20/24px radii
- Inter / SF Pro typography, lifted ink colours for WCAG-AA contrast
- calmer low-chroma soft shadows, hairline borders, glass surfaces
- refined components: pillars, competency matrix, icon cards, stats,
case studies, experience timeline, Power BI schema, viz specs,
KPI/chart cards, ratio table, certifications, list rows + detail chrome
- mobile-first single-column collapse + comfortable touch targets
- focus-visible rings + prefers-reduced-motion support
Standalone build regenerated with embedded videos. All 233 tests pass.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Hero background video (Arabic report: "رعشة في فيديو الخلفية وتغيير الإضاءة عند
scroll" — video jitter and brightness shifts while scrolling):
- GPU-promote the cover video and its overlay (translateZ(0) +
backface-visibility:hidden + will-change) so the fixed backdrop-filter
navbar and animated background layers no longer force the video to repaint
on scroll → no more shimmer / brightness flicker
- give #cover its own compositor layer to isolate it from the fixed
background layers
- drop background-attachment:fixed on ≤1024px (a known touch-scroll jitter
source) so the subtle grid scrolls smoothly
CodeRabbit review (PR #12):
- keep #branding out of the redesign scope: move the list-closing hairline
from #branding to the last in-scope row (#education)
- deep-link history: seed a list entry before opening the detail dialog so
Back from a direct #section URL closes to the list instead of leaving the
page (matches the row-click open() flow)
Standalone rebuilt with embedded videos. All 233 tests pass.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Premium mobile redesign of sections 3–16 (visual-only)
Each of the 14 portfolio sections (positioning through education) now has a unique pure-CSS background animation that visually expresses its content: pillars for positioning, radar rings for competencies, digital-matrix dots for technical, timeline streak for experience, amber burst for achievements, morphing blob for transformation, node grid for ERP, rising chart for performance, neural rings for AI, pulsing tiles for KPI, rotating spokes for Power BI, spectrum gradient for visual analytics, waveform sweep for dashboard, and star-field twinkle for education. Animations activate in both the collapsed list-row (::after) and the full-screen detail view (#detail-view::before via MutationObserver). All animations use GPU-composited properties (transform/opacity) only and are fully disabled under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Re-embeds both MP4 videos as base64 data URIs into the updated index.html so the self-contained index-standalone.html includes the new §03–§16 background animations and works fully offline. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
The absolutely-positioned ::before on the fixed flex detail-view container triggered a shrink-to-fit quirk in Chromium, blowing the detail view out to content width (708px on a 390px viewport) and clipping cards off the right edge. Scaling/rotating ::after layers on the collapsed rows likewise bled past the section edges and widened the page. - #detail-view[data-open-sec] gets explicit width:100vw + overflow:hidden (inner .dv-body keeps its own vertical scroll) - in-scope collapsed sections get overflow:hidden to clip the animated layer Verified with headless Chromium at 390 / 768 / 1280px: document and detail-view widths now match the viewport in every state; all 233 tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
The §15 executive dashboard loaded Chart.js from a CDN — the only remaining external script — so all 12 KPI sparklines and the Revenue Trend chart were blank whenever the page was opened without internet, including in the self-contained standalone file. Inlining the Chart.js 4.4.1 UMD bundle makes the dashboard render in every context. Verified offline in headless Chromium: window.Chart is defined and all 12 canvases instantiate Chart instances; all 233 tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Pressing any detail card or list row and drifting a few pixels (a normal imprecise click) selected the card's text in the default grey highlight, and on touch every tap flashed the default tap-highlight box — most visible on the Competencies Matrix, Dashboard, and Executive Experience cards. Add a press-polish layer: suppress -webkit-tap-highlight-color globally, make the navigation chrome and detail-view card surfaces non-selectable (app-card behaviour), and give a branded ::selection colour where copyable content (cover / summary / branding) is still selectable. Verified in Chromium: a press-drag over cards in all three sections now selects 0 characters; all 233 tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
- Inline all five type families (Cairo, Cormorant Garamond, Inter, JetBrains Mono, Plus Jakarta Sans) as base64 woff2, subset to latin / latin-ext / arabic, and drop the Google Fonts <link> and preconnects. The page now makes zero external requests — verified in Chromium: 0 http(s) requests, 57 font faces loaded. - Disable the reveal-on-scroll fade: .reveal content now renders immediately (all 210 reveal elements visible at opacity 1, no transform/transition), removing the fade-in drift on scroll. All 233 tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Per request, remove every decorative effect that was causing interaction glitches and prepare for per-section background videos: - static-mode layer turns off all section-background animations, hover transforms, brightness/filter shifts, accent rails and transitions across sections 3–16 and the detail view. Navigation still works (rows open, detail opens) but nothing animates. - detail-view video scaffolding: a background <video> + readability scrim that plays ONLY the currently open section (never all at once) and pauses on close. Sources are read from window.SECTION_VIDEOS — empty for now, to be filled with embedded videos once provided. Verified: 0 active CSS animations in scope, detail open/close works, no JS errors; all 233 tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Each section (§03–§16) now has a unique background video that plays when the detail view is opened and pauses on close. All videos are base64-embedded as data URIs in window.SECTION_VIDEOS for 100% offline operation. Section → video mapping: - positioning: strategic positioning (minimal map + upward arrow) - competencies: 3D chart matrix visualization - technical: dense numerical data matrix on screen - experience: executive business meeting with tablet - achievements: stacked gold coins with green growth arrow - transformation: 3D city network with energy connections - erp: financial spreadsheet data tables - performance: KPI metrics (donut + gauge + bar charts) - ai: neural network data grid visualization - kpi: floating pie/donut/bar chart composition - powerbi: executive HUD with world map overlay - visual: multi-screen colorful analytics display - dashboard: full executive dashboard (pie + bar + gauges) - education: professional document review scene Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
…n videos - Replace repo index.html with latest standalone design version (splash video now embedded as base64 — fully offline, no external assets/) - Re-inject all 14 section background videos into window.SECTION_VIDEOS - Add lp-bg-style CSS + lp-bg-js: animated finance canvas (candlesticks + wave areas + floating particles) rendered inside #cover as #lp-bg overlay - Add fallback 1 s timeout on splash dismiss so animationend never blocks exit Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
- lp-bg-style CSS: positions #lp-bg canvas inside #cover (z-index 0, mix-blend-mode screen, opacity 0.7) - lp-bg-js: draws finance-themed animation directly in #cover — animated candlestick bars + two wave areas (blue/green) + rising colour particles; pauses via IntersectionObserver when off-screen - Splash dismiss: add 1 s fallback timeout so animationend can never permanently block the exit on slow / reduced-motion browsers Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Based on latest standalone design (d4411655): - Remove orb-3 ambient glow element - Hide particle-canvas (kept in DOM for test compat, display:none) - Add no-visual-effects CSS: body::before/after display:none, .reveal always visible (opacity 1, no transition/animation) - Inject all 14 section background videos into SECTION_VIDEOS Only video backgrounds remain: section videos (§03–§16), cover hero video, and splash video. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
- scroll-behavior: smooth → auto (fixes scroll jerking/lock on mobile) - Expand no-visual-effects CSS: · section.deep/alt/dark backgrounds → transparent · .dv (detail view) → flat #05070f, no gradient · .top-nav → solid bg, remove backdrop-filter blur · #loader → remove backdrop-filter blur · section::before/after → display:none - Mobile overrides (≤768px): · Sections: padding 80px 20px / min-height auto · Nav: full-width at top edge, no centering transform · Detail view: hide/show with display (no translate), full-screen scrollable - Mobile overrides (≤480px): tighter section padding - .dv-body: always overflow-y auto with touch scrolling Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
Video z-index fix (root cause of foreground bleed): - .dv-bg-video and .cover-video-bg: z-index 0 → -1 - .dv-body, .dv-back, .dv-title-row, .cover-art, .cover-text: position:relative + z-index:1 so content always renders above video Floating element cleanup: - .footer-stamp: hidden (removes fixed-position clutter) - .top-nav: no backdrop-filter blur, solid dark bg - .dv: flat #05070f bg, no gradient - #loader, .quick-jump-overlay: remove backdrop-filter - Remove the broken .dv display:none/transform:none mobile override that was preventing the slide animation from working Scroll: scroll-behavior auto, dv-body touch-scrollable Mobile: section padding reduced, nav full-width at top edge Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015guY5U7PPhbhiKmUG1Swj2
In light mode, overrides all opaque white/light backgrounds with transparent or frosted-glass equivalents so the section and cover videos are visible. Text colors switch to light (white/near-white) for readability over the dark video footage. Nav becomes dark glass.
- Dark mode nav: 0.95 → 0.45 opacity with restored blur - Dark mode cards/panels: override opaque white with rgba(8,12,28,0.28) + blur(6px) so video shows through in detail views - Light mode cards: 0.10 → 0.05 opacity, blur 10px → 5px - Light mode nav: 0.80 → 0.45, scrolled state 0.92 → 0.65
Dark mode: cards 0.28→0.10, nav 0.45→0.18, .dv bg 0.20 transparent Light mode: cards 0.05→0.03, nav 0.45→0.18, scrolled 0.65→0.30
✅ Deploy Preview for cpro-portfolio-html ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…y & body bg videos - Replace all 14 section videos (positioning→education) with new Getty footage selected for color variety and visual contrast - Add summary section to SECTION_VIDEOS with dedicated video - Embed <video> directly in #summary section as scrollable bg - Add fixed body background video (#body-bg-video) visible behind all sections as user scrolls through the portfolio
Extract all base64-embedded media from src/index.html into src/assets/media/ as real files, replacing inline data URIs with relative paths: - 16 videos → assets/media/videos/*.mp4 (26 MB) - 13 fonts → assets/media/fonts/*.woff2 (dedup from 57 refs) - 2 images → assets/media/img/* HTML shrinks from 39 MB to 514 KB — far faster to load and parse, browser-cacheable assets, and clean text diffs. Identical media is deduplicated by content hash (e.g. summary & education share one clip). All 233 tests pass.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue No:
What does this pull request do?
What is the relevant issue link:
Screenshot if applicable
Any additional information?