diff --git a/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md b/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md new file mode 100644 index 00000000..d209f3ed --- /dev/null +++ b/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md @@ -0,0 +1,424 @@ +# Ivan Fioravanti Web Design Patterns + +**Source:** https://gist.github.com/ivanfioravanti +**Patterns Analyzed:** Luxury Travel, Sports Car, Animation +**Last Updated:** 2026-01-26 + +## Pattern 1: Futuristic Luxury Travel Website + +### Design Tokens + +**Colors:** +- Background: Near-black (bg-gray-950, bg-black) +- Text: Icy white (text-gray-50, text-white) +- Accents: Cyan → Purple → Magenta gradients +- Highlights: Soft gold (used sparingly) + +**Typography:** +- Headings: Space Grotesk +- Body: Inter +- Scale: Display, h1-h6, body, small, caption + +**Effects:** +- Glassmorphism (backdrop-blur, bg-opacity) +- Neon accents (glow rings, animated borders) +- Animated gradients (aurora blobs) +- Micro-interactions (hover lift, shimmer, tilt) + +### Component Patterns + +#### 1. Hero Section +```html + +
+ +
+ + + + + +
+

Beyond First Class.

+

Ultra-premium concierge travel

+ + +
+ +
+
+
+``` + +**Key Elements:** +- Full-screen height (min-h-screen) +- Gradient overlay on background image +- Large, bold headline +- Gradient CTAs with hover scale +- Relative/absolute positioning for layers + +#### 2. Destination Card Grid +```html +
+ +
+ + + +
+ + +
+

Maldives

+

Private overwater villas

+

from €5,000

+
+
+
+``` + +**Interactions:** +- Image scale on hover (110%) +- Gradient overlay for readability +- Content reveals from bottom +- Shimmer effect (conic gradient animation) + +#### 3. Glass Navbar +```html + +``` + +**Features:** +- Sticky positioning (fixed) +- Glass effect (backdrop-blur + bg-opacity) +- Thin border for separation +- Mobile responsive (hidden/flex) + +#### 4. Signature Experiences List +```html +
+ +
+ +
+

Private Jet Hops

+

Seamless multi-destination luxury

+
+
+
+``` + +**Pattern:** +- Horizontal flex layout +- Icon + text grouping +- Gradient background on hover +- Rounded corners (rounded-2xl) + +#### 5. Membership Tier Cards +```html +
+ +
+
+
+

Silver

+

Access to curated destinations

+
    +
  • ✓ Priority support
    • +
  • ✓ Flexible bookings
    • +
+
+
+
+``` + +**Visual Hierarchy:** +- Gradient backgrounds +- Border color change on hover +- Layered content (relative + absolute) +- Checkmark lists + +### Animation Patterns + +#### Scroll Reveal +```javascript +// Framer Motion + +``` + +#### Hover Effects +```css +/* Tilt effect */ +.card { + transition: transform 0.3s ease; +} +.card:hover { + transform: perspective(1000px) rotateX(5deg) rotateY(5deg); +} + +/* Shimmer */ +@keyframes shimmer { + 0% { background-position: -100% 0; } + 100% { background-position: 200% 0; } +} +.shimmer { + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); + background-size: 200% 100%; + animation: shimmer 2s infinite; +} +``` + +#### Aurora Gradient +```css +@keyframes aurora { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(30px, -50px) scale(1.1); } + 66% { transform: translate(-20px, 20px) scale(0.9); } +} +.aurora-blob { + animation: aurora 8s ease-in-out infinite; +} +``` + +### Responsive Patterns + +```css +/* Mobile-first */ +.hero { padding: 1rem; } +@media (min-width: 768px) { .hero { padding: 2rem; } } + +/* Container queries */ +@container (min-width: 400px) { .card { grid-template-columns: 1fr 1fr; } } +``` + +### Form Patterns + +```html +
+ +
+ + +
+ + +
+ + +
+ + +
+ +
+ + +
+
+
+``` + +## Pattern 2: Sports Car Website (High Performance) + +### Design Tokens + +**Colors:** +- Primary: Racing red (red-600) +- Secondary: Carbon fiber black (gray-900) +- Accents: Speed yellow (yellow-400) +- Metallic gradients + +**Typography:** +- Headings: Racing Sans One / Orbitron +- Body: Rajdhani +- Numbers: Monospace (for stats) + +### Component Patterns + +#### Spec Card +```html +
+
+
+

Top Speed

+

217 mph

+
+
+

0-60

+

2.9 sec

+
+
+
+``` + +#### Performance Graph +```html +
+ + + + + + + + + + +
+``` + +## Pattern 3: Animation Showcase + +### Animation Types + +#### 1. Scroll Parallax +```javascript +const { scrollY } = useScroll(); +const y = useTransform(scrollY, [0, 500], [0, 150]); + +``` + +#### 2. Text Reveal +```javascript +const text = "Beyond First Class"; +return ( +
+ {text.split('').map((char, i) => ( + + {char} + + ))} +
+); +``` + +#### 3. Magnetic Button +```javascript +const magneticButton = useRef(null); +const handleMouseMove = (e) => { + const { clientX, clientY } = e; + const { left, top, width, height } = magneticButton.current.getBoundingClientRect(); + const x = (clientX - left - width / 2) * 0.3; + const y = (clientY - top - height / 2) * 0.3; + magneticButton.current.style.transform = `translate(${x}px, ${y}px)`; +}; +``` + +## Common Patterns Across All Designs + +### 1. Gradient Overlays +```css +.gradient-overlay { + background: linear-gradient( + 135deg, + rgba(6, 182, 212, 0.2) 0%, + rgba(168, 85, 247, 0.2) 50%, + rgba(236, 72, 153, 0.2) 100% + ); +} +``` + +### 2. Glow Effects +```css +.glow { + box-shadow: 0 0 20px rgba(6, 182, 212, 0.5), + 0 0 40px rgba(168, 85, 247, 0.3), + 0 0 60px rgba(236, 72, 153, 0.2); +} +``` + +### 3. Border Gradients +```css +.border-gradient { + position: relative; + background: linear-gradient(black, black) padding-box, + linear-gradient(135deg, #06b6d4, #a855f7, #ec4899) border-box; + border: 2px solid transparent; + border-radius: 1rem; +} +``` + +### 4. Backdrop Patterns +```css +.glass { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} +``` + +## Tailwind Config Additions + +```javascript +module.exports = { + theme: { + extend: { + colors: { + aurora: { + cyan: '#06b6d4', + purple: '#a855f7', + magenta: '#ec4899', + }, + }, + backgroundImage: { + 'aurora-gradient': 'linear-gradient(135deg, #06b6d4, #a855f7, #ec4899)', + 'glass-gradient': 'linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05))', + }, + animation: { + 'aurora': 'aurora 8s ease-in-out infinite', + 'shimmer': 'shimmer 2s linear infinite', + 'float': 'float 6s ease-in-out infinite', + }, + }, + }, +}; +``` + +## Implementation Checklist + +For each new luxury/high-end website: + +- [ ] Dark mode base (bg-gray-950/black) +- [ ] Glass navbar (backdrop-blur + fixed) +- [ ] Hero with gradient overlay + cinematic bg +- [ ] Animated CTAs (hover scale + gradient) +- [ ] Card grids (rounded-3xl + hover effects) +- [ ] Scroll reveal animations (Framer Motion) +- [ ] Micro-interactions (hover, focus, active) +- [ ] Responsive breakpoints (sm, md, lg, xl) +- [ ] Accessible (aria-labels, keyboard nav, contrast) +- [ ] Performance (lazy load, optimize images) + +## Credit & Attribution + +All patterns extracted from gists by Ivan Fioravanti: +- https://gist.github.com/ivanfioravanti/98ba7e5d3f7a88c1756b045d3e565630 +- https://gist.github.com/ivanfioravanti/6c019ac5b971ca22c63d9853573b4953 +- https://gist.github.com/ivanfioravanti/055070fb66f90fbcc1e54db1ccc5e526 + +License: These are design prompts/patterns for learning and inspiration. diff --git a/skills/design-pattern-learner/skill.md b/skills/design-pattern-learner/skill.md index 4064ce2d..209bacec 100644 --- a/skills/design-pattern-learner/skill.md +++ b/skills/design-pattern-learner/skill.md @@ -370,6 +370,13 @@ python3 skills/design-pattern-learner/scripts/generate.py --source "pattern.json - Patterns extracted - Implementation success rate +**Pre-Studied Patterns:** `~/.claude/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md` +- Complete pattern database from Ivan Fioravanti's web design gists +- Includes: Luxury Travel, Sports Car, Animation patterns +- Ready-to-use component templates +- Design tokens, typography, effects +- Animation patterns with code examples + ## Performance **Typical analysis time:**