123 lines
7.3 KiB
PHP
123 lines
7.3 KiB
PHP
<?php
|
|
/* Page « Qui suis-je » : portrait, fiche en terminal, compétences en jauges typographiques,
|
|
parcours en frise tracée au scroll. Données : page d'admin Profil (inc/profile.php). */
|
|
get_header();
|
|
$photo = function_exists('get_field') ? get_field('photo', 'option') : '';
|
|
if (!$photo) $photo = home_url('/wp-content/uploads/2026/03/IMG_2852-e1774648448626.png');
|
|
$entreprise = yb2026_id('entreprise');
|
|
$fiche = array(
|
|
'poste' => yb2026_id('poste') . ', ' . $entreprise,
|
|
'localisation' => yb2026_location_long(),
|
|
'email' => yb2026_id('email'),
|
|
'telephone' => yb2026_id('telephone'),
|
|
'mobilite' => yb2026_id('mobilite'),
|
|
);
|
|
/* Intro : 1re phrase en manifeste, le reste en texte courant ; l'entreprise passe en lime */
|
|
$intro = yb2026_id('intro');
|
|
$parts = preg_split('/(?<=[.!?])\s+/u', trim($intro), 2);
|
|
$lime = function ($t) use ($entreprise) {
|
|
$h = esc_html($t);
|
|
return $entreprise ? str_replace(esc_html($entreprise), '<span class="lime">' . esc_html($entreprise) . '</span>', $h) : $h;
|
|
};
|
|
$skills = yb2026_profile('yb_skills');
|
|
$parcours = yb2026_profile('yb_parcours');
|
|
?>
|
|
|
|
<div class="qs">
|
|
|
|
<!-- ── Ouverture : titre géant + portrait ───────────────────────────── -->
|
|
<section class="qs-hero page-wrap">
|
|
<div class="qs-hero__text">
|
|
<div class="kicker">À PROPOS</div>
|
|
<h1 class="qs-title" data-reveal>QUI<br><span class="outline-lime">SUIS-JE ?</span></h1>
|
|
<p class="qs-lead" data-reveal><?php echo $lime($parts[0]); ?></p>
|
|
<?php if (!empty($parts[1])) : ?><p class="qs-sub" data-reveal><?php echo $lime($parts[1]); ?></p><?php endif; ?>
|
|
</div>
|
|
<figure class="qs-portrait" data-reveal>
|
|
<div class="qs-portrait__frame" data-tilt>
|
|
<img src="<?php echo esc_url($photo); ?>" alt="Portrait de Yasser Boulayoune">
|
|
</div>
|
|
<figcaption class="qs-portrait__cap">YASSER BOULAYOUNE · <?php echo esc_html(mb_strtoupper(yb2026_id('localisation'))); ?></figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<!-- ── Fiche : terminal « whoami » tapé en direct ───────────────────── -->
|
|
<section class="page-wrap qs-who">
|
|
<div class="term qs-term" data-reveal>
|
|
<div class="term-bar">
|
|
<span class="term-dot term-dot--r"></span><span class="term-dot term-dot--y"></span><span class="term-dot term-dot--g"></span>
|
|
<span class="term-title">yass@servyass: ~</span>
|
|
</div>
|
|
<div class="term-body qs-term__body" data-type>
|
|
<div class="qs-term__line"><span class="lime">yass@servyass</span>:~$ <span data-type-cmd>whoami --details</span></div>
|
|
<?php foreach ($fiche as $k => $v) : if (!trim($v, ', ')) continue; ?>
|
|
<div class="qs-term__row" data-type-row><span class="qs-term__k"><?php echo esc_html($k); ?></span><span class="qs-term__v"><?php echo in_array($k, array('email', 'telephone'), true) ? yb2026_pv($v) : esc_html($v); ?></span></div>
|
|
<?php endforeach; ?>
|
|
<div class="qs-term__line" data-type-row><span class="lime">yass@servyass</span>:~$ <span class="qs-term__caret"></span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Compétences techniques : noms géants qui se remplissent de lime ── -->
|
|
<?php if ($skills) : ?>
|
|
<section class="qs-skills" aria-label="Compétences techniques">
|
|
<div class="page-wrap">
|
|
<div class="kicker">COMPÉTENCES TECHNIQUES</div>
|
|
<h2 class="cp-h" data-reveal>CE QUE JE <span class="outline-lime">MAÎTRISE</span></h2>
|
|
</div>
|
|
<ul class="qs-gauges">
|
|
<?php foreach ($skills as $sk) : $pct = max(0, min(100, (int) $sk['pct'])); ?>
|
|
<li class="qs-gauge" style="--pct:<?php echo $pct; ?>%" data-bar>
|
|
<span class="qs-gauge__name" data-text="<?php echo esc_attr(mb_strtoupper($sk['name'])); ?>"><?php echo esc_html(mb_strtoupper($sk['name'])); ?></span>
|
|
<span class="qs-gauge__meta"><span><?php echo esc_html($sk['level']); ?></span><b><?php echo $pct; ?>%</b></span>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<!-- ── Parcours : frise, ligne lime tracée au fil du scroll ─────────── -->
|
|
<?php if ($parcours) : ?>
|
|
<section class="qs-path page-wrap" aria-label="Parcours">
|
|
<div class="kicker">PARCOURS</div>
|
|
<h2 class="cp-h" data-reveal>D'OÙ JE <span class="outline-lime">VIENS</span></h2>
|
|
<div class="qs-tl" data-timeline>
|
|
<span class="qs-tl__line" aria-hidden="true"><span class="qs-tl__fill"></span></span>
|
|
<ol class="qs-tl__list">
|
|
<?php foreach ($parcours as $i => $e) :
|
|
preg_match_all('/\d{4}/', $e['date'], $yy);
|
|
$years = array_values(array_unique($yy[0]));
|
|
$year = $years ? $years[0] : '';
|
|
$now = $i === 0 && stripos($e['date'], 'depuis') !== false; ?>
|
|
<li class="qs-tl__item<?php echo $now ? ' is-now' : ''; ?>" data-reveal>
|
|
<span class="qs-tl__dot" aria-hidden="true"></span>
|
|
<div class="qs-tl__year"><?php echo esc_html($year); ?><?php if (count($years) > 1) : ?><small>→ <?php echo esc_html(end($years)); ?></small><?php endif; ?></div>
|
|
<div class="qs-tl__body">
|
|
<div class="qs-tl__date"><?php echo esc_html(mb_strtoupper($e['date'])); ?><?php if ($now) : ?> <span class="qs-tl__now">MAINTENANT</span><?php endif; ?></div>
|
|
<h3 class="qs-tl__title"><?php echo esc_html($e['titre']); ?></h3>
|
|
<div class="qs-tl__place"><?php echo esc_html(mb_strtoupper($e['lieu'])); ?></div>
|
|
<p class="qs-tl__desc"><?php echo esc_html($e['desc']); ?></p>
|
|
</div>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<!-- ── Bandeau des casquettes + appel à l'échange ───────────────────── -->
|
|
<section class="skills-mq qs-mq" aria-hidden="true">
|
|
<div class="marquee">
|
|
<div class="marquee-track skills-mq__track">
|
|
<?php for ($k = 0; $k < 2; $k++) : ?><span><?php echo esc_html(mb_strtoupper(yb2026_id('poste'))); ?> <i class="lime">✦</i> <?php echo esc_html(mb_strtoupper(str_replace(' · ', ' ✦ ', yb2026_id('casquettes')))); ?> <i class="lime">✦</i> <?php echo esc_html(mb_strtoupper(yb2026_id('localisation'))); ?> <i class="lime">✦</i> </span><?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta">
|
|
<div class="kicker" data-reveal><?php echo esc_html(mb_strtoupper(yb2026_id('accroche'))); ?></div>
|
|
<a class="cta__title" href="<?php echo esc_url(home_url('/contact/')); ?>" data-wipe="CONTACT" data-cursor-label="M'ÉCRIRE" data-reveal>TRAVAILLONS<br><span class="outline-lime">ENSEMBLE →</span></a>
|
|
</section>
|
|
</div>
|
|
|
|
<?php get_footer(); ?>
|