Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio
Post on:2021年10月6日
sponsors
Web制作者・デベロッパー向け、ポートフォリオ用のテンプレートを紹介します。
オープンソースで、HTML, CSS, JavaScript, Sassで実装されており、フレームワーク・ライブラリは必要ありません。自己紹介、スキル、プロジェクト、連絡先など、ポートフォリオに必要なコンテンツが用意されており、簡単にポートフォリオを用意できます。
Dopefolioは、デベロッパー向けポートフォリオ用のテンプレートです。
- セットアップが簡単 💯
- 商用でも無料 🥳
GNU General Public License v3.0で、オープンソースです。 - フレームワークは必要なし 🤘
- ライブラリも必要なし 🙌
- マルチページ 💎
- レスポンシブ対応 🚀
- 超高速で、SEO最適化 ⚡
- Auditsのスコアも高得点 🎖️
LighthouseによるAuditsのスコア
Dopefolioでどんなポートフォリオが実装できるかは、デモをご覧ください。
6つのセクションで構成されたシンプルなポートフォリオです。
- Header: ロゴ、ナビゲーション
- Home
- About: 自己紹介、スキル
- Projects: プロジェクト
- Contact: お問い合わせフォーム
- Footer: ソーシャルメディア
Projectsには、携わった複数のプロジェクトを掲載できます。
Contactにはフォームがありますが、ソーシャルメディアにしてもいいですね。
※フォームを使用する場合は、formspree.ioなどのフォーム送信機能が必要です。
ポートフォリオはテーマカラーを簡単に変更できます。
Dopefolioの使い方
コマンドラインから、Dopefolioのクローンを作成します。
|
1 2 3 4 5 6 7 8 |
# Clone this repository $ git clone https://github.com/rammcodes/dopefolio # Go into the repository $ cd dopefolio # Remove current origin repository $ git remote remove origin |
実装やカスタマイズに使用するSassは、NPMでインストールします。
|
1 2 3 4 5 |
# Install dependencies $ npm install # Listen to changes in CSS Preprocessor files ( SASS files ) $ npm run compile:scss |
npm run compile:scssを実行したら、index.htmlを好きなブラウザで開いてください。
テーマカラーはsass/abstracts/_variables.scssに移動し、$themeClrPrimaryの値を好みのカラーに変更します。
|
1 2 |
// Default value $themeClrPrimary: #0062b9; |
カラー変更は、カラーを変更のデモでテストし、どのカラーが適しているかを確認できます。
sponsors
