frezledzです。新しいポートフォリオ用のウェブサイトを作ってみました。
ポートフォリオ自体は今まで何度か作ってきたのですが、正直言ってゴミでした。今度こそ使い物になるウェブサイトを作ってここに自分が作った作品をまとめる、そのために作りました。

このサイトの運用方法

主に作品紹介をするところとして使うつもりです。過去の作品も含めてですね。あくまで紹介なのでここに作品をアップロードしたりはしません。
ブログとしても使うつもりです。Noteとの併用で行こうと思います。

前のサイトの何がダメだったのか？

生のJavascriptで無理やり作っていた

もちろん玄人プログラマーなら生のjavascriptで全部作るのはアリです。ただ私はそんなんじゃ全くありません。それなのに、フレームワークを使うこと嫌って無理やり実装していました。Jqueryも使ってないです。しかもそれでコードの使いまわし等気にしてウェブサイトが崩壊していましたね。

レスポンシブになっていない

今どき、ウェブサイトなんてスマホで見る人が大多数です。それにも関わらずPC専用ページになっていました。これはダメですね。

記事が書きづらかった

ページ一つごとにHTML、CSS、Javascriptを毎回書く必要がありました。C++書いてる自分がそれでも十分楽だろって叫んでいますが気軽にブログを書くにしては面倒臭いですね。

謎に重い

アニメーションをJavascriptで実装していたのでシンプルな割に重いです。馬鹿なんですかね。CSS使えよって言いたいです。

改善した点

フレームワークを使った

React+Next.jsでこのサイトは作られています。使ったことがなかったので一週間程勉強に時間を割きました。JSX形式が非常に使いやすいです。使いまわしだったり、インタラクティブな要素をシンプルに実装できるので書いてて楽しかったですね。最初の方はコピペばっかりでしたが今なら自分でそこそこ書ける程度にはなったと思います。

Markdownで記事が書けるようになった

HTML、CSS、Javascript毎回書くのと比べたら圧倒的に楽ですね。ReactMarkdownを使っています。RemarkgfmとRehyperawをプラグインとして入れているので、シンプルながら自由度もそこそこ高いです。ただ、Rehypeに関しては今のところまだ調整が必要っぽいですね。あまり思い通りに動いてくれません。

レスポンシブになった

Tailwind CSSを使って簡単にCSSをかけるようにしました。レスポンシブサイトの作成がしやすいです。ダークモードにも簡単に対応できました。

シンプルにした

謎のこだわりを捨ててシンプルな見た目にしました。

こだわった点

Typescriptを使う

これに関してはこだわるというかこっちじゃないと不安ですね。Typescript、C++をメインで書いている自分が今更型のない言語になんて戻れないです。まぁ、簡単な用途ならJavascriptも使うのですが。

軽いアニメーションも追加した

軽いアニメーションです。こだわりを捨てるとはいえこれぐらいは欲しいですね。

タグ機能っぽいものを設けた

本来の用途はプロジェクト紹介とブログを見分けられるようにすることなのですが、他にタグを追加できるのも悪くないでしょう。

改善したい点

言語切り替え機能を設けたいですね。記事を二言語で書く手間も一緒についてきますが、悪いことではないでしょう。あとは検索機能が少し貧弱なのでそれも何とかした方がいい気がします...
テーマ切り替えボタンは正直いらないと思っています。ダークモードユーザーがテーマを切り替える需要があるとは思えないですし。どうしても変えたいならブラウザの設定から変えてくれよな。