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
New documentation:
- PRIVACY.md: Complete privacy policy covering Matomo analytics, cookies, and data handling
- Clear opt-out instructions and developer guidelines
README.md updates:
- Add Privacy & Analytics section with clear disclosure
- List what's tracked vs. what's NOT tracked
- Add "Privacy-Friendly Analytics" to features list
- Add critical configuration requirements for template users
- Crystal clear instructions: MUST change Matomo Site ID and server URL
- OR remove analytics entirely if not needed
CUSTOMIZATION.md updates:
- Add comprehensive "Analytics Configuration" section (120+ lines)
- Option 1: Configure your own Matomo instance (step-by-step)
- Option 2: Remove Matomo completely (clean removal steps)
- Option 3: Use alternative analytics providers (Google Analytics, Plausible, etc.)
- Include exact file locations and line numbers for changes
- Privacy compliance checklist (GDPR, CCPA, cookie banners)
- Testing instructions to verify analytics configuration
Key highlights for template users:
- MUST change: Site ID (line 644), Server URL (line 642), CSP headers
- MUST update: PRIVACY.md with own contact info
- Complete removal guide if analytics not wanted
- Legal compliance reminders
All documentation is crystal clear with exact locations, code examples, and warnings.
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
- Implemented origin checker middleware to prevent external sites from hotlinking the PDF generation endpoint
- Added rate limiter (3 requests per minute per IP) to protect resource-intensive PDF operations
- Configured allowed origins via ALLOWED_ORIGINS environment variable with localhost defaults for development
- Add clear disclaimers: personal site, not a template
- Update CONTRIBUTING.md: not seeking contributions
- Remove all Docker files and references (11 files)
- Rewrite DEPLOYMENT.md without Docker (VPS/cloud focus)
- Add comprehensive API documentation with verified endpoints
- Add complete CUSTOMIZATION guide
- Add project status sections to all major docs
- Clarify MIT license but personal use intent
Created documentation files:
- API.md (70KB) - Complete API reference with live testing
- API-QUICK-REFERENCE.md - Quick command reference
- DEPLOYMENT.md (45KB) - VPS, cloud, manual deployment (no Docker)
- CUSTOMIZATION.md (38KB) - Complete customization guide
- PROJECT-DOCUMENTATION-SUMMARY.md - Complete project overview
This is my personal CV site. While code is public (MIT),
it's designed for my personal use, not as a template.
- 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
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)
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)
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 uex.png logo to '1st Extremadura Conference on Software Industry'
- Add uex.png logo to 'Web Application Development: Apache, PHP and MySQL'
- Both courses in English and Spanish versions now display University logo
- Total: 5 out of 10 courses now have logos (servoy, forem, camaracomercio, uex×2)
- 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 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.
Moved projects to prioritize environmental/volunteer work:
New project order:
1. Somos Una Ola (2023, current) - Beach cleaning volunteer project
2. Herrumbre Vivo Arte (2024, current) - Recycled art portfolio
3. La Porra.club (2024, current) - Football prediction platform
4. CDC Starter Kit (2018, maintained by SAP)
5. Third Party Contributions (2015, collection)
Updated CDC Starter Kit project to reflect current status:
- Changed current: false (no longer actively developed by me)
- Added "Now maintained by SAP" to shortDescription
- Emphasized 100% independent creation as public GitHub resource
- Added final responsibility: "Project now maintained by SAP as official public resource"
This highlights the professional achievement of creating an official SAP resource independently that SAP now maintains.
Moved Herrumbre Vivo Arte to position 2 (right after La Porra) as requested.
New project order:
1. La Porra.club (2024, current)
2. Herrumbre Vivo Arte (2024, current)
3. CDC Starter Kit (2018, current)
4. Third Party Contributions (2015, collection)
5. Somos Una Ola (2023, current)
Added two new project entries to Personal Projects section:
1. CDC Starter Kit (individual project, 100% created independently)
- SAP Customer Data Cloud comprehensive demo and starter kit
- Started 2018, currently maintained
- Technologies: SAP CDC, JavaScript, React, API Integration
- Full implementation showcase with authentication and user management
2. Third Party Contributions (collection of client projects)
- Lidering (via Twentic): Real estate platform
- Jorpack (via Twentic): Industrial packaging website
- Delivery Bikes BCN: Bicycle delivery service
- Mobbeel: Biometric authentication solutions
- Structured similar to Drolosoft experience with embedded logos
Also added project logos: sap.png, twentic.png, and existing personal project logos (laporra.png, somosunaola.png, herrumbre-vivo.png)
Added La Porra.club as newest project entry with full bilingual support. Private invitation-only platform for football predictions built with Node.js, Hono, HTMX, and Panini templates.
juanatsap