エンジニアのポートフォリオサイト作ってみた

Posted at 2025-03-07

はじめに

はじめまして。神奈川県でSEをしているoceantakoです。
自身の経験をまとめるためのポートフォリオを作ってみました。
アウトプットとして作ったものの紹介をしたいと思います。

自身の経験/技術をアピールするための静的ポートフォリオサイトです。

bootstrap
javascript(jQuery)
nginx
github
sakura vps

bootstrap,jQueryを用いてフロントのみの静的サイトを作成し、
github経由でsakura vpsにデプロイしました。

デザインの大枠はbootstrapのテンプレートを使用しました。
下記から無料で使いやすそうなものを選びました。
https://startbootstrap.com/

テンプレートを元にbootstrapの部品を使用して、自分なりにカスタマイズしました。

1. サーバはsakuravpsを使用しました。
sakuravpsを選んだ理由は、下記の二点です。
・従量課金制ではないので、値段がわかりやすく安心。
・日本製なので使いやすい。（気がした）

2. OSはRocky Linuxを使用しました。
選んだ理由はなんとなく名前がかっこよかったからです。
自分が使用したことがあるOSの中では、ubuntuなどの方が使いやすい気がしました。

3. webサーバはnginxを使用しました。
nginx.confにて、/portfolio/へのアクセスでindexページを返却するように設定。

location /portfolio/ {
    root /home/rocky/html/;
    index index2.html;
}

フロントだけの静的サイトなので、見た目には結構こだわりました。
どんな端末でもきれいに表示されるようなレスポンシブデザインを意識して作りました。
bootstrapの部品はもともとレスポンシブなので、携帯で見てもある程度はきれいに表示されますが、細かいところの調整は必要でしたので調整しました。

bootstrapテンプレートをそのまま使用しただけのポートフォリオではなく、独自性があるサイトにしたかったので、タイトル横のボタン押下で背景のアニメーションが開始するようにしてみました。

↓緑のボタンを押すと、木が成長するようなアニメーションがスタートします

（ボタンの色によってアニメーションの種類は変わります。）

アニメーションはchatgptに作ってもらいました。
楽しくなって色々なアニメーションを作ってもらいました↓
https://github.com/oceantako/chatgpt-canvas

作成期間は5日ほどでしたが、bootstrapとchatgptを使って結構かっこいいページが作れました！
転職活動の際に、職務経歴書に貼ってみたのですが、面接中にサイトについて触れていただけることも多くて、面接の話題にもなりました。