Next.js・TailwindCSS・Shadcn/uiで構築された、シンプルなプロフィールページ。
🔮サンプル → https://nonick-mc.com
src/app/page.tsxを編集する前に、以下の手順を行ってください。
※Next.js、及びTailwindCSSを理解していることを推奨します！
- このリポジトリをforkし、
npm iで必要なライブラリをインストールする。 src/config/site.tsを編集し、Webサイトのメタデータを編集する。- 同様に、
src/app/layout.tsx、src/app/opengraph-image.pngを編集する。
src/componentsには、プロフィールページで使用されている要素の一部がコンポーネントとして切り出されています。
animation.tsx... ページ読み込み時のフェードアニメーションを制御する親コンポーネントexternal-link.tsx...next/linkの遷移先を新規タブにする際の設定をまとめたコンポーネントlink-card.tsx... リンクカードの枠組み部分link-card-name.tsx... リンクカードの名前・ID部分link-card-icon.tsx... リンクカードのアイコン部分theme-toggle.tsx... ダークテーマ・ライトテーマの切り替えボタン