就活のためにポートフォリオを作る
はじめに
ポートフォリオ作成に時間をかけすぎたら本末転倒なので、サクッとテンプレートを探す(ライセンスをよく確認しましょう)
startbootstrap.com
などが王道でしょうか
ふつうに bootstrap portfolio templateとかで検索すると様々ヒットします
ライセンスについて
私が使用したテンプレートはMITライセンスでした
以下の記事によれば、公開したソースコード内にMITライセンスの記述を行えば良いとのこと 公開ライセンスの話 - Qiita
改変
テンプレートそのままだと面白くないので、+α追加していきます
はてなブログカードのembed
はてなブログで使用されている埋め込み型のカードを使いたいときには以下ソースコードの url hereの部分に埋め込みたいURLを入れるだけで実現できます。
<iframe style="width:100%;height:190px;max-width:680px;" title="%title%" src="url here" frameborder="0" scrolling="no"> <a href="%url%">%title%</a> </iframe>
スキルセットのレーティング
www.cssscript.com 私はこれにプラスでとFont-Awesome iconとタイトルをつけました。
… <div class="contentContainer"> <h3 class=mr-3><i class="card-title fas fa-code mr-3"></i>スキル</h3> …
イメージギャラリー
人柄をみるような会社では、趣味などを聞いて来る場合があると聞いたので、最後のページに自分の趣味である写真のギャラリーをのせました。
参考にしたギャラリーのベースは以下です
startbootstrap.com
そしてこの画像をクリックしたときに拡大するように、lightboxを導入しました。
導入方法から使い方まで本家ページにあります。
lokeshdhakar.com
ギャラリーのaタグの部分に必要項目追加します。
<a href="img/bike1.jpg" data-lightbox="pic" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="img/bike1.jpg" alt=""> </a>
これで、クリック時の動作がリッチになりました。
お役立ちリンク
次回
次はこれをFirebase Hostingを使ってデプロイしたいと思います。
また、せっかくなのでGitHub Actionsを使って、デプロイの自動化もやってみようと思ってます。
追記
記事公開しました! tmyoda.hatenablog.com