# GeekBrain.io VC Fund Webpage - Design Specification
**Date:** 2026-03-21
**Status:** Draft - Pending Approval
## Overview
A single-page website for GeekBrain.io, a VC fund. The site establishes brand presence with a futuristic/tech aesthetic, showcasing the fund's identity with particle effects, glitch text animations, and glowing UI elements. This is a minimal launch site (no portfolio yet) designed for easy expansion later.
## Goals
- Establish GeekBrain.io's brand presence online
- Create a visually striking first impression with futuristic effects
- Provide basic information about the fund
- Enable contact via LinkedIn
- Built for future expansion when portfolio companies are added
## Tech Stack
| Technology | Purpose |
|------------|---------|
| Next.js 14 | App Router framework |
| Tailwind CSS | Styling with custom utilities |
| @tsparticles/react | Particle background system |
| Custom CSS | Glitch text keyframes |
| Vercel/Netlify | Deployment (zero-config) |
## Project Structure
```
geekbrain-site/
├── app/
│ ├── layout.tsx # Root layout with dark theme
│ ├── page.tsx # Single page home
│ └── globals.css # Tailwind + custom effects
├── components/
│ ├── Hero.tsx # Animated hero with glitch text
│ ├── About.tsx # About section with glassmorphism card
│ ├── Contact.tsx # LinkedIn social link
│ ├── ParticleBackground.tsx # Full-screen particle canvas
│ ├── GlitchText.tsx # Reusable glitch text component
│ └── GlowLink.tsx # Reusable glowing link component
├── tailwind.config.ts # Custom glow utilities
├── tsconfig.json
├── package.json
└── README.md
```
## Visual Design
### Color Palette
| Name | Hex | Usage |
|------|-----|-------|
| Background | `#050510` | Deep navy, almost black with blue tint |
| Primary Accent | `#0088ff` | Electric blue - main glows, highlights |
| Secondary Accent | `#00ddff` | Cyan - bright accents, hover states |
| Tertiary Accent | `#6600ff` | Deep purple - subtle contrast |
| Heading Text | `#ffffff` | White |
| Body Text | `#8899bb` | Soft blue-gray |
| Card Background | `rgba(0, 40, 80, 0.3)` | Dark blue glassmorphism |
### Typography
| Element | Font | Weight |
|---------|------|--------|
| Headings | Space Grotesk | 600-700 |
| Body | Inter | 400 |
| Code/Mono | JetBrains Mono | 400 (optional) |
### Visual Effects
**Particle Background:**
- 80-120 particles, 2-3px radius, blue/cyan color palette
- Lines connect particles within 150px proximity, 0.3 opacity
- Slow drift movement (speed 0.5), no gravity
- Mouse interaction: gentle repel on hover, attract on click
- Performance: `requestAnimationFrame`, pauses when tab hidden
**Glitch Text:**
- 3-layer approach: base text + 2 pseudo-elements (::before, ::after)
- Keyframes: clip-path changes, translate offsets, color shifts
- Base: white, offset layers: cyan (#00ddff) and deep blue (#0066cc)
- 2.5s animation loop: 70% stable, 30% glitching
- Intensity controlled via CSS custom properties
**Glow Effects:**
- Custom Tailwind utilities: `.glow-blue`, `.glow-cyan`, `.text-glow-blue`
- `animate-pulse-glow` for subtle pulsing animations
- 300ms ease-out transitions for hover states
**Scroll Animations:**
- IntersectionObserver for scroll-reveal
- Fade in + slight translate up when entering viewport
- Staggered timing for list items
## Components
### ParticleBackground
Full-screen canvas component positioned behind all content. Uses @tsparticles with custom configuration for blue-themed neural network effect.
**Props:** None (configured internally)
**Behavior:**
- Renders as fixed, full-viewport canvas with z-index: -1
- Particles drift slowly, connecting when near each other
- Responds to mouse position for subtle interactivity
### Hero
Main landing section with animated headline.
**Content:**
- GlitchText component: "GEEKBRAIN.IO"
- Tagline: "Backing the builders of tomorrow"
- Subtle scroll indicator (optional)
**Layout:**
- Full viewport height (100vh)
- Centered content, transparent background
- Particles visible behind
### GlitchText
Reusable component for glitch effect on text.
**Props:**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `text` | string | required | Text to display |
| `as` | 'h1' \| 'h2' \| 'h3' | 'h1' | Heading level |
| `intensity` | 'subtle' \| 'normal' \| 'aggressive' | 'normal' | Glitch intensity |
### About
Information section about the fund.
**Content (placeholder):**
- Heading: "About"
- Body: Brief description of GeekBrain.io's mission and approach
**Layout:**
- Glassmorphism card with blue glow border
- Padding: responsive (p-6 md:p-8)
- Fade-in animation on scroll
**Draft Copy:**
> GeekBrain.io is a venture capital fund focused on backing technical founders building transformative technologies. We believe the best companies start with builders who understand the problem they're solving. Our mission is to provide the capital, network, and strategic support these founders need to turn bold ideas into reality.
### Contact
Social links section.
**Content:**
- Heading: "Connect"
- Single link: LinkedIn (opens in new tab)
**Layout:**
- LinkedIn icon with glow effect on hover
- Centered, horizontal layout
- Optional brief text above icons
### GlowLink
Reusable glowing link component.
**Props:**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `href` | string | required | Link destination |
| `icon` | ReactNode | required | Icon element |
| `label` | string | optional | Accessible label |
**Behavior:**
- Dark background, blue border by default
- Blue glow expands on hover
- Cyan glow intensifies on active/pressed
## Page Layout
```
┌─────────────────────────────────────────────┐
│ [ParticleBackground - full viewport] │
│ ┌─────────────────────────────────────┐ │
│ │ HERO (100vh) │ │
│ │ │ │
│ │ GEEKBRAIN.IO (glitch) │ │
│ │ "Backing the builders of │ │
│ │ tomorrow" │ │
│ │ │ │
│ │ ↓ scroll indicator │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ ABOUT │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ Glass card with blue glow │ │ │
│ │ │ About GeekBrain.io text... │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ CONNECT │ │
│ │ [LinkedIn icon] │ │
│ │ (glows on hover) │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
```
## Performance Considerations
- Particle system uses `requestAnimationFrame` and pauses when tab is hidden
- Animations use CSS transforms and opacity (GPU-accelerated)
- Images (if any) use Next.js Image component for optimization
- Fonts loaded via `next/font` for optimal loading
- Minimal JavaScript bundle: only essential components
## Accessibility
- Semantic HTML structure (headings hierarchy)
- Glitch animation respects `prefers-reduced-motion`
- Social links have aria-labels
- Sufficient color contrast for body text
- Focus visible states on interactive elements
## Future Expansion
The site is designed to easily add:
- Portfolio companies section
- Incubation section
- Team section
- Contact form (would require backend)
- Additional social platforms
## Files to Create
1. `app/layout.tsx` - Root layout with fonts and dark theme
2. `app/page.tsx` - Main page composing all sections
3. `app/globals.css` - Tailwind imports + custom keyframes
4. `components/Hero.tsx` - Hero section
5. `components/About.tsx` - About section
6. `components/Contact.tsx` - Contact section
7. `components/ParticleBackground.tsx` - Particle system
8. `components/GlitchText.tsx` - Glitch text component
9. `components/GlowLink.tsx` - Glowing link component
10. `tailwind.config.ts` - Custom utilities
11. `package.json` - Dependencies
12. `tsconfig.json` - TypeScript config
