L'année dernière, Josh Como, auteur de tutoriels et de tutoriels pour les développeurs, s'est porté volontaire sur son compte Twitter pour consulter et critiquer les sites de portfolio de tous les venus. Au cours de l'événement, il a remarqué une chose intéressante: les retours n'étaient pas très variés, les lacunes dans la conception du portfolio pour la plupart des programmeurs débutants se sont avérées à peu près les mêmes. Ensuite, Como a eu l'idée qu'il serait bien de rassembler les commentaires fréquemment répétés dans une seule liste. En conséquence, il a obtenu un matériel assez volumineux, qui a été formaté dans un livre électronique - il est disponible gratuitement sur le site Web de l'auteur . Sous la coupe, vous trouverez les principales thèses, recommandations et sources qui y sont données.
Questions générales
Qu'entend-on par portefeuille de développeurs?
Dans la plupart des cas, il s'agit d'un site où sont présentés des projets personnels, par lequel on peut juger de son expérience et de ses compétences.
Il est nécessaire?
Pas. Tous les développeurs n'incluent pas un portfolio dans leur CV, et tous les employeurs n'attendent pas de telles informations. De plus, il y a ceux qui n'ouvriront même pas le lien. Le portfolio est facultatif, mais il peut donner un bon avantage sur la concurrence et vous montrer ce que vous pouvez faire aussi clairement que possible.
N'existe-t-il pas d'autres moyens de présenter votre travail?
Il y a. Le CV comprend désormais souvent, par exemple, des liens vers LinkedIn ou Github - des ressources qui peuvent également être utilisées pour mettre en évidence vos activités. L'avantage d'un site de portfolio est qu'il vous permet de parler de vous d'une manière pratique et avantageuse pour vous. Il n'est pas nécessaire de suivre un format prédéterminé, vous pouvez donner autant de contexte à chaque projet que vous le souhaitez.
A qui s'adressent ces conseils?
Pour les développeurs juniors, qui, d'une part, ont déjà quelque chose à montrer, et d'autre part, veulent compenser le manque d'expérience de travail aux yeux de l'employeur et se démarquer. L'auteur se concentre principalement sur le front-end et le full-stack, mais la plupart des recommandations seront également utiles à ceux qui sont engagés dans le développement backend ou mobile.
Combien de projets le site devrait-il avoir?
La quantité optimale est de deux à cinq. L'approche «plus il y en a, mieux c'est» ne fonctionne pas ici - le portfolio est conçu pour présenter les meilleurs exemples de travail et non pour couvrir toute la chronologie. Si vous voulez vraiment en montrer plus, au moins les classer - laissez les meilleurs sur la page principale, et les autres sont ouverts en cliquant sur le chat "Afficher plus" ou sur l'onglet des archives.
S'il n'y a qu'un seul projet, mais que son échelle et sa qualité sont correctes, il est permis d'ajouter la quantité au détriment de quelque chose de moins impressionnant: faire un produit simple uniquement pour le portefeuille ou une petite variation sur le thème principal (par exemple , une extension basée sur une application mobile), indiquez le projet en cours avec la marque "En cours", parlez d'une activité qui n'est pas directement liée au code (documentation, organisation d'événements pour les développeurs).
Quels projets ne peuvent pas être inclus?
Il existe plusieurs catégories de projets à utiliser avec le plus grand soin:
- , – , . , , , . . , ( 50% ) .
- . – . , .
- -. – . , - . , , , .
- , . « ». , . , , . , , .
Quels projets devriez-vous inclure en premier?
En plus de l'évidence (bonne et intéressante), il existe plusieurs caractéristiques que les employeurs ont tendance à apprécier particulièrement:
- Cibler les projets créés pour résoudre un problème particulier. Ils montrent que vous savez comment traduire les compétences techniques en pratique et vous permettent d'évaluer votre approche de tous les aspects de la gestion de projet, du début à la fin.
- Les projets en direct qui ont de vrais utilisateurs, même un peu, ont tendance à générer plus d'intérêt que les versions de démonstration de produits conçus pour le processus lui-même.
- Projets complexes à grande échelle qui ont demandé beaucoup de temps et d'efforts. Tous les juniors, en principe, ne sont pas capables de mettre fin à quelque chose comme ça, donc le fait même de l'existence parlera en votre faveur.
- . , , , . , , , .
En général, vous pouvez ajouter une variété de produits de votre activité à votre portfolio: projets éducatifs, trophées de hackathons, petits programmes que vous avez écrits pour vos propres besoins. Les juniors craignent souvent que leurs projets ne soient pas spéciaux, ils ne sont pas submergés par la complexité et seront pathétiques à regarder dans le portfolio. N'élevez pas la barre trop haut. Si vous avez quelque chose à dire sur le projet (comment vous vous êtes battu pour la mise en œuvre de la fonction, comment vous avez choisi une solution, puis l'avez abandonnée au profit d'une autre), il est fort probable qu'il a suffisamment de complexité cachée et reflète adéquatement votre situation actuelle. niveau.
Structure et contenu du site
Les sites de portefeuille n'ont généralement pas une structure très étendue. En fait, cela se résume à un ensemble des blocs sémantiques suivants: section "À propos de moi", une liste / grille de projets, avec des descriptions détaillées pour chacun, des contacts. Ci-dessous, nous examinerons chacun d'eux séparément.
À propos de moi Le
public des sites de portfolio se compose de deux groupes: les spécialistes du recrutement et les développeurs. À différents stades de l'emploi, votre site est susceptible d'être consulté par les deux. En conséquence, vous devez manœuvrer de manière à impressionner les deux groupes à la fois.
La section «À propos de moi» est principalement destinée aux agents du personnel. Sa tâche principale est de rendre votre "entreprise personnelle" au moins un peu mémorable dans le contexte des autres. De l'avis de l'auteur, le principal fléau des sites de portfolio est désormais l'impersonnalité totale, la volonté de s'inscrire dans un style d'entreprise qui utilise la même épine dorsale structurelle (diplômé de telle ou telle université, y a travaillé ou y travaille, je possède telle ou telle technologie ) et les clichés du discours de recrutement.
Si vous vous engagez à écrire un texte détaillé pour ce bloc, essayez d'y ajouter quelque chose d'original - même lorsque vous êtes entré dans le développement, du moins quel type de philosophie de vie et de programmation vous avez. La barre la plus basse pour évaluer l'originalité est la suivante: si vous voyez votre texte sur le site de quelqu'un d'autre, reconnaîtrez-vous immédiatement le plagiat, ou penserez-vous au premier moment que quelqu'un vient de parler de lui-même dans les mêmes termes?
Les développeurs manifestent rarement de l'intérêt pour cette section, il est donc préférable pour eux de mettre en évidence la liste des langages et des technologies avec lesquels vous travaillez.
Une autre chose à garder à l'esprit lors du choix du ton de votre histoire est que les RH et les développeurs examinent vos compétences soft juniors à travers différents objectifs. Les agents du personnel sont plus susceptibles d'apprécier l'enthousiasme et le dévouement à leur travail. Pour les développeurs, tout d'abord, une bonne estime de soi est importante - ils doivent encore vous enseigner. Par conséquent, lorsque vous décrivez votre amour pour le code, essayez de ne pas tomber dans un aplomb excessif. Si vous vous imaginez comme un spécialiste reconnu et un as du développement, les RH peuvent être imprégnés de votre confiance, mais les futurs mentors penseront très probablement qu'il sera difficile de travailler avec vous.
Projets et leurs descriptions
L'histoire des projets est le bloc sémantique central dans la structure du site. Habituellement, la page principale contient une grille ou une liste de projets avec une courte présentation de chacun: titre, capture d'écran, quelques lignes de description, pile technologique, lien vers la version de démonstration.
Chacune de ces cartes doit nécessairement se traduire par une page avec une description détaillée. Si les informations se limitent aux éléments répertoriés, la signification du site du portfolio est en fait perdue.
S'attendre à ce qu'un produit parle de lui-même est une grave erreur que font de nombreux développeurs. «Vendre» votre travail est considéré comme inapproprié, de sorte que la question se limite au lien vers la version de démonstration et, dans un scénario idéal, la base de code - l'employeur a la possibilité de se faire une opinion par lui-même.
Cette approche présente deux inconvénients majeurs. Premièrement, sans votre supervision, l'interaction du visiteur du site avec le produit devient imprévisible. Il vous sera très difficile de deviner à l'avance comment se déroulera le parcours de l'utilisateur et à quel point il s'interrompra, surtout si vous n'avez jamais fait de conception UX. Il se peut que la personne ne parvienne tout simplement pas aux choses dont vous êtes le plus fier et sur lesquelles vous pariez.
Il en va de même avec le code. Ce n'est un secret pour personne qu'en termes de qualité, les bases de code sont généralement hétérogènes: certaines pièces sont fabriquées intelligemment et gracieusement, d'autres sont fixées à du ruban électrique. Par hasard, le spectateur peut bien être frappé par le second, et non par le premier.
Le deuxième inconvénient est que cette approche, en principe, ne fonctionne pas bien pour le but final. Le portfolio sert à parler de vous en tant que spécialiste. Un produit autonome ne donne pas beaucoup d'informations sur qui l'a fabriqué, surtout si l'on considère que la connaissance de la version de démonstration ou du code dans neuf cas sur dix sera très superficielle. Au début de l'article, nous avons évoqué le fait qu'un site personnel, contrairement à d'autres plateformes, permet de mettre plus de contexte. Il s'agit de regarder le projet de l'intérieur, de savoir comment la conception et le développement se sont déroulés. Ces informations sont utiles à l'employeur et mettent en lumière au mieux vos qualités professionnelles.
Como fournit un plan sur lequel s'appuyer lors de l'écriture d'un projet. Vous n'êtes pas obligé de couvrir tous les points, concentrez-vous sur ceux qui ont vraiment quelque chose à dire.
introduction
- Vue d'ensemble, essence du projet
- Liste des principales fonctions et caractéristiques distinctives
- Votre rôle dans le projet: avez-vous travaillé seul ou en groupe, quel genre de choses avez-vous mis en place?
- Technologies utilisées
- Lien vers la démo et la base de code (si possible)
Finalités et raisons
- Pourquoi avez-vous entrepris ce projet, quelle est sa signification pour vous personnellement?
- Qu'est-ce qui était attendu au départ, à quoi ressemblait le produit au stade de la conception?
- Tout autre commentaire concernant la phase de planification.
Points clés
- ? – , , .
- , .
- , , . , , , .
- ? - , , - .
- , , ? ? ?
- L'expérience acquise a-t-elle influencé votre travail futur? Si vous pouvez lier les deux projets, en montrant comment les connaissances acquises dans l'un ont été utiles dans l'autre, ce sera très bien.
L'état actuel est une section facultative. Il est logique de l'inclure si le produit est réellement utilisé par quelqu'un; Ensuite, vous pouvez mentionner quel type de public il a et ce que les gens disent. Si le projet a été conçu spécifiquement pour le portefeuille, vous ne devriez pas vous y attarder.
Le texte, très probablement, s'avérera assez volumineux - la description d'un projet peut prendre deux ou trois pages. Pour augmenter les chances que le lecteur atteigne la fin, adaptez-le à une lecture en diagonale: paragraphes courts, titres, listes.
Contacts
En règle générale, ce bloc contient un formulaire de commentaires. S'il vous est plus pratique de communiquer par e-mail, vous pouvez vous limiter au lien de publipostage vers. Des liens vers des pages de réseaux sociaux et un blog professionnel, si vous en gérez un, sont également repris ici. Maintenant, il y a une tendance à intégrer un blog directement dans un site de portfolio, mais l'auteur est sceptique sur cette idée. Le portfolio est conçu principalement pour la communication avec l'employeur - la probabilité qu'il trouve le temps de lire les messages est extrêmement faible. De plus, vous devrez notamment surveiller de près la régularité des mises à jour et la qualité du contenu.
Implémentation technique
Conception Les
mauvaises choses d'abord: le design a beaucoup de poids. Le contenu est contenu, mais les fonctionnalités de perception visuelle fonctionnent sans interruption, donc plus le site est beau ( pas encore plus pratique, il est plus beau ), plus vous regarderez professionnel dans les yeux des visiteurs.
Tous les développeurs ne sont pas forts dans la conception ou peuvent se permettre une conception personnalisée, de sorte que l'utilisation de modèles prêts à l'emploi semble être l'option optimale en termes de ressources pour le résultat. Le mieux est d'en sélectionner quelques-uns et de les mélanger pour donner à l'interface un aspect plus ou moins frais.
Como note qu'au cours de sa navigation massive dans son portefeuille, il est tombé à plusieurs reprises sur le même design populaire, simplement copié pixel pour pixel:
Ce n'est certainement pas nécessaire. Même si le dessin est dans le domaine public, il laisse un sentiment désagréable de secondaire et soulève des questions sur la légalité de l'emprunt.
Voici un certain nombre de modèles sur lesquels vous pouvez compter lors de la création d'un design:
Portfolio Starter
Craig Portfolio
Alex Portfolio
Dexter Portfolio
Novo
Kester
Directeur artistique
Développement de site Web
Si vous postulez pour un poste de développeur front-end ou full-stack, vous devez créer un site Web à vous, sans solutions nocode - la position oblige ... Vous pouvez utiliser tous les outils, de préférence ceux avec lesquels vous êtes familier, pour ne pas perdre de temps supplémentaire. Options à considérer: vanilla HTML / CSS / JS, 11ty, Gatsby , ensuite , Jekyll . En mon nom propre, l'auteur recommande Gatsby, notamment pour le fait que de nombreux thèmes et plugins ont été créés pour cela, ce qui permet d'économiser beaucoup d'efforts.
Éléments interactifs, petites animations et autres bonus visuels qui rendent la navigation animée très avantageuse sur les sites. N'ayez pas peur d'ajouter quelque chose de drôle ou d'inattendu de votre part.
Nom de domaine
Idéalement, ce devrait être quelque chose comme firstnamelastnamelatinice.com. Si nécessaire (par exemple, si le nom est déjà pris), vous pouvez insérer un code ou un élément dev. Il est déconseillé d'utiliser Nicky à moins que vous ne soyez une personne de premier plan dans la communauté en ligne.
Les domaines de premier niveau peuvent être choisis selon vos goûts (co, io, domaines spécifiques de différents pays). Le seul point: vous devriez éviter .info, que beaucoup associent au spam et aux escrocs.
Les
sites d' hébergement de Portfolio sont généralement statiques, ils ne créent donc pas de problèmes avec les serveurs. Il existe un certain nombre de services d'hébergement de sites statiques, parmi lesquels Como met en évidence Vercel , Netlify , Github Pages , Surge .
*
En plus de la théorie pour plus de clarté, Como donne deux exemples de portefeuilles avec une analyse détaillée. Le premier est le site Charlie Smith, une personne fictive que l'auteur a créée lui-même, en se concentrant sur un échantillon typique et moyen du Web. Le second est le site de Julia Johnson , étudiante et stagiaire IBM, qui lui a fait la plus belle impression sur fond d'autres envoyés par les abonnés. En comparant les uns aux autres, il est facile de voir comment ils se comparent aux recommandations.
Le site de Charlie - un design inexpressif sans rebondissements, une histoire stéréotypée sur vous-même, une description courte et superficielle des projets
du site de Julia - un design plus efficace, une structure réussie, une histoire sobre mais pas sans visage sur vous-même, de nombreux éléments qui animent la page, des descriptions détaillées pour chaque projet