- 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.
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)
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
- 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
Experience Section Improvements:
- Increased company logo size from 48px to 64px
- Added default office building icon for companies without logos
- Increased spacing between entries (2.5rem margin, 2rem padding)
- Added visible separator lines (2px solid #ddd)
- Made dates bold (weight: 600) and larger (1.05rem)
- Changed date color to #555 for better contrast
Dynamic Duration Calculation:
- Added automatic years/months calculation for each position
- Format: "(4 years 10 months)", "(2 years)", "(6 months)"
- Smart pluralization in English and Spanish
- Handles current positions (calculates to today)
- Added Duration field to Experience model
Iconify Integration:
- Added Iconify library (v3.1.1) for icon management
- Replaced EN/ES text with round flag icons (circle-flags:us, circle-flags:es)
- Updated CV site icon to mdi:file-account
- Replaced toggle text with intuitive icons:
* Short/Long: mdi:file-document-outline / mdi:file-document-multiple-outline
* Logos: mdi:image-off-outline / mdi:image-multiple-outline
- Default company icon: mdi:office-building (64x64px, light gray background)
Logo Display:
- Logos now show by default (toggle checked on page load)
- Toggle controls icon visibility
- Consistent spacing with default icon placeholder
Files modified:
- internal/handlers/cv.go: Added calculateDuration() function
- internal/models/cv.go: Added Duration field to Experience struct
- templates/index.html: Iconify integration, flag icons, toggle icons
- templates/cv-content.html: Duration display, default icon logic
- static/css/main.css: Bold dates, larger font sizes
- static/css/logo-toggle.css: Icon styling, separator lines, spacing
- 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)
**Social Links in Footer (Page 2):**
- Replace address/phone with LinkedIn, GitHub, and Behance links
- Maintain email@ link
- All links are clickable and open in new tabs
- Footer displays social media profiles prominently
**Company Logo Toggle Feature:**
- Add "Show logos" toggle switch in top action bar
- Toggle displays company logos (48x48px) to the left of each experience item
- LinkedIn-style layout when logos are shown
- Logos hidden by default, optional display via toggle
- Graceful fallback: missing logos don't break layout (onerror handler)
- Logos directory created at static/images/logos/ with README
**Technical Implementation:**
- New CSS file: logo-toggle.css for toggle switch and logo layout
- JavaScript: toggleLogos() function for show/hide functionality
- Template updates: experience items now support flex layout with logos
- Action bar grid updated to accommodate 4 columns
- Logo display uses CSS class `.show-logos` on `.cv-paper`
- Print CSS: logos hidden in PDF exports by default
**User Experience:**
- Clean toggle switch UI with smooth animations
- Mobile responsive design
- Accessibility: proper ARIA labels for toggle
- Optional feature that doesn't clutter default view
- Professional LinkedIn-style appearance when enabled
Logos can be added to static/images/logos/ directory using filenames
from the companyLogo field in CV JSON data.
- Reorder elements: position first, then company (not reversed)
- Display period, separator, and location inline on same line
- Update CSS to match original styling:
- Inline display for all date/location elements
- Gray color (#aaa) for period, separator, location
- Font-weight 500 (not 600) for consistency
- Remove flex layout in favor of inline elements
This matches the exact format and styling of the original React CV.
- 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.
- Changed .cv-container from flex to block layout
- Made .cv-container full width (100%) instead of max 1200px
- Removed .cv-paper grid layout (was conflicting with .cv-page grids)
- Made .cv-paper transparent with no shadow (each page has its own)
- Pages now stack vertically one after another
- Removed white frame container that was wrapping both pages
Each .cv-page now displays independently with proper spacing.
**Page 1 Changes:**
- Left sidebar with first half of skills categories
- Main content: Personal info, Education, Skills summary, Experience
- No footer on page 1
**Page 2 Changes:**
- Main content: Awards, Courses, Languages, References, Other
- Right sidebar with second half of skills categories
- Footer with address, phone, email (dark gray #303030 background)
- Same header as page 1
**Technical Implementation:**
- Split skills between left/right sidebars using midpoint calculation in Go handler
- CSS Grid layout: Page 1 (left sidebar + main), Page 2 (main + right sidebar)
- Footer styled to match React CV exactly (centered, horizontal layout)
- Print CSS with proper page breaks for A4 layout
- Mobile responsive: stacks to single column, hides page 2 header
- All links in References section are clickable
**Data Model:**
- Moved Languages, Courses, References, Other from sidebar to page 2 main content
- Skills split evenly between SkillsLeft and SkillsRight template variables
Matches pixel-perfect design from original React CV screenshot.
User reported intro text was in wrong position (inside Training section).
Changes:
- Moved intro text INSIDE cv-header-left div (GREEN BOX position)
- Positioned right after "20 years of experience"
- Removed duplicate Training section that showed summary
- NO section heading - just the text flowing naturally
CSS Updates:
- Removed .cv-excerpt and .excerpt-text (wrong implementation)
- Added .intro-text with exact styling from old React CV:
* Font: Quicksand, 1.0em
* Line height: 1.6
* Text align: justify
* Style: italic
* Margin-top: 20px
* Color: rgb(51, 51, 51)
- Added responsive styles for mobile (0.9em, 15px margin)
Verified with Playwright analysis of old React CV.
Intro text now appears exactly as in original implementation.
juanatsap