Ryotan's Portfolio

Ryotan's Portfolio(このサイト)

2025-03-10

就活に役立つかと思い,ずっと気になっていたサイト制作に取りかかってみました! 見やすいこと・手軽に実装できること・簡単にビルドできることの3点を意識しました.

Source Code

GitHubリポジトリ

Information

技術スタック

  • Jekyll
  • GitHub Pages
  • CSS
  • HTML

制作期間

開発~公開まで2日
以降,記事追加やアップデート

制作体制

ソロ


Story

サークルの友人たちのうち一部がポートフォリオサイトを持っており,羨ましいと思っていました. 私は作っていなかったため,就活などで実績をアピールしたいとき,サークルHPのリンクを共有するしかありませんでした. 卒業研究で静的サイトジェネレータ (MkDocs) を触ったこともあり,今が作り時だと思って着手し始めました.

私はWebエンジニアを目指しているわけではありませんので,サイトの実装に凝る必要はないと考えました. そこで,手軽に見やすいサイトを作成する方法を探ることとしました.

その結果,Jekyllテンプレートで生成したサイトをGitHub Pagesで公開することとしました. 私はHTMLに特別慣れているわけではありませんので,Markdown記法をメインで用いることのできるJekyll Theme Serial Programmerをお借りし,自分好みにカスタマイズしていきました. 大きな変更点として,まずはトップ画面にある記事カードにサムネイル画像を表示するようにしました. モダンなサイトには必須だと感じています. 次に,クリックできるのが記事タイトルのみで狭く押しにくかったため,カード要素全体をクリックできるようにしました. この考え方は,研究室で学んだフィッツの法則に基づくものです. 他にも細かな変更を加え,見やすさや自分らしさをプラスしていきました.

なかなかモダンなデザインに仕上がったのではないでしょうか?

最後までお読みいただきありがとうございます!