Portfolio

Description

Qu’il s’agisse de chercher une alternance, un CDI, de développer sa présence en ligne ou tout simplement de partager sa passion, il est fréquent pour un·e développeur·se (comme pour d’autres professions) d’avoir un portfolio en ligne.

L’objectif de ce projet est de construire un portfolio web sur lequel vous pourrez publier les projets que vous souhaitez mettre en avant.

Contraintes

  • Durée : 2 semaines
  • Langage : libre selon niveau

Notions abordées

  • Hébergement web
  • Configuration d’un nom de domaine
  • Déploiement web
  • Bases de données
  • Interactions Front/Back

Se préparer

Plénières possibles

  • Conception (papier ou avec un outil numérique) du visuel attendu du portfolio
  • Format exploratoire : achat, configuration et mise en place d’un nom de domaine
  • Format exploratoire: Quels sont les outils pour pouvoir héberger un site web et que doit-on regarder pour choisir ?

Orientation du projet

Cibler ses objectifs

Avant de vous lancer dans le projet, nous vous proposons de prendre un peu de recul sur votre formation et de réfléchir à quelques questions.

Je débute

Nous vous proposons ici de créer une page web sur laquelle vous décrirez chaque projet que vous souhaitez mettre en avant. Selon vos préférences, il pourra s’agir d’une page unique reprenant toutes les informations pour les projets choisis, ou d’une page « sommaire » avec des vignettes menant à une page spécifique pour chaque projet.

A cette étape, vous pouvez si vous le souhaitez vous limiter à:

  • avoir des données statiques sur votre portfolio
  • avoir un portfolio accessible seulement local (sur votre machine)

1 - Cerner le besoin

Cette première étape sert à comprendre ce que l’on entend par portfolio.

Prenez un peu de recul et posez-vous les questions suivantes:

  • que voulez-vous passer comme message ?
  • Quelles sont les compétences que vous souhaitez mettre en valeur ?
  • Quels sont les aspects de votre personnalité que vous voulez faire transparaitre ?
  • A qui voulez-vous que ce portfolio s’adresse ?
  • Pour quelle(s) raison(s) voulez-vous montrer tel ou tel projet et que pouvez-vous raconter dessus des processus d’analyse, de conception et de développement ?

Puis, de manière plus terre à terre, pour chaque projet présenté, réfléchissez aux informations que vous voulez afficher:

  • Sa date ?
  • Son langage ?
  • Des images ?
  • Un texte de description ?
  • Les difficultés rencontrées ?

Ce travail préliminaire vous permettra de créer une maquette de votre futur portfolio et d’y placer des blocs d’information pertinents.

2 - Créer la maquette

Une fois les informations clé définies, on peut se poser la question de leur présentation : faire une maquette du portfolio permet de décider comment ces informations seront agencées pour chaque projet.

3 - Implémenter

On peut désormais passer à l’implémentation concrète. En utilisant du HTML, du CSS (et éventuellement du Javascript), on peut construire petit à petit notre page web, en commençant par un premier projet.
Bien que non obligatoire, l’utilisation d’une librairie comme Bootstrap peut permettre de faciliter grandement cette étape, en proposant des styles pré-définis que l’on peut éventuellement modifier.

Ressources

  • Quelques inspirations ici
  • Quelques conseils ici
  • Pour celles qui souhaiteraient utiliser Bootstrap, un exemple de tuto ici

Contraintes

Par essence, cette étape (et le fonctionnement du web) vous contraint à utiliser du HTML, du CSS et éventuellement du Javascript.

Objectifs pédagogiques

  • Prendre du recul sur le besoin d’un produit à concevoir
  • Concevoir une maquette web
  • Se familiariser avec le HTML
  • Comprendre la valeur ajoutée du CSS
  • Mener un projet web de bout en bout

Je suis à l’aise avec certains langages

1 - Récupération des données

Construisez une application en charge de récupérer, dans un fichier plat (JSON, XML ou autre) ou dans une base de données, toutes les informations concernant les projets que vous souhaitez afficher.

Votre page web se construira donc dynamiquement sur la base d’un template et du contenu récupéré par cette application web.

2 - Mise en place de templates alternatifs

Selon les projets, il peut être compliqué de trouver un template unique auquel tous se prêtent (captures d’écran ou non, projet en un ou plusieurs langages, etc.).

Vous pouvez donc mettre en place dans votre stockage un champ dédié, sorte de tag venant indiquer quel template utiliser pour la mise en forme de votre projet sur le portfolio. Vous pourrez ainsi définir de nouveaux templates au fil de l’eau et les appliquer à vos projets en changeant simplement ce tag.

3. Ajout d’un système d’export de votre Portfolio ou de votre CV

Les personnes à qui vous allez partager votre portfolio pourraient en avoir besoin en non connecté.
Proposez une fonctionnalité permettant d’exporter votre CV ou le contenu (complet ou formaté) de votre portfolio.

Contraintes

  • Langage libre,
  • Utilisation d’un framework web autorisé

Objectifs pédagogiques

  • Manipulation d’une base de données (fichier, relationnelle ou autre)
  • Manipulation d’un framework

Je veux aller plus loin

1 - Récupération automatique à partir de Github

Votre code source étant stocké sur Github, vous pouvez mettre en place un serveur web qui, plutôt que de se connecter à une base de données ou lire un fichier plat, ira chercher vos projets directement sur votre compte Github - ou alors seulement pour lesquels vous aurez mis un fichier spécifique à la racine de l’arborescence.
En mettant en place une nomenclature de noms de fichiers, vous pourrez par exemple afficher le contenu de votre readme directement sur le portfolio (en conservant la mise en forme Markdown), inclure automatiquement les screenshots se trouvant dans un dossier au nom spécifique, etc.

2 - Détection automatique des caractéristiques du projet

Pour pousser cette logique plus loin, vous pouvez inclure une labellisation automatique sur votre portfolio en fonction des fichiers trouvés sur chaque dépôt Github. Ainsi, la présence sur le dépôt d’un fichier package.json et d’un dossier node_modules peut vous permettre d’identifier automatiquement qu’il s’agit d’un projet Node.js

Ressources