Dans l’optique de candidater à des offres de stage, j’avais envie de mettre en application mes compétences d’intégration web, acquises durant ma licence professionnelle développement web - multimédia, internet et webmaster. C’est alors que l’idée de réaliser ce portfolio statique sans bibliothèque JS ni framework css est née.
Avoir un portfolio réalisé avec Wordpress n'est pas l'idéal pour candidater à des offres de développement web, c'est pourquoi je me suis lancé dans le développement de mon nouveau portfolio from-scratch (sur mon temps libre, parallèlement à mes études).
Afin de prouver, mais également d’approfondir mes compétences d’intégrateur web, j’ai décidé de ne pas utiliser de framework css tel que boostrap ou Tailwind.
Je vais vous décrire rapidement les principales étapes du projet et dès que j’aurai un peu de temps disponible à mes projets personnels, je viendrai compléter cet article. C’est parti !
J’ai pour habitude d’intégrer une page dans le sens de lecture, de haut en bas. J’ai donc intégré cette page premièrement sur mobile, un comportement très proche du mobile sur tablette, puis un tout autre comportement pour le desktop.
Une fois cette page intégrée, j’ai été confronté à un problème d’architecture de mes fichiers SCSS (c’était mon premier réel projet d’intégration). Je me suis donc documenté sur internet et je suis tombé sur cet article passionnant: un guide de style engagé pour du code Sass sain, maintenable et extensible. avec beaucoup d’informations sur les conventions de nommage, mais surtout sur l’architecture de ses fichiers SASS, et en plus, en français. C’était le jackpot. J’ai donc mis en place une architecture appelée “le patern 7-1”, enfin dans mon cas “le pattern 5-1”.
Cette architecture m’a permis de découper mes fichiers SCSS en plusieurs catégories: abstract, base, components, layout, pages et ça m’a littéralement facilité le développement.
Depuis la nouvelle architecture, l’intégration était devenue beaucoup plus fluide et plus logique pour moi. L’intégration s’est super bien déroulée. Durant cette étape, j’ai eu envie de déployer la branche main sur mon hébergement web afin de montrer mon travail à certains de mes collègues. (petite introduction à la prochaine étape: check)
J’avais envie qu’à chaque push de ma branche main, soit mis à jour mon site internet en ligne, sans avoir besoin de re-importer tout le projet à chaque fois (automatisation du deploiement), mais je ne savais pas le faire. Après quelques recherches, je suis tombé sur cet article qui explique comment déployer automatiquement de Github à un serveur en utilisant un webhook: how to automatically deploy from github to server using web hook (anglais)
En 5 minutes et 4 lignes de commande tout était prêt et fonctionnel. Rapide et efficace, tout ce que j'apprécie.
Sans m’en rendre compte, il s’était accumulé plusieurs petits bugs graphiques sur certains navigateurs, c’était donc le moment de résoudre tout ça et rendre le site internet opérationnel et esthétique pour un plus grand nombre d’utilisateurs.
Quand on a la tête dans un projet depuis quelques jours, quelques semaines ou plus, il est important d’avoir des avis extérieurs. Même si j’avais l’habitude de demander l’avis de mes proches ou de mes collègues de développement assez régulièrement, je mets ça dans l’étape 6.
Vous l’aurez compris, c’est l’étape à laquelle je me situe en écrivant ces quelques lignes: écrire le contenu du site internet. Avec pour objectif de diriger mon site internet/portfolio vers un style plutôt blogging, il en faut du contenu.
Ecrire des “articles” c’est quelque chose que je n’avais jamais fait, mais que j’ai toujours
voulu faire; Parce que j’aime écrire et partager.
En esperant avoir partagé avec vous un bout de ce projet :)