Files
pflores.linkedcorp.net/frontend/persona-cv-theme/front-page.php
T

384 lines
24 KiB
PHP

<?php
declare(strict_types=1);
get_header();
// Usa ACF si está disponible, si no cae al fallback hardcodeado del tema
$cv = function_exists('pflores_get_cv_data') ? pflores_get_cv_data() : persona_cv_data();
$hero = $cv['hero'];
$heroName = $hero['name'];
$heroRole = $hero['role'];
$heroEmail = $hero['email'];
$heroPhone = $hero['phone'];
$heroLocation = $hero['location'];
$linkedin = $hero['linkedin'];
$acfPhoto = $cv['photo'] ?? '';
$profileImage = $acfPhoto ?: get_template_directory_uri() . '/assets/images/patricia-flores-profile.jpeg';
$cvFile = get_template_directory_uri() . '/assets/docs/CV_Patricia_Flores_Sanchez_ES_FINAL.docx';
$qrImage = get_template_directory_uri() . '/assets/images/patricia-flores-qr.png';
$publicUrl = 'https://pflres.linkedcorp.net';
?>
<!-- ═══════════════════════════════════════════════════
HERO — PANTALLA COMPLETA
═══════════════════════════════════════════════════ -->
<section class="pn-hero" id="inicio">
<div class="pn-hero__bg" style="background-image:url('<?php echo esc_url($profileImage); ?>')"></div>
<div class="pn-hero__overlay"></div>
<div class="pn-hero__content">
<div class="pn-hero__avatar">
<img src="<?php echo esc_url($profileImage); ?>" alt="<?php echo esc_attr($heroName); ?>">
</div>
<p class="pn-hero__eyebrow"><?php echo esc_html($hero['eyebrow']); ?></p>
<h1 class="pn-hero__name"><?php echo esc_html($heroName); ?></h1>
<div class="pn-hero__roles">
<span><?php echo esc_html($heroRole); ?></span>
<span class="pn-hero__roles-sep">|</span>
<span><?php echo esc_html($hero['role2']); ?></span>
</div>
<div class="pn-hero__chips">
<span class="pn-hero__chip">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<?php echo esc_html($heroLocation); ?>
</span>
<span class="pn-hero__chip pn-hero__chip--avail">
<span class="pn-dot" aria-hidden="true"></span>
<?php esc_html_e('Disponible inmediatamente', 'persona'); ?>
</span>
</div>
<div class="pn-hero__actions">
<a class="pn-btn pn-btn--accent" href="#sobre-mi"><?php esc_html_e('Ver perfil', 'persona'); ?></a>
<a class="pn-btn pn-btn--white" href="<?php echo esc_url(home_url('/?cv_pdf=1')); ?>">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
<?php esc_html_e('Descargar CV PDF', 'persona'); ?>
</a>
</div>
<div class="pn-hero__socials">
<?php if ($linkedin) : ?>
<a href="<?php echo esc_url($linkedin); ?>" target="_blank" rel="noreferrer" aria-label="LinkedIn" class="pn-social-icon">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
</a>
<?php endif; ?>
<a href="mailto:<?php echo esc_attr(antispambot($heroEmail)); ?>" aria-label="Email" class="pn-social-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</a>
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9+]/', '', $heroPhone)); ?>" aria-label="Teléfono" class="pn-social-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.41 2 2 0 0 1 3.6 1.25h3a2 2 0 0 1 2 1.72c.128.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.96a16 16 0 0 0 6.02 6.02l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.572 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg>
</a>
</div>
</div>
<a class="pn-scroll-hint" href="#sobre-mi" aria-label="<?php esc_attr_e('Ir al contenido', 'persona'); ?>">
<span></span>
</a>
</section>
<!-- ═══════════════════════════════════════════════════
SOBRE MÍ — blanco
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--white" id="sobre-mi">
<div class="pn-container">
<div class="pn-section-head">
<span class="pn-eyebrow">── <?php esc_html_e('Conóceme', 'persona'); ?> ──</span>
<h2><?php esc_html_e('Sobre mí', 'persona'); ?></h2>
<div class="pn-section-bar"></div>
</div>
<div class="pn-about-grid">
<div class="pn-about-photo-col">
<div class="pn-about-photo">
<img src="<?php echo esc_url($profileImage); ?>" alt="<?php echo esc_attr($heroName); ?>">
</div>
<h3 class="pn-about-name"><?php echo esc_html($heroName); ?></h3>
<p class="pn-about-role"><?php echo esc_html($heroRole); ?></p>
<div class="pn-about-socials">
<?php if ($linkedin) : ?>
<a href="<?php echo esc_url($linkedin); ?>" target="_blank" rel="noreferrer" class="pn-social-icon pn-social-icon--dark"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
<?php endif; ?>
<a href="mailto:<?php echo esc_attr(antispambot($heroEmail)); ?>" class="pn-social-icon pn-social-icon--dark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></a>
</div>
<a class="pn-btn pn-btn--accent pn-btn--sm" href="<?php echo esc_url(home_url('/?cv_pdf=1')); ?>" style="margin-top:1rem;width:100%;justify-content:center"><?php esc_html_e('Descargar CV PDF', 'persona'); ?></a>
</div>
<div class="pn-about-text-col">
<h3><?php echo esc_html($cv['summary']['title']); ?></h3>
<p><?php echo esc_html($cv['summary']['body']); ?></p>
<div class="pn-personal-details">
<div class="pn-pd-row"><span><?php esc_html_e('Ubicación', 'persona'); ?></span><strong><?php echo esc_html($heroLocation); ?></strong></div>
<div class="pn-pd-row"><span><?php esc_html_e('Correo', 'persona'); ?></span><strong><a href="mailto:<?php echo esc_attr(antispambot($heroEmail)); ?>"><?php echo esc_html($heroEmail); ?></a></strong></div>
<div class="pn-pd-row"><span><?php esc_html_e('Teléfono', 'persona'); ?></span><strong><?php echo esc_html($heroPhone); ?></strong></div>
<div class="pn-pd-row"><span><?php esc_html_e('Disponibilidad', 'persona'); ?></span><strong><?php echo esc_html($hero['availability']); ?></strong></div>
<div class="pn-pd-row"><span><?php esc_html_e('Idiomas', 'persona'); ?></span><strong><?php echo esc_html($hero['languages']); ?></strong></div>
<div class="pn-pd-row"><span><?php esc_html_e('Enfoque', 'persona'); ?></span><strong><?php echo esc_html($hero['focus']); ?></strong></div>
<div class="pn-pd-row"><span><?php esc_html_e('Web', 'persona'); ?></span><strong><?php echo esc_html($hero['web']); ?></strong></div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
CONTADORES — oscuro
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--dark" id="impacto">
<div class="pn-container">
<div class="pn-counters">
<?php foreach ($cv['metrics'] as $m) : ?>
<div class="pn-counter" data-target="<?php echo esc_attr($m['value']); ?>">
<span class="pn-counter__number">
<span class="pn-counter__val" data-count="<?php echo esc_attr(preg_replace('/[^0-9]/', '', $m['value'])); ?>">0</span><?php echo esc_html($m['suffix'] ?? ''); ?>
</span>
<span class="pn-counter__label"><?php echo esc_html($m['label']); ?></span>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
LOGROS DESTACADOS — gris claro
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--gray">
<div class="pn-container">
<div class="pn-section-head">
<span class="pn-eyebrow">── <?php esc_html_e('Resultados medibles', 'persona'); ?> ──</span>
<h2><?php esc_html_e('Logros destacados', 'persona'); ?></h2>
<div class="pn-section-bar"></div>
</div>
<div class="pn-highlights-grid">
<?php foreach ($cv['highlights'] as $h) : ?>
<article class="pn-highlight-card">
<div class="pn-highlight-card__value">
<?php echo esc_html($h['value']); ?>
<?php if (!empty($h['suffix'])) : ?><span class="pn-highlight-card__suf"><?php echo esc_html($h['suffix']); ?></span><?php endif; ?>
</div>
<p><?php echo esc_html($h['label']); ?></p>
</article>
<?php endforeach; ?>
</div>
<div class="pn-impact-row">
<?php foreach ($cv['impact'] as $item) : ?>
<article class="pn-impact-card">
<div class="pn-impact-card__icon" aria-hidden="true">
<?php if (str_contains($item['title'], 'digital')) : ?>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
<?php elseif (str_contains($item['title'], 'Autom')) : ?>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49M7.76 7.76a6 6 0 0 0 0 8.49"/></svg>
<?php else : ?>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<?php endif; ?>
</div>
<h3><?php echo esc_html($item['title']); ?></h3>
<p><?php echo esc_html($item['body']); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
EXPERIENCIA — blanco, timeline centrado
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--white" id="experiencia">
<div class="pn-container">
<div class="pn-section-head">
<span class="pn-eyebrow">── <?php esc_html_e('Trayectoria profesional', 'persona'); ?> ──</span>
<h2><?php esc_html_e('Experiencia', 'persona'); ?></h2>
<div class="pn-section-bar"></div>
</div>
<div class="pn-timeline">
<?php foreach ($cv['experience'] as $i => $job) : ?>
<article class="pn-tl-entry pn-tl-entry--<?php echo $i % 2 === 0 ? 'left' : 'right'; ?>">
<div class="pn-tl-content">
<span class="pn-tl-period"><?php echo esc_html($job['period']); ?></span>
<h3><?php echo esc_html($job['title']); ?></h3>
<p class="pn-tl-company">
<?php echo esc_html($job['company']); ?>
<em> &middot; <?php echo esc_html($job['location']); ?></em>
</p>
<p class="pn-tl-lead"><?php echo esc_html($job['lead']); ?></p>
<ul class="pn-tl-bullets">
<?php foreach ($job['bullets'] as $b) : ?>
<li><?php echo esc_html($b); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="pn-tl-dot" aria-hidden="true"></div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
FORMACIÓN — gris
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--gray" id="formacion">
<div class="pn-container">
<div class="pn-section-head">
<span class="pn-eyebrow">── <?php esc_html_e('Académica', 'persona'); ?> ──</span>
<h2><?php esc_html_e('Formación', 'persona'); ?></h2>
<div class="pn-section-bar"></div>
</div>
<div class="pn-edu-grid">
<?php foreach ($cv['education'] as $edu) : ?>
<article class="pn-edu-card">
<span class="pn-edu-card__year"><?php echo esc_html($edu['year']); ?></span>
<div>
<h3><?php echo esc_html($edu['title']); ?></h3>
<p class="pn-edu-card__inst"><?php echo esc_html($edu['institution']); ?></p>
<?php if ($edu['detail']) : ?>
<p class="pn-edu-card__detail"><?php echo esc_html($edu['detail']); ?></p>
<?php endif; ?>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
COMPETENCIAS — blanco, barras de progreso
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--white" id="competencias">
<div class="pn-container">
<div class="pn-section-head">
<span class="pn-eyebrow">── <?php esc_html_e('Capacidades', 'persona'); ?> ──</span>
<h2><?php esc_html_e('Competencias', 'persona'); ?></h2>
<div class="pn-section-bar"></div>
</div>
<div class="pn-skills-cols">
<?php foreach ($cv['competencies'] as $group => $items) : ?>
<div class="pn-skills-group">
<h3><?php echo esc_html($group); ?></h3>
<?php foreach ($items as $skill) :
$skillName = is_array($skill) ? ($skill['name'] ?? '') : (string) $skill;
$skillPct = is_array($skill) ? ($skill['pct'] ?? 80) : 80;
?>
<div class="pn-skill">
<div class="pn-skill__header">
<span><?php echo esc_html($skillName); ?></span>
<span><?php echo esc_html((string) $skillPct); ?>%</span>
</div>
<div class="pn-skill__bar">
<div class="pn-skill__fill" data-pct="<?php echo esc_attr((string) $skillPct); ?>" style="width:0%"></div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
CERTIFICACIONES — gris
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--gray" id="certificaciones">
<div class="pn-container">
<div class="pn-section-head">
<span class="pn-eyebrow">── <?php esc_html_e('Formación continua', 'persona'); ?> ──</span>
<h2><?php esc_html_e('Certificaciones', 'persona'); ?></h2>
<div class="pn-section-bar"></div>
</div>
<div class="pn-certs-grid">
<?php foreach ($cv['certifications'] as $cert) : ?>
<article class="pn-cert">
<span class="pn-cert__year"><?php echo esc_html($cert['year']); ?></span>
<div>
<h3><?php echo esc_html($cert['title']); ?></h3>
<p><?php echo esc_html($cert['issuer']); ?></p>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════
CONTACTO — oscuro
═══════════════════════════════════════════════════ -->
<section class="pn-section pn-section--dark" id="contacto">
<div class="pn-container">
<div class="pn-section-head">
<span class="pn-eyebrow pn-eyebrow--light">── <?php esc_html_e('Ponte en contacto', 'persona'); ?> ──</span>
<h2 class="pn-section-head__title--light"><?php esc_html_e('Contacto', 'persona'); ?></h2>
<div class="pn-section-bar"></div>
</div>
<div class="pn-contact-grid">
<div class="pn-contact-info">
<ul class="pn-contact-list">
<li>
<span class="pn-contact-list__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span>
<span><?php echo esc_html($heroLocation); ?></span>
</li>
<li>
<span class="pn-contact-list__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></span>
<a href="mailto:<?php echo esc_attr(antispambot($heroEmail)); ?>"><?php echo esc_html($heroEmail); ?></a>
</li>
<li>
<span class="pn-contact-list__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.41 2 2 0 0 1 3.6 1.25h3a2 2 0 0 1 2 1.72c.128.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.96a16 16 0 0 0 6.02 6.02l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.572 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg></span>
<a href="tel:<?php echo esc_attr(preg_replace('/[^0-9+]/', '', $heroPhone)); ?>"><?php echo esc_html($heroPhone); ?></a>
</li>
<?php if ($linkedin) : ?>
<li>
<span class="pn-contact-list__icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></span>
<a href="<?php echo esc_url($linkedin); ?>" target="_blank" rel="noreferrer">LinkedIn</a>
</li>
<?php endif; ?>
</ul>
<div class="pn-contact-extra">
<h4><?php esc_html_e('Voluntariado', 'persona'); ?></h4>
<p class="pn-contact-extra__title"><?php echo esc_html($cv['volunteer']['title']); ?> <span><?php echo esc_html($cv['volunteer']['year']); ?></span></p>
<p><?php echo esc_html($cv['volunteer']['body']); ?></p>
</div>
<dl class="pn-extra-dl">
<?php foreach ($cv['additional'] as $label => $value) : ?>
<div><dt><?php echo esc_html($label); ?></dt><dd><?php echo esc_html($value); ?></dd></div>
<?php endforeach; ?>
</dl>
</div>
<div class="pn-bcard-col">
<p class="pn-bcard-label"><?php esc_html_e('Tarjeta de presentación', 'persona'); ?></p>
<div class="pn-bcard">
<div class="pn-bcard__front">
<div class="pn-bcard__photo">
<img src="<?php echo esc_url($profileImage); ?>" alt="<?php echo esc_attr($heroName); ?>">
</div>
<div>
<p class="pn-bcard__name"><?php echo esc_html($heroName); ?></p>
<p class="pn-bcard__role"><?php echo esc_html($heroRole); ?></p>
</div>
</div>
<div class="pn-bcard__details">
<div class="pn-bcard__qr">
<img src="<?php echo esc_url($qrImage); ?>" alt="<?php esc_attr_e('QR perfil web', 'persona'); ?>">
</div>
<div class="pn-bcard__info">
<p><?php echo esc_html($heroLocation); ?></p>
<p><?php echo esc_html($heroPhone); ?></p>
<p><?php echo esc_html($heroEmail); ?></p>
<a href="<?php echo esc_url($publicUrl); ?>" target="_blank" rel="noreferrer"><?php echo esc_html($publicUrl); ?></a>
</div>
</div>
</div>
</div>
</div>
<?php while (have_posts()) : the_post(); ?>
<?php if (trim((string) get_the_content()) !== '') : ?><div class="pn-wp-content"><?php the_content(); ?></div><?php endif; ?>
<?php endwhile; ?>
<div class="pn-footer-bar">
<p><?php echo esc_html(get_bloginfo('name')); ?> &copy; <?php echo esc_html(date_i18n('Y')); ?> &mdash; <?php esc_html_e('Todos los derechos reservados', 'persona'); ?></p>
<a href="/politica-de-privacidad/" style="opacity:.6;text-decoration:underline;font-size:.75rem;color:inherit">Política de Privacidad · LOPDP</a>
</div>
</div>
</section>
<?php get_footer(); ?>