109 lines
5.4 KiB
PHP
109 lines
5.4 KiB
PHP
<?php
|
|
get_header();
|
|
$projects = yb2026_get_projects();
|
|
$home_projects = array_slice($projects, 0, 6);
|
|
$years = array_filter(array_map(function ($p) { return get_post_meta($p->ID, '_yb_year', true); }, $projects));
|
|
preg_match_all('/\d{4}/', implode(' ', $years), $yy);
|
|
$span = $yy[0] ? min($yy[0]) . ' / ' . max($yy[0]) : date('Y');
|
|
$sub = mb_strtoupper(yb2026_id('casquettes') . ' · ' . yb2026_id('localisation'));
|
|
$kicker = mb_strtoupper(yb2026_id('poste') . ' @ ' . yb2026_id('entreprise'));
|
|
?>
|
|
|
|
<!-- Orbe persistante : canvas fixe derrière toute la page, morphée par le scroll (orb.js) -->
|
|
<canvas id="orb-canvas" class="orb-canvas" aria-hidden="true"></canvas>
|
|
|
|
<!-- Rail de navigation vertical -->
|
|
<nav class="section-rail" aria-label="Sections de la page">
|
|
<a href="#top" data-rail-target="#top">TOP</a>
|
|
<a href="#travaux" data-rail-target="#travaux">TRAVAUX</a>
|
|
<a href="#apropos" data-rail-target="#apropos">PROFIL</a>
|
|
<a href="#cta" data-rail-target="#cta">CONTACT</a>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero" id="top">
|
|
<div class="hero__vertical-label">PORTFOLIO · ÉDITION <?php echo esc_html(date('Y')); ?></div>
|
|
<div class="hero__content">
|
|
<div class="line-mask hero__kicker-mask"><div class="hero__kicker"><?php echo esc_html($kicker); ?></div></div>
|
|
<h1 class="hero__title">
|
|
<span class="line-mask"><span>YASSER</span></span>
|
|
<span class="line-mask"><span class="outline-lime">BOULAYOUNE</span></span>
|
|
</h1>
|
|
<div class="line-mask hero__sub-mask"><div class="hero__sub"><?php echo esc_html($sub); ?></div></div>
|
|
</div>
|
|
<div class="hero__aside">
|
|
<p><?php echo esc_html(yb2026_id('hero_texte')); ?></p>
|
|
<a class="scroll-hint" href="#travaux">SCROLL TO EXPLORE<span class="scroll-hint__arrow">→</span></a>
|
|
</div>
|
|
<div class="hero__marquee marquee" aria-hidden="true">
|
|
<div class="marquee-track">
|
|
<?php for ($k = 0; $k < 2; $k++) : ?>
|
|
<span>PHP <span class="lime">✦</span> WORDPRESS <span class="lime">✦</span> SYMFONY <span class="lime">✦</span> JAVASCRIPT <span class="lime">✦</span> PYTHON <span class="lime">✦</span> DOCKER <span class="lime">✦</span> LINUX <span class="lime">✦</span> </span>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TRAVAUX : scroll horizontal + skew (desktop), scroll-snap natif (mobile) -->
|
|
<section class="works" id="travaux">
|
|
<div class="works-sticky">
|
|
<div class="works-head">
|
|
<div data-reveal>
|
|
<h2 class="works-title">TRAVAUX<span class="lime">.</span></h2>
|
|
<div class="works-sub">SELECTED WORKS · <?php echo esc_html($span); ?></div>
|
|
</div>
|
|
<div class="works-meta">
|
|
<div class="works-hint">( SCROLL · LA SECTION GLISSE → )</div>
|
|
<div class="works-count">01 / <?php echo esc_html(str_pad(count($home_projects), 2, '0', STR_PAD_LEFT)); ?></div>
|
|
</div>
|
|
</div>
|
|
<div class="works-track">
|
|
<?php foreach ($home_projects as $p) yb2026_project_card($p, true); ?>
|
|
<a class="works-end" href="<?php echo esc_url(home_url('/realisation/')); ?>" data-wipe="RÉALISATIONS">
|
|
<span>TOUT VOIR<br>( <?php echo esc_html(str_pad(count($projects), 2, '0', STR_PAD_LEFT)); ?> ) →</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- À PROPOS : blob + blend-mode -->
|
|
<section class="about" id="apropos">
|
|
<div class="about-blob" aria-hidden="true"></div>
|
|
<div class="about__title-wrap">
|
|
<h2 class="about__title" data-reveal>CODE.<br>SERVEURS.<br>RÉSEAUX.</h2>
|
|
</div>
|
|
<div class="about__cols">
|
|
<p class="about__text" data-reveal><?php echo yb2026_lime_marks(yb2026_id('apropos')); ?></p>
|
|
<div class="about__list" data-reveal>
|
|
<div><span class="lime">▸</span> WEB · PHP, WordPress, Symfony, JS</div>
|
|
<div><span class="lime">▸</span> SYS · Debian, Docker, virtualisation</div>
|
|
<div><span class="lime">▸</span> RÉSEAU · VLAN, DNS, DHCP, WireGuard</div>
|
|
<div><span class="lime">▸</span> OPS · supervision, backups, TLS</div>
|
|
</div>
|
|
</div>
|
|
<div class="about__more">
|
|
<a class="link-underline" href="<?php echo esc_url(home_url('/qui-suis-je/')); ?>" data-wipe="QUI SUIS-JE">EN SAVOIR PLUS SUR MOI →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MARQUEES compétences -->
|
|
<section class="skills-mq" aria-hidden="true">
|
|
<div class="marquee">
|
|
<div class="marquee-track skills-mq__track">
|
|
<?php for ($k = 0; $k < 2; $k++) : ?><span>PHP / WORDPRESS / SYMFONY / JAVASCRIPT / PYTHON / NODE / DOCKER / GIT / </span><?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
<div class="marquee">
|
|
<div class="marquee-track marquee-track--reverse skills-mq__track skills-mq__track--outline">
|
|
<?php for ($k = 0; $k < 2; $k++) : ?><span>DEBIAN / NGINX / WIREGUARD / VLAN / DNS / ACTIVE DIRECTORY / SQL / SUPERVISION / </span><?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA contact -->
|
|
<section class="cta" id="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>
|
|
|
|
<?php get_footer(); ?>
|