ポートフォリオを作りました。

7004 ワード
ポートフォリオ ポエム ポエム テキストリンク

初めに

タイトルにある通りポートフォリオを作りました。
何を考えて作ったのか、どういうポイントに着目したかを書いていきたいと思います。

ポートフォリオ

作成したものは以下になります。
今後も定期的にアップデートしていければと思います。
https://kurramkurram.github.io/

背景

作成した背景としては本業では専門外のWeb系の勉強をしてみようかなと思い、
Udemyの講義を受けた後にアウトプットするためとなります。
いくつかのサイトのデザインや内容を勝手に参考にさせていただきました。
ありがとうございました。

使用した技術

・html/css
・JavaScript(jQuery)
・Webpack

上記の言語・フレームワークを使用しました。
複数個所でMaterial Designを活用したかったのでそのチュートリアルに沿ってWebpackを使用しています。

デザイン大枠

全体的に見易さ重視でシンプルなデザイン・フォントを選択しています。
Material Designで操作性の高いデザインを利用可能ですので、積極的に利用しました。
以下、ポートフォリオの項目別にまとめていきます。

Carrier

業務上のことなのであまり詳細には書けず、
また長期的なプロジェクトに携わっていたので、
変遷も少ないためコンテンツ不足感が否めない感じが出ています。

Skill

エンジニアとして一番重要なところではないでしょうか。
成果物を見せることができるといいのですが、
残念なことに商用リリースをしているものがなかったので
技術スタックをレベル感と年数で記載+GitHubのアカウントへ飛べるようにしました。

about

静的な情報とポートフォリオの説明でどういう人物なのかを記載しました。
企業サイトの会社概要をイメージしています。

Contact

Twitter, Qiita, noteに簡単に飛べるようにしました。
それぞれアイコンを利用させていただいています。
アイコンの利用ポリシーも確認する必要がありますね。
Twitter Brand toolkit
Qiita Support
note help center

その他

・サムネイル対応しています。

<head>
    <meta property="og:title" content="kurram portfolio">
    <meta property="og:type" content="profile">
    <meta property="og:url" content="https://kurramkurram.github.io/">
    <meta property="og:image" content="https://kurramkurram.github.io/images/icon.jpg" >
    <meta property="og:description" content="kurramのポートフォリオです">   
</head>

・Twitter Card利用してTwitterに対応しています。
Twitter Cardが正しく適用できているかはCard Validatorを用いて確認することができます。

<head>
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@kurram_kurram">
</head>

・フォントは見やすさ重視でSegoe UIを指定しています。
・各種アイコンはGoogle FontのMaterial Iconsを利用しています。

デプロイ

GitHub Pagesを利用して作成しました。
ファイルの依存関係を指定する際にGitHubのURL+リポジトリ名+ファイルパスとの記載を見かけましたが、
相対パスでないとできませんでした。
GitHub Pagesの仕様の変更でしょうか。

参考文献

Material Design
Naoto Suzuki's portfolio
ポートフォリオ
GitHub Logos and Usage
Twitter Brand toolkit
Qiita Support
note help center
Twitter Card
Card Validator
Material Icons
GitHub Pages