Next.js・TailwindCSS・Shadcn/uiで構築された、シンプルなプロフィールページ。
🔮サンプル → https://nonick-mc.com

Getting Started

src/app/page.tsxを編集する前に、以下の手順を行ってください。
※Next.js、及びTailwindCSSを理解していることを推奨します！

1. このリポジトリをforkし、npm iで必要なライブラリをインストールする。
2. src/config/site.tsを編集し、Webサイトのメタデータを編集する。
3. 同様に、src/app/layout.tsx、src/app/opengraph-image.pngを編集する。

Components

src/componentsには、プロフィールページで使用されている要素の一部がコンポーネントとして切り出されています。

• animation.tsx ... ページ読み込み時のフェードアニメーションを制御する親コンポーネント
• external-link.tsx ... next/linkの遷移先を新規タブにする際の設定をまとめたコンポーネント
• link-card.tsx ... リンクカードの枠組み部分
• link-card-name.tsx ... リンクカードの名前・ID部分
• link-card-icon.tsx ... リンクカードのアイコン部分
• theme-toggle.tsx ... ダークテーマ・ライトテーマの切り替えボタン