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今天更新