Accueil / Portfolio de développeur web : Six exemples parfaitement réalisés

Portfolio de développeur web : Six exemples parfaitement réalisés

Posté le 11 mars 2020 par PierreB

Après avoir évoqué quelques conseils pour réussir votre portfolio de développeur, Silkhom revient aujourd’hui avec quelques exemples de portfolios admirablement bien réalisés. En général, on retrouve ces sites web créatifs chez les designers, mais il devient de plus en plus courant de voir des développeurs web front-end ou full-stack en faire de même. Voici donc une sélection de six des meilleurs portfolios de développeurs web que vous pourrez rencontrer. De caractéristiques bien différentes et de thématiques variées, ces sites web ont de multiples atouts à faire valoir.

1) Le portfolio retrogaming

Certainement l’un des portfolios les plus créatifs que nous avons reçus chez Silkhom ! Conçu par le développeur web front-end Peter Oravec, ce portfolio est pour le moins unique en son genre. À la fois créatif et ludique, son site web est admirablement bien placé sous l’angle du retrogaming et du jeu de rôle. Le concept : le visiteur incarne un petit personnage qui navigue dans un monde varié. Durant la navigation, le petit personnage peut s’arrêter sur des éléments clés du parcours du développeur. On retrouve les technologies maitrisées dans une pièce spécifique, au même titre que ces récompenses, ses expériences, son curriculum vitæ, ses réseaux sociaux, etc.

Ces éléments ne sont pas placés au hasard dans le monde ce qui apporte une bonne cohérence dans l’expérience de navigation. Une map permet de visualiser le monde dans son ensemble pour éviter que les visiteurs se perdent. Côté technique, ce portfolio a été réalisé avec JavaScript, HTML 5, ainsi que Phaser Game Engine. Bien que cela puisse paraître simple et abordable, ce type de portfolio demande une certaine expérience et de solides connaissances en développement.

Les plus :

Absolument tout est captivant : une masteclass !
Le côté retrogaming et l’interactivité du portfolio
La créativité du portfolio
Les différents points de passages dans le monde relatifs aux expériences
L’envie de tout visiter et de tout consulter
La map pour éviter de se perdre
La réflexion sur le placement des éléments

2) Le portfolio minimal

Ce portfolio proposé par le designer et développeur web front-end Matt Farley séduit par son minimalisme et son aspect clair et aéré. Étant freelance, son offre y est clairement présentée et le choix des couleurs cohérent. Plusieurs de ces références sont présentes en bas de page, ce qui est très bien. On trouve également un formulaire de contact permettant aux visiteurs de rentrer en contact avec lui. Un bouton permet l’accès à Dribble pour voir ses projets dans leur ensemble. Finalement, ce portfolio reste très simple dans son arborescence puisqu’il repose sur un seul home page. Cependant, ce professionnel a parfaitement su travailler sa home page pour y insérer toutes les composantes nécessaires à une bonne compréhension de son activité.

Les plus :

Design minimaliste et sobre
Offres de services claires et bien agencées
Présence de références professionnelles
Formlaire de contact intégré au site & réseaux sociaux présents

3) Le portfolio du passionné de code

Il n’est pas toujours utile de créer un site très dense avec plusieurs pages internes. Le portfolio du développeur Pierre Burel en est un parfait exemple. Son portfolio ne comporte qu’une seule page et cette page est entièrement sous la forme de code informatique. Un bon moyen de mettre en lumière sa passion pour son travail et de montrer aux visiteurs qu’on aime ce qu’on fait. Ses réseaux sociaux, ses projets, expériences et compétences sont tous présents sur cette page.

Les plus :

Une page unique bien agencée
Un portfolio entièrement en code informatique
Présence des réseaux sociaux
Simple, efficace et cohérent

4) Le portfolio interactivement artistique

Raoul Gaillard, développeur web front-end, est à l’origine de ce très joli portfolio. On y retrouve une patte créative très intéressante avec beaucoup d’interactivité et de designs géométriques. Les sections les plus importantes y sont toutes présentes : une home page concise, ses projets, sa présentation personnelle… L’agencement de ses projets et leurs présentations sont admirablement bien représentés. L’interactivité des formes géométriques est influé par le déplacement de la souris ce qui donne une impression de profondeur particulièrement agréable pour les yeux. Le jeu de couleurs change d’un projet à l’autre pour bien les délimiter entre eux. De plus, ce portfolio a également l’atout d’être très bien aéré, ce qui permet à l’identité visuelle de vraiment ressortir.

Les plus :

L’interactivité et le design géométrique
Les projets sont très bien présentés avec des jeux de couleur intéressants
Navigation facile et bonne lisibilité

5) Le portfolio animé à la lettre

Pour rester dans l’interactivité, voici le portfolio de Jack, développeur web front-end également. Le thème est très sombre avec la présence d’un vert vif qui permet un contraste très intéressant et une lisiblité améliorée. Les animations au survol sur les lettres sont très réussies et permettent de mettre en lumière les compétences du développeur dans ce domaine. Des petites balises de code discrètes sont présentes sur la home page et cela permet un bon clin d’oeil à son univers. On retrouve une barre verticale compatible avec l’affichage mobile qui permet de faciliter la navigation sur les différentes pages du site. On retrouve une jolie disposition en mosaïque de sa bibliothèque de projets avec des animations au survol comme sur les autres pages. Sur sa page des compétences, on retrouve une animation des différents langages maitrisés qui gravitent au survol.

Les plus :

Les animations sur les lettres très réussies
Le contraste entre thème sombre et typographie vert vif
Lisibilité et navigation facilitée
Projets bien agencés
Présence des réseaux sociaux

6) Le portfolio « Space Invaders » que vous pouvez détruire

Terminons cette sélection avec un autre portfolio unique en son genre : celui de Rafael Caferati, développeur fullstack JavaScript. Beaucoup d’originalité puisque la home page comporte un texte de présentation et un call to action unique permettant de déclencher un jeu rétro type « Space Invaders ». Un mini vaisseau spatial apparaît alors et vous pouvez détruire le texte de présentation se trouvant un peu plus haut. Une jauge de munitions se remplit alors jusqu’au rouge, où le jeu s’arrête avec l’indication du score. On a même accès au record du site que l’on peut s’amuser à tenter de dépasser.

Finalement, c’est un très bon moyen de perdre du temps, mais surtout un très bon moyen de présenter son site, sous l’axe du retrogaming. Les réseaux sociaux sont présents sur une barre verticale à gauche. Une flèche sur la droite permet d’accéder à la suite du portfolio. On retrouve alors tous les projets du développeur avec présence de filtres par technologie ce qui est très pratique pour la navigation et la recherche de projet spécifique. Une autre section du site appelée « Labs » permet d’accéder à des articles de blog et des démonstrations techniques.

Les plus :