就活に役立つかと思い,ずっと気になっていたサイト制作に取りかかってみました! 見やすいこと・手軽に実装できること・簡単にビルドできることの3点を意識しました.
Source Code
Information
技術スタック
- Jekyll
- GitHub Pages
- CSS
- HTML
制作期間
開発~公開まで2日
以降,記事追加やアップデート
制作体制
ソロ
Story
サークルの友人たちのうち一部がポートフォリオサイトを持っており,羨ましいと思っていました. 私は作っていなかったため,就活などで実績をアピールしたいとき,サークルHPのリンクを共有するしかありませんでした. 卒業研究で静的サイトジェネレータ (MkDocs) を触ったこともあり,今が作り時だと思って着手し始めました.
私はWebエンジニアを目指しているわけではありませんので,サイトの実装に凝る必要はないと考えました. そこで,手軽に見やすいサイトを作成する方法を探ることとしました.
その結果,Jekyllテンプレートで生成したサイトをGitHub Pagesで公開することとしました. 私はHTMLに特別慣れているわけではありませんので,Markdown記法をメインで用いることのできるJekyll Theme Serial Programmerをお借りし,自分好みにカスタマイズしていきました. 大きな変更点として,まずはトップ画面にある記事カードにサムネイル画像を表示するようにしました. モダンなサイトには必須だと感じています. 次に,クリックできるのが記事タイトルのみで狭く押しにくかったため,カード要素全体をクリックできるようにしました. この考え方は,研究室で学んだフィッツの法則に基づくものです. 他にも細かな変更を加え,見やすさや自分らしさをプラスしていきました.
なかなかモダンなデザインに仕上がったのではないでしょうか?