Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio

Web制作者・デベロッパー向け、ポートフォリオ用のテンプレートを紹介します。

オープンソースで、HTML, CSS, JavaScript, Sassで実装されており、フレームワーク・ライブラリは必要ありません。自己紹介、スキル、プロジェクト、連絡先など、ポートフォリオに必要なコンテンツが用意されており、簡単にポートフォリオを用意できます。

Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio

Dopefolio -GitHub

Dopefolioは、デベロッパー向けポートフォリオ用のテンプレートです。

  • セットアップが簡単 💯
  • 商用でも無料 🥳
    GNU General Public License v3.0で、オープンソースです。
  • フレームワークは必要なし 🤘
  • ライブラリも必要なし 🙌
  • マルチページ 💎
  • レスポンシブ対応 🚀
  • 超高速で、SEO最適化 ⚡
  • Auditsのスコアも高得点 🎖️
Auditsのスコア

LighthouseによるAuditsのスコア

Dopefolioでどんなポートフォリオが実装できるかは、デモをご覧ください。

サイトのキャプチャ

Dopefolio デモページ

6つのセクションで構成されたシンプルなポートフォリオです。

  • Header: ロゴ、ナビゲーション
  • Home
  • About: 自己紹介、スキル
  • Projects: プロジェクト
  • Contact: お問い合わせフォーム
  • Footer: ソーシャルメディア
サイトのキャプチャ

About: デモページ

Projectsには、携わった複数のプロジェクトを掲載できます。

サイトのキャプチャ

Projects: デモページ

Contactにはフォームがありますが、ソーシャルメディアにしてもいいですね。
※フォームを使用する場合は、formspree.ioなどのフォーム送信機能が必要です。

サイトのキャプチャ

Contact: デモページ

ポートフォリオはテーマカラーを簡単に変更できます。

サイトのキャプチャ

カラーを変更のデモ

Dopefolioの使い方

コマンドラインから、Dopefolioのクローンを作成します。

実装やカスタマイズに使用するSassは、NPMでインストールします。

npm run compile:scssを実行したら、index.htmlを好きなブラウザで開いてください。

テーマカラーはsass/abstracts/_variables.scssに移動し、$themeClrPrimaryの値を好みのカラーに変更します。

カラー変更は、カラーを変更のデモでテストし、どのカラーが適しているかを確認できます。

sponsors

top of page

©2021 coliss