jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: snapshot V2 cascade onglet 2 (sauvegarde avant chirurgie git-hygiene)

Browse Source
This commit is contained in:
Jules Neny
2026-05-06 15:37:13 +02:00
parent 5878c56888
commit e63d02a351
101 changed files with 188900 additions and 3959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
pages/a-propos.vue
View File

@@ -8,27 +8,24 @@
</NuxtLink>
<!-- ══════════════════════════════════════════════════════════
SECTION 1 - Mission AEP
SECTION 1 — Mission AEP
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire le pitch (~100 mots) - qui est AEP, pour qui, pourquoi, quelle promesse -->
<!-- TODO Jules : Écrire le pitch (~100 mots) — qui est AEP, pour qui, pourquoi, quelle promesse -->
<section class="section-mission">
<h1>Architecture d'Écologie Politique</h1>
<p class="mission-text">
L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie - tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide : peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul.e. On s'installe seul.e. On réinvente ce que d'autres ont déjà traversé.
</p>
<p class="mission-text">
Cette carte est née de cette frustration - et de cette conviction : les ressources existent, les gens qui ont réussi à sortir la tête de l'eau aussi. L'enjeu, c'est de les documenter, de les rendre accessibles, de les ajuster en temps réel grâce aux retours de la communauté. Pas un catalogue figé ; un commun vivant, au service de ceux et celles qui cherchent à faire évoluer leur pratique vers quelque chose de plus épanouissant, mieux rémunéré, au service de la société - et qui prend soin de la santé, la nôtre et celle des gens pour qui nous construisons.
[Placeholder — Jules réécrira ce texte. Pitch ~100 mots : la carte, pourquoi elle existe, pour qui, ce qu'elle change pour les architectes en transition.]
</p>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 2 - Souveraineté technique
SECTION 2 — Souveraineté technique
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire 1-2 phrases d'intro sur la posture technique (pourquoi c'est important pour toi) -->
<section class="section">
<h2>Infrastructure souveraine</h2>
<h2>Souveraineté technique</h2>
<p class="section-intro">
Ce site tourne sur un VPS - un serveur privé loué en Europe - construit entièrement avec des logiciels open source, quasi gratuits. Pas de services Google, pas d'Amazon, pas de Microsoft dans la chaîne. C'est un choix délibéré : contrôler son infrastructure, c'est contrôler ses données.
[Placeholder — une phrase sur le choix délibéré d'une stack souveraine.]
</p>
<div class="badges-row">
<div class="badge">
@@ -37,7 +34,7 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
</span>
<span class="badge-label">IA souveraine</span>
<span class="badge-detail">Mistral AI, Paris - conforme RGPD ; pas de collecte ni de profiling ; aucun transfert hors UE</span>
<span class="badge-detail">Mistral AI, Paris</span>
</div>
<div class="badge">
<span class="badge-icon" aria-hidden="true">
@@ -51,38 +48,47 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
<span class="badge-label">Zéro cookie US</span>
<span class="badge-detail">Pas de Google Analytics, pas de Meta Pixel, pas de tracker tiers ; on ne sait rien de toi</span>
<span class="badge-detail">Pas de Google Analytics, pas de Meta Pixel, pas de tracker tiers</span>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 3 - Gouvernance
SECTION 3 — Gouvernance
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire qui porte ce projet, le collectif, la posture politique, le lien Liberapay -->
<section class="section">
<h2>Gouvernance</h2>
<p class="section-text">
Architecture d'Écologie Politique est un collectif en train de se monter - ouvert à toustes, à gouvernance partagée. Les décisions se prennent en transparence. Si tu veux participer, contribuer, ou simplement suivre ce qui se construit : tu es la bienvenu·e. Contact : <a href="mailto:contact@trans-former.fr" class="text-link">contact@trans-former.fr</a>
[Placeholder — Projet porté par [nom], collectif informel, [...]. Décisions prises en transparence. Financement participatif via <a href="https://liberapay.com/trans-former.fr" target="_blank" rel="noopener noreferrer" class="text-link">Liberapay</a>.]
</p>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 4 - Transparence Liberapay
SECTION 4 — Transparence Liberapay
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire pourquoi Liberapay (pas Patreon, pas Ko-fi), le modèle de financement voulu -->
<section class="section section-liberapay">
<h2>Soutenir le projet</h2>
<p class="section-text">
Ce projet est participatif, libre, open source. Il existe parce que la communauté l'utilise - et il ne peut continuer à exister que si la communauté le soutient.
</p>
<p class="section-text">
Le financer, c'est soutenir la structuration d'un écosystème d'entraide architecturale qui, aujourd'hui, est assez défaillant. Si toi aussi tu as manqué de ressources en chemin, si tu as dû réinventer seul·e ce que d'autres avaient déjà compris, si tu as cherché un filet et ne l'as pas trouvé - tu sais exactement pourquoi ça compte. Ce que tu mets dans la cagnotte ne va pas dans une boîte ; ça va dans un outil qui permet que la prochaine génération d'architectes ait ce que nous n'avons pas eu : un réseau d'entraide qui fonctionne, au service de pratiques plus épanouissantes, plus politiques, plus écologiques.
[Placeholder — Ce que le projet coûte, pourquoi un financement participatif, ce que ça permettrait de faire.]
</p>
<p class="liberapay-note">
Liberapay est une plateforme open source EU (ASBL belge non-lucrative), 0% de frais.
</p>
<!-- Widget Liberapay -->
<div class="liberapay-widget-wrap">
<iframe
src="https://liberapay.com/trans-former.fr/widgets/receiving.html"
width="100%"
height="60"
style="border: 0;"
title="Dons reçus via Liberapay"
loading="lazy"
></iframe>
</div>
<!-- Bouton CTA -->
<a
href="https://liberapay.com/trans-former.fr/donate"
@@ -95,16 +101,13 @@
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 5 - Transparence IA
SECTION 5 — Transparence IA
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire la posture sur l'IA - pourquoi ces modèles, pourquoi la transparence, ce que ça signifie politiquement -->
<!-- TODO Jules : Écrire la posture sur l'IA — pourquoi ces modèles, pourquoi la transparence, ce que ça signifie politiquement -->
<section id="ia" class="section">
<h2>Transparence IA</h2>
<p class="section-text">
Ce site a été construit grâce à l'IA, par quelqu'un qui n'est pas développeur. C'est une manière de subvertir les outils des Big Tech pour en faire quelque chose de communautaire et de souverain : une infrastructure locale, des données qu'on contrôle, un commun qui n'appartient à personne en particulier.
</p>
<p class="section-text">
L'IA est un outil. La question, c'est au service de quoi. Oui, elle est énergivore - et il faut l'assumer. Mais si c'est au service de l'émancipation, du collectif, de transformer nos infrastructures sociétales, alors on dit oui - en sachant que c'est une étape transitoire. L'infrastructure de l'IA elle-même peut évoluer : devenir plus locale, plus sobre, plus souveraine. C'est dans cette direction qu'on regarde.
[Placeholder — Pourquoi afficher les coûts IA en clair. Ce que ça dit du projet.]
</p>
<div class="ia-grid">
@@ -121,85 +124,42 @@
</div>
<ul class="ia-details">
<li>10 € / mois investis au départ par le collectif - vos dons constituent la réserve pour faire vivre le projet et financer ses recherches</li>
<li>Budget plafonné à 20 € / mois — coupure automatique si dépassement</li>
<li>Coût visible en direct dans le bandeau bas de la carte</li>
<li>Aucun modèle US, aucune donnée transmise hors UE</li>
</ul>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 6 - Contribuer
SECTION 6 — Contribuer
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire l'invitation à contribuer - ton, posture, ce qu'on attend des contributeurs -->
<!-- TODO Jules : Écrire l'invitation à contribuer — ton, posture, ce qu'on attend des contributeurs -->
<section class="section section-contribuer">
<h2>Contribuer</h2>
<p class="section-text">
Il n'y a pas de barre d'entrée ici. Une correction, une ressource à signaler, un retour sur ta propre expérience - c'est déjà participer à quelque chose qui grandit par accumulation de petits gestes.
[Placeholder — Comment rejoindre le projet, ce qu'on peut apporter : fiches, corrections, soutien financier.]
</p>
<div class="contribuer-ctas">
<NuxtLink to="/contribuer" class="btn-primary">
Proposer une fiche →
</NuxtLink>
<a
href="https://trans-former.fr/"
target="_blank"
rel="noopener noreferrer"
class="btn-secondary"
>
Blog AEP
</a>
<a
href="https://www.instagram.com/aep.politique/"
target="_blank"
rel="noopener noreferrer"
class="btn-secondary"
>
Instagram
</a>
<a
href="https://liberapay.com/trans-former.fr/donate"
target="_blank"
rel="noopener noreferrer"
class="btn-secondary"
>
Soutenir
</a>
<a
href="mailto:contact@trans-former.fr"
class="btn-secondary"
>
Contact
Soutenir financièrement
</a>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 7 - Open Source
══════════════════════════════════════════════════════════ -->
<section class="section section-opensource">
<h2>Code source ouvert</h2>
<p class="section-text">
Cette carte est un commun technique autant qu'un commun de ressources. Le code source est libre — tu peux le forker, l'adapter, le déployer pour ta propre cartographie d'entraide, ton territoire, ta filière.
</p>
<p class="section-text">
Une liste de ressources locales pour les artisans ? Un réseau d'entraide pour les soignants indépendants ? La structure est la même. L'IA d'enrichissement est la même. Il suffit de changer les données.
</p>
<a
href="https://git.trans-former.fr/jules/nav-carte"
target="_blank"
rel="noopener noreferrer"
class="btn-github"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
Code source — git.trans-former.fr →
</a>
</section>
</div>
</div>
</template>
<script setup lang="ts">
useHead({ title: 'À propos - AEP' })
useHead({ title: 'À propos — AEP' })
</script>
<style scoped>
@@ -350,6 +310,12 @@ useHead({ title: 'À propos - AEP' })
font-style: italic;
}
.liberapay-widget-wrap {
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
}
.btn-liberapay {
display: inline-flex;
align-items: center;
@@ -482,34 +448,6 @@ useHead({ title: 'À propos - AEP' })
color: var(--nav-text);
}
/* ── GitHub open source ──────────────────────────────────────────────────────── */
.section-opensource {
border-top: 1px solid var(--nav-bg-alt);
padding-top: 2rem;
}
.btn-github {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: var(--nav-surface);
border: 1px solid rgba(26, 34, 56, 0.2);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
color: var(--nav-text);
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
margin-top: 0.5rem;
}
.btn-github:hover {
border-color: var(--nav-primary-solid);
background: var(--nav-bg-alt);
}
/* ── Responsive général ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {