Portfolio Site Skill
Generates a professional portfolio website: hero section, project showcase grid, about section, and contact form. Clean, typographic, minimal.
Metadata
Name: portfolio-site Description: Generate a professional portfolio website with hero, project showcase, about, and contact sections. Trigger Keywords: "portfolio", "personal website", "developer portfolio", "creative portfolio", "resume site"
Inputs & Parameters
| Parameter | Type | Required | Default |
|---|---|---|---|
name | string | ✓ | — |
tagline | string | ✓ | — |
projects | array | ✓ | — |
github_url | string | — | — |
linkedin_url | string | — | — |
email | string | — | — |
years_experience | number | — | 3 |
skills | array | — | [] |
Projects array item:
{ title: string; description: string; tags: string[]; url?: string; image?: string }
Required Sections (in order)
- Navigation — Name as logo, links: Projects / About / Contact
- Hero — Name, tagline, one-line value proposition, social links (GitHub, LinkedIn, email)
- Projects Grid — 3-column responsive grid, each card: title + description + tags + link
- About — 2-column: bio text left, skills/stats right
- Contact — Simple form: name, email, message, submit button
- Footer — Copyright + social links
Design Rules
- Single-page, fully responsive
- Dark mode default (use DESIGN.md dark-mode tokens)
- All links open in new tab
- No external JS libraries
- All CSS in
<style>block - Semantic HTML5 (
<header>,<nav>,<main>,<section>,<footer>)
Output
Single file: index.html (self-contained)
Self-Check
- Hero headline is the name, not "Welcome"
- At least 4 projects shown
- Social links use SVG icons (no emoji)
- Mobile: single-column grid
- Contact form has no broken
actionattribute