📊
Public

DevJournal — Mon carnet de développeur

DevJournal est un blog technique développé avec Symfony et Tailwind CSS qui me sert à la fois de carnet de bord et de vitrine technique. Il regroupe mes articles de développement, retours d'expérience sur des bugs rencontrés en production, et les étapes de mon parcours professionnel.

Lien : https://blog.amarsyll.pro

🎯 Objectifs du projet

ObjectifDescriptionPartage de connaissancesDocumenter mes apprentissages techniques (Symfony, React, Redux, IA, SEO)Veille techniqueGarder une trace des bugs rencontrés et de leurs solutionsVitrine techniqueMontrer mes compétences à travers un projet concret et fonctionnelRéférencement SEOAttirer du trafic organique via des articles techniques de qualitéIdentité personnelleRefléter ma personnalité à travers le design "terminal"

🛠️ Stack technique

Backend

TechnologieUtilisationSymfony 7Framework principal (MVC, routing, sécurité)Doctrine ORMGestion de la base de données MySQLTwigTemplates avec macros et composants réutilisablesEasyAdminInterface d'administration des articlesSymfony SecurityAuthentification et autorisationRate LimiterProtection contre les abus (formulaire de contact)VichUploaderGestion des images d'articles

Frontend

TechnologieUtilisationTailwind CSSDesign responsive et utilitairesViteBuild tool avec Hot ReloadJetBrains MonoPolice monospace pour l'identité "terminal"Highlight.jsColoration syntaxique des blocs de codeJavaScript natifDark mode, animations scroll, barre de progression.

✨ Fonctionnalités principales

📄 Gestion des articles

  • CRUD complet via EasyAdmin

  • 3 types d'articles : article (technique), bug (retour d'expérience), parcours (carrière)

  • Tags pour catégoriser le contenu

  • Extrait automatique de 280 caractères

  • Temps de lecture calculé automatiquement

  • Compteur de vues pour suivre l'engagement

Éléments de design :

  • Barre de fenêtre avec points rouge/jaune/vert

  • Commandes terminal (~/article, git:bug, cd parcours)

  • Police monospace JetBrains Mono

  • Thème clair/sombre avec persistance localStorage

  • Bulles animées en arrière-plan

  • Effets "reveal" au scroll

🔍 Navigation & UX

  • Filtrage par type d'article (articles/bugs/parcours)

  • Recherche plein texte

  • Pagination des résultats

  • Fil d'Ariane navigation contextuelle

  • Barre de progression de lecture

  • Articles similaires recommandés

  • Bouton basculement thème clair/sombre

📱 Responsive

  • Design mobile-first

  • Navigation adaptée aux petits écrans

  • Menu déroulant simplifié sur mobile

  • Optimisation des bulles animées (masquées sur mobile)


blog/

├── assets/

│ ├── styles/ # Tailwind CSS

│ └── entrypoints/ # Points d'entrée Vite

├── config/ # Configuration Symfony

│ ├── packages/

│ │ ├── rate_limiter.yaml

│ │ ├── security.yaml

│ │ └── vich_uploader.yaml

│ └── routes.yaml

├── public/ # Fichiers publics (favicons, robots.txt)

├── src/

│ ├── Controller/

│ │ ├── HomeController.php # Blog index, tag, show

│ │ ├── ContactController.php # Formulaire de contact

│ │ └── SitemapController.php # Sitemap XML

│ ├── Entity/

│ │ ├── Post.php # Article

│ │ ├── Tag.php # Tag

│ │ └── ContactMessage.php # Message de contact

│ ├── Enum/

│ │ └── PostType.php # Enum des types

│ ├── Repository/

│ │ └── PostRepository.php # Requêtes Doctrine

│ └── Service/

│ └── MarkdownConverter.php # Conversion Markdown → HTML

└── templates/

├── base.html.twig # Layout principal

├── blog/

│ ├── index.html.twig # Liste des articles

│ ├── show.html.twig # Article détaillé

│ ├── tag.html.twig # Articles par tag

│ └── macros.html.twig # Macros UI (postcard, pagination)

├── contact/

│ └── index.html.twig # Formulaire de contact

├── bundles/

│ └── TwigBundle/

│ └── Exception/

│ └── error.html.twig # Pages d'erreur

└── sitemap.xml.twig # Template du sitemap


💡 Ce que j'ai appris

Symfony

  • ✅ Maîtrise des controllers, routes et templates

  • ✅ Doctrine ORM avec relations ManyToMany (Post ↔ Tag)

  • ✅ Events lifecycle (PrePersist, PreUpdate)

  • ✅ Rate Limiter pour la sécurité

  • ✅ VichUploader pour la gestion d'images

  • ✅ Macros Twig pour la réutilisation UI

  • ✅ Sitemap dynamique en XML

UI/UX

  • ✅ Design système "terminal" cohérent

  • ✅ Dark mode avec persistance

  • ✅ Animations CSS au scroll

  • ✅ Composants réutilisables via macros

  • ✅ Expérience utilisateur fluide

Performance

  • ✅ Lazy loading des images

  • ✅ Chargement différé des assets (Highlight.js)

  • ✅ DNS prefetch pour les ressources externes

  • ✅ Cache HTTP optimisé

SEO

  • ✅ Sitemap XML dynamique

  • ✅ Métadonnées par article

  • ✅ Données structurées JSON-LD

  • ✅ Open Graph et Twitter Cards

  • ✅ URLs SEO-friendly (slugs)

🚀 Améliorations futures

  • Commentaires sur les articles

  • Newsletter par email

  • Système de likes

  • Mode "lecture" épuré

  • Export PDF des articles

  • Recherche avancée avec Elasticsearch

  • Intégration d'un CMS Headless

  • Migration vers Symfony + React (frontend découplé)