identité : le kit du studio DA intégré, les 61 oiseaux posés sur la page
Copie du kit kit-site (empreinte vérifiée) : logotype dans l'en-tête, signe §, favicons et icônes, og-default (?v=3), frise du pied de page, 61 oiseaux. Les shadoks positionnés à la main (HomeShadoks et les règles des 10 pages) cèdent la place à UiOiseauPose : chaque oiseau se pose sur une arête réelle (perché, marge gauche ou droite, derrière une carte, libre), currentColor, largeur 72 px au moins, opacité 0,18-0,28 près du texte et 0,10-0,14 derrière, jamais deux fois sur une page, calligraphe et typographe jamais en miroir. Sous 768 px, un oiseau par page au plus ; seuls ceux derrière une carte dérivent un peu, et plus du tout en mouvement réduit. Consignes d'Yvv du 03/11 inscrites dans docs/consignes-yvv.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
+36
-308
@@ -1,222 +1,5 @@
|
||||
<template>
|
||||
<div class="axis-scope axis-scope--num page-outer section-padding">
|
||||
|
||||
<!-- Shadok pinguin — tenant une clé USB, petit Tux à ses pieds -->
|
||||
<svg class="shadok-dl shadok-dl-pinguin" viewBox="0 0 170 210" fill="none" aria-hidden="true">
|
||||
<!-- Small Tux at bottom -->
|
||||
<ellipse cx="30" cy="175" rx="12" ry="16" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="30" cy="158" r="9" fill="currentColor" opacity="0.22"/>
|
||||
<ellipse cx="30" cy="173" rx="6" ry="9" fill="currentColor" opacity="0.1"/>
|
||||
<polygon points="30,157 25,154 30,161" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="25" cy="192" rx="6" ry="2.5" fill="currentColor" opacity="0.2"/>
|
||||
<ellipse cx="35" cy="192" rx="6" ry="2.5" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Shadok body — upright -->
|
||||
<ellipse cx="105" cy="110" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Head — looking at USB key -->
|
||||
<circle cx="100" cy="70" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="95" cy="68" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="104" cy="67" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<polygon points="88,72 80,69 88,76" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Left arm holding USB key -->
|
||||
<line x1="88" y1="100" x2="68" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<rect x="42" y="82" width="26" height="14" rx="3" fill="currentColor" opacity="0.28"/>
|
||||
<rect x="32" y="86" width="10" height="6" rx="1" fill="currentColor" opacity="0.22"/>
|
||||
<line x1="50" y1="85" x2="60" y2="85" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<line x1="50" y1="89" x2="60" y2="89" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<!-- Right arm relaxed -->
|
||||
<line x1="122" y1="105" x2="140" y2="125" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Legs -->
|
||||
<line x1="97" y1="133" x2="87" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="113" y1="133" x2="123" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="85" cy="195" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="125" cy="195" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok toile — au centre d'une web of trust, bras ouverts -->
|
||||
<svg class="shadok-dl shadok-dl-toile" viewBox="0 0 180 210" fill="none" aria-hidden="true">
|
||||
<!-- Nodes web -->
|
||||
<circle cx="30" cy="50" r="3" fill="currentColor" opacity="0.18"/>
|
||||
<circle cx="155" cy="55" r="3" fill="currentColor" opacity="0.16"/>
|
||||
<circle cx="18" cy="140" r="3" fill="currentColor" opacity="0.14"/>
|
||||
<circle cx="162" cy="142" r="3" fill="currentColor" opacity="0.16"/>
|
||||
<circle cx="80" cy="18" r="3" fill="currentColor" opacity="0.18"/>
|
||||
<circle cx="148" cy="185" r="2.5" fill="currentColor" opacity="0.14"/>
|
||||
<circle cx="15" cy="92" r="2.5" fill="currentColor" opacity="0.12"/>
|
||||
<!-- Connections from center -->
|
||||
<line x1="90" y1="105" x2="30" y2="50" stroke="currentColor" stroke-width="1" opacity="0.12"/>
|
||||
<line x1="90" y1="105" x2="155" y2="55" stroke="currentColor" stroke-width="1" opacity="0.12"/>
|
||||
<line x1="90" y1="105" x2="18" y2="140" stroke="currentColor" stroke-width="1" opacity="0.1"/>
|
||||
<line x1="90" y1="105" x2="162" y2="142" stroke="currentColor" stroke-width="1" opacity="0.1"/>
|
||||
<line x1="90" y1="105" x2="80" y2="18" stroke="currentColor" stroke-width="1" opacity="0.12"/>
|
||||
<line x1="90" y1="105" x2="15" y2="92" stroke="currentColor" stroke-width="0.8" opacity="0.1"/>
|
||||
<line x1="30" y1="50" x2="80" y2="18" stroke="currentColor" stroke-width="0.8" opacity="0.08"/>
|
||||
<line x1="155" y1="55" x2="162" y2="142" stroke="currentColor" stroke-width="0.8" opacity="0.08"/>
|
||||
<!-- Body — bras ouverts -->
|
||||
<ellipse cx="90" cy="118" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
|
||||
<circle cx="90" cy="76" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="84" cy="74" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="95" cy="73" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak front-facing proud -->
|
||||
<polygon points="90,83 85,87 95,87" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Arms spread wide -->
|
||||
<line x1="72" y1="108" x2="32" y2="88" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="108" y1="108" x2="150" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<circle cx="31" cy="88" r="2.5" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="151" cy="90" r="2.5" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Legs -->
|
||||
<line x1="82" y1="141" x2="72" y2="196" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="98" y1="141" x2="110" y2="196" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="70" cy="199" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="112" cy="199" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok nas — ployant sous le poids d'un rack serveur -->
|
||||
<svg class="shadok-dl shadok-dl-nas" viewBox="0 0 170 210" fill="none" aria-hidden="true">
|
||||
<!-- Server rack on head, slightly tilted -->
|
||||
<rect x="32" y="10" width="82" height="52" rx="4" fill="currentColor" opacity="0.2" transform="rotate(-2 73 36)"/>
|
||||
<!-- Server units -->
|
||||
<rect x="38" y="15" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 19)"/>
|
||||
<rect x="38" y="25" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 29)"/>
|
||||
<rect x="38" y="35" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 39)"/>
|
||||
<rect x="38" y="45" width="68" height="7" rx="2" fill="currentColor" opacity="0.15" transform="rotate(-2 72 49)"/>
|
||||
<!-- LED indicators -->
|
||||
<circle cx="46" cy="19" r="1.5" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="46" cy="29" r="1.5" fill="currentColor" opacity="0.28"/>
|
||||
<circle cx="46" cy="39" r="1.5" fill="currentColor" opacity="0.32"/>
|
||||
<circle cx="46" cy="49" r="1.5" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Body — bent forward under weight -->
|
||||
<ellipse cx="85" cy="120" rx="22" ry="25" fill="currentColor" opacity="0.25" transform="rotate(8 85 120)"/>
|
||||
<!-- Head — strained under rack -->
|
||||
<circle cx="78" cy="82" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="73" cy="80" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="83" cy="79" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak grimacing left -->
|
||||
<polygon points="65,84 57,81 65,88" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Arms up holding rack -->
|
||||
<line x1="68" y1="110" x2="50" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="104" y1="109" x2="112" y2="67" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Legs — pliant sous l'effort -->
|
||||
<line x1="75" y1="142" x2="58" y2="193" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="97" y1="142" x2="114" y2="193" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="56" cy="196" rx="11" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="116" cy="196" rx="11" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Sweat drops -->
|
||||
<ellipse cx="48" cy="90" rx="2" ry="3" fill="currentColor" opacity="0.2"/>
|
||||
<ellipse cx="44" cy="102" rx="1.5" ry="2.5" fill="currentColor" opacity="0.15"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok debugger — loupe géante sur un minuscule bug, yeux écarquillés -->
|
||||
<svg class="shadok-dl shadok-dl-debugger" viewBox="0 0 180 215" fill="none" aria-hidden="true">
|
||||
<!-- Loupe — grande, tenue à bout de bras -->
|
||||
<circle cx="38" cy="55" r="30" stroke="currentColor" stroke-width="3.5" fill="none" opacity="0.28"/>
|
||||
<circle cx="38" cy="55" r="23" fill="currentColor" opacity="0.06"/>
|
||||
<!-- Manche loupe -->
|
||||
<line x1="62" y1="78" x2="80" y2="98" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.3"/>
|
||||
<!-- Minuscule bug dans la loupe -->
|
||||
<ellipse cx="36" cy="53" rx="5" ry="4" fill="currentColor" opacity="0.35"/>
|
||||
<line x1="32" y1="50" x2="28" y2="46" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="36" y1="49" x2="36" y2="44" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="40" y1="50" x2="44" y2="46" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="32" y1="57" x2="28" y2="61" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="40" y1="57" x2="44" y2="61" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
|
||||
<!-- Exclamation dans la loupe -->
|
||||
<text x="50" y="45" font-size="10" fill="currentColor" opacity="0.4" font-family="monospace">!</text>
|
||||
<!-- Body — légèrement penché -->
|
||||
<ellipse cx="125" cy="118" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(-5 125 118)"/>
|
||||
<!-- Head — très proche de la loupe, yeux écarquillés -->
|
||||
<circle cx="118" cy="75" r="16" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Cercles sous les yeux (nuits blanches) -->
|
||||
<ellipse cx="112" cy="76" rx="5" ry="4" stroke="currentColor" stroke-width="1" fill="none" opacity="0.2"/>
|
||||
<ellipse cx="124" cy="75" rx="5" ry="4" stroke="currentColor" stroke-width="1" fill="none" opacity="0.2"/>
|
||||
<!-- Yeux très grands -->
|
||||
<circle cx="113" cy="75" r="2.5" fill="currentColor" opacity="0.55"/>
|
||||
<circle cx="123" cy="74" r="2.5" fill="currentColor" opacity="0.55"/>
|
||||
<!-- Beak — pointant vers la loupe -->
|
||||
<polygon points="104,78 96,75 104,83" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Bras gauche tenant loupe -->
|
||||
<line x1="108" y1="108" x2="82" y2="95" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Bras droit -->
|
||||
<line x1="140" y1="110" x2="158" y2="130" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Jambes -->
|
||||
<line x1="117" y1="141" x2="107" y2="198" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="133" y1="141" x2="143" y2="198" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="105" cy="201" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="145" cy="201" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok rubber duck — assis par terre, canard en caoutchouc face à lui, bras croisés, explication intense -->
|
||||
<svg class="shadok-dl shadok-dl-duck" viewBox="0 0 180 210" fill="none" aria-hidden="true">
|
||||
<!-- Rubber duck — stylisé, face au shadok -->
|
||||
<ellipse cx="145" cy="165" rx="18" ry="14" fill="currentColor" opacity="0.22"/>
|
||||
<circle cx="145" cy="148" r="11" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Duck beak -->
|
||||
<path d="M155 148 L165 146 L155 152 Z" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Duck eye -->
|
||||
<circle cx="150" cy="145" r="2" fill="currentColor" opacity="0.4"/>
|
||||
<!-- Duck wing -->
|
||||
<path d="M128 162 Q135 158 130 170" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
|
||||
<!-- Shadok — assis, jambes en avant -->
|
||||
<ellipse cx="82" cy="130" rx="22" ry="20" fill="currentColor" opacity="0.25" transform="rotate(20 82 130)"/>
|
||||
<!-- Head — très expressif, se penche vers le canard -->
|
||||
<circle cx="95" cy="90" r="16" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="89" cy="88" r="2" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="100" cy="87" r="2" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak pointing right at duck -->
|
||||
<polygon points="108,92 116,89 108,96" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Bulle de dialogue -->
|
||||
<path d="M115 72 Q140 60 148 72 Q155 82 145 88 Q135 94 118 88 L115 94 L113 86 Q108 80 115 72Z" fill="currentColor" opacity="0.1"/>
|
||||
<text x="120" y="82" font-size="7" fill="currentColor" opacity="0.35" font-family="monospace">WTF?</text>
|
||||
<!-- Bras pointant vers duck -->
|
||||
<line x1="105" y1="118" x2="130" y2="140" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Bras gauche appuyé au sol -->
|
||||
<line x1="62" y1="122" x2="42" y2="148" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Jambes en avant (assis) -->
|
||||
<line x1="72" y1="148" x2="42" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="92" y1="152" x2="115" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<ellipse cx="40" cy="188" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="117" cy="188" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok caféine — énorme tasse, cernes, jambes qui tremblent -->
|
||||
<svg class="shadok-dl shadok-dl-cafeine" viewBox="0 0 170 215" fill="none" aria-hidden="true">
|
||||
<!-- Tasses vides au sol -->
|
||||
<ellipse cx="25" cy="195" rx="8" ry="4" fill="currentColor" opacity="0.18"/>
|
||||
<rect x="17" y="183" width="16" height="12" rx="2" fill="currentColor" opacity="0.15"/>
|
||||
<ellipse cx="52" cy="198" rx="6" ry="3" fill="currentColor" opacity="0.14"/>
|
||||
<rect x="46" y="188" width="12" height="10" rx="2" fill="currentColor" opacity="0.12"/>
|
||||
<!-- Énorme tasse à 2 mains -->
|
||||
<rect x="48" y="68" width="52" height="45" rx="5" fill="currentColor" opacity="0.25"/>
|
||||
<ellipse cx="74" cy="68" rx="26" ry="6" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Vapeur -->
|
||||
<path d="M62 62 Q65 52 62 44" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.25" stroke-linecap="round"/>
|
||||
<path d="M74 58 Q78 47 74 38" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.22" stroke-linecap="round"/>
|
||||
<path d="M86 62 Q89 52 86 44" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2" stroke-linecap="round"/>
|
||||
<!-- Anse tasse -->
|
||||
<path d="M100 78 Q118 78 118 90 Q118 102 100 102" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.22"/>
|
||||
<!-- Logo tasse (skull) -->
|
||||
<text x="62" y="95" font-size="14" fill="currentColor" opacity="0.18" font-family="monospace">☕</text>
|
||||
<!-- Body — tassé, fatigué -->
|
||||
<ellipse cx="90" cy="130" rx="20" ry="24" fill="currentColor" opacity="0.25" transform="rotate(5 90 130)"/>
|
||||
<!-- Head — yeux mi-clos, cernes -->
|
||||
<circle cx="88" cy="92" r="15" fill="currentColor" opacity="0.28"/>
|
||||
<!-- Cernes (demi-cercles sous yeux) -->
|
||||
<path d="M80 93 Q83 97 86 93" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.3"/>
|
||||
<path d="M90 92 Q93 96 96 92" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.3"/>
|
||||
<!-- Yeux mi-clos -->
|
||||
<line x1="79" y1="90" x2="85" y2="90" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="90" y1="89" x2="96" y2="89" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.45"/>
|
||||
<!-- Beak -->
|
||||
<polygon points="78,97 70,94 78,101" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Les deux bras tenant la tasse -->
|
||||
<line x1="72" y1="116" x2="56" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="108" y1="118" x2="108" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Jambes qui tremblent (légèrement en zigzag) -->
|
||||
<path d="M80 152 Q76 165 80 175 Q84 185 78 196" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.4"/>
|
||||
<path d="M100 152 Q104 165 100 175 Q96 185 102 196" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.4"/>
|
||||
<ellipse cx="76" cy="199" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="104" cy="199" rx="10" ry="3.5" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<div class="axis-scope axis-scope--num oiseaux-scene page-outer section-padding">
|
||||
<div class="container-content">
|
||||
|
||||
<!-- Header — centré, max-2xl -->
|
||||
@@ -238,6 +21,7 @@
|
||||
<!-- Project card (legacy pages) -->
|
||||
<div v-if="content?.project" class="mx-auto max-w-2xl mb-8">
|
||||
<div class="project-card">
|
||||
<UiOiseauPose v-for="o in oiseaux.projet ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" />
|
||||
<div class="project-icon">
|
||||
<div class="i-lucide-rocket h-5 w-5" />
|
||||
</div>
|
||||
@@ -316,10 +100,11 @@
|
||||
v-for="(section, si) in content.sections"
|
||||
:key="si"
|
||||
:id="`s${si}`"
|
||||
class="mb-12 section-anchor"
|
||||
class="relative mb-12 section-anchor"
|
||||
:class="['equivalents', 'tiers', 'territoire'].includes(section.type) ? 'max-w-4xl mx-auto' : 'max-w-2xl mx-auto'"
|
||||
>
|
||||
|
||||
<UiOiseauPose v-for="o in oiseaux.sections?.[si] ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" />
|
||||
<!-- ── ARGUMENTS ── -->
|
||||
<template v-if="section.type === 'arguments'">
|
||||
<h2 class="section-title">{{ section.title }}</h2>
|
||||
@@ -642,9 +427,40 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { OiseauPlace } from '~/utils/oiseauPose'
|
||||
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
// Birds of each page, by block: the project card and the sections (by index). Left side
|
||||
// only: the right margin holds the sticky summary on wide screens.
|
||||
interface OiseauxPage { projet?: OiseauPlace[], sections?: Record<number, OiseauPlace[]> }
|
||||
const OISEAUX_PAGE: Record<string, OiseauxPage> = {
|
||||
'logiciel-libre': {
|
||||
projet: [{ nom: 'cafeine', pose: 'derriere', left: '-130px', bottom: '-30px', w: 200 }],
|
||||
sections: {
|
||||
1: [{ nom: 'debogueur', pose: 'marge-g', ecart: '48px', bottom: '62%', w: 120 }],
|
||||
2: [{ nom: 'le-manchot', pose: 'marge-g', ecart: '40px', bottom: '18%', w: 132 }],
|
||||
3: [{ nom: 'canard-en-plastique', pose: 'perche', right: '8%', w: 80 }],
|
||||
},
|
||||
},
|
||||
'authentification-wot': {
|
||||
projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
|
||||
sections: {
|
||||
0: [{ nom: 'cryptographe', pose: 'marge-g', ecart: '48px', bottom: '45%', w: 104 }],
|
||||
1: [{ nom: 'toile-de-confiance', pose: 'marge-g', ecart: '44px', bottom: '30%', w: 150 }],
|
||||
4: [{ nom: 'pompeur-de-g1', pose: 'marge-g', ecart: '40px', bottom: '22%', w: 108 }],
|
||||
},
|
||||
},
|
||||
'cloud-libre': {
|
||||
projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
|
||||
sections: {
|
||||
1: [{ nom: 'admin-reseau', pose: 'marge-g', ecart: '44px', bottom: '40%', w: 124 }],
|
||||
},
|
||||
},
|
||||
}
|
||||
const oiseaux = computed<OiseauxPage>(() => OISEAUX_PAGE[slug] ?? {})
|
||||
|
||||
const [{ data: content }, { data: homeData }] = await Promise.all([
|
||||
usePageContent(`numerique/${slug}`),
|
||||
usePageContent('home'),
|
||||
@@ -691,6 +507,7 @@ useSeoPage({
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(var(--color-primary) / 0.15);
|
||||
@@ -1913,95 +1730,6 @@ details[open] .territoire-chevron {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
/* ── Shadoks décoratifs ── */
|
||||
.shadok-dl {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.shadok-dl-pinguin {
|
||||
left: 1%;
|
||||
top: 18%;
|
||||
width: clamp(65px, 9vw, 130px);
|
||||
opacity: 0.22;
|
||||
animation: shadokfloat-a 11s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-toile {
|
||||
right: 1%;
|
||||
top: 22%;
|
||||
width: clamp(65px, 9vw, 140px);
|
||||
opacity: 0.2;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadokfloat-b 13s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-nas {
|
||||
left: 2%;
|
||||
bottom: 6%;
|
||||
width: clamp(65px, 9vw, 135px);
|
||||
opacity: 0.22;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadokfloat-c 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shadokfloat-a {
|
||||
0%, 100% { transform: translateY(0) rotate(-2deg); }
|
||||
50% { transform: translateY(-8px) rotate(2deg); }
|
||||
}
|
||||
@keyframes shadokfloat-b {
|
||||
0%, 100% { transform: translateY(0) rotate(3deg); }
|
||||
50% { transform: translateY(-10px) rotate(-2deg); }
|
||||
}
|
||||
@keyframes shadokfloat-c {
|
||||
0%, 100% { transform: translateY(0) rotate(-1deg); }
|
||||
50% { transform: translateY(-7px) rotate(3deg); }
|
||||
}
|
||||
@keyframes shadokfloat-d {
|
||||
0%, 100% { transform: translateY(0) rotate(2deg); }
|
||||
50% { transform: translateY(-9px) rotate(-3deg); }
|
||||
}
|
||||
@keyframes shadokfloat-e {
|
||||
0%, 100% { transform: translateY(0) rotate(-3deg); }
|
||||
50% { transform: translateY(-6px) rotate(1deg); }
|
||||
}
|
||||
@keyframes shadokfloat-f {
|
||||
0%, 100% { transform: translateY(0) rotate(1deg); }
|
||||
50% { transform: translateY(-11px) rotate(-2deg); }
|
||||
}
|
||||
|
||||
.shadok-dl-debugger {
|
||||
right: 1%;
|
||||
bottom: 14%;
|
||||
width: clamp(65px, 9vw, 140px);
|
||||
opacity: 0.2;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadokfloat-d 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-duck {
|
||||
left: 38%;
|
||||
top: 6%;
|
||||
width: clamp(65px, 9vw, 145px);
|
||||
opacity: 0.2;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadokfloat-e 14s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-dl-cafeine {
|
||||
right: 2%;
|
||||
top: 52%;
|
||||
width: clamp(65px, 9vw, 132px);
|
||||
opacity: 0.22;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadokfloat-f 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shadok-dl { display: none; }
|
||||
}
|
||||
|
||||
/* equiv-row without link */
|
||||
.equiv-row--no-link {
|
||||
cursor: default;
|
||||
|
||||
+24
-444
@@ -1,313 +1,11 @@
|
||||
<template>
|
||||
<div class="axis-scope axis-scope--num relative overflow-hidden section-padding">
|
||||
<!-- Shadok codeuse — sitting at desk, typing on laptop, glasses -->
|
||||
<svg class="shadok-codeuse" viewBox="0 0 170 200" fill="none" aria-hidden="true">
|
||||
<!-- Desk -->
|
||||
<rect x="15" y="120" width="80" height="5" rx="2" fill="currentColor" opacity="0.3"/>
|
||||
<line x1="25" y1="125" x2="25" y2="165" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="85" y1="125" x2="85" y2="165" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.25"/>
|
||||
<!-- Laptop on desk -->
|
||||
<rect x="30" y="108" width="50" height="12" rx="2" fill="currentColor" opacity="0.35"/>
|
||||
<path d="M35 108 L40 80 L70 80 L75 108" fill="currentColor" opacity="0.28"/>
|
||||
<rect x="42" y="84" width="26" height="18" rx="1" fill="currentColor" opacity="0.15"/>
|
||||
<!-- Code on screen < /> -->
|
||||
<text x="48" y="96" font-size="8" fill="currentColor" opacity="0.4" font-family="monospace"></></text>
|
||||
<!-- Body — seated, tilted forward -->
|
||||
<ellipse cx="110" cy="105" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(-10 110 105)"/>
|
||||
<!-- Head — looking at screen -->
|
||||
<circle cx="105" cy="68" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Glasses -->
|
||||
<circle cx="100" cy="66" r="5" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.4"/>
|
||||
<circle cx="111" cy="66" r="5" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.4"/>
|
||||
<line x1="105" y1="66" x2="106" y2="66" stroke="currentColor" stroke-width="1" opacity="0.35"/>
|
||||
<!-- Eyes behind glasses -->
|
||||
<circle cx="101" cy="66" r="1.5" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="110" cy="65" r="1.5" fill="currentColor" opacity="0.5"/>
|
||||
<!-- Beak — pointy, looking left -->
|
||||
<polygon points="88,68 82,65 88,72" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Arms reaching to laptop -->
|
||||
<line x1="95" y1="95" x2="78" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="125" y1="98" x2="80" y2="115" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Legs — bent, seated -->
|
||||
<line x1="100" y1="128" x2="90" y2="180" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="118" y1="128" x2="125" y2="180" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Feet -->
|
||||
<ellipse cx="88" cy="183" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="127" cy="183" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok electricien — profile view, climbing utility pole, tool belt -->
|
||||
<svg class="shadok-electricien" viewBox="0 0 150 210" fill="none" aria-hidden="true">
|
||||
<!-- Utility pole -->
|
||||
<rect x="68" y="5" width="8" height="200" rx="2" fill="currentColor" opacity="0.2"/>
|
||||
<line x1="50" y1="30" x2="94" y2="30" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="45" y1="55" x2="99" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.22"/>
|
||||
<!-- Cables hanging -->
|
||||
<path d="M50 30 Q35 45 30 35" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
|
||||
<path d="M94 30 Q110 45 115 35" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
|
||||
<path d="M45 55 Q30 68 25 60" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.18"/>
|
||||
<!-- Body — climbing, profile, tilted -->
|
||||
<ellipse cx="95" cy="100" rx="20" ry="25" fill="currentColor" opacity="0.25" transform="rotate(15 95 100)"/>
|
||||
<!-- Head — looking up at cable -->
|
||||
<circle cx="100" cy="65" r="14" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Eyes — looking up -->
|
||||
<circle cx="96" cy="61" r="1.5" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="105" cy="60" r="1.5" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak — profile right -->
|
||||
<polygon points="114,63 122,60 114,67" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Hard hat -->
|
||||
<ellipse cx="100" cy="53" rx="16" ry="5" fill="currentColor" opacity="0.3"/>
|
||||
<path d="M88 53 Q100 42 112 53" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Arms — one gripping pole, one holding cable -->
|
||||
<line x1="82" y1="90" x2="74" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="108" y1="88" x2="118" y2="60" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Tool belt -->
|
||||
<ellipse cx="95" cy="118" rx="22" ry="4" fill="currentColor" opacity="0.25"/>
|
||||
<rect x="82" y="118" width="6" height="8" rx="1" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="105" y="118" width="5" height="10" rx="1" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Legs — climbing, spread on pole -->
|
||||
<line x1="85" y1="122" x2="72" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="105" y1="122" x2="76" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Feet gripping pole -->
|
||||
<ellipse cx="70" cy="188" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="75" cy="178" rx="8" ry="3" fill="currentColor" opacity="0.28"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok soudeuse — welding mask flipped up, torch with sparks, apron -->
|
||||
<svg class="shadok-soudeuse" viewBox="0 0 160 210" fill="none" aria-hidden="true">
|
||||
<!-- Body — upright, slight lean forward -->
|
||||
<ellipse cx="80" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Apron -->
|
||||
<path d="M62 95 L60 140 L100 140 L98 95" fill="currentColor" opacity="0.18"/>
|
||||
<line x1="80" y1="95" x2="80" y2="140" stroke="currentColor" stroke-width="1" opacity="0.15"/>
|
||||
<!-- Head -->
|
||||
<circle cx="80" cy="65" r="16" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Welding mask flipped up on head -->
|
||||
<rect x="65" y="42" width="30" height="18" rx="4" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="70" y="46" width="20" height="10" rx="2" fill="currentColor" opacity="0.12"/>
|
||||
<!-- Eyes — squinting from bright light -->
|
||||
<line x1="73" y1="64" x2="77" y2="64" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="84" y1="63" x2="88" y2="63" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.45"/>
|
||||
<!-- Beak — small, front-facing -->
|
||||
<polygon points="78,72 80,78 82,72" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Right arm holding torch -->
|
||||
<line x1="100" y1="100" x2="135" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Welding torch -->
|
||||
<rect x="132" y="78" width="22" height="6" rx="2" fill="currentColor" opacity="0.35"/>
|
||||
<line x1="154" y1="81" x2="160" y2="78" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Sparks from torch -->
|
||||
<circle cx="158" cy="75" r="1.5" fill="currentColor" opacity="0.45"/>
|
||||
<circle cx="155" cy="70" r="1" fill="currentColor" opacity="0.35"/>
|
||||
<circle cx="160" cy="72" r="1.2" fill="currentColor" opacity="0.4"/>
|
||||
<line x1="157" y1="76" x2="160" y2="68" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
|
||||
<line x1="155" y1="78" x2="152" y2="71" stroke="currentColor" stroke-width="0.8" opacity="0.25"/>
|
||||
<!-- Left arm down -->
|
||||
<line x1="60" y1="100" x2="45" y2="125" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Legs — standing, spread -->
|
||||
<line x1="70" y1="136" x2="58" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="90" y1="136" x2="102" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Big flat feet -->
|
||||
<ellipse cx="55" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="105" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok admin réseau — tangled in cables, router at feet, frustrated -->
|
||||
<svg class="shadok-admin-reseau" viewBox="0 0 160 200" fill="none" aria-hidden="true">
|
||||
<!-- Body — upright but struggling -->
|
||||
<ellipse cx="80" cy="95" rx="21" ry="27" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Head — tilted, frustrated -->
|
||||
<circle cx="82" cy="52" r="15" fill="currentColor" opacity="0.3" />
|
||||
<!-- Eyes — looking in different directions (frustrated) -->
|
||||
<circle cx="77" cy="50" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="88" cy="48" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Angry eyebrows -->
|
||||
<line x1="74" y1="46" x2="79" y2="47" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="91" y1="44" x2="86" y2="46" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Beak — open, yelling -->
|
||||
<polygon points="73,56 65,55 73,60" fill="currentColor" opacity="0.35"/>
|
||||
<line x1="67" y1="56" x2="66" y2="58" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
<!-- Cables tangling around body -->
|
||||
<path d="M50 40 Q30 60 55 80 Q80 95 60 115 Q40 130 70 140" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
|
||||
<path d="M110 45 Q130 65 105 85 Q85 100 110 120 Q125 130 95 145" stroke="currentColor" stroke-width="2" fill="none" opacity="0.28"/>
|
||||
<path d="M75 38 Q95 50 75 70" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.22"/>
|
||||
<!-- Arms — trying to untangle -->
|
||||
<line x1="60" y1="85" x2="40" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="100" y1="85" x2="120" y2="68" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Legs -->
|
||||
<line x1="70" y1="120" x2="60" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="90" y1="120" x2="100" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Feet -->
|
||||
<ellipse cx="57" cy="178" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="103" cy="178" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Router box at feet -->
|
||||
<rect x="60" y="168" width="40" height="14" rx="3" fill="currentColor" opacity="0.25"/>
|
||||
<circle cx="70" cy="175" r="1.5" fill="currentColor" opacity="0.35"/>
|
||||
<circle cx="78" cy="175" r="1.5" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="86" cy="175" r="1.5" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Antenna on router -->
|
||||
<line x1="92" y1="168" x2="96" y2="155" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.25"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok imprimeuse 3D — watching printer build object layer by layer -->
|
||||
<svg class="shadok-imprimeuse3d" viewBox="0 0 170 210" fill="none" aria-hidden="true">
|
||||
<!-- 3D printer frame -->
|
||||
<rect x="10" y="90" width="65" height="60" rx="3" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Printer rails -->
|
||||
<line x1="15" y1="95" x2="15" y2="145" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
|
||||
<line x1="70" y1="95" x2="70" y2="145" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
|
||||
<!-- Print bed -->
|
||||
<rect x="18" y="135" width="49" height="4" rx="1" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Object being printed (layered) -->
|
||||
<rect x="32" y="128" width="20" height="7" rx="1" fill="currentColor" opacity="0.3"/>
|
||||
<rect x="34" y="122" width="16" height="6" rx="1" fill="currentColor" opacity="0.25"/>
|
||||
<rect x="36" y="117" width="12" height="5" rx="1" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Extruder head -->
|
||||
<rect x="34" y="110" width="16" height="6" rx="2" fill="currentColor" opacity="0.35"/>
|
||||
<line x1="42" y1="116" x2="42" y2="118" stroke="currentColor" stroke-width="1.5" opacity="0.4"/>
|
||||
<!-- Body — leaning forward, watching intently -->
|
||||
<ellipse cx="120" cy="105" rx="20" ry="25" fill="currentColor" opacity="0.25" transform="rotate(-15 120 105)"/>
|
||||
<!-- Head — looking down at printer -->
|
||||
<circle cx="108" cy="70" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Eyes — both staring down at printer, fascinated -->
|
||||
<circle cx="103" cy="72" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="112" cy="73" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<!-- Beak — pointing down -->
|
||||
<polygon points="100,78 96,82 104,82" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Arms — one pointing at printer -->
|
||||
<line x1="105" y1="95" x2="75" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="135" y1="98" x2="150" y2="115" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<!-- Legs — standing, leaning -->
|
||||
<line x1="112" y1="128" x2="105" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="128" y1="128" x2="138" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Feet -->
|
||||
<ellipse cx="103" cy="195" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="140" cy="195" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok cryptographe — 3/4 view, cloak, giant key + padlock -->
|
||||
<svg class="shadok-cryptographe" viewBox="0 0 170 210" fill="none" aria-hidden="true">
|
||||
<!-- Mysterious cloak -->
|
||||
<path d="M55 70 Q50 110 45 160 L125 160 Q120 110 115 70" fill="currentColor" opacity="0.15"/>
|
||||
<path d="M45 160 Q40 170 38 180 L132 180 Q130 170 125 160" fill="currentColor" opacity="0.12"/>
|
||||
<!-- Body under cloak -->
|
||||
<ellipse cx="85" cy="105" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Head — 3/4 view, slightly turned -->
|
||||
<circle cx="85" cy="55" r="16" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Hood suggestion -->
|
||||
<path d="M68 50 Q85 35 102 50" fill="currentColor" opacity="0.18"/>
|
||||
<!-- Eyes — mysterious, one slightly larger -->
|
||||
<circle cx="80" cy="53" r="2" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="91" cy="52" r="1.5" fill="currentColor" opacity="0.4"/>
|
||||
<!-- Beak — 3/4 profile -->
|
||||
<polygon points="75,58 67,55 74,62" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Left arm holding giant key -->
|
||||
<line x1="63" y1="95" x2="30" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Giant key -->
|
||||
<circle cx="18" cy="108" r="12" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.4"/>
|
||||
<line x1="30" y1="108" x2="55" y2="108" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
||||
<line x1="48" y1="108" x2="48" y2="118" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="53" y1="108" x2="53" y2="115" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<!-- Right arm holding padlock -->
|
||||
<line x1="107" y1="95" x2="140" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Padlock — big -->
|
||||
<rect x="135" y="82" width="28" height="24" rx="4" fill="currentColor" opacity="0.3"/>
|
||||
<path d="M141 82 L141 70 Q149 58 157 70 L157 82" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.35"/>
|
||||
<circle cx="149" cy="95" r="3" fill="currentColor" opacity="0.2"/>
|
||||
<line x1="149" y1="98" x2="149" y2="103" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
|
||||
<!-- Legs — long, cloak partly covering -->
|
||||
<line x1="75" y1="130" x2="65" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="95" y1="130" x2="108" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Feet -->
|
||||
<ellipse cx="63" cy="198" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="110" cy="198" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok droneuse — looking up at flying drone, remote in hands -->
|
||||
<svg class="shadok-droneuse" viewBox="0 0 160 210" fill="none" aria-hidden="true">
|
||||
<!-- Drone above -->
|
||||
<rect x="60" y="12" width="30" height="8" rx="3" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Drone arms -->
|
||||
<line x1="55" y1="16" x2="35" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="95" y1="16" x2="115" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<!-- Propellers spinning -->
|
||||
<ellipse cx="35" cy="14" rx="12" ry="3" fill="currentColor" opacity="0.2"/>
|
||||
<ellipse cx="115" cy="14" rx="12" ry="3" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Propeller blur lines -->
|
||||
<line x1="25" y1="12" x2="45" y2="12" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
|
||||
<line x1="105" y1="12" x2="125" y2="12" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
|
||||
<!-- Drone camera -->
|
||||
<circle cx="75" cy="22" r="3" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Drone legs -->
|
||||
<line x1="62" y1="20" x2="58" y2="28" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
|
||||
<line x1="88" y1="20" x2="92" y2="28" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
|
||||
<!-- Body — upright, looking up -->
|
||||
<ellipse cx="78" cy="115" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
|
||||
<!-- Head — tilted back looking up -->
|
||||
<circle cx="78" cy="72" r="15" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Eyes — looking up at drone -->
|
||||
<circle cx="74" cy="68" r="1.8" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="83" cy="67" r="1.8" fill="currentColor" opacity="0.45"/>
|
||||
<!-- Beak — pointing up -->
|
||||
<polygon points="76,56 80,50 82,57" fill="currentColor" opacity="0.35"/>
|
||||
<!-- Arms — holding remote control -->
|
||||
<line x1="60" y1="108" x2="50" y2="128" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="96" y1="108" x2="106" y2="128" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Remote control in hands -->
|
||||
<rect x="42" y="126" width="70" height="14" rx="4" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="55" cy="133" r="3" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="100" cy="133" r="3" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Joysticks -->
|
||||
<line x1="55" y1="130" x2="55" y2="127" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="100" y1="131" x2="102" y2="128" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.3"/>
|
||||
<!-- Legs — standing -->
|
||||
<line x1="68" y1="138" x2="58" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="88" y1="138" x2="100" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Feet -->
|
||||
<ellipse cx="55" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="103" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok mécanicienne — lying under machine, legs sticking out, wrench, oil drops -->
|
||||
<svg class="shadok-mecanicienne" viewBox="0 0 180 200" fill="none" aria-hidden="true">
|
||||
<!-- Machine/server box above -->
|
||||
<rect x="5" y="55" width="100" height="50" rx="5" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="12" y="62" width="35" height="12" rx="2" fill="currentColor" opacity="0.15"/>
|
||||
<rect x="12" y="80" width="35" height="12" rx="2" fill="currentColor" opacity="0.15"/>
|
||||
<!-- Machine details -->
|
||||
<circle cx="20" cy="68" r="2" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="20" cy="86" r="2" fill="currentColor" opacity="0.25"/>
|
||||
<line x1="60" y1="65" x2="90" y2="65" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
||||
<line x1="60" y1="72" x2="85" y2="72" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
||||
<!-- Body — lying flat under machine, only partial visible -->
|
||||
<ellipse cx="80" cy="118" rx="25" ry="18" fill="currentColor" opacity="0.22" transform="rotate(90 80 118)"/>
|
||||
<!-- Head under machine (barely visible) -->
|
||||
<circle cx="55" cy="115" r="12" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Arm sticking out with wrench -->
|
||||
<line x1="42" y1="115" x2="15" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Wrench -->
|
||||
<path d="M8 100 L15 105 L12 108 L5 103 Z" fill="currentColor" opacity="0.35"/>
|
||||
<circle cx="5" cy="100" r="5" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.3"/>
|
||||
<!-- Oil drops falling -->
|
||||
<ellipse cx="70" cy="108" rx="2" ry="3" fill="currentColor" opacity="0.3"/>
|
||||
<ellipse cx="85" cy="112" rx="1.5" ry="2.5" fill="currentColor" opacity="0.25"/>
|
||||
<ellipse cx="62" cy="105" rx="1" ry="2" fill="currentColor" opacity="0.2"/>
|
||||
<!-- Legs sticking out from under machine — the signature view -->
|
||||
<line x1="90" y1="125" x2="130" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="95" y1="120" x2="145" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Big feet sticking up -->
|
||||
<ellipse cx="133" cy="178" rx="10" ry="4" fill="currentColor" opacity="0.35" transform="rotate(-25 133 178)"/>
|
||||
<ellipse cx="148" cy="168" rx="10" ry="4" fill="currentColor" opacity="0.35" transform="rotate(-25 148 168)"/>
|
||||
<!-- Beak visible from side -->
|
||||
<polygon points="42,118 35,116 42,122" fill="currentColor" opacity="0.3"/>
|
||||
<!-- Eye visible -->
|
||||
<circle cx="50" cy="113" r="1.5" fill="currentColor" opacity="0.4"/>
|
||||
</svg>
|
||||
|
||||
<div class="axis-scope axis-scope--num oiseaux-scene relative overflow-hidden section-padding">
|
||||
<div class="container-content">
|
||||
<header class="mb-12 text-center">
|
||||
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
|
||||
<h1 class="page-title font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
|
||||
<h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
|
||||
{{ content?.title }}
|
||||
<UiOiseauPose nom="droneuse" pose="perche" left="calc(68% - 38px)" bottom="calc(100% - 6px)" :w="76" :seuil="1200" />
|
||||
</h1>
|
||||
<p class="mt-4 mx-auto max-w-2xl leading-relaxed" style="color: hsl(var(--color-text-muted))">
|
||||
{{ content?.description }}
|
||||
@@ -317,6 +15,7 @@
|
||||
<div class="mx-auto max-w-3xl flex flex-col gap-6">
|
||||
<!-- LPK sert l'axe numérique -->
|
||||
<NuxtLink v-if="lpk" :to="lpk.to" class="lpk-card">
|
||||
<UiOiseauPose nom="electricien" pose="marge-g" ecart="46px" :w="132" />
|
||||
<span class="lpk-name">{{ lpk.name }}</span>
|
||||
<span class="lpk-body">
|
||||
<span class="lpk-full">{{ lpk.text }}</span>
|
||||
@@ -330,6 +29,8 @@
|
||||
:key="pillar.id"
|
||||
class="pillar-card"
|
||||
>
|
||||
<UiOiseauPose v-for="o in OISEAUX_PILIER[pillar.id] ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" />
|
||||
|
||||
<!-- Overlay lien — toute la carte cliquable -->
|
||||
<NuxtLink v-if="pillar.to" :to="pillar.to" class="pillar-overlay" :aria-label="pillar.label" tabindex="-1" />
|
||||
|
||||
@@ -382,11 +83,28 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { OiseauPlace } from '~/utils/oiseauPose'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
})
|
||||
|
||||
const { data: content } = await usePageContent('numerique')
|
||||
|
||||
// Birds by pillar, each next to the trade it is about (composition of 03/11)
|
||||
const OISEAUX_PILIER: Record<string, OiseauPlace[]> = {
|
||||
'logiciel-libre': [
|
||||
{ nom: 'codeuse', pose: 'perche', right: '4px', w: 88, retourne: true },
|
||||
],
|
||||
'authentification-wot': [
|
||||
{ nom: 'cryptographe', pose: 'perche', right: '18%', w: 76 },
|
||||
],
|
||||
'cloud-libre': [
|
||||
{ nom: 'admin-reseau', pose: 'marge-d', ecart: '36px', bottom: '28%', w: 118, retourne: true },
|
||||
{ nom: 'admin-reseau', pose: 'perche', right: '6px', w: 76, retourne: true, mobileSeul: true },
|
||||
{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-150px', bottom: '-40px', w: 240 },
|
||||
],
|
||||
}
|
||||
const { data: site } = await useSiteContent()
|
||||
const lpk = computed(() => site.value?.lpk)
|
||||
|
||||
@@ -398,6 +116,7 @@ useSeoPage({
|
||||
|
||||
<style scoped>
|
||||
.lpk-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
@@ -578,143 +297,4 @@ useSeoPage({
|
||||
color: hsl(var(--color-primary));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shadok-codeuse {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 4%;
|
||||
width: clamp(70px, 10vw, 140px);
|
||||
opacity: 0.24;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadok-float-codeuse 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-electricien {
|
||||
position: absolute;
|
||||
right: 1%;
|
||||
top: 3%;
|
||||
width: clamp(70px, 10vw, 130px);
|
||||
opacity: 0.22;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadok-float-electricien 11s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-soudeuse {
|
||||
position: absolute;
|
||||
left: 3%;
|
||||
top: 40%;
|
||||
width: clamp(70px, 10vw, 130px);
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadok-float-soudeuse 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-admin-reseau {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 35%;
|
||||
width: clamp(70px, 10vw, 130px);
|
||||
opacity: 0.22;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadok-float-admin-reseau 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-imprimeuse3d {
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
bottom: 8%;
|
||||
width: clamp(70px, 10vw, 135px);
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadok-float-imprimeuse3d 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-cryptographe {
|
||||
position: absolute;
|
||||
right: 1%;
|
||||
bottom: 6%;
|
||||
width: clamp(70px, 10vw, 130px);
|
||||
opacity: 0.18;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadok-float-cryptographe 11s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-droneuse {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
bottom: 2%;
|
||||
width: clamp(70px, 10vw, 130px);
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadok-float-droneuse 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shadok-mecanicienne {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 60%;
|
||||
width: clamp(70px, 10vw, 140px);
|
||||
opacity: 0.22;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadok-float-mecanicienne 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shadok-float-codeuse {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
@keyframes shadok-float-electricien {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-10px) rotate(1deg); }
|
||||
}
|
||||
|
||||
@keyframes shadok-float-soudeuse {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-7px) rotate(-0.8deg); }
|
||||
}
|
||||
|
||||
@keyframes shadok-float-admin-reseau {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-9px); }
|
||||
}
|
||||
|
||||
@keyframes shadok-float-imprimeuse3d {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-11px) rotate(0.5deg); }
|
||||
}
|
||||
|
||||
@keyframes shadok-float-cryptographe {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-8px) rotate(-0.6deg); }
|
||||
}
|
||||
|
||||
@keyframes shadok-float-droneuse {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12px); }
|
||||
}
|
||||
|
||||
@keyframes shadok-float-mecanicienne {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-7px) rotate(1.2deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shadok-codeuse { display: none; }
|
||||
.shadok-electricien { display: none; }
|
||||
.shadok-soudeuse { display: none; }
|
||||
.shadok-admin-reseau { display: none; }
|
||||
.shadok-imprimeuse3d { display: none; }
|
||||
.shadok-cryptographe { display: none; }
|
||||
.shadok-droneuse { display: none; }
|
||||
.shadok-mecanicienne { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user