Un projet web

Intégration de mon portfolio 2020/2021 from-scratch sans bibliothèque ni framework

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.

Description du projet

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 !

Etape n°1: Création de l’environnement de travail:
Familier à l’outil de versionning GIT, j’y ai donc créé un dépôt avec une branche dev et une branche main afin de différencier la version de développement de la version clean.
J’ai inclus dans ce projet mon starter pack contenant:
  • mon reset.css
  • les fichiers de configuration de gulp.js me permettant de compiler automatiquement mon code SASS à chaque sauvegarde sans passer par les lignes de commande (merci à l’extension Gulp Task pour visual studio Code, c’est top)
  • ainsi que quelques mixins SASS pour gérer plus facilement les médias queries. ( Je vous invite à lire l’article dont je me suis inspiré pour ces mixins Approaches media queries sass" qui traite des médias-queries en SASS)
Etape n°2: Création de l’environnement de travail:
Intégration de la page d’accueil en MOBILE-FIRST

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.

Etape n°3: Intégration des autres pages (page catégorie, page article, page contact, page blog)

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)

Etape n°4: Déploiement de ma branche main automatiquement sur mon hébergement à chaque push.

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.

Etape n°4+1: Correction de certains bugs

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.

Etape n°6: Prise en compte des retours extérieurs

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.

Etape n°7: Rédaction de contenu

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 :)

Accéder au projet

Technologies utilisées

Projets similaires

Vous êtes encore là ? Je suis flatté, et si nous nous appelions ?

Me contacter