どうもすわんです。
今回は、クラウドソーシングや副業で仕事を受注するために、ポートフォリオサイトを作成しました。
割とさくっと作ったので、少しずつ改修していく予定です。
今回作ったポートフォリオサイト
今回新たにサーバーを借りることも考えましたが、お金がかからないのとGithubで簡単に管理できるGithub Pagesを使いました。
デザイン経験がないため事前にデザインを作成せず、コーディングしながら適当に考えました。
一般的にはウケが悪いかもしれませんが、ダークっぽい感じのイメージで全体的にマークアップしていきました。
また、モバイル対応も必須なので今回はPCソースを先に作成して、レスポンシブにしました。
ブレークポイントは1つだけ設けて、横幅767pxで分けました。
使用技術、ツール
- HTML/CSS
- JavaScript, jQuery
- npm
- Github Pages
jQueryとかその他のJSのライブラリはCDNを使わずに、npmを使ってインストールしたものを使用することにしました。
ちなみに、Github Pagesではnpmでインストールしたライブラリが格納されているnode_modules配下をデフォルトで無視しちゃうらしく、該当のフォルダを見にいってくれません。
なぜかというと、Github PagesではJekyllという静的サイトジェネレータを使っており、そのJekyllがnode_module配下を無視するらしいです。
(参考)
なので、Jekyllを使用しないようにするには、ルートディレクトリに.nojekyllという空のファイルを作成して自分のリポジトリにPushしてやればいいらしいです。
詳しくはこちらの公式ドキュメントにもやり方が載っています。
ページ構成
- PROFILE
- SKILLS
- WORKS
- LINKS
- CONTACT
現時点で、どのページも内容は充実してはいませんが、枠組みは作成したのでこれから充実させていこうと思っています。
また、LINKSページは他の方のポートフォリオサイトでは無いかなーと思うのですが、
これは自分がエンジニアとして活動していく中で、これから関わっていく方達のリンクの輪ができればいいなーと思ってこのページを作成しました。
デザイン
デザイン経験が無いことは先述しましたが、分からないなりに自分でこうしたいなっていうイメージはありました。
- カジュアル
- スキルバーを設ける
- 上下にスライドせずに1ページにおさめる
以降ではページを作っていく上で考えたことを書いていきます。
レスポンシブ
これも先述しましたがスマホ対応は最低限でも今の時代しなければいけないので、PC、スマホ別ソースにすることも考えましたが、工数が少なく済むため今回はレスポンシブにしました。
PC、スマホ両者で大きく変わるわけではありませんが、スマホにはハンバーガーメニューを設けてページをすっきり見せるようにしました。
フォント
ポートフォリオサイトは、ナチュラルっぽいイメージのサイトが多いようなイメージがありましたが、ぼくはカジュアルな感じにしたかったので、WEBフォントはたくさん見ました。
自分のイメージに合う良さげなGoogleのWEBフォントがあったのでそれを使いました。
このフォントのおかげで若干昔のDisneyのような風合いが生まれました。
アイコン
グローバルメニューのTwitter, Github, WordPressのアイコンには定番のFontAwesomeを使用しました。
スキルページの各言語やフレームワークのアイコンはdeviconを使ってみました。
主要な言語、フレームワーク、ツールなどのアイコンは一通り揃っているのでかなりおすすめです。
jQueryのプラグイン
Worksページの作品画像をクリックすると画像が拡大して表示されます。
ページを有効活用するのに便利そうなので、使ってみました。
公式サイトが見られなくなっていたので、上記のリンクはGithubのリポジトリです。
Skillsページのスライドを作るために使用しました。
スキル説明が不足してますが、今後充実させていきたいと思います。
というわけで成果物の報告でした！
