mcpField
A
awwwards-landing-page

awwwards-landing-page

github.com/rebyteai-templateデザイン・UI171.3k 回インストール19 週間前に更新
リポジトリ

awwwards-landing-page について

開発者やデザイナー向けのNext.jsポートフォリオ用ランディングページテンプレートです。Locomotive Scroll、GSAP、Framer Motionによるスクロール演出を備えています。

主な機能

  1. 01Next.jsランディングページテンプレート
  2. 02Locomotive Scrollの統合
  3. 03GSAPとFramer Motionの演出
  4. 04環境変数不要の静的サイト

活用シーン

  1. 01ポートフォリオ用ページの制作
  2. 02スクロールアニメーションサイトの作成
  3. 03静的なNext.jsプロジェクトの開始

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill awwwards-landing-page

インストール後、Claude Code で/awwwards-landing-pageを入力して読み込まれたか確認します。

詳細

Awwwards ランディングページ

Locomotive Scroll、GSAP、Framer Motion を使用した、滑らかなスクロールアニメーションを備えた魅力的なポートフォリオのランディングページです。

技術スタック

  • フレームワーク：Next.js
  • アニメーション：Locomotive Scroll、GSAP、Framer Motion
  • パッケージマネージャー：pnpm または npm
  • 開発ポート：3000

セットアップ

1. テンプレートをクローンする
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git .

ディレクトリが空でない場合：

git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. Git の履歴を削除する（任意）
rm -rf .git
git init
3. 依存関係をインストールする
npm install

ビルド

npm run build

デプロイ

重要：Vercel の場合は、必ず vercel build --prod の後に vercel deploy --prebuilt --prod を実行してください。vercel --prod を直接実行しないでください。

Vercel（推奨）
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
Netlify
netlify deploy --prod

開発

npm run dev

http://localhost:3000 で開きます

注意事項

  • 静的な Next.js サイトのため、環境変数は不要です
  • VM 環境では npm run dev を実行しないでください

コメント

Markdown 対応