簡単なのにかっこいい!ポートフォリオサイトが作成できる、HTMLベースのテンプレート -Dev Portfolio Template
Post on:2017年3月23日
自分の職歴や関わったプロジェクト、スキルなどをプレゼンするポートフォリオを0から作ろうとすると面倒かもしれません。ポートフォリオに必要なコンテンツをコンポーネント化し、追加や削除も簡単に行えるHTMLベースのテンプレートを紹介します。
![ポートフォリオサイトが作成できる、HTMLベースのテンプレート](http://coliss.com/wp-content/uploads-201702/20170323001.png)
Dev Portfolio Template -GitHub
Dev Portfolio Templateの特徴
- Gulp対応
- Sass対応
- レスポンシブ対応
- グリッドシステムはBootstrap
- カスタマイズも簡単
デザインは縦長ページで、ポートフォリオとしてうるさくない程度の気持ちいいインタラクションが備えられています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017032301.png)
Dev Portfolio Templateのデモ
テンプレートにはポートフォリオに必要なさまざまなコンテンツが用意されており、モジュール式なので簡単に移動・削除が行えます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017032302-01.png)
大きなヘッダ画像、ナビゲーションとアクションボタンのシンプルな構成です。スクロールを促すアイコンは、細かい演出ですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017032302-02.png)
自己紹介のコンポーネントは、テキストベースのシンプルなデザインです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017032302-03.png)
職歴のコンポーネントは年表のデザインで、スマホで表示するとレイアウトが変更されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017032302-04.png)
学歴のコンポーネントは職歴とはデザインが異なり、非常にシンプルです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017032302-05.png)
プロジェクトのコンポーネントはカード状のデザインです。テキストが中央揃えになっているので、左寄せにした方が読みやすいかもしれません。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017032302-06.png)
SkillsとContact
スキルはタグを使ったデザインで、シンプルなコンタクトフォームも用意されています。
sponsors