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/
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
- Removed redundant documentation files (ADDING-YOUR-PHOTO.md, ARCHITECTURE.md, DEPLOYMENT_SETUP.md)
- Moved essential information into the primary README for better discoverability
- Streamlined documentation structure to reduce maintenance overhead
- 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
- 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
juanatsap