- Moved menu hover logic from JavaScript to CSS selectors, reducing JS to minimal bridge code
- Replaced JavaScript-based toast timing with pure CSS animation lifecycle (slide in → stay → fade out)
- Removed unnecessary event handlers and legacy compatibility code for cleaner implementation
- Replace CSS zoom with transform: scale() for proper viewport extension
- Add dynamic margin-bottom to position footer correctly
- Remove zoom: 1 reset from fixed buttons (no longer needed)
- Enables true zoom from 10% to 500% that extends beyond viewport
- Add green background (#27ae60) to info and back-to-top buttons when at page bottom
- Implement bottom detection (within 50px threshold) in scroll handler
- Add conditional green hover to zoom reset button (only when zoom ≠ 100%)
- Enhance UX with visual feedback for scroll position and zoom state
Switched from transform: scale() to CSS zoom property on zoom-wrapper.
CSS zoom changes actual layout space, not just visual rendering:
- At 50% zoom, wrapper takes 50% space (no reserved empty space)
- Footer naturally follows right after zoomed content
- At 200% zoom, content extends beyond viewport with scrolling
- Fixes the large gray gap between content and footer
- Created zoom-wrapper div around cv-container
- Zoom now applies to wrapper only, footer adjusts naturally below
- Footer no longer scaled, stays at normal size
- Fixes gap between content and footer at low zoom levels
- Reduced back-to-top button size (35px default, grows to 50px on hover)
- Cleaner separation of concerns for zoom functionality
- Moved "Zoom" button from action bar to hamburger menu under "Acciones Rápidas"
- Close button (X) now grey/subtle by default (opacity: 0.7)
- Close button turns red only on hover for clear indication
- Updated JavaScript to reference show-zoom-menu-btn instead of show-zoom-btn
- Added preventDefault to showZoomControl to prevent link navigation
- Add close button (X) to zoom control widget
- Make zoom control draggable anywhere on screen
- Persist dragged position in localStorage (cv-zoom-position)
- Add "Zoom" button to action bar to show control when hidden
- Persist visibility state in localStorage (cv-zoom-visible)
- Cursor changes to "move" to indicate draggability
- Interactive elements (slider, buttons) don't trigger drag
- Position stays within viewport bounds
- All features work on desktop only (zoom hidden on mobile)
- Hide zoom control on mobile viewports (≤768px) via CSS
- Skip loading saved zoom on mobile, always use 100%
- Add resize handler to reset zoom when switching to mobile view
- Clean up unnecessary mobile-specific zoom styles
- Prevents confusion on touch devices where zoom is less useful
Changed zoom target from .cv-paper to .cv-container and .cv-footer to fix issue
where 50% zoom still reserved 100% document space creating empty areas. Both
elements now scale together, properly reducing space at low zoom levels while
keeping main action bar unaffected.
- Modified applyZoom() to target .cv-container and .cv-footer
- Added transform-origin, transition, and will-change to both CSS selectors
- Maintains proportional scroll compensation for smooth visual experience
Increased .cv-main bottom padding from 1rem to 8rem to ensure:
- Footer is fully visible and not hidden behind content
- Adequate clearance for zoom control (positioned at bottom: 100px)
- Proper breathing room between content and footer
Result: Footer now properly visible in normal view
The margin-top: -60px on .cv-footer was pulling the footer up too much,
hiding the GitHub link and other footer content.
Removed the negative margin - the reduced .cv-main bottom padding
(1rem instead of 3rem) already provides better spacing without hiding content.
Result:
- Footer content (GitHub, LinkedIn links) now visible
- Still has better spacing than before
- Zoom control at 100px bottom clears footer properly
Fixed two issues with zoom and footer:
1. Dynamic height adjustment based on zoom level:
- Store original height on first zoom (dataset.originalHeight)
- Calculate scaled height: originalHeight × scale factor
- Set container height dynamically to match visual content
- Example: 50% zoom → height = originalHeight × 0.5
- Prevents empty space below content at low zoom
- Prevents overflow at high zoom
2. Footer spacing and positioning:
- Reduced .cv-main bottom padding: 3rem → 1rem
- Added .cv-footer margin-top: -60px to pull footer up
- Increased .zoom-control bottom: 70px → 100px
- Zoom control now clears footer GitHub link
Result:
- Footer appears immediately after content at any zoom level
- No wasted empty space below content
- Zoom control doesn't overlap GitHub link
- Page height dynamically adapts to zoom level
The viewport-centered zoom approach was creating empty space above
the content when zooming to 50%, causing the CV to move down.
Solution: Simple top-anchored zoom
- Removed all complex scroll compensation logic
- Set transform-origin to "top center" (fixed position)
- Page now scales naturally from the top without movement
- No dynamic transform-origin calculations
- No scroll position adjustments
Result:
- Page stays anchored at top during zoom
- No empty space created above content
- Clean, predictable zoom behavior
- Works correctly at all zoom levels (50%-200%)
The page simply scales up/down from the top center point,
maintaining its position without any jumping or space issues.
Changed zoom behavior from "page-relative" to "viewport-relative":
Before:
- Zoomed from top of page causing perspective/depth effect
- Content appeared to move "through" the viewer
- Disorienting experience when scrolled down
After:
- Zooms from center of YOUR viewport (where you're looking)
- Content expands both above and below your position
- You stay at your original viewing point - no movement
- Like pinch-to-zoom: magnifies what you're currently viewing
Technical implementation:
1. Calculate viewport center relative to page (scrollTop + viewportHeight/2)
2. Convert to percentage of page height
3. Set transform-origin dynamically to that percentage
4. Apply scale transform from your viewing position
5. Adjust scroll to keep same content at viewport center
CSS changes:
- Default transform-origin: center center (was top center)
- Added transition for transform-origin: 0s (instant, no animation)
- Maintains smooth 0.08s linear transform transition
Result: Natural, stable zoom that feels like magnifying glass
Design improvements based on user feedback:
- Move current zoom value inside circular reset button
- Add colorful gradient (red→orange→blue→green) to slider on hover
- Make reset button perfectly circular (44px diameter)
- Dynamic value display updates in real-time inside button
- Maintains gray monochrome when not hovering
- Enhanced visual feedback with smooth color transitions
- Mobile responsive with smaller circular button (38px)
Technical changes:
- HTML: Moved #zoom-value-current span inside button
- CSS: border-radius 50%, min-width/min-height for perfect circle
- CSS: Gradient hover for both WebKit and Firefox sliders
- JavaScript: Already compatible (targets same element ID)
Visibility Improvements:
- Background: darker gray rgba(128, 128, 128, 0.7) instead of light transparent
- Base opacity: 0.7 (was 0.3) - much more visible by default
- Text: white/light gray instead of dark gray (better contrast on gray bg)
- Slider track: lighter gray rgba(200, 200, 200, 0.5) - more visible
- Slider thumb: bright white with light border - stands out clearly
- Reset button: lighter background with white text - easier to see
- Larger padding and sizing for better visibility
- Hover state: full opacity with darker background
Result: Control is clearly visible while maintaining elegant gray aesthetic
PROBLEM:
- Previous grid approach (50% 30%) didn't work correctly
- Language selector is INSIDE .site-title div, not a separate grid column
- Grid structure: .site-title | .view-controls-center | .action-buttons-right
SOLUTION @ 540px:
Grid Structure:
- Changed .action-bar-content to single column (1fr)
- Hide .view-controls-center and .action-buttons-right
- .site-title becomes the only visible element
Flexbox Inside .site-title:
- .site-title: display: flex, justify-content: space-between
- .site-title-left: flex: 1 1 55% (hamburger + title area)
* Contains hamburger button and CV JAMR title
* flex-grow allows expansion, flex-shrink allows contraction
- .language-selector: flex: 0 0 35% (language buttons)
* Fixed at ~35% width, doesn't grow or shrink
* justify-content: flex-end (align buttons to right)
Text Overflow Protection:
- .site-title-link: overflow: hidden
- .site-title-text: white-space: nowrap, text-overflow: ellipsis
- Prevents title from breaking layout
RESULT:
Mobile distribution:
✓ Hamburger + Title area: ~55% (flexible)
✓ Language selector (EN/ES): ~35% (fixed)
✓ Remaining ~10%: gaps and padding
✓ Visual result: approximately 50% / 30% with breathing room
BENEFITS:
- Proper space distribution matching internal HTML structure
- Language buttons have adequate touch targets
- Title can truncate gracefully if needed
- All controls still accessible via hamburger menu
PROBLEM:
- Mobile action bar using equal width distribution (1fr auto 1fr)
- Not optimal space utilization on small screens
- Action buttons and center controls taking unnecessary space
SOLUTION @ 540px breakpoint:
.action-bar-content:
- Changed grid: 1fr auto 1fr → 50% 30%
- Hamburger menu + title area: 50% width
- Language selector area: 30% width
- Reduced gap: 2rem → 0.5rem
- Reduced padding: auto → 0.5rem horizontal
Hidden elements on mobile:
- .view-controls-center: display: none (moved to hamburger menu)
- .action-buttons-right: display: none (PDF/Print in hamburger menu)
RESULT:
Mobile layout distribution:
✓ Hamburger + CV title: ~50% (more breathing room)
✓ Language selector (EN/ES): ~30% (adequate space)
✓ Remaining 20%: natural spacing/padding
✓ Center controls hidden (accessible via hamburger menu)
✓ Action buttons hidden (accessible via hamburger menu)
BENEFITS:
- Better space utilization on small screens
- Clearer visual hierarchy
- More touch-friendly target areas
- All functionality still accessible via hamburger menu
- Replace blue border with green curly brackets { } using CSS pseudo-elements
- Add proper spacing and vertical centering with inline-flex
- Add engaging subtext below GitHub button: "Want to know how it's built?"
- Bilingual support for subtext (EN/ES)
- Change sidebar titles from center to left alignment for better readability
- Update badge from "Senior Consultant" to "Technical Consultant"
- Applies to both English and Spanish versions
- Changed right sidebar title alignment from center to right for consistency
- Added center alignment to sidebar accordion headers
- Fixed mobile sidebar alignments to respect left/right positioning (left sidebar: left-aligned, right sidebar: right-aligned)
PROBLEM:
- Right sidebar title was right-aligned instead of centered
- Inconsistent title alignment between left and right sidebars
SOLUTION:
All Sidebars (Desktop):
- .sidebar-title: text-align: center (all section titles centered)
Left Sidebar Content:
- .cv-sidebar-left .sidebar-content: text-align: left
- .cv-sidebar-left .skill-item: text-align: left
Right Sidebar Content:
- .cv-sidebar-right .sidebar-content: text-align: right
- .cv-sidebar-right .skill-item: text-align: right
Mobile @ 768px:
- Both sidebars content: text-align: left !important (unchanged)
RESULT:
Desktop:
✓ Left sidebar: title centered, content left-aligned
✓ Right sidebar: title centered, content right-aligned
✓ Visual consistency with centered titles
✓ Content flows naturally from title position
Mobile:
✓ Both sidebars: content left-aligned for readability
✓ No changes to mobile behavior
VISUAL HIERARCHY:
- Titles centered = visual anchors
- Content aligned to sidebar position = natural reading flow
PROBLEM:
- Right sidebar content was left-aligned on desktop
- Created visual inconsistency with sidebar position
SOLUTION:
Desktop (default):
- Added .cv-sidebar-right .sidebar-content { text-align: right; }
- Added .cv-sidebar-right .skill-item { text-align: right; }
- Content now aligns to the right side matching sidebar position
Mobile @ 768px:
- Override with text-align: left !important for both sidebars
- Ensures consistent left-aligned reading experience on mobile
- Applies to .sidebar-content and .skill-item in both sidebars
RESULT:
Desktop:
- Left sidebar: content left-aligned ✓
- Right sidebar: content right-aligned ✓
- Visual symmetry and proper alignment
Mobile:
- Both sidebars: content left-aligned ✓
- Consistent reading experience
- Better usability on small screens
TECHNICAL:
- Desktop rules apply by default
- Mobile rules use !important to override for both sidebars
- Clean separation of desktop/mobile behavior
CHANGES @ 768px breakpoint:
- .footer-label: 0.85rem → 1.1rem (bigger, more prominent)
- .footer-value: 1.1rem → 0.85rem (smaller, supporting text)
- .footer-value b: 1.2rem → 0.95rem (adjusted for consistency)
RATIONALE:
- Labels (linkedin_, github_, email@, phone#) are visual anchors
- Values (URLs, email, phone) are supporting details
- Inverted hierarchy provides better visual structure on mobile
- Labels now stand out as section headers
- Values are readable but less visually dominant
RESULT:
- Clearer visual hierarchy in mobile footer
- Labels more prominent as category identifiers
- Values easier to scan without overwhelming the layout
PROBLEM:
- Email and phone were appearing on the same line in mobile footer
- User wants each property (linkedin, github, domestika, email, phone) on its own line
SOLUTION:
- Added `.footer-content li { display: block !important; }` for mobile @ 900px
- Added `margin-bottom: 1.5rem` for spacing between footer items
- Overrides desktop `display: inline-block` behavior
RESULT:
- Each footer property now displays on a separate line in mobile view
- Better vertical spacing and readability
- Cleaner mobile footer layout
PROBLEM:
- Left and right sidebars occupy too much space on mobile
- User wants curriculum (main content) prioritized on mobile
- Sidebars should be collapsed by default, expand only on user interaction
SOLUTION:
HTML Changes (cv-content.html):
- Wrapped each sidebar in accordion structure
- Added .sidebar-accordion-header with brain icon, title, and chevron
* Left sidebar: "Technical Skills" / "Competencias Técnicas"
* Right sidebar: "More Skills" / "Más Competencias"
- Added .sidebar-accordion-content wrapper around sidebar sections
- Added onclick="toggleSidebar(this)" handler
CSS Changes (main.css):
Desktop (default):
- .sidebar-accordion-header: display: none (hidden on desktop)
- .sidebar-accordion-content: always visible (no restrictions)
Mobile @ 900px:
- .sidebar-accordion-header: display: flex, styled as clickable bar
* Padding: 1rem 1.5rem
* Background: var(--sidebar-gray) with hover effects
* Font: 700 weight, 1.1rem size
* Chevron rotates 180deg when active
- .sidebar-accordion-content: collapsed by default
* max-height: 0 (collapsed)
* max-height: 5000px when .active (expanded)
* Smooth transitions: 0.3s ease-out (close) / 0.5s ease-in (open)
* Padding: 0 when closed, 1.5rem when open
- .cv-sidebar: padding: 0 (accordion header handles padding)
JavaScript Changes (index.html):
- Added toggleSidebar(header) function
* Toggles .active class on header and content
* Smooth expand/collapse animation via CSS max-height transition
DATA Changes (cv-en.json, cv-es.json):
- Updated summary with more professional, experience-focused description
- Emphasizes 18+ years experience, international clients, practical solutions
BEHAVIOR:
- Desktop: Sidebars always visible, no accordion headers
- Mobile: Sidebars collapsed by default showing only header bar
- Click header: Expands sidebar with smooth animation
- Click again: Collapses sidebar
- Main content prioritized and always visible
- Each sidebar toggles independently
PROBLEM:
- Left and right sidebars overlapping main content on mobile
- Headers and footers with incorrect padding/font sizes
- Page margins too large for mobile screens
- Badge sizes not optimized for mobile
SOLUTION @ 900px breakpoint:
- Changed page-content from CSS Grid to Flexbox for proper stacking
- Set all sections to width: 100% and position: static
- Added proper flexbox ordering (sidebar-left → header → main → sidebar-right → footer)
- Reduced cv-page margin to 0.5rem, removed border and box-shadow
- Reduced padding: sidebars and main content to 2rem 1.5rem
- Fixed title badges header: 0.75rem 1rem padding, 0.85rem font
- Fixed badges: 0.75rem font, 0.25rem 0.5rem padding
- Fixed footer: 1.5rem 1rem padding, 0.9rem label, 1.2rem value
SOLUTION @ 768px breakpoint:
- Further reduced margins and padding for small screens
- cv-page margin: 0.25rem
- Sidebar/main padding: 1.5rem 1rem
- Header padding: 0.5rem 0.75rem
- Badge font: 0.7rem
- Footer fonts: 0.85rem label, 1.1rem value, 1.2rem value bold
- Sidebar title: 1.1rem, content: 0.85rem
- Section titles: 1.1rem
- Added text-align: left for right sidebar on mobile
TECHNICAL CHANGES:
- Replaced grid-template-columns with display: flex + flex-direction: column
- Unset grid-column and grid-row properties on mobile
- Used !important flags to override desktop positioning
- Ensured all sections render in proper flow order
- Update modal title from "CV 2025 - {JAMR}" to "CV 2025 JAMR -" with inline photo
- Add .info-modal-photo CSS with flexbox layout for proper photo alignment
- Change button text from "View Source Code" to "View Project in Github" (EN/ES)
- Photo styled with green border and shadow matching modal theme
- Changed project status badges from "CURRENT" to "LIVE" with wifi icon for active projects
- Updated CV reference links to direct PDF downloads instead of modal popups
- Marked SAP CDC Demo and Client Projects as currently live/maintained
Print CSS enhancements:
- Show ALL icons, logos, and badges by default in print (16px section icons, 40px company/project logos)
- Improved header layout with bigger photo (110x147px, 3:4 ratio) positioned on right
- Name and years right-aligned with justified intro text below
- Maintained flex layout for experience/project items to show logos side-by-side
- Compact badge sizing (7pt font) for print
PDF Download UX:
- Replaced direct download links with modal popup
- Shows work-in-progress message directing users to Print Friendly feature
- Bilingual modal (English/Spanish) matching info modal styling
- Modal closable via backdrop click, X button, or Escape key
- Prevents accidental downloads of outdated PDFs
UI improvements:
- Enhanced icon toggle contrast and visibility
- Consistent modal behavior across info and PDF modals
Comprehensive mobile optimization (≤768px) for improved consistency and readability:
- Center profile photo between name and intro text on mobile
- Unify all logo/icon sizes to 60×60px for visual consistency
- Standardize spacing across experience, courses, projects, and awards
- Reduce font sizes proportionally for better mobile readability
- Remove justified text alignment (except intro/skills) to prevent awkward spacing
- Apply consistent 1rem gaps and 1.5rem padding throughout
- Optimize sidebar items with reduced margins and font sizes
Technical improvements:
- Add comprehensive mobile breakpoint rules at 768px
- Implement flexible photo positioning (absolute on desktop, static on mobile)
- Ensure uniform typography scale across all content types
Print CSS overhaul:
- Fixed photo aspect ratio (60x80, 3:4 portrait) with contain fit
- Unified font sizes across all sections (10pt titles, 9pt content, 8pt metadata)
- Removed excessive spacing (reduced by 50-70%)
- Applied clean theme automatically (no sidebars, icons, logos, badges)
- Force short version for concise 5-page output
- Natural page breaks (removed forced breaks causing blank spaces)
- Consistent section title spacing with proper breathing room
- Match Training/Skills spacing pattern across all sections
- Fixed Languages and References spacing
- Equalized Experience, Courses, Projects, and Awards formatting
- Single separator for "See all projects" link
UI improvements:
- Enhanced icon toggle visibility with better contrast
- Reorganized navigation menu structure
- Implemented collapsible UI elements with hover expansion for language selector, action buttons, and sidebar content
- Reduced global font sizes and adjusted spacing to optimize layout for medium-width displays
- Added smooth transitions for interactive elements to enhance user experience
Changes to make the menu animation clearly visible:
- Added opacity transition (0 → 1) with 0.3s ease
- Changed max-height to fixed 800px for consistent timing
- Used cubic-bezier(0.4, 0, 0.2, 1) easing for natural feel
- Increased transition duration to 0.5s
- Combined max-height and opacity creates smooth expand + fade effect
The menu now smoothly grows from top-to-bottom with a visible fade-in,
making the animation much more apparent when hovering the hamburger button.
The menu was appearing instantly without animation because the overflow
property was changing from 'hidden' to 'auto' on hover, which disrupted
the max-height transition.
Fix: Keep overflow-y: auto consistent at all times. This allows the
max-height animation to work smoothly from 0 to calc(100vh - 50px),
creating a smooth top-to-bottom expansion effect.
juanatsap