webapp active

stfn.ro

Blog personnel et portfolio avec une interface terminal cyberpunk inspirée de GATTACA, construit de zéro avec PHP, React et Cockpit CMS.

stfn.ro

Stack technique

PHP React Cockpit CMS JavaScript CSS JSX

À propos de ce projet

stfn.ro est un blog personnel et un portfolio enveloppés dans une interface terminal GEN-7 fictive, inspirée du film GATTACA. On y trouve une écriture brute et sans filtre, posée dans une coque cyberpunk soignée : lignes CRT, séquences de boot animées, surimpressions de codons ADN et une carte d'identité interactive.

Le site est construit de zéro, avec un unique point d'entrée PHP, Cockpit CMS pour le contenu et une couche React chargée directement dans le navigateur (via UMD et Babel standalone, sans étape de build). Chaque détail, de l'aberration chromatique aux effets de hover en crochets jusqu'à un jeu Space Invaders caché, existe pour que la lecture et la navigation ressemblent à l'utilisation d'une pièce de matériel spéculatif.

Fonctionnalités clés

  • Interface terminal sur mesure dans une esthétique GATTACA, avec effets CRT, lignes de scan et aberration chromatique
  • Deux flux de contenu : Logs (écriture personnelle) et Projects (expériences et travaux annexes)
  • Filtrage par tags et liens profonds par slug, gérés par un seul fichier PHP
  • UI React + JSX chargée directement dans le navigateur via UMD et Babel standalone, sans pipeline de build
  • Backend Cockpit CMS avec repli propre sur des données locales mock en cas de hors-ligne
  • Carte d'identité animée, avec plusieurs états de portrait et un jeu Space Invaders caché
  • Cache d'images OpenGraph généré côté serveur via un endpoint thumb sur mesure
  • Protection des images : pointer events désactivés et drag bloqué sur tous les médias

À qui s'adresse le site

À celles et ceux qui aiment lire une écriture personnelle sincère, un peu chaotique, dans un environnement qui se prend assez au sérieux pour ressembler à une machine et pas assez pour oublier la blague.