Im vergangenen Jahr meldete sich Josh Como, Autor von Tutorials und Tutorials für Entwickler, auf seinem Twitter-Account freiwillig, um die Portfolio-Websites aller Comer anzuzeigen und zu kritisieren. Während der Veranstaltung bemerkte er eine interessante Sache: Das Feedback war nicht sehr unterschiedlich, die Mängel bei der Gestaltung des Portfolios für die meisten Programmierer waren ungefähr gleich. Dann hatte Como die Idee, dass es schön wäre, häufig wiederholte Kommentare in einer Liste zusammenzufassen. Infolgedessen erhielt er ziemlich umfangreiches Material, das in ein elektronisches Buch formatiert wurde - es ist kostenlos auf der Website des Autors verfügbar . Unter dem Schnitt finden Sie die wichtigsten Thesen, Empfehlungen und Quellen, die darin enthalten sind.
Allgemeine Fragen
Was versteht man unter einem Entwicklerportfolio?
In den meisten Fällen handelt es sich um eine Website, auf der persönliche Projekte vorgestellt werden, anhand derer man seine Erfahrungen und Fähigkeiten beurteilen kann.
Das ist notwendig?
Nein. Nicht alle Entwickler nehmen ein Portfolio in ihren Lebenslauf auf, und nicht alle Arbeitgeber erwarten solche Informationen. Darüber hinaus gibt es diejenigen, die den Link nicht einmal öffnen. Das Portfolio ist optional, kann aber einen guten Vorteil gegenüber der Konkurrenz bieten und Ihnen zeigen, was Sie so klar wie möglich tun können.
Gibt es keine anderen Möglichkeiten, Ihre Arbeit zu präsentieren?
Es gibt. Der Lebenslauf enthält jetzt häufig beispielsweise Links zu LinkedIn oder Github - Ressourcen, mit denen Sie auch Ihre Aktivitäten hervorheben können. Der Vorteil einer Portfolio-Site besteht darin, dass Sie auf eine für Sie bequeme und vorteilhafte Weise über sich selbst berichten können. Es ist nicht erforderlich, einem vorgegebenen Format zu folgen. Sie können jedem Projekt so viel Kontext geben, wie Sie für richtig halten.
Für wen sind diese Tipps?
Für Nachwuchsentwickler, die einerseits bereits etwas zu zeigen haben und andererseits den Mangel an Berufserfahrung in den Augen des Arbeitgebers ausgleichen und sich von der Masse abheben wollen. Der Autor konzentriert sich hauptsächlich auf das Front-End und den Full-Stack, aber die meisten Empfehlungen sind auch für diejenigen nützlich, die sich mit Backend- oder Mobile-Entwicklung beschäftigen.
Wie viele Projekte sollte die Site haben?
Die optimale Menge liegt zwischen zwei und fünf. Der Ansatz „Je mehr desto besser“ funktioniert hier nicht - das Portfolio soll die besten Arbeitsbeispiele präsentieren und nicht die gesamte Chronologie abdecken. Wenn Sie wirklich mehr zeigen möchten, ordnen Sie sie zumindest ein - lassen Sie die besten auf der Hauptseite hängen, und der Rest wird geöffnet, indem Sie auf die Katze "Mehr anzeigen" oder die Registerkarte "Archiv" klicken.
Wenn es nur ein Projekt gibt, dessen Umfang und Qualität jedoch angemessen sind, ist es zulässig, die Menge auf Kosten von etwas weniger Beeindruckendem hinzuzufügen: ein einfaches Produkt nur für das Portfolio oder eine kleine Variation des Hauptthemas (zum Beispiel) , eine Erweiterung, die auf einer mobilen Anwendung basiert), geben Sie das aktuelle Projekt mit der Markierung "In Bearbeitung" an und informieren Sie sich über Aktivitäten, die nicht direkt mit dem Code zusammenhängen (Dokumentation, Organisation von Ereignissen für Entwickler).
Welche Projekte können nicht aufgenommen werden?
Es gibt verschiedene Kategorien von Projekten, die mit großer Sorgfalt verwendet werden sollten:
- , – , . , , , . . , ( 50% ) .
- . – . , .
- -. – . , - . , , , .
- , . « ». , . , , . , , .
Welche Projekte sollten Sie zuerst einbeziehen?
Neben dem Offensichtlichen (gut und interessant) gibt es einige Merkmale, die Arbeitgeber besonders schätzen:
- Zielprojekte, die erstellt wurden, um ein bestimmtes Problem zu lösen. Sie zeigen, dass Sie wissen, wie man technische Fähigkeiten in die Praxis umsetzt, und dass Sie Ihren Ansatz für alle Aspekte des Projektmanagements von Anfang bis Ende bewerten können.
- Live-Projekte mit echten Benutzern, auch nur ein wenig, neigen dazu, mehr Interesse zu wecken als Demoversionen von Produkten, die für den Prozess selbst erstellt wurden.
- Große, komplexe Projekte, die viel Zeit und Mühe gekostet haben. Im Prinzip ist nicht jeder Junior in der Lage, so etwas zu Ende zu bringen, so dass die Tatsache der Existenz zu Ihren Gunsten spricht.
- . , , , . , , , .
Im Allgemeinen können Sie Ihrem Portfolio eine Vielzahl von Produkten Ihrer Aktivität hinzufügen: Bildungsprojekte, Trophäen von Hackathons, kleine Programme, die Sie für Ihre eigenen Bedürfnisse geschrieben haben. Junioren sind oft besorgt, dass ihre Projekte nichts Besonderes sind, sie sind nicht von der Komplexität überwältigt und werden im Portfolio erbärmlich zu sehen sein. Erhöhen Sie die Messlatte nicht zu hoch. Wenn Sie etwas über das Projekt zu erzählen haben (wie Sie um die Implementierung der Funktion gekämpft haben, wie Sie eine Lösung ausgewählt und dann zugunsten einer anderen aufgegeben haben), hat es höchstwahrscheinlich genug versteckte Komplexität und spiegelt Ihre aktuelle angemessen wider Niveau.
Site-Struktur und Inhalt
Portfolio-Websites haben normalerweise keine sehr umfangreiche Struktur. Tatsächlich läuft es auf eine Reihe der folgenden semantischen Blöcke hinaus: Abschnitt "Über mich", eine Liste / ein Raster von Projekten mit detaillierten Beschreibungen für jeden Kontakt. Im Folgenden werden wir sie einzeln betrachten.
Über mich Das
Publikum der Portfolio-Websites besteht aus zwei Gruppen: der Einstellung von Spezialisten und Entwicklern. In verschiedenen Beschäftigungsphasen wird Ihre Website wahrscheinlich von beiden angesehen. Dementsprechend müssen Sie manövrieren, um beide Gruppen gleichzeitig zu beeindrucken.
Der Abschnitt "Über mich" richtet sich hauptsächlich an Personalreferenten. Ihre Hauptaufgabe ist es, Ihr "persönliches Geschäft" vor dem Hintergrund anderer zumindest ein wenig unvergesslich zu machen. Nach Meinung des Autors ist die Hauptgeißel der Portfolio-Websites jetzt völlige Unpersönlichkeit, der Wunsch, sich in einen Unternehmensstil einzufügen, der das gleiche strukturelle Rückgrat verwendet (Abschluss an einer solchen und einer solchen Universität, dort gearbeitet oder gearbeitet, ich besitze solche und solche Technologien ) und Rekrutierungsredeklischees.
Wenn Sie sich verpflichten, einen detaillierten Text für diesen Block zu schreiben, versuchen Sie, ihm etwas Originelles hinzuzufügen - selbst als Sie in die Entwicklung kamen, zumindest welche Art von Lebens- und Programmierphilosophie Sie haben. Der niedrigste Balken für die Beurteilung der Originalität lautet wie folgt: Wenn Sie Ihren Text auf der Website eines anderen sehen, werden Sie Plagiate sofort erkennen oder denken Sie im ersten Moment, dass jemand gerade in den gleichen Begriffen über sich selbst erzählt hat?
Entwickler zeigen selten Interesse an diesem Abschnitt, daher ist es für sie am besten, die Liste der Sprachen und Technologien, mit denen Sie arbeiten, an einen prominenten Ort zu bringen.
Eine weitere Sache, die Sie bei der Auswahl des Tons Ihrer Geschichte beachten sollten, ist, dass HR und Entwickler Ihre Soft-Junior-Fähigkeiten durch verschiedene Linsen betrachten. Personalverantwortliche schätzen eher die Begeisterung und das Engagement für ihre Arbeit. Für Entwickler ist vor allem ein angemessenes Selbstwertgefühl wichtig - sie müssen Sie noch unterrichten. Versuchen Sie daher, wenn Sie Ihre Liebe zum Code beschreiben, nicht in übermäßiges Selbstbewusstsein zu verfallen. Wenn Sie sich als etablierter Spezialist und Entwicklungshelfer vorstellen, ist die Personalabteilung möglicherweise von Ihrem Vertrauen erfüllt, aber zukünftige Mentoren werden höchstwahrscheinlich denken, dass die Zusammenarbeit mit Ihnen schwierig sein wird.
Projekte und ihre Beschreibungen
Die Geschichte über die Projekte ist der zentrale semantische Block in der Struktur der Site. Normalerweise enthält die Hauptseite ein Raster oder eine Liste von Projekten mit jeweils einer kurzen Darstellung: Titel, Screenshot, einige Beschreibungszeilen, Technologie-Stack, Link zur Demoversion.
Jede solche Karte muss unbedingt in eine Seite mit einer detaillierten Beschreibung übersetzt werden. Wenn die Informationen auf die aufgelisteten Elemente beschränkt sind, geht die Bedeutung der Portfolio-Site tatsächlich verloren.
Die Erwartung, dass ein Produkt für sich selbst spricht, ist ein schwerwiegender Fehler, den viele Entwickler machen. Das „Verkaufen“ Ihrer Arbeit wird als unangemessen angesehen. Daher beschränkt sich die Angelegenheit auf die Verknüpfung mit der Demoversion und im Idealfall mit der Codebasis. Der Arbeitgeber hat die Möglichkeit, selbst eine Meinung abzugeben.
Dieser Ansatz weist zwei kritische Nachteile auf. Erstens wird die Interaktion des Website-Besuchers mit dem Produkt ohne Ihre Aufsicht unvorhersehbar. Es wird für Sie sehr schwierig sein, im Voraus zu erraten, wie die Benutzerreise verlaufen wird und zu welchem Zeitpunkt sie unterbrochen wird, insbesondere wenn Sie noch nie UX-Design durchgeführt haben. Die Person kommt möglicherweise einfach nicht zu den Dingen, auf die Sie am stolzesten sind und auf die Sie wetten.
Gleiches gilt für den Code. Es ist kein Geheimnis, dass Codebasen in Bezug auf die Qualität normalerweise heterogen sind: Einige Teile sind intelligent und elegant hergestellt, andere werden auf Klebeband festgehalten. Durch Zufall kann der Betrachter vom zweiten und nicht vom ersten getroffen werden.
Der zweite Nachteil ist, dass dieser Ansatz im Prinzip für das Endziel nicht gut funktioniert. Das Portfolio dient dazu, über Sie als Spezialist zu berichten. Ein eigenständiges Produkt gibt nicht viele Informationen darüber, wer es hergestellt hat, insbesondere wenn Sie bedenken, dass die Kenntnis der Demoversion oder des Codes in neun von zehn Fällen sehr flüchtig ist. Am Anfang des Artikels haben wir darüber gesprochen, dass eine persönliche Website im Gegensatz zu anderen Plattformen es ermöglicht, mehr Kontext zu schaffen. Es geht darum, das Projekt von innen zu betrachten, wie das Design und die Entwicklung stattgefunden haben. Diese Informationen sind nützlich für den Arbeitgeber und beleuchten Ihre beruflichen Qualitäten am besten.
Como bietet eine Blaupause, auf der Sie aufbauen können, wenn Sie über ein Projekt schreiben. Sie müssen nicht alle Punkte abdecken, sondern sich auf diejenigen konzentrieren, die wirklich etwas zu sagen haben.
Einführung
- Allgemeiner Überblick, Kern des Projekts
- Liste der Hauptfunktionen und Unterscheidungsmerkmale
- Ihre Rolle im Projekt: Haben Sie alleine oder in einer Gruppe gearbeitet, was haben Sie umgesetzt?
- Verwendete Technologien
- Link zu Demo und Codebasis (falls möglich)
Zwecke und Gründe
- Warum haben Sie dieses Projekt durchgeführt, welche Bedeutung hat es für Sie persönlich?
- Was wurde zu Beginn erwartet, wie war das Produkt in der Entwurfsphase?
- Sonstige Kommentare zur Planungsphase.
Wichtige Punkte
- ? – , , .
- , .
- , , . , , , .
- ? - , , - .
- , , ? ? ?
- Hat die gesammelte Erfahrung Ihre zukünftige Arbeit beeinflusst? Wenn Sie die beiden Projekte miteinander verknüpfen können und zeigen, wie nützlich das in einem Projekt gewonnene Wissen in dem anderen ist, ist dies in Ordnung.
Der aktuelle Status ist ein optionaler Abschnitt. Es ist sinnvoll, es einzuschließen, wenn das Produkt tatsächlich von jemandem verwendet wird. Dann können Sie erwähnen, welche Art von Publikum er hat und was die Leute sagen. Wenn das Projekt speziell für das Portfolio erstellt wurde, sollten Sie sich nicht damit befassen.
Der Text wird höchstwahrscheinlich ziemlich viel sein - die Beschreibung eines Projekts kann zwei oder drei Seiten dauern. Um die Wahrscheinlichkeit zu erhöhen, dass der Leser das Ende erreicht, passen Sie es so an, dass es diagonal liest: kurze Absätze, Überschriften, Listen.
Kontakte
Dieser Block enthält in der Regel ein Feedback-Formular. Wenn es für Sie bequemer ist, per E-Mail zu kommunizieren, können Sie sich auf den Link Direct Mailto beschränken. Hier finden Sie auch Links zu Seiten in sozialen Netzwerken und ein professionelles Blog, falls Sie eines betreiben. Jetzt besteht die Tendenz, ein Blog direkt in eine Portfolio-Site einzubetten, aber der Autor steht dieser Idee skeptisch gegenüber. Das Portfolio ist in erster Linie für die Kommunikation mit dem Arbeitgeber konzipiert - die Wahrscheinlichkeit, dass er Zeit zum Lesen von Beiträgen findet, ist äußerst gering. Darüber hinaus müssen Sie die Regelmäßigkeit der Aktualisierungen und die Qualität der Inhalte besonders genau überwachen.
Technische Umsetzung
Design
Schlechte Dinge zuerst: Design hat viel Gewicht. Inhalt ist Inhalt, aber die Funktionen der visuellen Wahrnehmung funktionieren ohne Unterbrechung. Je schöner ( nicht noch praktischer, es ist schöner ) die Website, desto professioneller werden Sie in die Augen der Besucher schauen.
Nicht alle Entwickler sind stark im Design oder können sich ein benutzerdefiniertes Design leisten. Daher scheint die Verwendung vorgefertigter Vorlagen die optimale ressourcenintensive Option für das Ergebnis zu sein. Am besten wählen Sie einige aus und mischen sie zusammen, damit die Benutzeroberfläche mehr oder weniger frisch aussieht.
Como merkt an, dass er im Verlauf seines umfangreichen Portfolio-Browsings wiederholt auf dasselbe beliebte Design gestoßen ist, das einfach Pixel für Pixel kopiert wurde:
Dies ist definitiv nicht notwendig. Selbst wenn das Design gemeinfrei ist, hinterlässt es ein unangenehmes sekundäres Gefühl und wirft Fragen zur Rechtmäßigkeit der Kreditaufnahme auf.
Im Folgenden finden Sie eine Reihe von Vorlagen, auf die Sie sich beim Erstellen eines Designs verlassen können:
Portfolio Starter
Craig Portfolio
Alex Portfolio
Dexter Portfolio
Novo
Kester
Art Director
Website-Entwicklung
Wenn Sie sich für eine Front-End- oder Full-Stack-Entwicklerposition bewerben, müssen Sie diese erstellen eine eigene Website ohne Nocode-Lösungen - die Position verpflichtet ... Sie können beliebige Werkzeuge verwenden, vorzugsweise solche, mit denen Sie vertraut sind, um keine zusätzliche Zeit zu verschwenden. Zu berücksichtigende Optionen: Vanille HTML / CSS / JS, 11ty, Gatsby , Weiter , Jekyll . In meinem eigenen Namen empfiehlt der Autor Gatsby, nicht zuletzt, weil viele Themen und Plugins dafür erstellt wurden, was viel Aufwand spart.
Interaktive Elemente, kleine Animationen und andere visuelle Boni, die das Surfen beleben, wirken auf Websites sehr vorteilhaft. Haben Sie keine Angst, etwas Lustiges oder Unerwartetes von sich selbst hinzuzufügen.
Domain Name
Idealerweise sollte es so etwas wie firstnamelastnamelatinice.com sein. Bei Bedarf (z. B. wenn der Name bereits vergeben ist) können Sie einen Code oder ein dev-Element einfügen. Es ist nicht ratsam, Nicky zu verwenden, es sei denn, Sie sind eine prominente Person in der Online-Community.
Top-Level-Domains können nach Ihrem Geschmack ausgewählt werden (co, io, spezifische Domains verschiedener Länder). Der einzige Punkt: Sie sollten .info vermeiden, die viele mit Spam und Betrügern in Verbindung bringen.
Hosting-
Portfolio-Sites sind normalerweise statisch, sodass sie keine Probleme mit den Servern verursachen. Es gibt eine Reihe von Diensten für das Hosting statischer Websites, darunter Como, die Vercel , Netlify , Github Pages und Surge hervorheben .
*
Zusätzlich zur Theorie der Klarheit gibt Como zwei Beispiele für Portfolios mit detaillierter Analyse an. Die erste ist die Charlie Smith-Site, eine fiktive Person, die der Autor selbst gemacht hat und die sich auf eine typische, durchschnittliche Stichprobe aus dem Internet konzentriert. Die zweite ist die Website von Julia Johnson , einer IBM-Studentin und Praktikantin, die ihn vor dem Hintergrund anderer von Abonnenten gesendeter Personen am angenehmsten beeindruckte. Durch den Vergleich untereinander ist leicht zu erkennen, wie sie mit den Empfehlungen verglichen werden.
Charlies Site - ein ausdrucksloses Design ohne Wendungen, eine stereotype Geschichte über sich selbst, eine kurze und oberflächliche Beschreibung der Projekte
Julias Site - ein effektiveres Design, eine erfolgreiche Struktur, eine zurückhaltende, aber nicht gesichtslose Geschichte über sich selbst, viele Elemente, die die Seite beleben, detaillierte Beschreibungen für jedes Projekt