Portfolio Genesis

One-prompt portfolio generator. Produces complete, deployable sites with professional GSAP animations, responsive design, and distinctive aesthetics that look handcrafted — not AI-generated. User opens index.html in browser and sees a production-quality portfolio.

Philosophy

Every portfolio tells a story. The design IS the first project in the portfolio.
Anti-template: no two generated sites should look the same. Theme driven by user's field, personality, and tone.
"Open index.html and say WOW" — zero npm, zero build steps, instant gratification.
Constraint = freedom: vanilla HTML/CSS/JS + GSAP forces creative CSS that feels handcrafted.
A portfolio with 3 well-presented projects beats 20 generic cards. Quality over quantity.
The scroll experience IS the portfolio. Every pixel scrolled should feel intentional.

Process

Step 1: Intake

Extract from user prompt:

Identity: name, handle/alias, role/title
Bio: 1-3 sentences (synthesize from context if not provided)
Projects: title, description, tags, links, deal amounts, role
Socials: X, Discord, Telegram, GitHub, LinkedIn, email, YouTube (only include provided ones)
Avatar: file path or generate CSS gradient circle with initials
Stats: years experience, project count, community reach, tools explored
Tone: professional | hacker | creative | elegant | playful | minimal | cyber

If user provides minimal input, generate with contextually relevant placeholder data and mark injection points: . Omit social buttons entirely if no URL provided — never render href="#".

Step 2: Theme Selection

Use the decision tree below to select from 5 themes. Then read the theme file from references/themes/{theme-name}.md.

Is user in crypto/web3/blockchain?
  YES → "clean"/"minimal" mentioned? → mono-minimal
        Otherwise → midnight-glass (default) or neon-cyberpunk (if "neon"/"cyber" mentioned)

Is user a designer/artist/creative?
  YES → Prefers dark? → midnight-glass
        Otherwise → warm-organic (default) or paper-brutalist (if "editorial"/"print")

Is user a developer/engineer?
  YES → midnight-glass (default) or mono-minimal (if "clean"/"minimal")

Is user a student/beginner?
  YES → warm-organic (friendly) or neon-cyberpunk (if young/energetic)

Is user business/professional?
  YES → mono-minimal (default) or warm-organic (if "approachable")

Explicit overrides (highest priority):
  "dark" / "glass" → midnight-glass
  "light" / "clean" / "paper" → paper-brutalist
  "neon" / "cyber" / "futuristic" → neon-cyberpunk
  "warm" / "earthy" / "organic" → warm-organic
  "minimal" / "mono" / "typography" → mono-minimal

Step 3: Generate Files

Read reference files in this order:

references/themes/{selected-theme}.md — colors, fonts, card style
references/animations/gsap-patterns.md — animation recipes
references/sections/hero-variants.md — pick hero layout
references/typography/font-pairings.md — confirm font choice

Generate exactly 3 files: index.html, css/style.css, js/main.js

Hero Layout Decision

Avatar image provided?
  YES → Centered Avatar (default)
        Exception: designer with strong project showcase → Split Hero
  NO  → Strong title/tagline? → Full-Screen Typography
        Otherwise → Minimal (name + role + scroll indicator)

Role descriptors count:
  1   → Single large subtitle
  2-3 → Dot-separated subtitle line
  4+  → Animated role rotation via GSAP text swap

Project Section Decision

Projects count:
  0   → Skip projects. Add Skills/Tech tag cloud section instead
  1-2 → Large featured cards (full-width or 2-col with extra padding)
  3-4 → 2-column grid with equal sizing
  5-8 → Bento grid (1 large + smaller cards)
  9+  → Show top 6 with "View All" link, or horizontal scroll

Step 4: Quality Check

Run the pre-delivery checklist before outputting files.

Output Structure

index.html

Complete semantic HTML5. CDN links for Google Fonts and GSAP 3.12.5. All content inline. Sections: nav, hero, about, projects (if applicable), optional marquee/skills, contact, footer. Includes:

<!DOCTYPE html>, <html lang="en">, charset, viewport
<title> with user name + role
<meta name="description"> with bio
OG tags: og:title, og:description, og:type (website)
Google Fonts <link rel="preconnect"> + stylesheet
GSAP + ScrollTrigger CDN with defer
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js" defer> at end of body

css/style.css

All styles. CSS custom properties at :root (minimum 20 variables covering colors, fonts, spacing, radius, easing). Full responsive (768px + 480px breakpoints). Must include:

Reset: *, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior: smooth } + custom scrollbar
body { overflow-x: hidden; -webkit-font-smoothing: antialiased }
::selection with theme accent
Noise overlay (inline SVG feTurbulence, opacity 0.02-0.04)
.reveal-up { opacity: 0; transform: translateY(30px) } initial state
@media (prefers-reduced-motion: reduce) — disable all animations, hide cursor glow
Every decorative fixed/absolute element: pointer-events: none

js/main.js

GSAP animations wrapped in DOMContentLoaded. Starts with GSAP availability check:

if (typeof gsap === 'undefined') {
    document.querySelectorAll('.reveal-up').forEach(el => {
        el.style.opacity = '1';
        el.style.transform = 'none';
    });
    return;
}

Registers ScrollTrigger. Contains: hero entrance timeline, scroll reveals, stat counters, card tilt, cursor glow, magnetic buttons, parallax, nav shrink. Read references/animations/gsap-patterns.md for exact implementations.

Personalization Points

Location	Data Source	Fallback
`<title>`	Name + role	"Portfolio"
`<meta description>`	Role + skills	Generated from role
OG tags	Same as title/desc	Same
Nav logo	Handle in brackets `[MX]`	Initials
Hero h1	Role or identity statement	Field + "Builder"
Hero subtitle	Roles separated by `·`	3 skill areas
Hero badge	@handle	"@username"
Avatar `src` + `alt`	User path	CSS gradient circle with initials
Social buttons	Actual URLs only	Omit button if no URL
About heading	Personal statement	"Building at the intersection of X, Y & Z"
About bio	User-provided or synthesized	3-sentence bio
Tags	Skill areas	From role/projects
Stat cards	Real numbers + labels	Estimates from context
Project cards	Title, desc, tags, links	From project info
Contact cards	Platform, handle, URL	Only provided platforms
Footer	Name + `new Date().getFullYear()`	Dynamic year via JS

Anti-Patterns

#	Anti-Pattern	Why It Fails	Do Instead
1	Inter/Roboto as heading font	Instantly signals "AI-generated." These are body fonts, not display fonts.	Use distinctive display fonts: Syne, Outfit, Instrument Serif, Bricolage Grotesque, Unbounded
2	Purple gradient on white	The #1 "AI slop" visual cliche since 2023. Everyone recognizes it.	Dark backgrounds with vivid accents, or warm palettes.
3	Space Grotesk as default	Was distinctive in 2023, now the most overused font in AI-generated sites.	Rotate across 12 curated pairings. Only use if user explicitly brands with it.
4	`opacity:0` without GSAP fallback	If GSAP CDN fails, entire site is invisible. Blank page.	First JS line: check `typeof gsap`, if undefined set all `.reveal-up` to visible.
5	Great hero, generic below fold	"Wow" dies on scroll. Cookie-cutter cards below a cinematic hero.	Every section gets equal design attention. Scroll journey IS the portfolio.
6	`href="#"` on social links	Makes the site obviously fake. Kills credibility.	Use actual URLs. If none provided, omit the button entirely.
7	Same animation timing everywhere	Everything at same speed with same easing feels robotic.	Vary durations (0.4s-1.2s). Different easings per element. Stagger with negative offsets.
8	Decorative elements without `pointer-events: none`	Orbs, noise, cursor glow block mouse clicks on content beneath.	Every decorative fixed/absolute element gets `pointer-events: none`.
9	Gradient text on gradient background	Unreadable. Two competing gradients cancel out.	Gradient text only on solid/near-solid dark backgrounds. One gradient per visual area.
10	Missing `cursor: pointer` on cards	Card looks interactive but cursor stays default. User confused.	`cursor: pointer` on every element with hover state or click handler.
11	Emoji icons in UI	Universal "AI made this" signal. No design effort.	Inline SVG from `assets/social-icons.svg`. No emoji in nav, buttons, headers.
12	`width: 100vw`	On Windows with scrollbar, includes scrollbar width → horizontal overflow.	Use `width: 100%` or `overflow-x: hidden` on body.
13	Loading icon library for 5 icons	Extra HTTP request, FOUC, CDN dependency for ~2KB of SVG paths.	Inline SVG directly in HTML. 5-8 social icons = ~2KB inline.
14	Generic CTA text	"Let's Connect" / "Get In Touch" — every AI portfolio uses these.	Match to personality: "Let's Build Something" (builder), "Say gm" (crypto), "Drop a Line" (casual).
15	Missing `alt` on avatar	Fails accessibility. Screen readers announce nothing.	`alt="[User's name]"` — simple, descriptive.
16	4+ color rainbow gradient text	Looks like a toy. Multi-color gradients rarely work.	Max 2-3 colors from same family (pink → purple, not pink → green → blue).

Required Animations

Read references/animations/gsap-patterns.md for implementations. Every site must include:

Hero entrance timeline — staggered .from(): avatar (back.out), badge, title lines, subtitle, socials (back.out stagger), scroll indicator. Overlapping with negative offsets.
Scroll reveals — .reveal-up elements animate from {y:30, opacity:0} at start: "top 85%". Stagger within viewport groups.
Stat counters — animate from 0 to target via onUpdate. Triggered on scroll.
Card tilt — mousemove → rotateX/rotateY from cursor offset. transformPerspective: 1000. Reset on mouseleave.
Cursor glow — 600px radial gradient follows mouse with requestAnimationFrame + 0.08 lerp.
Magnetic buttons — social buttons move toward cursor (0.3x factor), snap back with elastic.out(1, 0.5).
Parallax background — decorative elements move on scroll with scrub: 1.
Nav shrink — toggle .scrolled class at 80px scroll depth.

Optional (add based on theme/content):

Marquee with scroll-velocity speed boost
Text split letter-by-letter reveal (cyberpunk/dramatic)
Horizontal scroll for 5+ projects
Gradient text shimmer on hover
Section label slide-in from left

Quality Checklist

Structural:

All 3 files generated (index.html, css/style.css, js/main.js)
DOCTYPE, charset, viewport, lang attribute present
OG meta tags with user's actual information
All CSS custom properties in :root
GSAP CDN links with defer
JS linked at end of body with defer

Content:

All user data injected (name, links, projects, bio)
No generic placeholders ("Lorem ipsum", "Your Name Here")
Social links use actual URLs, no href="#" for provided links
Footer has correct name and dynamic year

Visual:

Font pairing is NOT Inter, Roboto, Arial, or Space Grotesk (unless user-specified)
No purple-on-white color scheme
No emoji icons in UI
Color contrast meets WCAG AA (4.5:1 for body text)
Responsive at 375px, 768px, 1440px — no horizontal scroll
prefers-reduced-motion disables animations and hides cursor glow

Technical:

GSAP fallback present (typeof check + opacity reset)
All decorative elements have pointer-events: none
No width: 100vw in CSS
All interactive elements have cursor: pointer
Images have alt attributes
External links have target="_blank" rel="noopener"

Mort1d/portfolio-site

portfolio-site 是什么？

在你喜欢的 AI 中提问

文档