クラウドエンジニアのノート

情報技術系全般,自分用メモを公開してます。

就活のためにポートフォリオを作る

はじめに

ポートフォリオ作成に時間をかけすぎたら本末転倒なので、サクッとテンプレートを探す(ライセンスをよく確認しましょう) 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