Portfolio Cosmic

在云境TS 中打开并复制 →

内容预览

Prompt to recreate this landing page: Build a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js. --- ## Global Design System ### Fonts Google Fonts import: Inter (300–700) and Instrument Serif (italic, 400). - --font-body: 'Inter', sans-serif → Tailwind font-body - --font-display: 'Instrument Serif', serif → Tailwind font-display ### CSS Custom Properties (HSL, no hsl() wrapper — Tailwind adds it) --bg: 0 0% 4%; --surface: 0 0% 8%; --text: 0 0% 96%; --muted: 0 0% 53%; --stroke: 0 0% 12%; --accent: 0 0% 96%; ### Tailwind Custom Colors bg: "hsl(var(--bg))", surface: "hsl(var(--surface))", "text-primary": "hsl(var(--text))", muted: "hsl(var(--muted))", stroke: "hsl(var(--stroke))", ### Accent Gradient linear-gradient(90deg, #89AACC 0%, #4E85BF 100%) — used on logo ring, hover borders, progress bars. CSS utility class .accent-gradient. ### Custom Animations (in index.css) - @keyframes scroll-down — translateY(-100%) → translateY(200%), 1.5s ease-in-out infinite - @keyframes role-fade-in — opacity 0 + translateY(8px) → opacity 1 + translateY(0), 0.4s ease-out - @keyframes gradient-shift — background-position 0% 50% → 100% 50% → 0% 50%, 6s ease infinite (for animated gradient borders) ### Forced dark theme — no light mode toggle. body gets bg-bg text-text-primary. --- ## Page Structure (Index.tsx) {isLoading && setIsLoading(false)} />} --- ## Section 1: Loading Screen Full-screen overlay (fixed inset-0 z-[9999] bg

……（完整源码请在站内查看）