Coulisses · Comment je code
Pas de Wix, pas de WordPress, pas de générateur de site. Chaque projet - y compris celui-ci - est codé à la main en HTML, CSS, JavaScript et Python (Flask). Voici la méthode, avec de vrais extraits de code pris sur ce site.
Avant d'écrire la moindre ligne, je pose une palette et des règles cohérentes en variables CSS : couleur d'accent, rayons de bordure, typographies. Tout le site (y compris les couleurs choisies dans l'admin) repose sur ces variables.
:root {
--accent: {{ settings.accent_color }};
--radius: {{ settings.button_radius }}px;
--font-mono: "JetBrains Mono", monospace;
}Chaque section de la page d'accueil est pilotée par le CMS admin : titres, textes, projets, services... Le HTML reste un vrai template, avec des boucles et des conditions, pas du contenu figé dans le code.
{% for step in steps %}
<div class="process-step">
<span class="step-number">{{ step.number }}</span>
<h3>{{ step.title }}</h3>
</div>
{% endfor %}Chaque page publique est une route Flask qui va chercher ses données en base (PostgreSQL en production) avant de rendre le template. Simple, lisible, et facile à faire évoluer par la suite.
@public_bp.route("/")
def index():
sections = Section.query.filter_by(active=True).order_by(Section.position).all()
projects = Project.query.filter_by(status="published").all()
return render_template("public/index.html", ...)Chaque mise en page est pensée en grille, avec quelques media queries ciblées plutôt qu'un framework CSS entier - le site reste léger et rapide à charger, sur mobile comme sur desktop.
@media (max-width: 860px) {
.about-grid { grid-template-columns: 1fr; }
.project-grid { grid-template-columns: 1fr; }
}Les chatbots que je crée pour les restaurants ne s'appuient sur aucun service externe : les questions et les réponses sont écrites par le client et rangées dans une simple liste. Pas de réponse inventée, pas d'abonnement, et chaque réponse peut porter un bouton d'action (appeler, itinéraire, laisser un avis) ou se calculer en direct, comme "Êtes-vous ouverts en ce moment ?".
var FAQ = [
{
id: "tarifs",
q: "Quels sont les tarifs ?",
a: "Formule complète : 21€ ...",
actions: [{ label: "Voir les tarifs", href: "#buffet" }],
},
{
id: "ouvert",
q: "Êtes-vous ouverts en ce moment ?",
dynamic: function () {
return openNow() ? "Oui, c'est ouvert !" : "Nous sommes fermés.";
},
},
];Pas de bibliothèque de 200 Ko pour faire défiler des photos. Chaque carte est placée selon sa distance à la carte active (en boucle) avec des transformations CSS, ce qui permet les rotations, l'effet de rebond et le glisser au doigt. Le défilement automatique se met en pause au survol, quand le carrousel sort de l'écran, et respecte les réglages de mouvement réduit.
function wrap(offset) {
var half = n / 2;
if (offset > half) offset -= n;
if (offset < -half) offset += n;
return offset;
}
cards.forEach(function (card, i) {
var off = wrap(i - current);
var rot = tilts[i % tilts.length] + off * 5;
card.style.transform = "translate(" + off * w * 0.62 + "px) rotate(" + rot + "deg)";
});Une petite pancarte qui change toute seule selon le jour et l'heure : quelques lignes de JavaScript lisent l'horloge du visiteur et basculent un état CSS. Le restaurateur n'a rien à mettre à jour, et le chatbot lit ce même état pour répondre en direct.
var now = new Date();
var hour = now.getHours() + now.getMinutes() / 60;
var isWeekday = now.getDay() >= 1 && now.getDay() <= 5;
var isOpen = isWeekday && hour >= OPEN_HOUR && hour < CLOSE_HOUR;
sign.classList.toggle("is-open", isOpen);
sign.classList.toggle("is-closed", !isOpen);Même méthode pour votre site : design sur mesure, code propre, aucun page builder.