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

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.