簡単なのにかっこいい!ポートフォリオサイトが作成できる、HTMLベースのテンプレート -Dev Portfolio Template

自分の職歴や関わったプロジェクト、スキルなどをプレゼンするポートフォリオを0から作ろうとすると面倒かもしれません。ポートフォリオに必要なコンテンツをコンポーネント化し、追加や削除も簡単に行えるHTMLベースのテンプレートを紹介します。

ポートフォリオサイトが作成できる、HTMLベースのテンプレート

Dev Portfolio Template -GitHub

Dev Portfolio Templateの特徴

  • Gulp対応
  • Sass対応
  • レスポンシブ対応
  • グリッドシステムはBootstrap
  • カスタマイズも簡単

デザインは縦長ページで、ポートフォリオとしてうるさくない程度の気持ちいいインタラクションが備えられています。

デモのキャプチャ

ポートフォリオのデモページ

Dev Portfolio Templateのデモ

テンプレートにはポートフォリオに必要なさまざまなコンテンツが用意されており、モジュール式なので簡単に移動・削除が行えます。

デモのキャプチャ

ポートフォリオのデモページ

大きなヘッダ画像、ナビゲーションとアクションボタンのシンプルな構成です。スクロールを促すアイコンは、細かい演出ですね。

デモのキャプチャ

About

自己紹介のコンポーネントは、テキストベースのシンプルなデザインです。

デモのキャプチャ

Experience

職歴のコンポーネントは年表のデザインで、スマホで表示するとレイアウトが変更されます。

デモのキャプチャ

Education

学歴のコンポーネントは職歴とはデザインが異なり、非常にシンプルです。

デモのキャプチャ

Projects

プロジェクトのコンポーネントはカード状のデザインです。テキストが中央揃えになっているので、左寄せにした方が読みやすいかもしれません。

デモのキャプチャ

SkillsとContact

スキルはタグを使ったデザインで、シンプルなコンタクトフォームも用意されています。

sponsors

top of page

©2018 coliss