Josh Comoによる開発者ポートフォリオ：構造、コンテンツ、意味

昨年、チュートリアルと開発者向けチュートリアルの著者であるJosh Comoは、彼のTwitterアカウントで、すべての参加者のポートフォリオサイトを閲覧し、批判することを志願しました。イベント中に、彼は興味深いことに気づきました。フィードバックはそれほど多様ではなく、ほとんどの初心者プログラマーのポートフォリオの設計における欠点はほぼ同じであることが判明しました。その後、コモは、頻繁に繰り返されるコメントを1つのリストにまとめるとよいと考えました。その結果、彼は非常に広範な資料を入手し、それを電子書籍にフォーマットしました。これは、著者のWebサイトから無料で入手できます 。カットの下にあなたはそれに与えられている主な論文、推奨事項と情報源を見つけるでしょう。

一般的な問題

開発者ポートフォリオとはどういう意味ですか？



ほとんどの場合、私たちは個人的なプロジェクトが提示されるサイトについて話していて、それによって彼の経験とスキルを判断することができます。



これは必要である？



そうではありません。すべての開発者が履歴書にポートフォリオを含めるわけではなく、すべての雇用者がそのような情報を期待しているわけではありません。また、リンクを開かない人もいます。ポートフォリオはオプションですが、競合他社よりも優れた利点を提供し、可能な限り明確に何ができるかを示します。



あなたの作品を紹介する他の方法はありませんか？



有る。履歴書には、たとえば、LinkedInやGithubへのリンクが含まれることがよくあります。これらのリソースは、アクティビティを強調するためにも使用できます。ポートフォリオサイトの利点は、便利で有益な方法で自分自身について話すことができることです。あらかじめ決められた形式に従う必要はありません。各プロジェクトに適切と思われるだけのコンテキストを与えることができます。



これらのヒントは誰のためのものですか？



ジュニア開発者にとって、一方ではすでに何かを示すものがあり、他方では、雇用主の目から見た仕事の経験の不足を補い、群衆から目立つことを望んでいます。著者は主にフロントエンドとフルスタックに焦点を当てていますが、推奨事項のほとんどは、バックエンドまたはモバイル開発に従事している人にも役立ちます。



サイトにはいくつのプロジェクトが必要ですか？



最適な量は2から5です。 「より良い」アプローチはここでは機能しません。ポートフォリオは、作業の最良の例を紹介するように設計されており、年表全体を網羅するものではありません。本当にもっと表示したい場合は、少なくともランク付けしてください。メインページに最適なものをぶら下げて、残りは[もっと表示]猫または[アーカイブ]タブをクリックして開きます。



プロジェクトが1つしかないが、その規模と品質が適切である場合は、あまり印象的ではないものを犠牲にして数量を追加することができます。つまり、純粋にポートフォリオ用の単純な製品を作成するか、メインテーマの小さなバリエーションを作成します（たとえば、 、モバイルアプリケーションに基づく拡張機能）、「進行中」のマークが付いた現在のプロジェクトを示し、コードに直接関係しないアクティビティ（ドキュメント、開発者向けのイベントの開催）について説明します。



どのプロジェクトを含めることができませんか？



細心の注意を払って使用する必要があるプロジェクトには、いくつかのカテゴリがあります。

• , – , . , , , . . , ( 50% ) .
• . – . , .
• -. – . , - . , , , .
• , . « ». , . , , . , , .

どのプロジェクトを最初に含める必要がありますか？



明白な（良くて興味深い）ことに加えて、雇用主が特に高く評価する傾向があるいくつかの特徴があります：

• 特定の特定の問題を解決するために作成されたターゲットプロジェクト。それらは、技術スキルを実践に移す方法を知っていることを示しており、プロジェクト管理のすべての側面へのアプローチを最初から最後まで評価できるようにします。
• 実際のユーザーが少しでもいるライブプロジェクトは、プロセス自体のために作成された製品のデモバージョンよりも多くの関心を生み出す傾向があります。
• 多くの時間と労力を要した大規模で複雑なプロジェクト。原則として、すべてのジュニアがこのようなことを終わらせることができるわけではないので、存在の事実そのものがあなたに有利になります。
• . , , , . , , , .

一般に、教育プロジェクト、ハッカソンのトロフィー、自分のニーズに合わせて作成した小さなプログラムなど、さまざまなアクティビティの製品をポートフォリオに追加できます。ジュニアは、自分たちのプロジェクトが特別なものではなく、複雑さに圧倒されず、ポートフォリオで見るのが哀れになるのではないかと心配することがよくあります。バーを高くしすぎないでください。プロジェクトについて何か言いたいことがある場合（関数の実装をめぐってどのように戦ったか、あるソリューションをどのように選択し、次に別のソリューションを優先して放棄したか）、おそらく、それは十分に隠された複雑さを持ち、現在のことを適切に反映していますレベル。

サイトの構造とコンテンツ

ポートフォリオサイトは通常、それほど広範な構造を持っていません。実際、それは次のセマンティックブロックのセットに要約されます。セクション「自己紹介」、プロジェクトのリスト/グリッド、それぞれの詳細な説明、連絡先。以下では、それぞれを個別に見ていきます。



私について



ポートフォリオサイトの対象者は、採用スペシャリストと開発者の2つのグループで構成されています。雇用のさまざまな段階で、あなたのサイトは両方に見られる可能性があります。したがって、両方のグループを同時に印象付けるように操作する必要があります。



「自己紹介」のセクションは、主に人事担当者を対象としています。その主な仕事は、あなたの「個人的なビジネス」を他の人の背景に対して少なくとも少し思い出深いものにすることです。著者の意見では、ポートフォリオサイトの主な惨劇は、完全な非人格性、同じ構造的バックボーンを使用する企業スタイルに適合したいという願望です（そのような大学を卒業し、そこで働いたり働いたり、私はそのような技術を所有しています）と募集スピーチの決まり文句。



このブロックの詳細なテキストを書くことを約束する場合は、開発に入ったとしても、少なくともあなたが持っている人生観とプログラミングの種類について、オリジナルの何かを追加してみてください。独創性を評価するための最低の基準は次のとおりです。他の人のサイトで自分のテキストを見ると、すぐに盗用を認識しますか、それとも誰かが同じ言葉で自分のことを言ったと最初に思いますか？



開発者がこのセクションに関心を示すことはめったにないので、使用している言語とテクノロジーのリストをどこか目立つ場所に持ってくるのが最善です。



ストーリーのトーンを選択するときに覚えておくべきもう1つのことは、人事部と開発者がさまざまなレンズを通してあなたのソフトジュニアスキルを見ているということです。人事担当者は、彼らの仕事への熱意と献身を高く評価する可能性が高くなります。開発者にとって、まず第一に、適切な自尊心が重要です-彼らはまだあなたに教えなければなりません。したがって、コードへの愛情を説明するときは、過度の混乱に陥らないようにしてください。あなたが確立されたスペシャリストであり開発エースであると想像すれば、HRはあなたの自信に満ちているかもしれませんが、将来のメンターはおそらくあなたと一緒に働くことは難しいだろうと思うでしょう。



プロジェクトとその説明



プロジェクトについての話は、サイトの構造における中心的なセマンティックブロックです。通常、メインページには、タイトル、スクリーンショット、いくつかの説明行、テクノロジースタック、デモバージョンへのリンクなど、それぞれの短いプレゼンテーションを含むグリッドまたはプロジェクトのリストが含まれています。







このような各カードは、必ず詳細な説明が記載されたページに翻訳する必要があります。情報が記載されている項目に限定されている場合、ポートフォリオサイトの意味は実際には失われます。



製品がそれ自体を語ることを期待することは、多くの開発者が犯す重大な間違いです。あなたの作品を「売る」ことは不適切であると考えられるので、問題はデモ版へのリンクに限定され、理想的なシナリオでは、コードベース-雇用主は自分で意見を述べる機会が与えられます。



このアプローチには2つの重大な欠点があります。第一に、あなたの監督なしでは、サイト訪問者と製品との相互作用は予測不可能になります。特にUXデザインを行ったことがない場合は、ユーザージャーニーがどのように進み、どの時点で中断するかを事前に推測することは非常に困難です。その人は、あなたが最も誇りに思っていることやあなたが賭けていることそのものにたどり着かないかもしれません。



コードの場合も同じです。品質の観点から、コードベースが通常異種であることは周知の事実です。一部のパーツはスマートかつ優雅に作成され、一部は電気テープに固定されています。偶然にも、見る人は最初ではなく、2番目に打たれる可能性があります。



2番目の欠点は、このアプローチが原則として最終目標に対してうまく機能しないことです。ポートフォリオは、スペシャリストとしてのあなたのことを伝えるのに役立ちます。スタンドアロン製品は、誰がそれを作ったかについて多くの情報を提供しません。特に、デモバージョンまたは10のうち9つのケースのコードに精通していることは非常に大雑把であると考える場合はそうです。記事の冒頭で、個人用サイトは他のプラットフォームとは異なり、より多くのコンテキストをもたらすことができるという事実について話しました。それは、プロジェクトを内部から見て、設計と開発がどのように行われたかについてです。この情報は雇用主にとって有用であり、あなたの専門的資質を最もよく示しています。



Comoは、プロジェクトについて書くときに構築するための青写真を提供します。すべてのポイントを網羅する必要はありません。本当に何か言いたいことがあるものに焦点を合わせてください。



前書き

• 一般的な概要、プロジェクトの本質
• 主な機能と特徴的な機能のリスト
• プロジェクトでのあなたの役割：あなたは一人で仕事をしましたか、それともグループで仕事をしましたか？どのようなことを実行しましたか？
• 使用したテクノロジー
• デモとコードベースへのリンク（可能な場合）

目的と理由

• なぜこのプロジェクトに着手したのですか、個人的にはどのような意味がありますか？
• 当初は何が期待されていましたか、デザイン段階ではどのような製品でしたか？
• 計画段階に関するその他のコメント。

キーポイント

• ? – , , .
• , .
• , , . , , , .

• ? - , , - .
• , , ? ? ?
• 得られた経験はあなたの将来の仕事に影響を与えましたか？2つのプロジェクトをリンクして、一方で得た知識がもう一方でどのように役立ったかを示すことができれば、それは問題ありません。

現在のステータスはオプションのセクションです。製品が実際に誰かによって使用されている場合は、それを含めることは理にかなっています。次に、彼がどのような聴衆を持っているか、そして人々が何を言っているかについて言及することができます。プロジェクトがポートフォリオのために特別に作成された場合は、それにこだわる必要はありません。



ほとんどの場合、テキストはかなり多くなるでしょう。1つのプロジェクトの説明には2〜3ページかかる場合があります。読者が最後に到達する可能性を高めるために、斜めに読むようにそれを適応させてください：短い段落、見出し、リスト。



連絡先



原則として、このブロックにはフィードバックフォームが含まれています。電子メールで通信する方が便利な場合は、直接のmailtoリンクに制限することができます。ソーシャルネットワークのページへのリンクやプロのブログ（実行している場合）もここに表示されます。現在、ブログをポートフォリオサイトに直接埋め込む傾向がありますが、著者はこのアイデアに懐疑的です。ポートフォリオは主に雇用主とのコミュニケーションのために設計されています-彼が投稿を読む時間を見つける可能性は非常に小さいです。さらに、更新の定期性とコンテンツの品質を特に注意深く監視する必要があります。

技術的な実装

デザイン



悪いの最初のもの：デザインは、体重の多くを持っています。コンテンツはコンテンツですが、視覚の機能は途切れることなく機能するため、サイトが美しいほど（ 便利ではなく、美しい）、訪問者の目にはよりプロフェッショナルに見えます。



すべての開発者がデザインに強いわけではなく、カスタムデザインを購入できるわけでもないため、既製のテンプレートを使用することが、結果としてリソースを大量に消費する最適なオプションのようです。最良の方法は、いくつかを選択し、それらを混ぜ合わせて、インターフェイスを多少新鮮に見せることです。



コモは、彼の大規模なポートフォリオブラウジングの過程で、同じ人気のあるデザインに繰り返し出くわし、単にピクセルごとにコピーしたと述べています。







これは絶対に必要ありません。デザインがパブリックドメインであっても、二次的な不快感を残し、借用の合法性について疑問を投げかけます。



ここでは、デザインを作成するときに頼ることができることをテンプレートの数されている：



ポートフォリオスターター

クレイグ・ポートフォリオ

アレックス・ポートフォリオ

デクスターポートフォリオ

ノボ

ケスター

アートディレクター



ウェブサイトの開発を



使用すると、フロントエンドまたはフルスタックの開発者の位置を申請している場合は、作成する必要がありますノーコードソリューションなしで、あなた自身のウェブサイト-ポジションは義務付けています...余分な時間を無駄にしないように、任意のツール、できれば使い慣れたツールを使用できます。考慮すべきオプション：バニラHTML / CSS / JS、 11ty、 ギャツビー、 ネクスト、 ジキル。私自身のために、著者はGatsbyをお勧めします。特に、多くのテーマとプラグインが作成されているため、労力を大幅に節約できます。



ブラウジングを盛り上げるインタラクティブな要素、小さなアニメーション、その他の視覚的なボーナスは、サイト上で非常に有利に見えます。自分から面白いものや予期しないものを追加することを恐れないでください。



ドメイン名



理想的には、firstnamelastnamelatinice.comのようなものにする必要があります。必要に応じて（たとえば、名前がすでに使用されている場合）、コードまたはdev要素を挿入できます。あなたがオンラインコミュニティの著名人でない限り、ニッキーを使用することはお勧めできません。



トップレベルドメインは、好みに応じて選択できます（co、io、さまざまな国の特定のドメイン）。唯一のポイント：多くの人がスパムや詐欺師に関連する.infoを避ける必要があります。



ホスティング



ポートフォリオサイトは通常静的であるため、サーバーに問題は発生しません。静的サイトをホストするためのサービスは多数ありますが、その中でComoはVercel、 Netlify、 Github Pages、 Surgeを強調しています 。



*



明確にするための理論に加えて、Comoは詳細な分析を含むポートフォリオの2つの例を示しています。 1つ目は チャーリースミスのサイトです、Webからの典型的な平均的なサンプルに焦点を当てて、著者が自分で作成した架空の人物。2つ目は、IBMの学生でインターンのJulia Johnsonの サイトで、サブスクライバーから送信された他のユーザーを背景に、彼に最も心地よい印象を与えました。一方を他方と比較することにより、それらが推奨事項とどのように比較されるかを簡単に確認できます。







チャーリーのサイト-ひねりのない表現力のないデザイン、あなた自身についてのステレオタイプの物語、プロジェクトの簡潔で表面的な説明







ジュリアのサイト-より効果的なデザイン、成功した構造、あなた自身についての抑制されたが顔のない物語、ページをアニメーション化する多くの要素、各プロジェクトの詳細な説明