# GeekBrain.io Website - Specification Review & consolidation

## Comparison of Existing Specs

Two specification documents exist:
1. `2026-03-21-geekbrain-vc-webpage-design.md` (older)
2. `2026-03-21-vc-fund-webpage-design.md` (newer)

**Status:** Both are drafts. Need consolidation and refinement before implementation.

---

## Key Differences & Inconsistencies

### 1. Component Interface Definitions

| Component | Spec 1 Definition | Spec 2 Definition | Status |
|-----------|-------------------|-------------------|--------|
| GlitchText | `as?: 'h1'|'h2'|'h3'` | `as?: 'h1'|'h2'|'h3'|'span'` | Spec 2 more complete |
| GlowButton/Link | GlowLink component | GlowButton component (mentioned) | **CONFLICT** |
| ParticleBackground | No custom props defined | Internal config only | Both vague |

### 2. File Structure

**Spec 1:**
```
geekbrain-site/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/ (6 components)
├── tailwind.config.ts
├── tsconfig.json
├── package.json
└── README.md
```

**Spec 2:**
```
geekbrain-site/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/ (6 components - note: GlowButton vs GlowLink)
├── tailwind.config.ts
├── next.config.js  ← different
└── package.json
```

**Issue:** `next.config.js` vs `tsconfig.json` - both may be needed.

### 3. Typography

**Spec 1:**
- Headings: Space Grotesk (600-700)
- Body: Inter (400)
- Code: JetBrains Mono (optional)

**Spec 2:**
- Mentions Space Grotesk and Inter but no weights specified

**Gap:** Need to specify exact font weights and loading strategy.

### 4. Animation Details

**Spec 1 has more detail:**
- Glitch: "2.5s animation loop: 70% stable, 30% glitching"
- Scroll animations: IntersectionObserver with staggered timing
- Performance notes: GPU-accelerated properties

**Spec 2 has:** High-level animation strategy table only.

### 5. Accessibility

**Spec 1 includes** full Accessibility section (7 items)
**Spec 2 does NOT** mention accessibility at all

**Gap:** This is critical - should be included.

### 6. Performance Considerations

**Spec 1 includes:**
- Particle system pause when tab hidden
- Use of CSS transforms/opacity
- Lazy load fonts via next/font
- Static generation note

**Spec 2 includes:**
- Similar but slightly different wording
- Also mentions IntersectionObserver (not scroll listeners)

### 7. Copy/Content

**Spec 1 provides draft copy** for About section
**Spec 2 provides slightly different** draft copy

**Difference:**
- Spec 1: "decades of technical expertise"
- Spec 2: "capital, network, and strategic support"

### 8. Missing Elements

- **Next.js config**: `next.config.js` content not specified
- **Environment variables**: None mentioned
- **Testing strategy**: Not covered
- **SEO metadata**: Not specified
- **Favicon/OG images**: Not mentioned
- **Responsive breakpoints**: Not detailed
- **Error handling**: Not discussed
- **Build configuration**: Minimal

---

## Recommended Refinements

### 1. **Consolidate Files**

Recommended: Keep **one master spec** and archive the other as historical.
- Use the more detailed spec (`2026-03-21-geekbrain-vc-webpage-design.md`) as base
- Incorporate missing elements from the other

### 2. **Resolve Component Naming**

Decision needed: `GlowLink` or `GlowButton`?

**Recommendation:** Keep **GlowLink** for social links, consider separate **GlowButton** if call-to-action buttons are needed. Since current design only needs social link, use **GlowLink** for now.

### 3. **Add Missing Sections**

Needed additions to spec:
```
## Next.js Configuration
## Environment & API Keys (if any)
## SEO & Metadata
## Responsive Design Breakpoints
## Testing Strategy
## Browser Support
## Deployment Checklist
```

### 4. **Clarify Particle Configuration**

Current specs vague - need specific:
- tsparticles preset or custom config file?
- Exact particle count, speed values, colors (hex codes)
- Interaction details (repel/attract strength)

### 5. **Define Tailwind Config**

Should specify:
- Custom color palette (extend theme.colors)
- Custom glow utilities (glow-blue, glow-cyan)
- Animation keyframes (pulse-glow)

### 6. **Accessibility Section (MANDATORY)**

Add comprehensive A11y requirements:
- Proper heading hierarchy
- Focus management
- Reduced motion preferences
- Color contrast ratios (WCAG AA minimum)
- Screen reader testing

### 7. **Specify Font Loading**

Recommend: Use `next/font` with:
- `SpaceGrotesk` for headings (weights: 600, 700)
- `Inter` for body (weights: 400, maybe 500)
- Fallback fonts: system-sans

### 8. **Performance Budget**

Add specific targets:
- Lighthouse score goals: Performance >90, Accessibility >90
- Bundle size limits
- Image optimization strategy (none needed if no images)
- Lazy loading for below-the-fold content

### 9. **File-by-File Detailed Specs**

Current high-level structure is good, but add:
- Exact imports needed in each file
- PropTypes or TypeScript interfaces
- CSS modules vs Tailwind approach
- Test file locations

### 10. **Graphic Assets**

Specify if any assets needed:
- SVG icons (LinkedIn)
- Logo (GeekBrain.io wordmark)
- Favicon sizes
- No images currently planned

---

## Action Items

1. **Choose primary spec** - Which version do you prefer as base?
2. **Decide on GlowLink vs GlowButton**
3. **Confirm About section copy** - which version, or merge?
4. **Specify exact particle config** (need tsparticles JSON)
5. **Define responsive breakpoints** (mobile-first: 640px, 768px, 1024px, 1280px)
6. **Add Next.js config** details (any special config needed?)
7. **Confirm font sources** - Google Fonts? Local? CDN?

---

## Questions for You

1. Should I consolidate both specs into a single, comprehensive, refined specification document?
2. Which About section copy do you prefer, or should I merge them?
3. Do you have specific particle background configuration preferences, or should I use the tsparticles default with blue theme tweaks?
4. Are there any brand guidelines (logo files, specific colors, fonts) that should override the draft specs?
5. Do you need any backend functionality (contact form, API routes) or is this purely static?

Please answer these so I can create the final, implementation-ready specification.