はじめに
この記事は S-Server Advent Calendar 2023 3日目の記事です。
初参加（？）ですので大目に見てくださいーよろしく
おまえだれ？
あきかきです。一応 SDev Pro です。よろしくね。
ここでは私が作った DevHP と HP についてのポエム書きます。
（自然係鯖のみんななら最後まで見てくれるよね！にこにこ）
さいとについて
ここでは私が使用したフレームワーク、工夫した点などをいろいろ書いていくよ。
shizen.aknet.tech
- 使用フレームワーク
- Next.js v13.5.4 (App Router)
- TailwindCSS
NextJSを使ったページの２作品めぐらいがこれです。
TailwindCSSでのスマホ対応やどうしたらいい感じの配置になるかなど
真剣に考えて作った真面目作でもあります。
- 工夫ポイント
-
画像がぷかぷかしてる
見てもらえればわかると思うんですけど、なんかぷかぷかしてませんか？
これはですね、画像置くと単調な感じで真面目な感じ？になってしまうのことがあるので
ぷかぷかさせて自由な感じ、そして青空の雲みたいな、そんなイメージで動かしてます。 -
12grid
そう、あのー開発者ツールとかで見てもらえればわかるんですけど、まさかの12gridで配置してます。
これは 某官公庁 リスペクトしました。（あそこまできれいにはならなかったけど、、、）
-
まさかのこれだけっていう。一応頭をひねったんですけど、、、（笑）
sdev.aknet.tech
- 使用フレームワーク
- Next.js v14.0.2 (App Router)
- NextUI v2
- GSAP
- VANTA.js (Three.js R134)
- TailwindCSS
はい。盛りだくさんですね。
結構かっこよく見せたかったのでいろいろもってみましたがどうでしょうか！
かっこよかったらうれしいよね
- 工夫ポイント
-
最初のところの斜めになってる S-Server-Developers
わたしね、これ自分で作っておいてなんですがちょっと結構気にいってるんですよ。
あのー、Developersが自由に作品を作るっていうことで自由な感じにしました。（？） -
背景
そう、これがVanta.jsで作れる3Dな感じの波！
人によってはCPUがうなり、GPUは発火、、みたいなことが起きちゃいそうですが、マットな感じの色に光が差し込まれてる感じが本当に大好き！！！！！！！！！！！
結局は自己満ってことです。おわり。 -
全体が青系で統一
Sdevは 某M 氏からの提案でダークな青系に統一することになったので私もそれに合わせて作ってみました。
これがね、印象をすぅぅぅぅぅぅっっっっっごくよくしてくれて、かっこいい感じが出てて本当に好きです。愛してる。 -
Worksページのギャラリー的何か
MembersページみたいにGridで配置してもよかったんですが、ちょっと物足りないなーと思ってGSAPを使ってみました。
動きはまぁちょっと難があるっぽいんですけど、、、
かっこいいのですべて解決です！
-
総評
Next.jsはいいぞ。
おわりに
わたしについては こことか こことか 見ていただいて、、、（宣伝）
次の4日目は黒板ちゃんの記事だね！楽しみだね！
じゃ！そのうちまたどこかで、、、