この連載は「1枚の自己紹介ページ」を作って、GitHub Pagesで公開し、ポートフォリオとして“見せられる状態”にするまでの手順をまとめています。
各回は短く、手を動かせる内容だけに絞っています。
デモ / リポジトリ（公開後に差し替えOK）
- デモ（GitHub Pages）：
https://<username>.github.io/<repo>/ - リポジトリ（GitHub）：
https://github.com/<username>/<repo>
この連載でできるようになること
- HTML/CSSで 1枚の自己紹介ページ を作れる
- スキル/作品/経歴/実績/連絡先まで ポートフォリオの定番構成 を揃えられる
- GitHub Pagesで公開し、URLで共有できる
目次（02〜18）
基本を作る（公開まで）
-
02 HTML/CSSで1枚ページを作ってGitHub Pagesで公開する最短手順
https://qiita.com/ko_nagai_0801/items/8b7c6721fe3485e28866
中身を足す（ポートフォリオらしくする）
-
03 自己紹介ページにスキル一覧を追加する（カード/バッジ）
https://qiita.com/ko_nagai_0801/items/f60e13c67dd36ccceaef -
04 自己紹介ページに作品紹介を追加する（画像＋説明＋リンク）
https://qiita.com/ko_nagai_0801/items/42adb3fa1f92001d7100 -
05 自己紹介ページに経歴タイムラインを追加する（縦線でそれっぽく）
https://qiita.com/ko_nagai_0801/items/903c9911a42d4e2ea799 -
06 自己紹介ページに実績リストを追加する（資格・受賞・参加）
https://qiita.com/ko_nagai_0801/items/c0fff8687a5bc4f9e67c -
07 自己紹介ページに連絡先を追加する（フォーム or CTA）
https://qiita.com/ko_nagai_0801/items/0728ba92aea68d34ba85 -
08 自己紹介ページにフッター/SNSまとめを追加する
https://qiita.com/ko_nagai_0801/items/bc964207dad0c8ff10a8
見た目と使いやすさを整える
-
09 自己紹介ページの見た目を整える（配色・余白・タイポグラフィ）
https://qiita.com/ko_nagai_0801/items/a1ff303ec29d9c2ace8f -
10 自己紹介ページをスマホで見やすくする（レスポンシブ調整）
https://qiita.com/ko_nagai_0801/items/fac23b3f21ee9e306666 -
11 自己紹介ページを軽くする（画像圧縮・読み込みの基本）
https://qiita.com/ko_nagai_0801/items/a8760bc0dab986312566
伝え方を強くする（文章・信頼感）
-
12 ポートフォリオの信頼感を上げる実績の書き方（数字で語る）
https://qiita.com/ko_nagai_0801/items/bbcda56565205771e8a3 -
13 1分で伝わる自己紹介文テンプレ（ポートフォリオ用）
https://qiita.com/ko_nagai_0801/items/84cb7da992ba467dd237 -
14 技術スタックの見せ方（アイコン/文章の使い分け）
https://qiita.com/ko_nagai_0801/items/a73f743935fdc35201fb -
15 成果物の見せ方（サムネ・説明文・リンクの3点セット）
https://qiita.com/ko_nagai_0801/items/7048084de73a2b6250c9 -
16 ポートフォリオの導線改善（CTAと配置の型）
https://qiita.com/ko_nagai_0801/items/16e5c273e428f96e3e15 -
17 作品の改善ログの書き方（Before/Afterで伝える）
https://qiita.com/ko_nagai_0801/items/5f97545a9ec4077827db -
18 採用目線で見るポートフォリオのNG集（回避ポイント付き）
https://qiita.com/ko_nagai_0801/items/508f30debc947dedacfa
最短で進めたい人向け（おすすめ順）
迷ったらこの順でOKです。
- 02 → 04 → 07 → 09 → 10 → 11 → 18
（公開 → 作品 → 連絡 → 見た目 → スマホ → 軽量化 → NG回避）
次に読む
- HTML/CSSで1枚ページを作ってGitHub Pagesで公開する最短手順
https://qiita.com/ko_nagai_0801/items/8b7c6721fe3485e28866