feat(UI): Game-Menu Redesign, Tactical Project Dossier & Interactive Single-Page Hub - #85
Merged
Conversation
…cture (phase 1) (#80) - Add SectionNavigationService for reactive hash-synced section routing (#inicio, #sobre-mi, #proyectos) - Refactor LandingPage into full-screen section viewport container with FAB and contact modal overlay - Refactor TopNavComponent with brutalist active tab indicators and tactile feedback - Set up core/animations module and GsapAnimationService for parallax 3D and draggable post-its - Remove hardcoded skill-chart component and legacy slow floating CSS animations refs #80
…ansitions and unified dark canvas
…y and responsive layouts
…peed - Convert all backgrounds, character illustrations, and project captures to WebP format - Reduce total asset bundle weight from 33.8MB down to 4.8MB (-86% bandwidth savings) - Add sharp for lossless and high-quality image processing - Add dynamic WebP path resolver in PortfolioContentService for Firestore documents - Update nav logo asset reference to WebP
… crossfade - Add reactive theme switcher button in top navigation bar - Integrate ThemeService signals for system/light/dark preference persistence - Add subtle 0.55s crossfade between light and night studio desk backgrounds
…ic detail zoom - Implement Desk Scatter & Snap entrance physics with GSAP orchestrating card drops, tape sticking and HUD entry - Implement immersive Grab & Zoom transition expanding active Polaroid to full viewport before route navigation - Add flat-lay perspective physics with tilted dropped lateral cards and smooth focus elevation - Integrate photo seamlessly into Polaroid paper removing hard black borders and hover zoom
- Add Cosmic Warp & Hero Float GSAP entrance animation for hero section - Orchestrate background nebula expansion, zero-g character descent, and typography punch-in - Maintain seamless transition into continuous multi-plane mouse parallax
…port overflow - Add scrollbar-gutter: stable and base overflow rules to html and body - Add overflow-hidden to game-viewport and screen-view preventing temporary scrollbar flashes during section transitions
…cal paper and tape aesthetics - Implement Dossier Unfold & Stamp entrance animation with GSAP orchestrating panel drop, stamp sticking and badge cascades - Redesign KnowMe component with authentic dev dossier metadata header, marker highlights, and tactile manifesto stickers - Redesign TechStack component with modular hardware cartridges, category tags, and 3D brutalist chip badges - Add DEV_ARCHIVE status badge to section heading
… styling - Add backdrop-blur-md and refined brutalist borders to top navigation bar - Add tactile hover and active scale animations to brand logo and game tabs - Maintain original KOJI brand typography and avatar illustration intact
…th drop-shadow - Style navbar links as tactile brutalist buttons with index tags (01 // Inicio, 02 // Sobre Mí, 03 // Proyectos) - Add SYS_ONLINE indicator pill next to KOJI brand title - Unify Sobre Mí section heading with iconic centered title-shadow and subtitle matching Proyectos
…tech stack grid - Darken section background and eliminate washed-out grey noise inside cards in dark mode - Boost text contrast with bright crisp white (#f4f4f5) and refined line-height for effortless readability - Rebalance Tech Stack into a symmetrical 2x2 grid eliminating empty dead zones - Enhance solid neon border contrast for manifesto items and tech badges
…bar overlap - Remove Panama // UTP badge pill from KnowMe component - Fix vertical spacing in TechStack panel eliminating the empty dark middle space - Add sufficient top padding to about section preventing the fixed navbar from overlapping the title
… and tactical spinner - Maintain textured paper background with radial focus vignette in light and dark modes - Embed anime cyber eye inside counter-rotating tactical spinner ring - Implement full eye cycle animation: eyelid opening, glancing left and right, and blinking before opening the scene - Refine loading phrase into a compact terminal-styled status badge with pulsing light
… background - Remove spinning outer ring and glow artifacts for a sharp, clean vector eye - Enlarge anime eye with crisp manga contour lashes and smooth look-around animation - Remove box frame from text for minimal typography - Add realistic asynchronous electric lightning discharges flashing across the textured background
…presentation - Eliminate SVG lightning canvas and keyframes - Focus entirely on the enlarged, crisp anime eye and minimal typography on textured canvas
…mic board backgrounds
…and interactive CV access
15 tasks
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
1 participant
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.
Summary & Context
1. What was done
This PR completely overhauls the portfolio's architecture and layout into an immersive, single-page "Game-Menu" hub with zero global vertical scroll. It introduces seamless signal-driven view transitions between Home, About Me, and Projects, complemented by interactive modal experiences for Contact and an in-depth Tactical Project Dossier. The project detail experience was re-architected into a multi-tab confidential file folder featuring a full-bleed uncropped mockup screen, confidential Manila-styled technical challenges, custom rotated tech stack cards with interactive system architecture diagrams, and a vintage Polaroid gallery with animated lightbox inspection. Additionally, direct access to the downloadable Curriculum Vitae (PDF) was integrated across the Hero CTA and dynamic top navigation.
2. Why it was done
The previous multi-page and long-scroll design resulted in fragmented user journeys, visual disconnects during navigation, and GPU rendering overhead on laptops and mobile devices. To establish a distinct neo-brutalist anime identity, every component was redesigned to feel tactile, responsive, and cohesive—eliminating tedious page reloads in favor of immediate in-place exploration while guaranteeing high-contrast legibility across both light and dark tactical themes.
3. Purpose & Impact
This refactor delivers a 60–120 FPS experience powered by Angular Signals, fine-tuned GSAP animations, and GPU-accelerated hardware layers that eliminate frame drops across low-power laptops and mobile screens. Visitors and technical recruiters can now seamlessly review production experience, explore architectural trade-offs, inspect live demos/repositories, and access the CV with zero navigation latency and maximum visual engagement.
Key Changes Breakdown
SectionNavigationServicewith Angular Signals for smooth in-page transitions and zero scroll hijacking.VER PROYECTOS&VER CV (PDF)) with tactical Material Symbols and responsive top-nav badge toggling.01 // RESUMEN,02 // DESAFÍOS,03 // STACK,04 // GALERÍA).translateZ(0),power2easings).closes #80