Awwwards Landing Page

rebyteai-template/rebyte-skills/awwwards-landing-page

作者 rebyteai-template0062e44684f109fb580e67fe600f581e01fa7209无许可证收录于 2026年10月9日更新于 2026年10月9日

Designer portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.

仅含说明Design & CreativeDevOps & Cloud
AI 生成的概览

搭建、构建并部署一个带动画的 Next.js 设计师作品集落地页模板。

功能
该技能会搭建一个 Next.js 作品集落地页模板，使用 Locomotive Scroll、GSAP 和 Framer Motion 实现平滑滚动动画。它涵盖克隆模板仓库、安装依赖、构建站点，以及部署到 Vercel 或 Netlify 的步骤。同时说明如何在 3000 端口运行本地开发服务器。
适用场景
当你需要基于该模板创建或部署带动画的设计师作品集落地页时使用。适合需要 Next.js 站点、滚动驱动动效以及 Vercel 或 Netlify 部署的项目。
运行要求
需要 git、带 npm 或 pnpm 的 Node.js，以及用于克隆模板仓库和安装依赖的网络访问。部署需要带 VERCEL_TOKEN 的 Vercel CLI，或 Netlify CLI。该静态站点无需环境变量。不包含脚本，仅为操作说明。

Awwwards Landing Page

A stunning portfolio landing page with smooth scroll animations using Locomotive Scroll, GSAP, and Framer Motion.

Tech Stack

  • Framework: Next.js
  • Animation: Locomotive Scroll, GSAP, Framer Motion
  • Package Manager: pnpm or npm
  • Dev Port: 3000

Setup

1. Clone the Template

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_templatemv _temp_template/* _temp_template/.* . 2>/dev/null || truerm -rf _temp_template

2. Remove Git History (Optional)

bash
rm -rf .gitgit init

3. Install Dependencies

bash
npm install

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 (Recommended)

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

Netlify

bash
netlify deploy --prod

Development

bash
npm run dev

Opens at http://localhost:3000

Notes

  • Static Next.js site - no environment variables needed
  • Never run npm run dev in VM environment

来源与署名

来源：rebyteai-template/rebyte-skills位于awwwards-landing-page提交0062e44

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 rebyteai-template/rebyte-skills 的技能

Gsap Awwwards Website

rebyteai-template

使用模板仓库搭建、构建并部署带 GSAP 滚动动画的 React 19 产品落地页。

Software Development2026年10月9日

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative180K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative180K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative180K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新