ポートフォリオを新しくしました
ポートフォリオを新しくしました！
以前作成していたポートフォリオから、新しくNextjs版のポートフォリオを作成しました。
以前のVueベースのQuasar版から、Nextjsへ移行した理由としてSSRやOGPなどの対応がしやすいことがありました。以前からSNSを簡単に共有できるようにするために短縮リンクの設定を作っていたのですが、SPAだと別でOGP用のサーバーが必要だったり、botとアクセスを分ける必要があり、OGPの設定がしにくかったためNextjsへ移行しました。
移行の方法としては、過去のQuasarで作成したコードをAIに読み込ませ、機能ごとにAIでNextjs版へリファクタリングをしたため1日で移行できました。
また、簡単に機能追加をすることができたため、いくつか追加で機能を作りました。
こだわりポイント
ローディングアニメーション
サイトへアクセスしたときに、伝えたいメッセージや、単純にワクワクするアニメーションを考えました。最近考えている「面白いを、カタチに。」というコンセプトのアニメーションを作成しました（AIが）
Activity Recordの選択ボタン
これまでも、Activity Recordはあったのですが、見にくかったため、新たにタグ分けをできるようにしました。これによって、職歴や受賞歴など知りたい情報に辿り着きやすくなりました。
またこの一覧のCMSとしてはスプレットシートを使っています。
自動で切り替わる多言語対応
ブラウザの言語設定によって自動で言語が切り替わるようにしています。これによって海外の人に見ていただいたときにもGoogle翻訳を使わなくても良くなります。
また、Queryでも試すことができるためお試しください！
https://yama-code.dev/?lang=en
https://yama-code.dev/?lang=ja
短縮リンク機能
元々、ポートフォリオを作ったきっかけとしては、自分のSNSのIDが散らばっている問題があり、その解決のために作成していました。
自分の覚えやすいslugで共有しやすい短縮リンク機能を作っています。
例えば、X(Twitter)などは以下の短縮リンクを作っています。
付随して、これを誰でも使えるようにしたuLaneというサービスを作りました。まだ公表していないですがよかったらぜひ！
NotionをCMSとしたブログ機能
最後に、色々投稿するところはありますが雑に書き溜めれる箇所として、ブログページを作りました。
URLを知っている人だけが見れるページなど、作っています。(testページには一覧にはないけど直リンクはみれる)
https://yama-code.dev/blog/test
いつか役に立つはず…
思いついたものをどんどん追加していくかもしれないです！よろしくお願いいたします！