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)
- 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
- Replaced broken megabanner.png with iconify building icon
- Updated CSS to support both img and iconify-icon in responsibilities grid
- Added styling for default-company-icon in responsibilities
- Maintains consistent 60px icon size and grid layout
- Added CSS grid layout for responsibilities with company logos
- 60px logo column on left, flexible text column on right
- Matches main experience items layout style
- Removed inline styles, using pure CSS for sizing
- Updated JSON structure to use img+div instead of inline images
- Added proper alt attributes to images
- Verified with Playwright testing - all layouts render correctly
- 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
- Removed padding-top from section containers
- Increased margin-bottom on section titles from 25px to 40px
- Creates blank space between title and content, not before title
- Only affects Experience, Awards, and Courses sections
- Changed from margin-top to padding-top: 60px
- Padding creates internal space within the section element
- This ensures the blank space is visible and not collapsed
- Creates invisible separator effect before Experience, Awards, Courses
- Increased margin-top from 40px to 60px for more noticeable spacing
- Added !important to override any conflicting styles
- Should be clearly visible now
- Added margin-top: 40px to create breathing room before these sections
- Keeps margin-bottom: 25px below the titles
- Better visual separation between major CV sections
- Removed border-bottom from Experience, Awards, and Courses titles
- Added margin-bottom: 25px for spacing between title and content
- Cleaner look without the separator line
- Changed from border-top on section to border-bottom on section-title
- Separator now appears under the title text (Experiencia, Awards, Courses)
- Added padding-bottom: 15px for space between title and separator
- Added margin-bottom: 20px for space between separator and content
- This matches the green arrow position in the screenshot
- Changed padding-top from 20px to 5px
- Added margin-top: 20px for space above the separator
- Separator now appears closer to the section icon and title
- Better visual alignment
- Changed selector from #experience .section-title to #experience
- Changed selector from #awards .section-title to #awards
- Changed selector from #courses .section-title to #courses
- Separator now appears directly above the section icon and title
- Matches the position shown in the green arrow (not red arrow)
**Icon Color:**
- Changed section-icon color from var(--text-gray) to #7d7d7d
- More consistent medium gray tone for all section icons
**Top Separators:**
- Added border-top separator to Experience section title
- Added border-top separator to Awards section title
- Added border-top separator to Courses section title
- Separators use same style as bottom separators: 1px solid rgba(0, 0, 0, 0.1)
- Added 20px padding-top for proper spacing above the separator
**Result:**
- Better visual organization with clear section boundaries
- Consistent separator style throughout the CV
**Changes:**
- Added border-bottom separator to all experience items (including last)
- Removed :last-child rule for course items (keep border on last item)
- Removed :last-child rule for award items (keep border on last item)
**Result:**
- Visual separator now appears after ALL items in each section
- Consistent spacing between sections
- Better visual organization
**Position Fix:**
- Moved hamburger button to appear after the CV icon instead of before
- Order is now: CV icon → Hamburger → Title → Language selector
- Updated margin to 0 0.5rem for proper spacing between elements
**Icon Color Fix:**
- Changed section title icons from blue (--accent-blue) to dark gray (--text-gray)
- Maintains consistency with overall design
- Menu item icons still use gray by default, blue on hover
Implemented a complete navigation system with the following features:
**Navigation Menu:**
- Hamburger button in top-left of action bar
- Slide-out navigation menu with all CV sections
- Smooth close on click outside or after selection
- Mobile-responsive design (280px desktop, 240px mobile)
**Section Anchors:**
- Added ID anchors to all CV sections:
- #education (Training/Formación)
- #skills (Skills/Competencias)
- #experience (Experience/Experiencia)
- #awards (Awards/Premios y Reconocimientos)
- #courses (Courses/Cursos Realizados)
- #languages (Languages/Idiomas)
- #references (References/Referencias)
- #other (Other/Otros)
**Section Icons:**
- Added descriptive icons to all section titles
- Icons match their purpose (school for education/courses, trophy for awards, etc.)
- Consistent 24x24 size for section titles, 20x20 for menu items
**Smooth Scrolling:**
- Implemented smooth scroll behavior with proper offset calculation
- Accounts for fixed header height
- Added scroll-padding-top for better anchor positioning
**Accessibility:**
- Proper ARIA labels and roles
- aria-expanded attribute for hamburger button
- Keyboard navigation support
- Screen reader friendly
**Styling:**
- Clean white menu background with shadow
- Blue hover states matching CV accent color
- Left border indicator on hover
- Smooth transitions (0.3s ease-in-out)
- Print-friendly (menu hidden in print mode)
**Bilingual Support:**
- Menu items automatically translate based on language
- Works seamlessly with English/Spanish switching
juanatsap