HTMLとCSSだけで動くポートフォリオ作ってみた。

こんにちは！　エンジニアの奥井です。
エンジニア7年目に入って、ポートフォリオの一つでもあったほうがいいだろう、とポートフォリオを作ってみました。

ただ、普通にポートフォリオを作っただけでは面白くない。
そこで、JSを使わずにポートフォリオを作ってみました！　
え、それJS抜きで作れるの？　という仕掛けをいっぱい盛り込んでみたので、ぜひ見てみてください！

サイトのコンセプト

https://ayuta-o.sakura.ne.jp/
↑早速ですが、こちらから僕のポートフォリオを見ることができます！　

コンセプトはやりたいことをとにかくやる、ということ。
それとデザインセンスは皆無なので（デザイナーさんいつもありがとうございます）、好きな色である緑を基調にして、シンプルに作ってみました。
次からいろいろな仕掛けをご覧いただきたいと思います。

カルーセル

まずはMVのところから。カルーセルをCSSで作ってみました。
参考にさせていただいたのが、ICS MEDIA様の記事。
JavaScript不要! HTMLとCSSでつくるカルーセルUI
ページネーションをliタグの::scroll-markerで作るアイディアはハッとさせられました。

タブ切り替え

続いてはタブ切り替え。
こちらはChatGPT先生が教えてくれました。
inputがチェックされているかの判定を使い、同じidのdivを表示させます。

モーダル

そして、その中に入っているモーダル。
こちらもソースはChatGPT。
ボタンにアンカーリンクを仕込み、:targetがついた時（リンクで飛ぶとつきます）に、モーダルを表示させるようにします。

ハンバーガーメニュー

最後はハンバーガーメニュー。SPの時だけ表示されています。
こちらはDMM WEBCAMP様の記事を参考にさせていただいています。
https://web-camp.io/magazine/archives/88361/
タブ切り替えと同様inputがチェックされているかを判定します。
メニューをposition＋left:-100%で隠しておき、チェックされるとtransform: translate;で移動させます。