269 lines
58 KiB
PHP
269 lines
58 KiB
PHP
@extends('layouts.vitrine')
|
||
|
||
@section('titre', 'Pourquoi ce projet ?')
|
||
|
||
@section('contenu')
|
||
<section class="relative overflow-hidden border-b-4 border-black bg-white">
|
||
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
|
||
<span class="etoile flotte absolute left-[44%] top-10 h-12 w-12 bg-[#FFD23F] [--r:14deg]"></span>
|
||
<span class="zigzag absolute bottom-10 left-10 h-4 w-40"></span>
|
||
<span class="flotte absolute top-[45%] right-[2%] h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0]"></span>
|
||
</div>
|
||
<div class="relative mx-auto grid max-w-7xl gap-14 px-5 pb-20 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
|
||
<div class="lg:col-span-7">
|
||
<p class="inline-block -rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Le fondateur</p>
|
||
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Pourquoi ce projet ?</h1>
|
||
<p class="mt-10 max-w-xl text-2xl font-bold leading-snug">Parce qu’un BTS peut changer une vie. Il a changé la mienne.</p>
|
||
<p class="mt-8 max-w-xl text-3xl font-black">Salut ! Moi, c’est Adam Belkacemi.</p>
|
||
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">Après un bac S, je n’ai pas trouvé de filière qui me correspondait. J’ai très tôt intégré le marché du travail, et j’ai fait plein de boulots !</p>
|
||
<ul class="mt-6 flex max-w-xl flex-wrap gap-3 text-sm font-extrabold" aria-label="Mon parcours, des premiers boulots au métier de data engineer">
|
||
<li class="-rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 shadow-[3px_3px_0px_#000000]">Coursier Uber Eats</li>
|
||
<li class="rotate-1 border-2 border-black bg-[#FFD23F] px-3 py-1 shadow-[3px_3px_0px_#000000]">Caissier</li>
|
||
<li class="-rotate-1 border-2 border-black bg-[#C4B5FD] px-3 py-1 shadow-[3px_3px_0px_#000000]">Employé polyvalent en grande distribution</li>
|
||
<li class="rotate-2 border-2 border-black bg-[#FF6FB5] px-3 py-1 shadow-[3px_3px_0px_#000000]">Manutentionnaire</li>
|
||
</ul>
|
||
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">L’informatique et le développement web, je les ai appris seul, en autodidacte. Au départ, c’était pour rendre service : mon frère avait besoin d’un site pour son cabinet d’infirmier, puis mon oncle pour son activité d’artisan. Le soir, après le boulot, j’apprenais, je testais, je cassais, je recommençais.</p>
|
||
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">J’ai pris goût à la programmation. Un nouveau monde s’est ouvert à moi !</p>
|
||
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">En 2019, j’intègre un BTS SN-IR, la seule formation qui voulait bien de moi… <strong class="bg-[#FFD23F] px-1">Ça a été le meilleur choix de toute ma vie !!!</strong></p>
|
||
<p class="mt-6 max-w-xl text-xl font-medium leading-relaxed">Pour la première fois, j’avais une vraie machine sous les mains, des profs qui me poussaient et un cadre pour progresser. Deux ans plus tard, j’en sors avec de bonnes notes et une lettre de recommandation de mon prof principal. Direction l’école d’ingénieur. Ça a été la plus belle expérience de toute ma vie ! 😊 Je le souhaite à tout le monde.</p>
|
||
<p class="mt-6 inline-block -rotate-1 border-4 border-black bg-[#7CF2C0] px-4 py-3 text-xl font-black shadow-[5px_5px_0px_#000000]">Aujourd’hui, je suis data ingénieur et entrepreneur.</p>
|
||
</div>
|
||
<div class="relative mx-auto w-full max-w-sm self-start lg:col-span-5 lg:mt-10">
|
||
<div class="absolute inset-0 translate-x-5 translate-y-5 border-4 border-black bg-[#C4B5FD]" aria-hidden="true"></div>
|
||
<figure class="relative aspect-square overflow-hidden border-4 border-black bg-white">
|
||
<img src="{{ asset('images/adam-belkacemi.jpeg') }}" alt="Portrait d’Adam Belkacemi" class="h-full w-full object-cover">
|
||
</figure>
|
||
<span class="absolute -left-6 top-8 -rotate-6 border-2 border-black bg-[#FFD23F] px-3 py-1 font-extrabold shadow-[4px_4px_0px_#000000]">Data ingénieur · entrepreneur</span>
|
||
<span class="absolute -right-4 top-[300px] z-20 rotate-3 border-2 border-black bg-[#7CF2C0] px-3 py-1 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">Ancien BTS SN-IR · 2019-2021</span>
|
||
<div class="relative z-10 translate-x-5 px-3 pb-8 pt-10" aria-label="Mes premiers boulots">
|
||
<svg class="pointer-events-none absolute inset-0 h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><polyline points="30,5 70,25 30,46 70,67 30,88 50,100" fill="none" stroke="#000" stroke-width="0.8" stroke-dasharray="3 2.5" vector-effect="non-scaling-stroke" style="stroke-width:3px"/></svg>
|
||
<ul class="relative grid gap-6">
|
||
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Coursier à vélo"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#EEEAFF"/><g fill="#D9D2FF"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><g stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"><circle cx="66" cy="72" r="16" fill="#fff"/><circle cx="134" cy="72" r="16" fill="#fff"/><path d="M66 72 L90 48 L124 48 L134 72 M90 48 L102 72 L124 48 M124 48 L119 37 L129 35 M90 48 L86 41 L96 41"/></g><g stroke="#13233A" stroke-width="1.4" opacity=".6"><path d="M66 58 V86 M52 72 H80 M134 58 V86 M120 72 H148"/></g><circle cx="66" cy="72" r="3" fill="#13233A"/><circle cx="134" cy="72" r="3" fill="#13233A"/><circle cx="102" cy="72" r="4" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M100 44 L108 60 L102 72" stroke="#3d6bf5" stroke-width="7" stroke-linecap="round" fill="none"/><path d="M104 44 L116 58 L112 68" stroke="#2c55d6" stroke-width="7" stroke-linecap="round" fill="none"/><path d="M100 72 h8 M110 68 h8" stroke="#13233A" stroke-width="3.5" stroke-linecap="round"/><g transform="rotate(-10 86 30)"><rect x="70" y="16" width="30" height="26" rx="3" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="70" y="16" width="30" height="7" fill="#F5B800" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M80 30 h10" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/></g><path d="M96 32 C104 24 118 26 122 36 L114 48 L98 46 Z" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M106 30 L112 46" stroke="#b92410" stroke-width="2"/><path d="M114 36 L126 40" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><path d="M114 36 L126 40" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none" opacity="0"/><circle cx="122" cy="22" r="7.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M113 21 C113 11 131 11 131 21 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M121 13 v6" stroke="#13233A" stroke-width="1.6"/><g stroke="#13233A" stroke-width="2" stroke-linecap="round" opacity=".45"><path d="M36 60 h14 M30 68 h18 M38 76 h10"/></g></svg></div></li>
|
||
<li class="ml-auto w-[62%] rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Caissier"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#E3FAF1"/><g fill="#C4F0DF"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><path d="M34 58 H166 V90 H34 Z" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M34 58 H166 V66 H34 Z" fill="#C4B5FD" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M44 74 H120" stroke="#13233A" stroke-width="2" stroke-dasharray="5 4" opacity=".5"/><circle cx="84" cy="24" r="9" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M74 22 C74 11 94 11 94 22 C90 18 80 18 74 22 Z" fill="#6b3f1f" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M66 58 C66 38 102 38 102 58 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M78 40 V58 M90 40 V58" stroke="#13233A" stroke-width="2"/><rect x="80" y="46" width="8" height="6" fill="#fff" stroke="#13233A" stroke-width="1.8"/><path d="M100 52 L112 46" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><rect x="114" y="32" width="34" height="26" rx="2" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="118" y="36" width="26" height="10" fill="#7CF2C0"/><path d="M121 41 h8 M132 41 h9" stroke="#13233A" stroke-width="1.6"/><g fill="#fff"><rect x="119" y="49" width="5" height="4"/><rect x="126" y="49" width="5" height="4"/><rect x="133" y="49" width="5" height="4"/><rect x="140" y="49" width="4" height="4"/></g><rect x="124" y="24" width="14" height="8" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="42" y="46" width="14" height="12" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle cx="52" cy="42" r="4" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="152" y="44" width="8" height="14" rx="2" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle cx="160" cy="80" r="0"/></svg></div></li>
|
||
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Employé en usine avec EPI"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#FFF3C4"/><g fill="#FBE38A"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="118" y="30" width="60" height="60" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="118" y="30" width="60" height="10" fill="#C4B5FD" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><g transform="translate(148 62)"><circle r="15" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><circle r="5" fill="#13233A"/><path d="M0 -21 v6 M0 15 v6 M-21 0 h6 M15 0 h6 M-15 -15 l4 4 M11 11 l4 4 M15 -15 l-4 4 M-11 11 l-4 4" stroke="#13233A" stroke-width="3.2" stroke-linecap="round"/></g><circle cx="126" cy="35" r="2.5" fill="#ec3013"/><circle cx="133" cy="35" r="2.5" fill="#7CF2C0"/><path d="M56 90 L60 52 C64 40 90 40 94 52 L98 90 Z" fill="#E6FF3F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M66 44 V90 M88 44 V90" stroke="#ec3013" stroke-width="3.2"/><path d="M60 66 H96" stroke="#c9c9c9" stroke-width="3"/><circle cx="77" cy="28" r="9.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M64 27 C64 11 90 11 90 27 Z" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M60 27 H94" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M77 14 v8" stroke="#13233A" stroke-width="1.6"/><rect x="70" y="27" width="14" height="5" rx="2.5" fill="#7CE3F2" stroke="#13233A" stroke-width="2"/><path d="M94 56 L114 58" stroke="#3d6bf5" stroke-width="7" stroke-linecap="round"/><circle cx="116" cy="58" r="4.5" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/></svg></div></li>
|
||
<li class="ml-auto w-[62%] rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Manutentionnaire"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#FFE3F0"/><g fill="#FFC7DE"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="112" y="82" width="66" height="8" fill="#C98404" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M122 82 v8 M144 82 v8 M166 82 v8" stroke="#13233A" stroke-width="2"/><g stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"><rect x="114" y="56" width="30" height="26" fill="#FFD23F"/><rect x="146" y="56" width="30" height="26" fill="#F5B800"/><rect x="128" y="30" width="32" height="26" fill="#FFD23F"/></g><g stroke="#13233A" stroke-width="2"><path d="M129 56 v8 M161 56 v8 M144 30 v8"/></g><path d="M120 72 h8 M152 72 h8" stroke="#ec3013" stroke-width="2.4"/><circle cx="66" cy="22" r="8.5" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M57 20 C57 10 75 10 75 20 Z" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M73 17 h8" stroke="#13233A" stroke-width="2.6" stroke-linecap="round"/><rect x="70" y="32" width="32" height="26" fill="#FFD23F" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M86 32 v8" stroke="#13233A" stroke-width="2"/><path d="M52 62 C50 38 78 32 80 48 L78 62 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M60 62 L56 88 M72 62 L78 88" stroke="#3d6bf5" stroke-width="8" stroke-linecap="round"/><path d="M56 89 h-8 M78 89 h8" stroke="#13233A" stroke-width="4.5" stroke-linecap="round"/></svg></div></li>
|
||
<li class="ml-0 w-[62%] -rotate-2"><div class="aspect-[2/1] overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]"><svg viewBox="0 0 200 100" class="h-full w-full" role="img" aria-label="Développeur et data engineer"><rect width="200" height="100" fill="#fff"/><circle cx="170" cy="18" r="10" fill="#FFD23F" opacity=".8"/><path d="M6 90 C4 56 34 30 70 34 C94 10 150 8 172 34 C196 48 198 90 198 90 Z" fill="#E6F7FF"/><g fill="#C9E8F7"><rect x="14" y="38" width="22" height="50"/><rect x="38" y="26" width="18" height="62"/><rect x="150" y="30" width="20" height="58"/><rect x="172" y="44" width="16" height="44"/></g><g fill="#fff" opacity=".75"><rect x="18" y="44" width="5" height="6"/><rect x="27" y="44" width="5" height="6"/><rect x="18" y="56" width="5" height="6"/><rect x="42" y="32" width="4" height="6"/><rect x="49" y="32" width="4" height="6"/><rect x="42" y="44" width="4" height="6"/><rect x="154" y="36" width="5" height="6"/><rect x="162" y="36" width="5" height="6"/><rect x="154" y="48" width="5" height="6"/><rect x="176" y="50" width="4" height="6"/></g><path d="M0 90 H200" stroke="#13233A" stroke-width="2.6"/><path d="M20 95 h26 M120 95 h40" stroke="#13233A" stroke-width="1.6" opacity=".35" stroke-linecap="round"/><rect x="40" y="70" width="130" height="6" fill="#C98404" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M50 76 V90 M160 76 V90" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="94" y="30" width="58" height="36" rx="2" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M118 66 h10 v4 h-10 Z" fill="#13233A"/><g stroke-width="2.4" stroke-linecap="round"><path d="M100 38 h14" stroke="#FF6FB5"/><path d="M104 44 h22" stroke="#7CF2C0"/><path d="M104 50 h16" stroke="#FFD23F"/><path d="M100 56 h10" stroke="#C4B5FD"/></g><g><rect x="132" y="44" width="4" height="14" fill="#7CF2C0"/><rect x="138" y="38" width="4" height="20" fill="#FFD23F"/><rect x="144" y="48" width="4" height="10" fill="#FF6FB5"/></g><circle cx="66" cy="34" r="9" fill="#F2C9A0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M56 32 C56 21 76 21 76 32 C70 28 62 28 56 32 Z" fill="#13233A" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M57 36 C56 42 76 42 75 36" stroke="#6b3f1f" stroke-width="3" fill="none"/><path d="M48 70 C46 48 84 44 86 60 L86 70 Z" fill="#FF6FB5" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M80 58 L96 62" stroke="#F2C9A0" stroke-width="5" stroke-linecap="round"/><rect x="52" y="54" width="0" height="0"/><rect x="156" y="56" width="10" height="14" rx="2" fill="#fff" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><path d="M166 60 c4 0 4 6 0 6" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M44 70 C38 60 42 52 48 58" fill="#7CF2C0" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><rect x="40" y="62" width="10" height="8" fill="#ec3013" stroke="#13233A" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/><g font-family="IBM Plex Mono" font-size="7" font-weight="700" fill="#13233A" opacity=".55"><text x="102" y="24">{ data }</text><text x="150" y="26">SQL</text></g></svg></div></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="border-b-4 border-black bg-white" aria-labelledby="t-chemin">
|
||
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
|
||
<h2 id="t-chemin" class="max-w-3xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Ce que j’ai appris en chemin.</h2>
|
||
<div class="mt-14 grid gap-10 lg:grid-cols-12">
|
||
<article class="relative border-4 border-black bg-[#FFD23F] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-7">
|
||
<span class="absolute -right-4 -top-4 rotate-3 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Télécom Saint-Étienne · alternance</span>
|
||
<figure class="mb-6 overflow-hidden border-4 border-black bg-white shadow-[5px_5px_0px_#000000]">
|
||
<img src="{{ asset('images/telecom-saint-etienne.jpeg') }}" alt="Façade de Télécom Saint-Étienne" class="aspect-[16/7] w-full object-cover">
|
||
</figure>
|
||
<h3 class="text-3xl font-black leading-tight">Montée en charge : d’alternant à chef de projet digital</h3>
|
||
<p class="mt-4 text-lg font-medium leading-relaxed">Juste après mon BTS, je tente le concours Mines-Télécom réservé aux alternants. Mes bonnes notes de BTS et la lettre de recommandation de mon prof principal font la différence : j’entre à Télécom Saint-Étienne, en école d’ingénieur.</p>
|
||
<a href="https://alternance.imt.fr/" target="_blank" rel="noopener" class="mt-5 flex items-center gap-4 border-4 border-black bg-white p-3 shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-y-0.5">
|
||
<span class="grid h-14 w-20 shrink-0 place-items-center border-2 border-black bg-[#13233A] font-black text-white">IMT</span>
|
||
<span class="flex-1"><span class="block font-black">Concours Mines-Télécom, voie alternance</span><span class="block font-mono text-sm font-semibold">alternance.imt.fr ↗</span></span>
|
||
</a>
|
||
<p class="mt-4 text-lg font-medium leading-relaxed">Il me reste une étape, et pas des moindres : il me faut une entreprise ! Je la trouve chez un industriel américain, à Grenoble et Échirolles, comme chef de projet digital.</p>
|
||
<p class="mt-4 text-lg font-medium leading-relaxed">Pendant 3 ans, je pilote des projets à plusieurs centaines de milliers d’euros. Je découvre les outils de data engineering et d’IA, le suivi de production industrielle automatisé (SCADA, MES, IHM), la gestion de la qualité et la maintenance. Je permets aux équipes de terrain de suivre leur production en temps réel et de réagir plus vite quand une machine s’arrête.</p>
|
||
<p class="mt-4 text-lg font-bold">Autant vous dire que les machines qui tombent en panne au pire moment, je connais.</p>
|
||
</article>
|
||
<article class="relative border-4 border-black bg-[#C4B5FD] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-5 lg:mt-16 lg:-rotate-1">
|
||
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Partir de zéro</span>
|
||
<h3 class="text-3xl font-black leading-tight">Des IA construites de A à Z</h3>
|
||
<p class="mt-4 text-lg font-medium leading-relaxed">À l’école, j’ai aussi créé des IA en partant de zéro, en Python. L’une reconnaît la voix et la transforme en texte. Une autre lit les caractères et reconnaît les formes (OCR).</p>
|
||
<ul class="mt-5 flex flex-wrap gap-2 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-2 py-0.5">Python</li><li class="border-2 border-black bg-white px-2 py-0.5">NumPy</li><li class="border-2 border-black bg-white px-2 py-0.5">Pandas</li><li class="border-2 border-black bg-white px-2 py-0.5">scikit-learn</li><li class="border-2 border-black bg-white px-2 py-0.5">TensorFlow</li><li class="border-2 border-black bg-white px-2 py-0.5">PyTorch</li><li class="border-2 border-black bg-white px-2 py-0.5">OpenCV</li><li class="border-2 border-black bg-white px-2 py-0.5">Jupyter</li></ul>
|
||
<p class="mt-4 text-lg font-bold">C’est là que j’ai compris qu’on apprend vraiment en faisant.</p>
|
||
<div class="mt-6 border-t-4 border-black pt-5">
|
||
<p class="text-lg font-medium leading-relaxed">À l’école d’ingé, j’ai aussi touché à tout ce qu’on y voit : les différents types de bases de données, SQL ou NoSQL, les principaux langages, les réseaux, l’électronique, la gestion de projet lean et agile, et même la compta.</p>
|
||
<div class="mt-4 grid gap-3">
|
||
<div><p class="font-mono text-xs font-semibold uppercase">Bases de données</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">SQL</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">MongoDB</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Cassandra</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Redis</li><li class="border-2 border-black bg-[#FFD23F] px-2 py-0.5">Neo4j</li></ul></div>
|
||
<div><p class="font-mono text-xs font-semibold uppercase">Langages</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">Java</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">SQL</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">Python</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">JavaScript</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">TypeScript</li><li class="border-2 border-black bg-[#7CF2C0] px-2 py-0.5">PHP</li></ul></div>
|
||
<div><p class="font-mono text-xs font-semibold uppercase">Et aussi</p><ul class="mt-1.5 flex flex-wrap gap-1.5 font-mono text-sm font-semibold"><li class="border-2 border-black bg-white px-2 py-0.5">Réseaux</li><li class="border-2 border-black bg-white px-2 py-0.5">Électronique</li><li class="border-2 border-black bg-white px-2 py-0.5">Lean</li><li class="border-2 border-black bg-white px-2 py-0.5">Agile</li><li class="border-2 border-black bg-white px-2 py-0.5">Gestion de projet</li><li class="border-2 border-black bg-white px-2 py-0.5">Comptabilité</li></ul></div>
|
||
</div>
|
||
</div>
|
||
<ul class="mt-6 grid grid-cols-5 gap-3" aria-hidden="true">
|
||
<li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="12" y="14" width="40" height="26" fill="#13233A"/><path d="M18 22 l6 4 -6 4 M28 32 h10" stroke="#7CF2C0"/><path d="M4 48 h56 l-4 -8 H8 Z" fill="#fff"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-3"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16 L32 32 L12 48 M52 16 L32 32 L52 48 M12 16 L52 16 M12 48 L52 48" stroke-width="2.5"/><circle cx="12" cy="16" r="5" fill="#FF6FB5"/><circle cx="12" cy="48" r="5" fill="#FF6FB5"/><circle cx="32" cy="32" r="6" fill="#FFD23F"/><circle cx="52" cy="16" r="5" fill="#7CF2C0"/><circle cx="52" cy="48" r="5" fill="#7CF2C0"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-3"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="32" cy="14" rx="18" ry="6" fill="#FFD23F"/><path d="M14 14 v36 c0 8 36 8 36 0 v-36"/><path d="M14 26 c0 8 36 8 36 0 M14 38 c0 8 36 8 36 0"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="14" y="6" width="36" height="16" fill="#fff"/><rect x="14" y="24" width="36" height="16" fill="#fff"/><rect x="14" y="42" width="36" height="16" fill="#fff"/><circle cx="22" cy="14" r="2" fill="#7CF2C0"/><circle cx="22" cy="32" r="2" fill="#ec3013"/><circle cx="22" cy="50" r="2" fill="#7CF2C0"/><path d="M30 14 h14 M30 32 h14 M30 50 h14"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000] -rotate-6"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M32 32 m0 0 c0 -3 4 -3 4 0 c0 6 -10 6 -10 0 c0 -10 16 -10 16 0 c0 14 -22 14 -22 0 c0 -18 28 -18 28 0 c0 22 -34 22 -34 0"/></svg></li>
|
||
</ul>
|
||
</article>
|
||
<article class="relative border-4 border-black bg-[#7CF2C0] p-8 shadow-[8px_8px_0px_#000000] lg:col-span-6">
|
||
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold shadow-[3px_3px_0px_#000000]">3 mois · en anglais</span>
|
||
<h3 class="text-3xl font-black leading-tight">Direction Den Bosch, aux Pays-Bas</h3>
|
||
<p class="mt-4 text-lg font-medium leading-relaxed">Trois mois à ’s-Hertogenbosch, que tout le monde là-bas appelle Den Bosch, comme développeur full stack, à construire une solution RH, le tout en anglais. Les premiers jours, on s’accroche. Et puis on se lance. J’en suis revenu avec un bien meilleur anglais et une expérience que je n’oublierai pas.</p>
|
||
<ul class="mt-6 grid grid-cols-6 gap-2" aria-label="Souvenirs des Pays-Bas">
|
||
<li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-3" title="Moulin"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Moulin"><path d="M24 58 L28 26 H36 L40 58 Z" fill="#fff" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><rect x="29" y="46" width="6" height="12" fill="#C98404" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><g transform="translate(32 24)"><g stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><path d="M0 0 L-4 -22 L4 -22 Z" fill="#ec3013"/><path d="M0 0 L22 -4 L22 4 Z" fill="#ec3013"/><path d="M0 0 L4 22 L-4 22 Z" fill="#ec3013"/><path d="M0 0 L-22 4 L-22 -4 Z" fill="#ec3013"/></g><circle r="3" fill="#13233A"/></g></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2" title="Vélo"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Vélo"><g fill="none" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><circle cx="16" cy="42" r="10" fill="#fff"/><circle cx="48" cy="42" r="10" fill="#fff"/><path d="M16 42 L28 26 L44 26 L48 42 M28 26 L32 42 L44 26 M44 26 L42 20 L48 19 M28 26 L26 21 L32 21"/></g><rect x="36" y="28" width="12" height="6" fill="#FF6FB5" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2" title="Tulipe"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Tulipe"><path d="M32 30 V58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M32 46 C22 44 18 36 20 32 C26 34 30 38 32 46 Z M32 50 C42 48 46 40 44 36 C38 38 34 42 32 50 Z" fill="#7CF2C0" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M20 12 L26 20 L32 10 L38 20 L44 12 C46 24 42 32 32 32 C22 32 18 24 20 12 Z" fill="#ec3013" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-3" title="Sabot en bois"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Sabot en bois"><path d="M6 44 C6 34 18 30 30 30 L44 26 C54 24 60 32 58 40 C56 48 48 50 40 50 H14 C8 50 6 48 6 44 Z" fill="#FFD23F" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M40 30 C44 34 48 34 52 32" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><path d="M16 38 h10" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] -rotate-2" title="Fromage"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Fromage"><path d="M6 44 L36 18 L58 34 V50 H6 Z" fill="#FFD23F" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M6 44 H58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><g fill="#F5B800" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"><circle cx="20" cy="47" r="0"/></g><circle cx="44" cy="40" r="4" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="30" cy="36" r="3" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="22" cy="47" r="2.5" fill="#F5B800" stroke="#13233A" stroke-width="2"/><circle cx="50" cy="46" r="2" fill="#F5B800" stroke="#13233A" stroke-width="2"/></svg></li><li class="grid aspect-square place-items-center border-4 border-black bg-white shadow-[3px_3px_0px_#000000] rotate-2" title="Drapeau des Pays-Bas"><svg viewBox="0 0 64 64" class="h-4/5 w-4/5" role="img" aria-label="Drapeau des Pays-Bas"><path d="M10 8 V58" stroke="#13233A" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" fill="none"/><g stroke="#13233A" stroke-width="3" stroke-linejoin="round"><rect x="12" y="10" width="42" height="10" fill="#AE1C28"/><rect x="12" y="20" width="42" height="10" fill="#fff"/><rect x="12" y="30" width="42" height="10" fill="#21468B"/></g></svg></li>
|
||
</ul>
|
||
</article>
|
||
<figure class="relative lg:col-span-6 lg:mt-10" aria-label="Den Bosch">
|
||
<div class="absolute inset-0 translate-x-4 translate-y-4 border-4 border-black bg-[#FF6FB5]" aria-hidden="true"></div>
|
||
<div class="relative aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/den-bosch.jpg') }}" alt="Canal et maisons de Den Bosch" class="h-full w-full object-cover"></div>
|
||
<figcaption class="absolute -top-4 left-6 -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Den Bosch, mon QG pendant 3 mois</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="mx-auto max-w-7xl px-5 py-20 lg:px-10" aria-labelledby="t-envie">
|
||
<div class="grid gap-10 lg:grid-cols-12">
|
||
<h2 id="t-envie" class="text-5xl font-black leading-[0.95] tracking-tighter lg:col-span-5">Tout le monde mérite sa place et la réussite.</h2>
|
||
<div class="grid gap-6 text-xl font-medium leading-relaxed lg:col-span-7">
|
||
<p>Chaque élève mérite une vraie machine pour apprendre, pas une salle informatique qui plante. Chaque prof mérite de passer son temps à enseigner, pas à réparer des postes.</p>
|
||
<p>J’ai donc construit Paillasse : un outil clé en main, prêt en 5 secondes, pensé par quelqu’un qui a été assis au fond de la salle de TP.</p>
|
||
</div>
|
||
</div>
|
||
<ul class="mt-16 grid gap-10 pb-6 md:grid-cols-3">
|
||
<li class="relative border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] md:-rotate-1">
|
||
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Élèves</span>
|
||
<p class="text-2xl font-black leading-tight">Une vraie VM Debian à soi, des TP qui se corrigent tout seuls, et le droit de se tromper sans rien casser.</p>
|
||
</li>
|
||
<li class="relative border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] md:translate-y-8">
|
||
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Profs</span>
|
||
<p class="mb-4 inline-block -rotate-2 border-2 border-black bg-white px-3 py-1 text-lg font-black">« Pas de cours à préparer, enfin… très peu :) »</p>
|
||
<p class="text-2xl font-black leading-tight">Moins de dépannage, plus de pédagogie. Vous voyez qui bloque et vous aidez ceux qui en ont le plus besoin.</p>
|
||
</li>
|
||
<li class="relative border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] md:rotate-1">
|
||
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">CPE</span>
|
||
<p class="text-2xl font-black leading-tight">Tous les apprenants sur un seul écran : qui est connecté, qui avance, qui décroche.</p>
|
||
</li>
|
||
</ul>
|
||
<div class="relative mt-20 grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
|
||
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels">
|
||
<span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span>
|
||
</div>
|
||
<div>
|
||
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
|
||
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer !</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="border-t-4 border-black bg-white" aria-labelledby="t-couleurs">
|
||
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
|
||
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Un choix, pas un hasard</p>
|
||
<h2 id="t-couleurs" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Pourquoi Paillasse est aussi coloré ?</h2>
|
||
<div class="mt-8 grid gap-6 text-xl font-medium leading-relaxed lg:grid-cols-2">
|
||
<p>On a fait exprès de choisir des couleurs vives : jaune, vert menthe, rose, lavande, sur un fond blanc et des bordures noires épaisses. Le but est simple : que le regard de l’élève tombe tout de suite sur ce qui compte, la consigne, le terminal, la question, le bouton à cliquer.</p>
|
||
<p>Ce n’est pas une intuition de designer. La recherche en psychologie cognitive montre depuis longtemps que la couleur et le contraste guident l’attention, et que ce qui attire l’attention est mieux retenu. Mais elle montre aussi l’inverse : trop de stimulations visuelles dispersent. Paillasse est construit sur ces deux résultats à la fois.</p>
|
||
</div>
|
||
<div class="mt-16 grid gap-10 md:grid-cols-2">
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Revue scientifique · 2013</span>
|
||
<h3 class="mt-2 text-2xl font-black leading-tight">La couleur capte l’attention, et l’attention fait la mémoire</h3>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Cette revue de la littérature explique que la couleur est un facteur clé pour capter l’attention, et que plus une information reçoit d’attention, plus elle a de chances d’être mémorisée. Les couleurs chaudes, comme le rouge et le jaune, attirent davantage le regard.</p>
|
||
<a href="https://pubmed.ncbi.nlm.nih.gov/23983571/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Dzulkifli & Mustafar, The Malaysian Journal of Medical Sciences, 2013 ↗</a>
|
||
</article>
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Psychologie de la mémoire · depuis 1933</span>
|
||
<h3 class="mt-2 text-2xl font-black leading-tight">Ce qui se distingue est mieux retenu</h3>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">C’est l’« effet von Restorff » : dans une série d’éléments semblables, celui qui se démarque par sa couleur, sa taille ou sa forme est mieux mémorisé. L’effet a été reproduit de nombreuses fois, on le retrouve chez l’enfant comme chez l’adulte âgé. C’est pour ça qu’une notion clé, chez nous, est toujours surlignée en couleur.</p>
|
||
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3607156/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Étude électrophysiologique de l’effet von Restorff (PMC) ↗</a>
|
||
</article>
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] ">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Recherche privée · Nielsen Norman Group</span>
|
||
<h3 class="mt-2 text-2xl font-black leading-tight">Peu de couleurs, bien placées</h3>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Le cabinet de référence en ergonomie web recommande de limiter le nombre de couleurs : cela renforce la hiérarchie visuelle et laisse moins de choses qui distraient. La couleur doit attirer l’œil vers ce que l’on veut mettre en avant, et toujours avec le même sens d’un écran à l’autre.</p>
|
||
<a href="https://www.nngroup.com/articles/color-enhance-design/" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">NN/g, « Using Color to Enhance Your Design », 2024 ↗</a>
|
||
</article>
|
||
</div>
|
||
<div class="mt-24">
|
||
<h3 class="max-w-4xl text-4xl font-black leading-tight tracking-tighter sm:text-5xl">La couleur qui capte : des exemples partout autour de nous</h3>
|
||
<p class="mt-4 max-w-3xl text-xl font-medium leading-relaxed">Ceux qui ont besoin qu’on les regarde, ou qu’on ne rate rien, ont tous fait le même choix : une couleur vive, utilisée avec une règle précise.</p>
|
||
<div class="mt-12 grid gap-10 md:grid-cols-2 lg:grid-cols-3">
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#FFD90F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Télévision · 1987</span>
|
||
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/simpson.jpg') }}" alt="La famille Simpson sur son canapé" class="h-full w-full object-cover"></figure>
|
||
<h4 class="mt-2 text-2xl font-black leading-tight">Les Simpson sont jaunes pour une raison</h4>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Matt Groening a choisi ce jaune proposé par la coloriste Gyorgyi Peluce pour une raison simple : dans les années 80, les gens zappaient. Il l’a expliqué à la BBC en 2007 : quand un éclair jaune passe pendant que tu changes de chaîne, tu sais que tu regardes les Simpson. Presque 40 ans plus tard, tout le monde reconnaît encore cette famille au premier coup d’œil.</p>
|
||
<a href="https://www.joe.co.uk/entertainment/matt-groening-explains-why-the-simpsons-are-yellow-366502" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">Groening à la BBC, cité par Joe.co.uk ↗</a>
|
||
</article>
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#ec3013] text-white p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Marques</span>
|
||
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/marques.jpg') }}" alt="Logos de chaînes de restauration rapide" class="h-full w-full object-contain p-3"></figure>
|
||
<h4 class="mt-2 text-2xl font-black leading-tight">Une couleur, et on sait qui c’est</h4>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Le jaune et le rouge d’une chaîne de fast-food, le rouge d’une marque de soda, le bleu d’un réseau social : les grandes marques choisissent une ou deux couleurs vives et ne les quittent plus. Le but : être reconnues en une fraction de seconde, de loin, sur un écran ou au bord d’une route. Chez Paillasse, c’est pareil : le jaune veut toujours dire « regarde ici ».</p>
|
||
|
||
</article>
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[8px_8px_0px_#000000] md:rotate-1">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Aviation · règle FAA</span>
|
||
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/cockpit.jpg') }}" alt="Cockpit d’avion et ses écrans" class="h-full w-full object-cover"></figure>
|
||
<h4 class="mt-2 text-2xl font-black leading-tight">Dans le cockpit, le rouge est réservé</h4>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">La réglementation américaine de l’aviation (14 CFR 25.1322) impose le rouge pour les alertes qui demandent une action immédiate, et l’ambre ou le jaune pour les mises en garde. Elle limite leur usage ailleurs, car trop de rouge et de jaune usent leur pouvoir d’alerte : les pilotes finissent par ne plus y réagir. Notre règle « une couleur = une information » vient de là.</p>
|
||
<a href="https://www.ecfr.gov/current/title-14/chapter-I/subchapter-C/part-25/subpart-F/subject-group-ECFR3043e8882f16d6e/section-25.1322" target="_blank" rel="noopener" class="mt-4 border-t-2 border-black pt-3 text-sm font-bold underline underline-offset-4">14 CFR 25.1322 · eCFR ↗</a>
|
||
</article>
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Médical</span>
|
||
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/moniteur.webp') }}" alt="Moniteur médical de surveillance" class="h-full w-full object-contain p-3"></figure>
|
||
<h4 class="mt-2 text-2xl font-black leading-tight">Le moniteur qui clignote au bon moment</h4>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Dans un service de soins, les moniteurs suivent aussi un code de couleurs normé (norme IEC 60601-1-8) : rouge pour une alarme de haute priorité, jaune pour une priorité moyenne. Une infirmière qui entre dans une chambre voit en un regard ce qui presse. Sur le tableau de bord du prof, c’est pareil : l’élève bloqué passe en rouge, la main levée en rose.</p>
|
||
|
||
</article>
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#E6FF3F] p-6 shadow-[8px_8px_0px_#000000] md:-rotate-1">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Sécurité</span>
|
||
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/gilet.jpg') }}" alt="Gilet jaune et triangle de signalisation" class="h-full w-full object-cover"></figure>
|
||
<h4 class="mt-2 text-2xl font-black leading-tight">Le gilet jaune fluo</h4>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Les vêtements de haute visibilité (norme EN ISO 20471) sont jaune fluo, orange ou rouge fluo pour une raison : ces couleurs se détachent de presque tous les décors, de jour comme au crépuscule. On ne met pas du fluo partout sur un chantier : seulement sur ce qui doit absolument être vu.</p>
|
||
|
||
</article>
|
||
|
||
<article class="relative flex flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[8px_8px_0px_#000000] md:translate-y-8">
|
||
<span class="absolute -top-4 left-5 -rotate-2 border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold shadow-[3px_3px_0px_#000000]">Ce qu’on en retient</span>
|
||
<figure class="-mx-2 mt-3 aspect-[4/3] overflow-hidden border-4 border-black bg-white"><img src="{{ asset('images/couleurs/paillasse.jpg') }}" alt="L’IDE en ligne de Paillasse" class="h-full w-full object-cover object-left-top"></figure>
|
||
<h4 class="mt-2 text-2xl font-black leading-tight">Vif, mais rare et toujours au même sens</h4>
|
||
<p class="mt-3 flex-1 text-lg font-medium leading-relaxed">Tous ces exemples disent la même chose que la recherche : une couleur vive capte l’attention, à condition d’être réservée à l’essentiel et de garder toujours le même sens. C’est exactement la règle de Paillasse : fond blanc, et du jaune, du vert, du rose seulement là où l’élève doit regarder.</p>
|
||
|
||
</article>
|
||
</div>
|
||
</div>
|
||
<div class="mt-24 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FFD23F]">
|
||
<h3 class="text-3xl font-black">Nos trois règles de couleur</h3>
|
||
<ol class="mt-6 grid gap-6 md:grid-cols-3">
|
||
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#FFD23F]">1</p><p class="mt-2 text-xl font-black">Fond blanc, toujours</p><p class="mt-2 font-semibold">Rien autour ne vient voler l’attention. L’écran reste calme.</p></li>
|
||
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#7CF2C0]">2</p><p class="mt-2 text-xl font-black">Une couleur = une information</p><p class="mt-2 font-semibold">Vert : réussi. Rose : main levée. Rouge : bloqué ou examen. Jaune : à lire maintenant.</p></li>
|
||
<li class="border-4 border-white p-5"><p class="font-mono text-3xl font-semibold text-[#FF6FB5]">3</p><p class="mt-2 text-xl font-black">Lisible par tous</p><p class="mt-2 font-semibold">Texte noir sur couleur vive, contraste élevé, et jamais une information portée par la couleur seule.</p></li>
|
||
</ol>
|
||
<p class="mt-8 max-w-3xl text-lg font-semibold">Soyons honnêtes : aucune couleur n’empêche à elle seule un élève de regarder son téléphone. Mais un écran clair, où l’essentiel saute aux yeux, lui donne moins de raisons de décrocher. Le reste, c’est le travail du prof, et Paillasse est là pour lui libérer du temps.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="relative overflow-hidden border-t-4 border-black bg-[#ec3013]" aria-labelledby="t-vivant">
|
||
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute right-[12%] top-10 h-14 w-14 bg-[#FFD23F] [--r:-8deg]"></span>
|
||
<div class="relative mx-auto flex max-w-7xl flex-col items-start gap-8 px-5 py-20 lg:px-10">
|
||
<h2 id="t-vivant" class="max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter text-white sm:text-6xl">Paillasse grandit avec vous.</h2>
|
||
<p class="max-w-2xl text-2xl font-bold text-white">Un bug, une idée, un TP qui manque ? Écrivez-moi directement. Je lis tout et je réponds.</p>
|
||
<div class="grid w-full gap-8 lg:grid-cols-12">
|
||
<form id="form-contact" action="{{ route('contact') }}" method="post" class="grid gap-4 border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000] lg:col-span-8">
|
||
@csrf
|
||
<div class="grid gap-4 sm:grid-cols-2">
|
||
<label class="grid gap-2 font-extrabold">Votre nom<input name="nom" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
|
||
<label class="grid gap-2 font-extrabold">Votre e-mail<input type="email" name="email" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"></label>
|
||
</div>
|
||
<label class="grid gap-2 font-extrabold">Votre message<textarea name="message" rows="4" required class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none" placeholder="Il manque un TP sur…"></textarea></label>
|
||
<div class="flex flex-wrap items-center gap-4">
|
||
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#FFD23F] hover:bg-[#13233A]">Envoyer à Adam <span class="font-mono" aria-hidden="true">→</span></button>
|
||
<p id="contact-ok" class="border-4 border-black bg-[#7CF2C0] px-4 py-2 font-extrabold" @if(!session('contact_ok')) hidden @endif>Message envoyé, merci ! Je vous réponds vite.</p>
|
||
</div>
|
||
</form>
|
||
<div class="grid content-start gap-3 lg:col-span-4">
|
||
<p class="text-lg font-bold text-white">Ou écrivez-moi directement :</p>
|
||
<p class="border-4 border-black bg-white px-4 py-3 font-mono text-lg font-semibold">adam@belkacemi.me</p>
|
||
<button type="button" id="copier-mail" class="self-start border-4 border-black bg-[#FFD23F] px-4 py-2 font-extrabold shadow-[4px_4px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Copier l’adresse</button>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.getElementById('copier-mail').addEventListener('click', function () {
|
||
var b = this;
|
||
navigator.clipboard.writeText('adam@belkacemi.me').then(function () { b.textContent = 'Adresse copiée ✓'; }, function () { b.textContent = 'adam@belkacemi.me'; });
|
||
});
|
||
</script>
|
||
</div>
|
||
</section>
|
||
@endsection
|