今まで皆様は何件くらいのポートフォリオを見たことがありますか？求人中に応募が来たら見てみる、くらいが普通であり、ましてや海外のポートフォリオを見る機会がある人は少ないのではないでしょうか。
皆が作ったポートフォリオに少しでもスポットライトが当たるようにと、2年ほど前にまとめサイト現在のPortfilioHubを立ち上げ、今では世界各国のポートフォリオサイト５０００件のデータが集まりました。その中でGithubスター数で上位にランクインするポートフォリオ達のクオリティは凄まじく、その中から私的トップ１１を紹介したいと思います。
- 🇬🇧イギリス @albinotonnina
- 🇵🇹ポルトガル @sandrina-p
- 🇮🇳インド @ashutosh1919
- 🇮🇳インド @parizval
- 🇺🇦ウクライナ @tbaltrushaitis
- 🇺🇸アメリカ @quangogage
- 🇫🇷フランス @MoOx
- 🇨🇦カナダ @H-Richard
- 🇦🇺オーストラリア @TheDen
- 🇨🇳中国 @elevenbeans
- 🇺🇸アメリカ @dukewan
スクロールで進行する全体アニメーション系
🇬🇧イギリス albinotonnina.com by @albinotonnina
スター数でも私としても迷わず1位にしたのがこちら。スクロールで進んでいくアニメーションは必見です。モバイルでもしっかりレイアウトが計算されています。
これは2020年バージョンですが、前のバージョンも同レベルで凄まじく、ウェブが残っていれば掲載して2位にしたいクオリティです。
🇵🇹ポルトガル www.sandrina-p.net by @sandrina-p
スクロールで進行するアニメーション。モバイルでも専用のアニメーションが再設計されています。
定番スタイル
🇮🇳インド ashutoshhathidara.com by @ashutosh1919
手書きサインとスクロールで横から入ってくる要素のアニメーションがカッコいいです。
凝ってるポートフォリオサイトほど１ページ構成が多いですが、こちらは複数ページ構成です。モバイルもちゃんと動きます。
🇮🇳インド parizval.github.io by @parizval
スターこそ少ないですが、個人的にアニメーションの作り込みの深さと、本来のポートフォリオの目的としての情報量などではベストな作品だと思います。ですが私のモバイルだと若干レイアウトがズレてしまっているのが残念。PC推奨です。
🇺🇦ウクライナ cv.gsm-center.com.ua by @tbaltrushaitis
こちらは是非モバイルでもご覧頂きたいです。一定レベル以上になると単なるレスポンシブではなくモバイル専用に再設計されるケースが多いですが、こちらはモバイルの方が完成度が高いです。
🇺🇸アメリカ gagehenderson.com by @quangogage
モバイルがネイティブのレスポンシブを活用しているような印象ですが、どちらでもしっかりアニメーションが効いています。
🇫🇷フランス moox.io by @MoOx
パッと見た感じ一般的なポートフォリオに見えますが、3D表示の3台のiPhoneは画像ではなく、それぞれリンクが貼られておりに、スクロールで3D上で回転します。
ネタ系
🇨🇦カナダ h-richard.com by @H-Richard
グーグルです。グーグルネタ自体は珍しくないですが、検索結果のレイアウトまで作り込んでます。検索結果だけでなく、Image等のタブ毎まで存在しており、すごいです。モバイルも本物と見紛うほど完璧なレイアウトです。
🇦🇺オーストラリア theden.sh by @TheDen
ただの緑ターミナル系かと思いきや、ドラッグで各テーブルが動きます！よく見ると古いターミナルを思わせる画面のさざ波や時々起こる色あせ、モノクロ化などエフェクトへの拘りが分かりますね。拘ることが目的化したかのような様相。モバイルはコンテンツが減ってるぽくPC推奨です。
🇨🇳中国 elevenbeans.github.io/resumeX by @elevenbeans
iPhone上のメッセンジャーでのチャット形式。中国語で分かりませんが、画像なども返答で帰ってきます。モバイルでも同じです。
🇺🇸アメリカ 1mhz.me by @dukewan
マリオです。動きます。指示通り方向キーで左右に、スペースでジャンプして箱を叩けばポートフォリオとしてのコンテンツが表示されます。モバイルでは動きませんでしたので、PC推奨
おわりに
いかがでしたでしょうか。特にこれからポートフォリオを作ろうとしている方々の参考になれれば幸いです。
気に入った又は参考になったポートフォリオがあれば、レポジトリにスターでフィードバックをあげましょう。素敵なポートフォリオがもっとフォーカスされる世界になれば嬉しいです。
PortfolioHubへの参加はレポジトリをgithubで公開し、スクレイピングを希望するURLを貼り、トピックに#portfolio-websiteを貼り付けるだけです。数日以内にクローリングされます。日本人ポートフォリオはまだ少ないので皆様奮ってご参加ください。
ご一読ありがとうございました。
参考文献
- スター用のバッジ作成 https://qiita.com/zizi4n5/items/c5f0013236fd055c3e02
- 掲載しませんでしたが日本人ポートフォリオの参考に https://qiita.com/turmericN/items/37c3fbe00ee6bbc7e201