- 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
- Update summary to be concise and focus on high-availability systems
- Replace technology-specific badges with professional role titles
- Add emphasis (bold) to key concepts in Skills section
- Update project metrics (20 websites, 35-40 consulting clients)
- Change "EN VIVO" to universal "LIVE" badge for consistency
- Improve professional positioning: Senior Consultant, Full-Stack Engineer, Authentication Specialist, Solution Architect
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
- 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
References section improvements:
- Remove TwenTIC recommendation letter
- Add Megabanner recommendations with author attribution (David Amorós)
- Update Presentation Letter URL to Domestika profile
- Update Chronological CV link to trigger PDF download modal
- Add 'action' field to Reference struct for custom behaviors
Print layout fixes:
- Show experience company logos in print view (40×40px)
- Remove print media query that was hiding .company-logo elements
- Maintain consistency with other logo types (courses, projects, awards)
Technical changes:
- Add Action field to Reference model with omitempty JSON tag
- Implement conditional rendering for downloadPDF action in template
- Links with action="downloadPDF" now call openPdfModal() function
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
- Created separate ui-en.json and ui-es.json files for UI strings
- Removed 'ui' section from cv-en.json and cv-es.json
- Added LoadUI() function to load UI translations separately
- Updated handlers to load UI data independently from CV data
- Updated template to use .UI instead of .CV.UI
This separation follows proper concerns:
- CV JSON files contain only professional CV content
- UI JSON files contain only application interface strings
- Each can be updated independently without affecting the other
- Added 'ui' section to cv-en.json and cv-es.json with modal translations
- Updated Go models to include UI, InfoModal, and TechStack structs
- Modified template to use JSON data instead of inline if/else statements
- Used template.HTML for Description field to allow HTML rendering
- Modal now fully supports English and Spanish translations
Translations include:
- Modal title
- Description text
- Tech stack labels (HTML5 Semántico vs Semantic HTML5, etc.)
- View source button text
Changes:
- Removed third line subtitle 'Built by myself'
- Added 'by myself' directly into the description text
- English: 'was built by myself with'
- Spanish: 'fue construido por mí mismo con'
- Increased spacing between title and CV title (1rem → 1.5rem)
- Removed unused .info-modal-subtitle CSS
- Cleaner, more natural text flow
Changes:
- Switched order: 'About this CV' now first, then CV title
- Changed format to 'CV 2025 - {JAMR}' (braces only around JAMR)
- Added subtitle 'Built by myself' / 'Construido por mí mismo'
- Adjusted spacing and styling for new hierarchy
- Subtitle is italic, gray, and smaller font size
- More personal and authentic presentation
Changes per user request:
- Replaced bouncing code icon with 'CV {YEAR} - JAMR' text (dynamic year)
- Made 'About this CV' title dark (#333) instead of green gradient
- Removed floating animation (@keyframes float)
- CV title styled in green with bold weight and letter spacing
- Cleaner, more professional header appearance
- Hamburger menu now opens on hover instead of click
- Menu stays open while hovering over button OR menu
- Added 100ms delay to prevent accidental closes
- Submenu opens on pure CSS :hover (no JavaScript)
- Smooth transitions for both main menu and submenu
- Proper ARIA attributes for accessibility
- Legacy click functions kept for backward compatibility
- Menu closes when mouse leaves both button and menu area
- Created semantic class 'menu-item-action' for action controls
- Applied width: calc(100% - 65px) to make items slightly narrower
- Applied text-align: center to center content
- Affects only Expand All and Collapse All menu items
- Preserves all existing functionality and base menu-item styles
- Makes action items visually distinct from navigation items
Features:
- Info button fixed on bottom-left (matches back-to-top on bottom-right)
- Modern glassmorphism modal with backdrop blur
- Smooth animations: scale + bounce effect on open
- Floating code icon animation
- Gradient text for title
- Tech stack showcase with hover effects (Go, HTMX, HTML5, CSS3)
- Beautiful GitHub link button with gradient and hover effects
- Multiple close methods: X button, click backdrop, Escape key
- Fully responsive for mobile devices
- No external libraries - pure CSS3 magic
Design highlights:
- Backdrop blur for depth
- White glass-effect card with subtle gradient
- Green accent color (#27ae60) throughout
- Smooth cubic-bezier transitions
- Rotating close button on hover
- Tech items lift on hover with shadows
- GitHub button with gradient that reverses on hover
Showcases modern web development skills with cutting-edge CSS
Changes:
- Save selected language to localStorage when user switches languages
- On page load with clean URL: check localStorage and load saved language preference
- If no localStorage preference exists, default to server's language choice
- Update language button active states based on localStorage preference
- Keep URLs clean (no lang parameter added) while maintaining language choice
- If URL has lang parameter, save it to localStorage for consistency
How it works:
1. Visit / (clean) → Shows English (default)
2. Switch to Spanish → Saves 'es' to localStorage, loads Spanish content
3. Click logo (clean URL /) → Page loads, checks localStorage, loads Spanish
4. Language persists across clean URL navigations via localStorage
This solves: Clean URLs + Language persistence
Changes:
- Logo and title links now start with clean URLs (href="/")
- Track if URL originally had lang parameter (urlHadLangParam variable)
- If URL had lang param: update URL when switching languages, update logo/title links dynamically
- If URL was clean: keep it clean, don't add lang to URL, keep logo/title links clean
- Logo/title links now update dynamically when language changes (no more stale language issue)
- Initialize logo/title links properly on page load based on URL state
This fixes both issues:
1. Logo clicking with wrong language after language switch
2. Clean URLs stay clean unless explicitly using ?lang= parameter
- Repositioned language selector from center controls to left side after title
- Updated CSS: reduced padding-left from 3rem to 1rem for better spacing
- Center section now contains only: Length, Logos, and View toggles
- Left section now has: Logo icon + Menu + Title + Language switcher
- Wrapped site icon and title text in anchor tags linking to homepage
- Added hover effect (opacity: 0.8) for better UX
- Maintained current language when navigating to home
- Added aria-label for accessibility
- No text decoration or color changes on links
- Added CURRENT badge for current positions (green)
- Added EXPIRED badge for expired positions (red)
- Added MAINTAINED BY badge for projects maintained by third parties (blue)
- Badges support both English and Spanish translations
- Fixes issue where badge data existed in JSON but wasn't being rendered
- Wrapped all CV sections and sidebar sections in <details> tags for collapsibility
- Added Expand All/Collapse All menu options with CV Sections submenu
- Implemented smooth CSS animations for section expansion/collapse using max-height transitions
- Fixed menu item alignment issues (removed extra padding)
- Added dash between company name and duration in experience section
- Moved SAP Technologies and AI-Assisted Development to bottom of right sidebar
- Reordered JavaScript Ecosystem above Go Ecosystem in left sidebar
- Implemented different layouts for left vs right sidebars:
- Left sidebar: title left-aligned, triangle on right
- Right sidebar: title right-aligned, triangle on left
- Adjusted sidebar spacing for better visual hierarchy when sections are open/closed
## Project Title Links
- Add projectName and projectDesc fields to Project struct
- Split project titles to make only project name clickable
- Update template logic for conditional title rendering
- Apply changes to both English and Spanish versions
## Experience Duration Display
- Restore duration calculation display in experience section
- Move duration from date line to after company name
- Style duration in light gray (#999) for subtle appearance
- Calculate durations dynamically (e.g., "4 years 10 months")
## Certifications Section Enhancement
- Add Codecademy Certifications (2022-2024) with AI Transformers and React courses
- Add LinkedIn Learning Certifications (2019-2020) with 5 professional courses
- Implement colored icon system with brand colors (purple, cyan, green, etc.)
- Use responsibilities format matching Third Party Contributions layout
- Reorder courses chronologically (most recent first)
## localStorage Improvements
- Save CV length preference (short/long)
- Save logos visibility preference (show/hide)
- Save theme preference (default/clean)
- Restore all preferences on page load
## Navigation UX Enhancements
- Fix scroll positioning to show sections below action bar
- Add keepHeaderVisible flag to maintain header visibility after navigation
- Ensure smooth scrolling with proper offset calculations
- Reset flag on scroll up to restore normal hide/show behavior
## Files Modified
- internal/models/cv.go: Add ProjectName, ProjectDesc fields
- templates/cv-content.html: Update project and experience rendering
- static/css/main.css: Add duration-text styling
- templates/index.html: Enhance scroll behavior and localStorage
- data/cv-*.json: Add certifications, split project titles, reorder courses
- static/images/courses/: Add codecademy.png, linkedin.png
Change project ShortDescription from 'short-desc' to 'long-only' class.
Project descriptions now only appear in expanded long CV view, keeping
the projects section more concise by default.
Projects now show:
- Title and date (always visible)
- Description (long view only)
- Responsibilities (long view only)
- Technologies (long view only)
Simplified all sections to use consistent Awards-style format:
- Title in bold on first line
- Subtitle (company/institution - date - location) in small gray text on second line
- Description paragraph below
- Responsibilities list in long-only section
Changes:
- Experience: Simplified from complex header with multiple spans to clean format
* Before: h4.position > spans for title, company, badges, periods, separators
* After: <strong>Position - Company</strong><br><small>Date - (Location)</small>
- Projects: Removed complex project-header structure
* Before: h4.project-title with nested spans and badges
* After: <strong>Title (with link)</strong><br><small>Date - (Location)</small>
- Courses: Simplified course-header structure
* Before: h4.course-title with separate spans for title, institution, dates
* After: <strong>Title</strong><br><small>Institution - Date - (Location)</small>
All sections now have consistent, clean formatting matching Awards section style.
- Add courseLogo field to Course struct in Go
- Update template to display course logos with fallback to school icon
- Add CSS styling for course logo images (80x80px, contained, bordered)
- Add logos to three courses in both English and Spanish:
* Servoy World 2011 (servoy.png)
* Train the Trainers / Formador de Formadores (forem.png)
* Windows 2003 Server (camaracomercio.png)
- Course logos stored in /static/images/courses/ folder
- Similar implementation to project logos with error handling
- Add safeHTML filter to DriverLicense field in both English and Spanish
- Now 'Type B' / 'Tipo B' displays in bold as intended
- Fixes literal <strong> tags showing instead of bold formatting
- Change default color from accent-blue to whitesmoke for better visibility
- Add clearer light blue hover color (#66B3FF instead of dark blue)
- Add smooth color transition on hover
- Remove inline color style, use CSS class instead
- Add centered GitHub link above copyright line
- Include GitHub icon using iconify-icon
- Link points to https://github.com/juanatsap/cv-site
- Bilingual support: 'View this project on GitHub' / 'Ver este proyecto en GitHub'
- Styled with accent blue color and inline-flex for icon alignment
- Remove hardcoded startDate from La Porra project
- Add gitRepoUrl field to Project struct for dynamic date fetching
- Implement backend logic to fetch first commit date from git repositories
- Add processProjectDates function to calculate dates dynamically
- Update template to display computed dates and dynamic "Present/Presente"
- Add support for both static and git-based project start dates
When a project has a gitRepoUrl, the system automatically fetches the first
commit date from the repository. For current projects, it displays
"Present" (English) or "Presente" (Spanish) dynamically from the backend.
The La Porra project now uses git repository path for date calculation
instead of hardcoded JSON values.
- Wrap project name links (Lidering, Jorpack, Delivery Bikes BCN, Mobbeel) with <strong> tags in shortDescription for both EN and ES
- Add padding-left: 3rem to .language-selector to prevent overlap with adjacent elements
- Add sidebar field to SkillCategory model for explicit left/right control
- Update splitSkills to respect sidebar field instead of automatic splitting
- Add responsive CSS for 1024-1280px: collapse labels, icons-only buttons, EN/ES language selector
- Remove language switcher animations
- Ensure desktop view (>1280px) always shows full sidebar content
- Move Databases and Infrastructure to right sidebar
- Reduce font sizes in responsive range
- Update project logos (Lidering, Jorpack, Delivery Bikes)
- Update splitSkills logic to put 7 categories on left sidebar, 6 on right
- Reorder skills: Frontend Technologies now at position 5, Legacy Enterprise Technologies at position 6 (last on left)
- Apply changes to both English and Spanish CV data
- Clean up unused enhanced template and CSS files
Left sidebar (Page 1):
1. AI-Assisted Development
2. SAP Technologies
3. Programming Languages
4. Go Ecosystem
5. JavaScript Ecosystem
6. Frontend Technologies
7. Legacy Enterprise Technologies
Right sidebar (Page 2):
8. Backend Technologies
9. Databases
10. Infrastructure & Servers
11. DevOps & CI/CD
12. Team Management
13. Design Tools
Added visual badge to show CDC Starter Kit is now maintained by SAP:
1. Go struct changes:
- Added MaintainedBy field to Project struct (cv.go:108)
2. Data updates:
- Added "maintainedBy": "SAP" to CDC Starter Kit in cv-en.json
- Added "maintainedBy": "SAP" to CDC Starter Kit in cv-es.json
3. Template changes:
- Added maintained-badge display in project header (cv-content.html:226-228)
- Shows "MAINTAINED BY SAP" (EN) or "MANTENIDO POR SAP" (ES)
4. CSS styling:
- Added .maintained-badge style with blue background (#3498db)
- Matches current-badge and expired-badge styling
Badge appears next to project title to highlight SAP's ongoing maintenance.
Changes:
- Created /static/images/projects/ folder for project logos
- Added ProjectLogo field to Project struct
- Updated cv-en.json and cv-es.json with projectLogo fields:
- somosunaola.png for Somos Una Ola
- herrumbre-vivo.png for Herrumbre Vivo Arte
- Updated template to display project logos with fallback to web icon
- Added CSS styling for project logo images (80×80px)
- Renamed section from "Projects" to "Personal Projects"
Logo images will display when PNG files are added to /static/images/projects/
Changes:
- Changed section icon from folders (mdi:folder-multiple) to globe (mdi:earth)
- Removed border-top separator above "See all projects" footer text
This creates a cleaner visual appearance for the Projects section.
Added new Projects section with two initial projects:
- Somos Una Ola - Beach cleaning initiative website (Node.js/Express/HTMX)
- Herrumbre Vivo Arte - Artist portfolio for recycled art
Changes:
- Added projects data to cv-en.json and cv-es.json
- Updated Project struct in models/cv.go with all required fields
- Added Projects section CSS matching Awards/Courses styling (80×80px icons)
- Added Projects template with icons, current badges, and Domestika link
- Reordered sections: Courses → Projects → Awards (as requested)
Features:
- Clickable project titles linking to websites
- Current badge for ongoing projects
- Period and location display
- Short descriptions (always visible)
- Responsibilities list (long version only)
- Technologies list (long version only)
- Footer with link to Domestika portfolio
- Updated personal.behance to personal.domestika in both EN and ES
- Changed all Behance URLs to Domestika portfolio URL
- Updated footer label from "behance_" to "domestika_"
- Updated JSON-LD schema to reference Domestika
- Updated Go model struct field from Behance to Domestika
- New portfolio URL: https://www.domestika.org/es/txeo/portfolio
- Save scroll position before toggling logos on/off
- Restore scroll position after DOM updates using requestAnimationFrame
- Prevents page jump when switching logo visibility
- Save scroll position before toggling short/long mode
- Restore scroll position after DOM updates using requestAnimationFrame
- Prevents page jump when switching between CV modes
- Added safeHTML template function to prevent HTML escaping
- Applied safeHTML filter to ShortDescription fields in Experience, Awards, and Courses
- Applied safeHTML filter to Responsibilities in all sections
- Links and HTML formatting now render correctly instead of showing raw HTML tags
- Only apply header-hidden class to navigation menu when it's open
- Check for menu-open class before hiding/showing menu on scroll
- Closed menu now stays hidden regardless of scroll direction
- Hide header when scrolling down, show when scrolling up
- Smooth transition animations for header hide/show
- Floating back-to-top button in bottom right corner
- Button appears after 300px scroll
- Circular button with arrow icon and smooth animations
- Mobile-responsive sizing for back-to-top button
- Both features excluded from print view
juanatsap