はじめに
ポートフォリオと聞くとデザイナーさんをイメージしますが、僕も転職する際など見せれるものがあればいいなと思い、作成しました。
https://nsuzuki7713.github.io/portfolio/
![portfolio.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F226008%2Fc6d3e41e-4bba-5fe5-cdbf-85e83e7360e8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f91864a46a12442073ee724924c35419)
ただ、デザインスキルとかHTML/CSSも得意でない自分がどのように作成したかを書いておきます。
記載する内容
まずは他のエンジニアの方がどんなものを作成しているかを調べ、下記記事を見つけました。
カッコよかったのでかなり参考にさせていただきました。
エンジニアだけどポートフォリオサイト作ってみた
上記記事を参考にし、まずは記載する内容を決めました。
・ 自己紹介
・ 技術スキル
・ 成果物
・ 連絡先
テンプレートを決める
一からデザインをコーディングするのは時間も掛かるので、テンプレートから探します。
下記サイトで無料のテンプレートがあるのでこちらを使用させていただきました。
ただ、かなりポップで自分には合わない所もあるので細い所は修正します。
https://webdesigner-go.com/template/portfolio/
![Webデザイナー.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F226008%2Fbf4b4e3d-8003-a00f-5c9a-1e7b5750cd30.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fecfb26ff8328f57886c6cd4e8587a91)
コーディング
テンプレートをもとに自分好みにカスタマイズしていきました。(調べながら泥臭くやりました。)
テーブルとかはbootstrapを入れて調整しました。(一部cssが競合してデザインは崩れました。。)
アイコンはfontawesomeから探して使用しています。
https://fontawesome.com/
ホスティング
僕はgithub.ioを使用しました。gitに登録して、設定から公開すれば完了です。