- 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)
- 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
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.
- 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
- 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
- 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
- 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.
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/
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
- 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
- Added 20x20px company logos next to each company name in responsibilities
- Added clickable links to Ebantic, Everis, and Indra
- Logos have rounded corners and proper spacing
- Applied to both Spanish and English versions
- Added links to Ebantic, Everis, Indra in Drolosoft freelance shortDescription
- Added links to Cepsa in React & Node.js Projects
- Added links to Emailing Network, Clicplan, Mobbeel in PHP & WordPress Projects
- Added links to Clicplan in Awards section
- Added links to Drolosoft in scholarship award section
- Added links to AENA in Projects section
- All links open in new tab with rel='noopener noreferrer' for security
**Changes:**
- Merged Megabanner experience into Drolosoft freelance consolidation
- Changed company from "Avantik" to "Drolosoft" (your company)
- Added Drolosoft logo and URL (https://drolosoft.com)
- Position: Director / Freelance Fullstack Developer
- Date range extended: Sep 2015 - Aug 2017 (includes Megabanner period)
**Freelance Clients Consolidated (4 companies):**
1. **Megabanner (Dec 2016 - Aug 2017)** - NEW
- Video system integration for gas station ad networks
- Data processing prototypes
- Database design and development
2. **Ebantic (Sep 2016 - Apr 2017)**
- API design and CI/CD pipelines
- Automated deployment
- Software testing and scalability
3. **Everis (Apr 2016 - Nov 2016)**
- React applications for multiple clients
- Modern frontend architectures
4. **Indra (Sep 2015 - Feb 2016)**
- Project management
- Customer feedback and solutions
**Bold Formatting:**
- Company names and date ranges in <strong> tags
- Format: <strong>Company (Month Year - Month Year):</strong>
- Makes it easy to distinguish each client in long mode
**Technologies Updated:**
- Added: PostgreSQL, Video Processing, Database Design
- Combined from all 4 client projects
**Short Description:**
- Lists all 4 clients: Megabanner, Ebantic, Everis, Indra
- Mentions key activities: React apps, API design, video systems, project management
**Result:**
- Single Drolosoft entry showing your freelance company
- Logo and link to drolosoft.com
- Clean short mode, detailed breakdown in long mode with bold client names
- Applied to both English and Spanish versions
**Changes:**
- Merged three separate experiences (Indra, Everis, Ebantic) into one freelance entry
- Company: Avantik (no logo)
- Position: Freelance Fullstack Developer / Desarrollador Fullstack Freelance
- Date range: Sep 2015 - Apr 2017 (covers all three periods)
- Location: Barcelona, Spain/España
**Short Description:**
- Shows summary of freelance work for multiple clients
- Mentions all three companies: Ebantic, Everis, Indra
**Long Version (Responsibilities):**
- Each responsibility bullet includes company name and date range
- Ebantic (Sep 2016 - Apr 2017): API design, CI/CD pipelines, testing, deployment
- Everis (Apr 2016 - Nov 2016): React applications for multiple clients
- Indra (Sep 2015 - Feb 2016): Project management, customer feedback
**Technologies:**
- Combined all technologies from the three experiences
- React, Node.js, JavaScript, Redux, Webpack, Java, API Design, CI/CD, DevOps
**Result:**
- Single entry in short mode showing freelance work
- Detailed breakdown per company when expanded to long mode
- No company logo (companyLogo: "")
- Applied to both English and Spanish versions
- Updated action bar with transparent buttons (colored on hover only)
- Repositioned language selector after CV title for better flow
- Simplified toggle labels (removed parentheses values)
- Changed button styling: transparent by default, green/gray on hover
- Updated name format to "Moreno Rubio, Juan Andrés" with right alignment
- Added LIVGolf experience (Apr 2024-present) with detailed responsibilities
- Updated profile photo to dni.jpeg
- Refined summary text focusing on consultant/analyst/developer roles
- Added award logos (clicplan.png, drolosoft.png, teseo.png)
- Implemented smooth logo animations (fade/scale transitions)
- Adjusted toggle dimensions (80px wide, 30px tall) with smaller icons (16x16)
- Added breathing room to title and icon with proper padding
- Removed italic styling from name per user preference
- Add dynamic years of experience calculation from April 1, 2005
- Update professional title badges: ANALYST | TECHNICAL CONSULTANT
- Add all missing skill categories from React CV (Programming Languages, JavaScript Frameworks, PHP Frameworks, Java Frameworks, Application Servers, CMS, Design Tools, Team Management)
- Add complete References section with LinkedIn, Behance, portfolios, and recommendation letters
- Refine years-of-experience subtitle styling to match original design
- Achieve 100% content parity with old React CV (English: 7→14 skill categories)
- Add companyURL field to Experience model (optional)
- Update cv-content.html template to display company name with conditional link
- Add company-link CSS styling for clickable company names
- Add companyURL data for major companies (Olympic Broadcasting, AENA, SAP, Gigya, Everis, Indra)
- Companies without URLs display as plain text, maintaining flexibility
This addresses the issue where company names were missing from the experience section
and ensures links are included throughout the CV as per the original React version.
- Change JAVA DEVELOPER to GO DEVELOPER in header badge
- Remove Tailwind CSS from AI & Modern Development skills (both EN/ES)
- Align tech stack with actual project technologies
juanatsap