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.
English summary:
- Remove outdated: J2EE, PHP, generic descriptions
- Add modern stack: Go, Node.js, React, HTMX
- Add infrastructure: VPS, CI/CD pipelines
- Highlight: AI methodologies in software engineering
- Emphasize: 40+ national and international clients
- Maintain: Frontend expertise, problem-solving, team collaboration
Spanish summary:
- Eliminar obsoleto: J2EE, PHP, descripciones genéricas
- Añadir stack moderno: Go, Node.js, React, HTMX
- Añadir infraestructura: VPS, pipelines CI/CD
- Destacar: Metodologías de IA en ingeniería de software
- Enfatizar: Más de 40 clientes nacionales e internacionales
- Mantener: Experiencia frontend, resolución de problemas, colaboración
Both summaries modernized to reflect current expertise and AI-assisted development practices.
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.
- 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
- 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
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
juanatsap