- 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
- Save scroll position before toggling logos on/off
- Restore scroll position after DOM updates using requestAnimationFrame
- Prevents page jump when switching logo visibility
- Save scroll position before toggling short/long mode
- Restore scroll position after DOM updates using requestAnimationFrame
- Prevents page jump when switching between CV modes
- 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 safeHTML template function to prevent HTML escaping
- Applied safeHTML filter to ShortDescription fields in Experience, Awards, and Courses
- Applied safeHTML filter to Responsibilities in all sections
- Links and HTML formatting now render correctly instead of showing raw HTML tags
- Only apply header-hidden class to navigation menu when it's open
- Check for menu-open class before hiding/showing menu on scroll
- Closed menu now stays hidden regardless of scroll direction
- 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
- 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
- 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
- Removed references to non-existent lengthLabel, logoLabel, and themeLabel elements
- Fixed "Cannot set properties of null" JavaScript errors
- Toggles now work correctly without trying to update removed label text
- Cleaned up unnecessary language variable declarations
- Reduced toggle slider width from 80px to 75px
- Adjusted checked state translation to 45px for proper alignment
- Fine-tuned icon and title padding for better visual balance
- Increased years-experience font size to 1.25em
- Optimized view controls gap to 2.5rem
- 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
juanatsap