Bienvenue sur mon site personnel

Bienvenue sur mon site personnel

Ça y est, j'ai mon site personnel, qui me plait, que je trouve joli, et avec un blog façonné par mes soins. Il vous déstabilisera peut-être mais il a été pensé et réfléchi de longues heures, vous en saurez plus à son sujet dans un futur article à paraître.

Note : Je vous conseille d'avoir vu toutes les pages de ce site (notamment la page "Compétences") avant de lire cet article si vous voulez garder l'effet kiss-cool.

En chiffres

Des lignes de code en veux-tu en voilà

Ce projet, bien que banal, est colossal. Quoi de mieux que de compter une à une les lignes de code pour s'en rendre compte ? Aller, voici un petit résumé de ce qui fait tourner le site.

  • 10 000 lignes de PHP
  • 9 700 lignes de CSS
  • 2 800 lignes de templates TWIG (contient donc le HTML)
  • 2 130 lignes de JavaScript
  • 1 000 lignes de YAML

Soit la coquette somme de 25 630 lignes environ pour faire tourner la moulinette. C'est assez énorme, notamment parce que le système est prévu pour évoluer dans un futur proche ou lointain. Il est par exemple possible d'avoir plusieurs auteurs pour un même article, et chaque article est versionné à chaque enregistrement.

Heures supplémentaires

Une bonne dose de code, ce qui signifie un sacré paquet de temps, car les lignes ne s'inventent pas, il faut y réfléchir avant même de les écrire. En résumé, ça donne :

  • 6 mois de conception et développement (entrecoupés d'autres projets, des cours, d'un stage - et non à temps plein)
  • ~15h pour la page d'accueil (la plus complexe au niveau du CSS)
    • 1h pour imaginer la page sur papier
    • ~5h pour la réaliser sur Photoshop (maquette graphique)
    • ~10h pour procéder à l'intégration HTML/CSS de la maquette, en ayant comme défi d'utiliser le moins d'images possible
  • +h pour le blog - c'est incalculable car j'ai travaillé dessus pour d'autres projets avant mon site, et ce depuis 1 an et demi
  • ~70h pour la page Compétences (la plus conséquente)
    • ~3h à imaginer le décor sur papier et à intégrer chaque compétence dans le décor
    • 35h passées à faire le décor sur Photoshop (maquette graphique + éléments du décor)
      • Le décor a été tenté dans deux styles graphiques différents avant d'arriver à la page actuelle
    • 1h pour faire le sprite du personnage
    • 5h à coder le décor et ses animations (ce qui inclus le fait que certaines images ont été refaites pour être "intégrables")
    • ~20h pour coder la dynamique du personnage par rapport au décor et les contrôles
  • Quelques heures encore pour réaliser les pages Projets, Culture et Contact
  • Le mécanisme qui permet la navigation sans rechargement de page m'a coûté un grand nombre d'heures également, notamment côté serveur (pour plus de détails, rendez-vous prochainement dans la série d'articles qui parlera du développement du site)
  • Responsive design, c'est également inquantifiable car parfois fait au fur et à mesure, mais en gros il y a 15 jours à fond dessus (donc pas loin de 80h au total je pense) pour rendre compatible toutes les pages sur tous les supports
Au final, ça n'est pas si énorme, mais il y a plein d'heures passées par ci par là dont je n'ai même plus le souvenir, ayant été en cours, en stage ou ayant travaillé sur d'autres projets en parallèle, ça n'est pas évident.  


Le site m'aura pris un sacré paquet de temps, mais on est jamais plus exigeant que pour soi-même. J'entends par là que quand on est son propre client, il faut savoir s'arrêter tout en ayant quelque chose de satisfaisant. C'est d'ailleurs pour cela que j'ai lancé un décompte début août qui fixait une date de sortie, visible de tous, et qui m'imposait donc de m'arrêter pour être prêt à une certaine date. Cette date, c'est aujourd'hui.

Dès aujourd'hui, une suite d'articles Histoire d'un site va paraître sur le blog pour expliquer la réalisation de chaque étape du site. Certaines feront l'objet de tutoriels vidéo que je publierais sur Grafikart.fr.

Si vous avez aimé le site, de part son originalité, son design ou juste parce qu'il vous plait, n'hésitez pas à partager le lien autour de vous. Merci =D

Votre gravatar