tailwindcssライブラリを使ってHashnodeのトップページUIを作ってみました

こんにちわ。nap5です。


tailwindcssライブラリを使ってHashnodeのトップページUIを作ってみたので、紹介したいと思います。あまり作り込まない段階のスケルトン的なイメージでワークアラウンドしてみました。

実装している機能は以下です。

1. framer-motionによるページ遷移

2. ハンバーガーメニュー

   1. ハンディクロージング付き

3. react-menuを使ったハンディメニュー

4. zustandを使ったアクティブメニューの状態管理

5. レスポンシブ対応

デモサイトです。

Vite App

デモコードはGumroadに置いてみました。$10です。

hashnode top page clone demo using tailwindcss

ダウンロードした後、zipを展開し、

$ yarn install
$ yarn dev

と打つと、ローカルでサーブできると思います。

TwitterのようなUIにも応用が利くと思うので、マネしてみるのもいいかもしれないですね。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。