大学2年になり、そろそろ自分もポートフォリオ作らないとな…と焦ったことがきっかけです。

それまでは競技プログラミングをずっとやっていたのでWebのほうは全くといっていいほど知識がなく、Reactってなに？Nextってなに？を死ぬほど繰り返し気づけば秋になってしまいました。

そこで先輩に相談して、とりあえずHTMLとCSSとJavaScriptで完成させて、あとからリニューアルしたり機能を増やしたりする方針にしました。

(なんとなく)HTML、CSSで作るプログラミングサークルの人間って恥ずかしいのでは…2年にもなってみっともないのでは…？と悩んでいたので、先輩に相談して吹っ切れられたのはよかったなと思っています。

実装から公開まで約2週間でした。

ちょうど大学が学園祭で1週間お休みだったので、有効活用できました。

デザインだけは夏休み前にFigmaでやっていたので、それが無ければもう少しかかってたかな、とは思います。

前述の通り、デザインはFigmaで作成しました。

春にデザインを担当したプロジェクトがあったので、それの反省点を踏まえました。

夜明けをテーマにして、シックな感じにまとめたいなと思っていたので、とりあえず形になってくれて良かったです。

背景色をグラデーションにしているのですが、下の方がちょっと明るすぎるかなと思っていて、そこはまた微調整します。

フォントは「Yu Gothic」を使用しました。これは春のプロジェクトの方でも使っていて、自分の定番になりつつあるフォントです。

侮れないな…と思いました。

HTMLで書くのダサいとか言っておきながらHTMLの知識すらなかったので、色々サイトを調べて書き方を学びました。

DivタグやClassのCSSとの兼ね合いがなかなか難しかったです。

多分現時点でも中身がごちゃごちゃしていて有識者は眉を顰めるレベルだと思います。

Classってなに？というところから始まったので、自分でCSS書いてみてその必要性を学ぶことができました。

これが一番楽しかったです。CSSはHTMLと違って、自分の好きなようにデザインできるので、自分の好みを反映させることができました。

ただ、CSSの書き方がわからなかったので、一から勉強しました。余白の取り方が難しかったです。

CSSの設計を学ぶことで、HTMLとCSSの兼ね合いがわかり、HTMLの書き方も変わっていきました。

ちょっと間違えたなと思ったことは、CSSファイルを一つにまとめてしまったことです…。あとで直します。

あと、スマホ版にまだ対応できていないのと、PC版も細かいレスポンシブデザインがまだできていないので、見つけ次第直していく予定です。

JavaScriptは初めて触りました。トップページのカルーセルを実装しました。

しかし、今ではあまり使われないjQueryを使って実装してしまったので、とりあえず素のJavaScriptで書き直すことを目標にしています。

公開はCloudflare Pagesを使って行いました。GitHubのリポジトリを連携させるだけで簡単に公開できました。

今やっている個人開発でReactやHonoを使っているので、それがひと段落したらこのサイトをReactでリニューアルすることを考えています。

先輩はAstroで作っているという話を聞いたので、そっちでリニューアルするかもしれないです。

先述したスマホ版の対応も行いたいです。

今はブログ記事の追加とか全部手動()なので、関数を使って自動化したいです。