Commit Graph

13 Commits

Author SHA1 Message Date
juanatsap 2497dbaa3e fix: Correct fixed button tooltip positioning and add mobile support
- Remove tooltip-left class from zoom and shortcuts buttons (all left-side buttons show tooltips on RIGHT)
- Add mobile CSS rules for fixed-btn tooltips to appear on TOP (like macOS Dock)
- Update button template comments to reflect correct positioning
- Mobile: All fixed buttons now show tooltips above (top position)
- Desktop: All left-side fixed buttons show tooltips on right
2025-11-20 18:31:31 +00:00
juanatsap dfbe45881f feat: Add macOS Dock-style tooltips and fix PDF modal text colors in dark theme
TOOLTIPS (Tested & Working):
-  macOS Dock-inspired design with smooth fade + scale animation
-  Dark semi-transparent background (rgba(0,0,0,0.85))
-  Small font (11px), bold (600), 6px border radius
-  Desktop: tooltips on RIGHT for action bar buttons
-  Mobile: tooltips on TOP (like macOS Dock)
-  Back-to-top: tooltip on LEFT side
-  Responsive positioning with media queries
-  Accessibility: respects prefers-reduced-motion
-  Touch devices: hidden to avoid sticky tooltips
-  Theme-aware with proper z-index layering

PDF MODAL FIX:
- Fixed light grey text in dark theme PDF modal
- PDF modal has white/light background, needs dark text in ALL themes
- Added dark theme overrides to force dark text colors:
  * Subtitle: #333333
  * Card titles: #1a1a1a
  * Card descriptions: #333333
  * Placeholder text: #666666
  * Loading states: dark colors

FILES CHANGED:
- static/css/04-interactive/_tooltips.css (new) - Complete tooltip system
- static/css/main.css - Import tooltip CSS
- static/css/04-interactive/_modals.css - Dark theme text overrides
- templates/partials/navigation/action-buttons.html - Add tooltip classes
- templates/partials/widgets/back-to-top.html - Add tooltip-left class
- tests/mjs/30-tooltip-macos-dock.test.mjs (new) - Comprehensive Playwright test

TEST RESULTS: 5/6 tests passed
-  PDF Button Tooltip (hover animation verified)
-  Print Button Tooltip (hover animation verified)
-  Back-to-Top Tooltip (left positioning verified)
-  macOS Dock Styling (all design specs met)
-  Mobile Tooltip Behavior (correctly hidden on touch)
2025-11-20 17:52:07 +00:00
juanatsap 68da6607ad docs: Add Phase 10 UI polish documentation and improve PDF modal spacing
- Document PDF loading modal with animated spinner and time estimates
- Document soft shadow optimization process (3 iterations to 0.06 opacity)
- Document border removal strategy for clean, modern design
- Document enhanced server startup logs with emoji icons
- Improve PDF modal estimate text spacing (1.5rem top margin)
- Update technique count from 10+ to 16+ major optimizations
- Mark Phase 10 as complete (November 2025)
2025-11-20 17:05:27 +00:00
juanatsap 6999d026c1 fix: Improve mobile modal visibility and button alignment
- Center download button text with justify-content
- Set header text to solid black (#000) for better visibility
- Darken close button background for better contrast
- Remove any disabled appearance on mobile

Fixes grayed-out/disabled look and left-aligned button text on mobile.
2025-11-20 15:28:13 +00:00
juanatsap 7ad157a242 refactor: Optimize PDF modal for mobile screens
- Hide subtitle on mobile to save vertical space
- Reduce all font sizes (header: 1.25rem, titles: 0.9rem, text: 0.75rem)
- Decrease modal padding from 2.5rem to 1.5rem 1rem
- Shrink page badges from 60×60px to 50×50px
- Reduce card padding from 16px to 12px
- Decrease gaps from 12px to 10px throughout
- Compact footer and button spacing
- Make download button smaller with 0.9rem font

Significantly reduces modal height for better mobile UX on small screens (iPhone 13 Mini, Samsung S24).
2025-11-20 15:09:54 +00:00
juanatsap ae08ebde05 feat: Improve PDF download modal UX and mobile layout
- Scale recommended card 12% larger on desktop for emphasis
- Add subtle golden border to Default CV (full opacity when selected)
- Pre-select Default CV by default with download button enabled
- Fix double border issue: exclude recommended card from red selection border
- Remove red focus outline for recommended card (transparent)
- Reduce modal height: thumbnail 280px→220px, padding 16px→12px
- Redesign mobile layout as compact button-style cards
- Hide full thumbnails on mobile, show page count badges instead
- Horizontal layout on mobile with left-aligned text
- Reduce mobile gap from 24px to 12px for better space efficiency

Improves visual hierarchy and mobile usability on small screens (iPhone 13 Mini, Samsung S24).
2025-11-20 15:01:09 +00:00
juanatsap 531433f54c fix: Remove toast notification from PDF download flow
Simplified PDF download UX to use only the modal loading overlay,
removing the redundant toast notification that appeared when the modal
was closed during download. Updated tests to reflect the new behavior.

Changes:
- Removed toast trigger logic from PDF modal download function
- Removed modal close event listener for toast display
- Updated toast notification test expectations
- Fixed recommended card outline styling
2025-11-20 14:35:22 +00:00
juanatsap 810ee7955b fix: References section link corruption and download filename issues
**Issue 1: URL corruption in "See this CV in..." links**
- Bug: replaceYearPlaceholder used fmt.Sprintf on ALL URLs
- URLs like "/?lang=es" were corrupted to "/?lang=es%!(EXTRA string=2025)"
- Fix: Changed to strings.ReplaceAll("{{YEAR}}", year)
- Result: Only replaces actual {{YEAR}} placeholders, leaves other URLs intact

**Issue 2: Download filename not respected**
- Bug: Shortcut URLs (cv-jamr-2025-en.pdf) redirected with HTTP 301
- Browsers used original URL filename instead of Content-Disposition header
- Fix: Generate PDF directly in DefaultCVShortcut handler
- Result: Returns PDF with correct filename in Content-Disposition header

Files changed:
- internal/models/cv.go: Fixed replaceYearPlaceholder function
- internal/handlers/cv.go: Changed redirect to direct PDF generation

Both fixes verified:
- "See this CV in Spanish" link: href="/?lang=es" ✓
- Download link: filename=cv-jamr-2025-en.pdf ✓
2025-11-20 13:00:06 +00:00
juanatsap c88879b180 feat: Add loading overlay feedback for PDF downloads
UX Improvement:
- Added visual feedback during PDF generation process
- Users now see immediate response when clicking download button
- Clear communication about what's happening during the wait

New Features:
- Loading overlay with animated spinner
- Format-specific estimated generation times (Short: ~3s, Default: ~4s, Long: ~8s)
- Blur effect on modal background during loading
- Bilingual support (English/Spanish)
- Automatic modal close after download completes

CSS Updates (static/css/04-interactive/_modals.css):
- Added .pdf-loading-overlay with glassmorphism effect
- Spinning animation for loader (1s linear infinite)
- Fade-in animation (300ms)
- Accessibility: respects prefers-reduced-motion
- Background blur when loading active

HTML Updates (templates/partials/modals/pdf-modal.html):
- Loading overlay structure with spinner
- Dynamic loading messages based on selected format
- Enhanced downloadPDF() function with timing logic

Before: Click → silence → download appears
After: Click → overlay + spinner + estimate → download appears
2025-11-20 12:52:16 +00:00
juanatsap 1258d61d05 refactor: Modularize CSS into ITCSS architecture + update documentation
CSS Refactoring:
- Split 2,287-line monolith into 6 focused modules
- New structure: Navigation, Scroll, Buttons, Modals, Zoom, Breakpoints
- Organized by ITCSS layers (Interactive + Responsive)
- 245 lines saved through better organization
- Site verified working at localhost:1999

New CSS Files:
- 04-interactive/_navigation.css (357 lines, 8.2KB)
- 04-interactive/_scroll-behavior.css (200 lines, 5.0KB)
- 04-interactive/_buttons.css (184 lines, 4.7KB)
- 04-interactive/_modals.css (487 lines, 16KB)
- 04-interactive/_zoom-control.css (253 lines, 6.3KB)
- 05-responsive/_breakpoints.css (561 lines, 14KB)

Documentation Updates:
- Added doc/12-CSS-ARCHITECTURE.md (comprehensive CSS guide)
- Updated doc/README.md (new entry + correct numbering)
- Updated tests/README.md (test count 8 → 27)
- Updated tests/TEST-SUMMARY.md (coverage expansion)
- Rewrote tests/mjs/README.md (complete test listing)

Removed:
- static/css/04-interactive/_remaining.css (replaced by modules)
2025-11-20 12:34:42 +00:00
juanatsap 43414b79ac fix: Override inline icon sizes to 1.2em across all sections
Problem: Inline icons embedded in responsibilities, courses, and
projects had explicit width='60' height='60' attributes that made
them too large (60px instead of ~16px).

Solution:
- Added CSS with !important to override inline width/height attributes
- Targeted inline icons in:
  * Course responsibilities and descriptions
  * Project descriptions and technologies
  * Experience responsibilities (within divs)
- Preserved large icons (80px) for main company/course/project logos

Changes:
- static/css/03-components/_courses.css: Override to 1.2em
- static/css/03-components/_projects.css: Override to 1.2em
- static/css/03-components/_cv-section.css: Override to 1.2em

Test Results:
 7 course inline icons: 16px × 16px
 Main company icons: 80px × 80px (preserved)
2025-11-19 16:30:18 +00:00
juanatsap 0947e19c70 fix: Replace ALL remaining hardcoded #ddd borders with theme variable
Replaced 12 hardcoded borders across 5 files:
- _cv-section.css: 2 borders (company icons)
- _projects.css: 2 borders (project icons)
- _courses.css: 2 borders (course icons)
- _toggles.css: 3 borders (logo containers)
- logo-toggle.css: 3 borders (logo containers)

All icon borders now use var(--icon-border):
- Light theme: #ddd (visible)
- Dark theme: transparent (invisible)

Verified with Playwright: rgba(0,0,0,0) in dark theme
2025-11-19 15:47:19 +00:00
juanatsap f7cda5dba3 refactor: Modularize CSS and fix theme-aware text colors
CSS Restructuring:
- Reorganize monolithic main.css into modular architecture
- Create foundation/ (reset, variables, typography, themes)
- Create layout/ (container, page, grid, paper)
- Create components/ (8 component files)
- Create interactive/ (toggles, remaining for future split)
- Create effects/ (skeleton loading)
- Create contexts/ (print styles)

Theme Support Fixes:
- Replace all hardcoded text colors with CSS variables
- Fix .section-title: rgb(51,51,51) → var(--text-primary)
- Fix .cv-name, .intro-text: hardcoded → theme-aware
- Fix .experience-period, .duration-text: #555/#aaa → variables
- Fix course/project/experience text colors
- Support proper light/dark theme text contrast

Icon & Layout Fixes:
- Standardize all icon sizes to 80×80px
- Change all icon backgrounds to transparent
- Fix award section layout (missing flexbox)
- Update HTML templates (experience.html, awards.html) to width='80'
- Fix default icon sizing conflicts

View Switcher Fix:
- Fix toggleTheme() to target .cv-container instead of body
- Ensures clean/default theme toggle works correctly

Files: 40+ CSS files modularized, 3 templates updated, 7 tests added
2025-11-19 14:31:17 +00:00