juanatsap
da81a0b148
Issue 1: Blur bar compatibility (Android doesn't always show at bottom) ✅ Solution: Wrap blur bar in @supports query for backdrop-filter - Only shows on devices that support backdrop-filter (primarily iOS) - Android devices without support won't see the bar - Prevents layout issues on non-iOS devices Issue 2: Keyboard shortcuts button on real mobile (no physical keyboard) ✅ Solution: Device detection + conditional hiding - Added device-detection.js: Detects real mobile vs desktop browser - Checks user agent (Android, iPhone, iPad, etc.) + touch support - Adds 'is-mobile-device' or 'is-desktop' class to <html> - CSS hides shortcuts button only on real mobile devices - Desktop browser in mobile view: shortcuts button still visible (for testing) Implementation Details: 1. Device Detection (static/js/device-detection.js): - User agent detection: /Android|iPhone|iPad|etc./ - Touch support check: ontouchstart + maxTouchPoints - Class added to <html>: is-mobile-device or is-desktop 2. Blur Bar (@supports query): - Detects backdrop-filter support before applying - iOS: Shows blur bar with backdrop-filter - Android (most): No blur bar (no backdrop-filter support) - Prevents empty/broken bar on incompatible devices 3. CSS Hiding Rules: - .is-mobile-device .shortcuts-btn { display: none !important; } - Also hides zoom-toggle-btn and zoom-control on real mobile - Desktop mobile view: shortcuts button remains visible Files Modified: - static/js/device-detection.js: NEW - Device detection logic - templates/index.html: Load device-detection.js early - static/css/05-responsive/_breakpoints.css: @supports wrapper for blur bar - static/css/04-interactive/_scroll-behavior.css: Hide shortcuts on real mobile - tests/mjs/52-mobile-device-detection-test.mjs: Comprehensive device detection test Test Results: ✅ iPhone (real mobile): is-mobile-device class, shortcuts hidden ✅ Desktop browser (mobile view): is-desktop class, shortcuts visible ✅ Blur bar: Only shows on devices with backdrop-filter support
221 lines
10 KiB
HTML
221 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{if eq .Lang "es"}}es{{else}}en{{end}}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<title>{{.CV.Personal.Name}} - {{if eq .Lang "es"}}Curriculum Vitae{{else}}Curriculum Vitae{{end}}</title>
|
|
<meta name="title" content="{{.CV.Personal.Name}} - {{if eq .Lang "es"}}CV Profesional{{else}}Professional CV{{end}}">
|
|
<meta name="description" content="{{.CV.Personal.Title}} | {{if eq .Lang "es"}}18 años de experiencia en desarrollo web, SAP CDC, React, Node.js, Go, HTMX y desarrollo asistido por IA{{else}}18 years of experience in web development, SAP CDC, React, Node.js, Go, HTMX and AI-assisted development{{end}}">
|
|
<meta name="keywords" content="{{if eq .Lang "es"}}CV, Curriculum Vitae, {{.CV.Personal.Name}}, Desarrollador FullStack, SAP CDC, React, Node.js, Go, HTMX, IA, Desarrollo Web, Consultor Técnico{{else}}CV, Resume, {{.CV.Personal.Name}}, FullStack Developer, SAP CDC, React, Node.js, Go, HTMX, AI, Web Development, Technical Consultant{{end}}">
|
|
<meta name="author" content="{{.CV.Personal.Name}}">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="{{.CanonicalURL}}">
|
|
|
|
<!-- Hreflang tags for international SEO -->
|
|
<link rel="alternate" hreflang="en" href="{{.AlternateEN}}">
|
|
<link rel="alternate" hreflang="es" href="{{.AlternateES}}">
|
|
<link rel="alternate" hreflang="x-default" href="https://juan.andres.morenorub.io/?lang=en">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="profile">
|
|
<meta property="og:url" content="{{.CV.Personal.Website}}">
|
|
<meta property="og:title" content="{{.CV.Personal.Name}} - {{if eq .Lang "es"}}CV Profesional{{else}}Professional CV{{end}}">
|
|
<meta property="og:description" content="{{.CV.Personal.Title}} | {{if eq .Lang "es"}}Consultor Técnico Senior con 18 años de experiencia{{else}}Senior Technical Consultant with 18 years of experience{{end}}">
|
|
<meta property="og:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
|
|
<meta property="og:locale" content="{{if eq .Lang "es"}}es_ES{{else}}en_US{{end}}">
|
|
<meta property="og:site_name" content="{{.CV.Personal.Name}}">
|
|
<meta property="profile:first_name" content="Juan Andrés">
|
|
<meta property="profile:last_name" content="Moreno Rubio">
|
|
<meta property="profile:username" content="txeo">
|
|
|
|
<!-- Social Media Card (Generic) -->
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="{{.CV.Personal.Name}} - {{if eq .Lang "es"}}CV Profesional{{else}}Professional CV{{end}}">
|
|
<meta name="twitter:description" content="{{.CV.Personal.Title}}">
|
|
<meta name="twitter:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
|
|
|
|
<!-- HTMX Configuration -->
|
|
<meta name="htmx-config" content='{"timeout":5000,"defaultSwapStyle":"innerHTML","defaultSwapDelay":0,"defaultSettleDelay":20}'>
|
|
|
|
<!-- FOUC Prevention: Apply color theme before page render -->
|
|
<script>
|
|
(function() {
|
|
let theme = localStorage.getItem('color-theme-mode');
|
|
|
|
// If no saved preference, set default based on device type
|
|
if (!theme) {
|
|
// Mobile devices default to light theme, desktop to auto
|
|
// Check multiple properties for better detection
|
|
const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
|
|
const isMobile = width <= 768;
|
|
theme = isMobile ? 'light' : 'auto';
|
|
}
|
|
|
|
document.documentElement.setAttribute('data-color-theme', theme);
|
|
})();
|
|
</script>
|
|
|
|
<!-- Device Detection - Detect real mobile devices vs desktop browser -->
|
|
<script src="/static/js/device-detection.js"></script>
|
|
|
|
<!-- HTMX with SRI (Subresource Integrity) -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"
|
|
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<!-- CV Core Functions - Regular JavaScript (global reusable functions) -->
|
|
<script src="/static/js/cv-functions.js"></script>
|
|
|
|
<!-- Hyperscript Functions - Must load BEFORE hyperscript library -->
|
|
<!-- ✅ NO def limit with latest hyperscript - organized by category -->
|
|
<script type="text/hyperscript" src="/static/hyperscript/utils._hs"></script>
|
|
<script type="text/hyperscript" src="/static/hyperscript/toggles._hs"></script>
|
|
<script type="text/hyperscript" src="/static/hyperscript/hover-sync._hs"></script>
|
|
<script type="text/hyperscript" src="/static/hyperscript/keyboard._hs"></script>
|
|
|
|
<!-- Color Theme System (JavaScript - hyperscript had parsing issues with colons in strings) -->
|
|
<script src="/static/js/color-theme.js"></script>
|
|
|
|
<!-- Footer and Button Bar Interaction - Makes buttons transparent when hovering footer -->
|
|
<script src="/static/js/footer-buttons-interaction.js"></script>
|
|
|
|
<!-- Scroll At-Bottom Handler - Adds 'at-bottom' class to buttons and footer when scrolled to bottom -->
|
|
<script src="/static/js/scroll-at-bottom-handler.js"></script>
|
|
|
|
<!-- Hyperscript - Declarative event handling for enhanced interactivity -->
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
|
|
|
|
<!-- Iconify - Load synchronously for immediate rendering -->
|
|
<!-- Using unpkg CDN (more reliable than code.iconify.design) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
|
|
|
|
<!-- CSS - Modular structure with native @import -->
|
|
<link rel="stylesheet" href="/static/css/main.css">
|
|
|
|
<!-- Fonts with Preload -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Structured Data (JSON-LD) -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "{{.CV.Personal.Name}}",
|
|
"jobTitle": "{{.CV.Personal.Title}}",
|
|
"url": "{{.CV.Personal.Website}}",
|
|
"email": "{{.CV.Personal.Email}}",
|
|
"telephone": "{{.CV.Personal.Phone}}",
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"addressLocality": "{{.CV.Personal.Location}}"
|
|
},
|
|
"sameAs": [
|
|
"{{.CV.Personal.LinkedIn}}",
|
|
"{{.CV.Personal.GitHub}}",
|
|
"{{.CV.Personal.Domestika}}"
|
|
],
|
|
"alumniOf": {
|
|
"@type": "EducationalOrganization",
|
|
"name": "Universidad de Extremadura"
|
|
},
|
|
"knowsAbout": [
|
|
"Web Development",
|
|
"SAP Customer Data Cloud",
|
|
"React",
|
|
"Node.js",
|
|
"Go",
|
|
"HTMX",
|
|
"AI-Assisted Development",
|
|
"Full Stack Development"
|
|
],
|
|
"worksFor": {
|
|
"@type": "Organization",
|
|
"name": "Olympic Broadcasting Services"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body {{if .ThemeClean}}class="theme-clean"{{end}}
|
|
_="on load call initScrollBehavior()
|
|
on scroll from window call handleScroll()
|
|
on keydown
|
|
set tagName to event.target.tagName
|
|
set isInputField to (tagName is 'INPUT' or tagName is 'TEXTAREA')
|
|
if event.key is '?' and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
|
|
halt the event then set modal to #shortcuts-modal then if modal then call modal.showModal() end
|
|
end
|
|
if (event.key is 'l' or event.key is 'L') and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
|
|
halt the event then set lengthToggle to (#lengthToggle or #lengthToggleMenu)
|
|
then if lengthToggle then set lengthToggle's checked to (not lengthToggle's checked) then send change to lengthToggle end
|
|
end
|
|
if (event.key is 'i' or event.key is 'I') and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
|
|
halt the event then set iconToggle to (#iconToggle or #iconToggleMenu)
|
|
then if iconToggle then set iconToggle's checked to (not iconToggle's checked) then send change to iconToggle end
|
|
end
|
|
if (event.key is 'v' or event.key is 'V') and not event.ctrlKey and not event.metaKey and not event.altKey and not isInputField
|
|
halt the event then set themeToggle to (#themeToggle or #themeToggleMenu)
|
|
then if themeToggle then set themeToggle's checked to (not themeToggle's checked) then send change to themeToggle end
|
|
end
|
|
end">
|
|
<!-- Top anchor for back-to-top link -->
|
|
<div id="top"></div>
|
|
|
|
{{template "action-bar" .}}
|
|
{{template "hamburger-menu" .}}
|
|
{{template "color-theme-switcher" .}}
|
|
|
|
<!-- Zoom Wrapper (for zoom functionality) -->
|
|
<div id="zoom-wrapper" class="zoom-wrapper">
|
|
<!-- CV Content Container -->
|
|
<div class="cv-container">
|
|
{{template "cv-content.html" .}}
|
|
</div>
|
|
</div> <!-- End zoom-wrapper -->
|
|
|
|
{{template "page-footer" .}}
|
|
|
|
{{template "error-toast" .}}
|
|
{{template "pdf-toast" .}}
|
|
|
|
<!-- iOS-style blur backdrop for mobile buttons -->
|
|
<div class="fixed-buttons-backdrop no-print"></div>
|
|
|
|
{{template "back-to-top" .}}
|
|
{{template "info-button" .}}
|
|
{{template "download-button" .}}
|
|
{{template "print-friendly-button" .}}
|
|
{{template "zoom-toggle-button" .}}
|
|
{{template "shortcuts-button" .}}
|
|
{{template "info-modal" .}}
|
|
{{template "shortcuts-modal" .}}
|
|
{{template "pdf-modal" .}}
|
|
{{template "zoom-control" .}}
|
|
|
|
<!-- External JavaScript - CSP Compliant -->
|
|
<script src="/static/js/main.js"></script>
|
|
|
|
<!-- Matomo Analytics - First-party subdomain to bypass ad blockers -->
|
|
<script>
|
|
var _paq = window._paq = window._paq || [];
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="https://matomo.morenorub.io/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '4']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.async=true;
|
|
g.src=u+'matomo.js';
|
|
s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
</body>
|
|
</html>
|