Back to Details

awwwards-landing-page

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Awwwards Landing Page

Awwwards级落地页

A stunning portfolio landing page with smooth scroll animations using Locomotive Scroll, GSAP, and Framer Motion.
这是一个采用Locomotive Scroll、GSAP和Framer Motion实现流畅滚动动画的精美作品集落地页。

Tech Stack

技术栈

  • Framework: Next.js
  • Animation: Locomotive Scroll, GSAP, Framer Motion
  • Package Manager: pnpm or npm
  • Dev Port: 3000
  • 框架: Next.js
  • 动画库: Locomotive Scroll、GSAP、Framer Motion
  • 包管理器: pnpm 或 npm
  • 开发端口: 3000

Setup

安装步骤

1. Clone the Template

1. 克隆模板

bash
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git .
If the directory is not empty:
bash
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
bash
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git .
如果目标目录非空：
bash
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. Remove Git History (Optional)

2. 移除Git历史记录（可选）

bash
rm -rf .git
git init
bash
rm -rf .git
git init

3. Install Dependencies

3. 安装依赖

bash
npm install
bash
npm install

Build

构建

bash
npm run build
bash
npm run build

Deploy

部署

CRITICAL: For Vercel, you MUST use 
vercel build --prod
then 
vercel deploy --prebuilt --prod
. Never use 
vercel --prod
directly.
重要提示：在Vercel平台部署时，必须先执行
vercel build --prod
，再执行
vercel deploy --prebuilt --prod
。切勿直接使用
vercel --prod
命令。

Vercel (Recommended)

Vercel（推荐）

bash
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
bash
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

Netlify

Netlify

bash
netlify deploy --prod
bash
netlify deploy --prod

Development

开发

bash
npm run dev
Opens at http://localhost:3000
bash
npm run dev
启动后访问 http://localhost:3000

Notes

注意事项

  • Static Next.js site - no environment variables needed
  • Never run 
    npm run dev
    in VM environment
  • 静态Next.js站点 - 无需环境变量
  • 切勿在虚拟机环境中运行
    npm run dev