👏
サイトを書き直した
サイトを書き直しました！なんか一か月前に書き直したけど、個人的に気に入ってなかったから再度書き直しました！
製作期間
なんと三日です。
一日目は大本を完成、二日目はページ作成、三日目はデザイン調整って感じです！
ホスティング
みんな大好きCloudFlare Pagesを使わせてもらっています。(個人差あります)
使用しているフレームワーク
Next.jsをメインで利用しています。cssフレームワークにtailwindcssを使わせていただいています。
その他のライブラリ
ほかは以下のライブラリを利用しています。
- rss-parser (zenn.dev様にある記事を取得して、記事一覧に乗せるために使わせていただきました。)
- clsx (classNameの管理)
- prettier (コードのフォーマット)
ルーティング
最近いろんなサイトのコードを見て気が付いたのはルーティンググループをうまく活用している点だ！
フォルダー名で(folderName)するだけで、グループにすることが可能、今回は以下の構成にしています。
.
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ ├── (pages)
│ │ ├── articles
│ │ │ └── page.tsx
│ │ ├── home
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ └── works
│ │ └── page.tsx
│ └── page.tsx
├── components
│ ├── card.tsx
│ ├── footer.tsx
│ └── header
│ ├── icon.tsx
│ ├── index.tsx
│ └── menus.tsx
-
componentsフォルダーでおもによく使うUIを格納しています。 -
app/layout.tsxは最低限しかございません。 -
app/page.tsxはヘッダーを見せたくないので、layout.tsxからヘッダーを消しています。 -
app/(pages)/layout.tsxにヘッダーとか格納しています。
アニメーション
レスポンシブの際にメニューを表示するところで使わせていただいています。
しかしぼくは初心者ですから、tail-anistaというサービスをとある記事で見つけたため使わせていただきました。
最後に
デザインを今まで以上に頑張ったためいろんな人に見てもらいたいです！
ではまたどこかでお会いしましょう！
参考
Discussion