- 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.
Main menu changes:
- Changed from translateX (left-to-right slide) to max-height animation
- Menu now grows from top to bottom with smooth transition
- Transition time: 0.4s ease-in-out for natural feel
Submenu changes:
- Removed display:none which prevented animation
- Now uses only max-height and opacity transitions
- Submenu smoothly expands downward with fade-in effect
- Transition time: 0.4s for height, 0.3s for opacity
Both animations now provide better visual feedback and follow the natural
top-to-bottom reading pattern.
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
- Added justify-content: center to .info-tech-item
- Icons and text now centered within each tech item box
- Better visual alignment for Go + Hono, HTMX, HTML5, and CSS3 items
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
- Changed from .menu-item-action to .menu-item-action span
- Correctly applies width and text-align to the span element
- More specific targeting as intended by user
- 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
- 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
- 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
Increase margin-top of .responsibilities from 0.5rem to 1rem to add more breathing room between the date/location subtitle and the list of responsibilities in Experience and Projects sections.
Changed from dark charcoal to original gray (var(--bg-gray)):
- Base color: rgb(82, 86, 89) - original gray background
- Large grid: 50px × 50px with rgba(0,0,0,0.05) lines
- Fine grid: 10px × 10px with rgba(0,0,0,0.02) lines
- Semi-transparent black lines create subtle texture on gray base
Maintains familiar gray appearance with added subtle grid pattern.
Only reduce sidebar font sizes in responsive mode (1024-1280px), not the main CV content.
- Keep: sidebar-title and sidebar-content font reductions
- Remove: experience-item and project-item font size reductions
- Main CV content now maintains normal font size in all screen sizes
Consolidated all description paragraph styles to use consistent formatting:
- Removed separate .course-desc rule (0.85em)
- Removed separate .project-desc rule (0.95rem with different color)
- Updated combined rule to include all description classes:
.award-desc, .course-desc, .project-desc, .experience-desc
All descriptions now use:
- font-size: 0.95em (courses style)
- color: var(--text-gray)
- line-height: 1.4
- text-align: justify
This ensures consistent typography across Awards, Courses, Projects, and Experience sections.
Only keep font reduction for navigation sidebar as intended.
Removed font-size overrides for:
- .experience-item h3, .project-item h3
- .experience-item p, .project-item p
- .experience-item li, .project-item li
CV content now maintains normal font size at 1024px-1280px breakpoint.
Only sidebar fonts are reduced (sidebar-title: 0.95rem, sidebar-content: 0.9rem)
- 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
- 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
- Remove margin-left from award-item to align with experience/courses/projects
- Change border from 2px solid #ddd to 1px solid rgba(0,0,0,0.1) for consistency
- Awards section now matches the layout and spacing of other sections
- 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)
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/
juanatsap