GeekBrain.io VC Fund Website - Design Specification

Overview

A single-page futuristic website for GeekBrain.io, a VC fund. The site establishes brand presence with a cyber/terminal aesthetic featuring particle backgrounds, glitch text effects, and glowing UI elements.

Tech Stack

Project Structure

geekbrain-site/
├── app/
│   ├── layout.tsx          # Root layout with dark theme, fonts
│   ├── page.tsx            # Single page with all sections
│   └── globals.css         # Tailwind imports + custom animations
├── components/
│   ├── Hero.tsx            # Animated hero with GlitchText
│   ├── About.tsx           # Glassmorphism card with fund info
│   ├── Contact.tsx         # LinkedIn social link
│   ├── ParticleBackground.tsx  # Full-screen particle canvas
│   ├── GlitchText.tsx      # Reusable glitch component
│   └── GlowButton.tsx      # Reusable glow button (future use)
├── tailwind.config.ts      # Custom glow utilities, colors
├── next.config.js
└── package.json

Color System

Theme: Dark mode, blue-dominant, cyber aesthetic

Visual Effects

Particle Background

• 80-120 particles, 2-3px radius
• Blue/cyan color (#0088ff, #00ddff)
• Connected lines between nearby particles (150px distance)
• Slow drift movement (speed 0.5)
• Mouse repel on hover, attract on click
• Pauses when tab hidden for performance

Glitch Text Effect

• 3-layer approach: base + ::before + ::after pseudo-elements
• Color split: white (base), cyan, deep blue
• 2.5s animation loop with intermittent glitch
• Intensity controlled via CSS custom properties
• Applied to main headline "GEEKBRAIN.IO"

Glow Effects

Custom Tailwind utilities:

• .glow-blue - Blue box-shadow glow
• .glow-cyan - Cyan box-shadow glow
• .text-glow-blue - Blue text-shadow
• .animate-pulse-glow - Subtle pulsing animation
• 300ms transitions for hover states

Sections

Hero Section

Content:

• Headline: GEEKBRAIN.IO (GlitchText component, glitch effect)
• Tagline: "Backing the builders of tomorrow"
• Scroll indicator: Subtle animated arrow pointing down

Layout:

• Full viewport height
• Centered content
• Transparent background (particles visible)
• Fade-in animation on load

About Section

Content:

• Heading: "About"
• Body (placeholder):

  GeekBrain.io is a venture fund focused on technical founders building transformative technologies. We believe the best companies are built by engineers who deeply understand the problems they're solving. Our team brings decades of technical expertise to help founders navigate the journey from prototype to scale.

Layout:

• Glassmorphism card: rgba(0, 40, 80, 0.3) background
• Blue glow border on hover
• Fade-in animation on scroll
• Readable over particle background

Contact Section

Content:

• Heading: "Connect"
• LinkedIn icon link with glow effect

Layout:

• Centered, horizontal arrangement
• Icon: Blue glow on hover, subtle pulse
• Fade-in animation on scroll

Components

GlitchText

interface GlitchTextProps {
  text: string;
  as?: 'h1' | 'h2' | 'h3' | 'span';
  intensity?: 'subtle' | 'normal' | 'aggressive';
}

GlowButton

interface GlowButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  href?: string;
  variant?: 'primary' | 'secondary';
}

ParticleBackground

• Full-screen canvas component
• Uses tsparticles Slim preset as base
• Custom configuration for blue/cyan theme
• Z-index: -1 (behind all content)

Animation Strategy

Performance Considerations

• Particles pause when tab not visible
• CSS animations preferred over JS where possible
• IntersectionObserver for scroll animations (not scroll listeners)
• Lazy load fonts with next/font
• Static generation (no server-side rendering needed)

Future Expansion

The Next.js architecture supports easy additions:

• Portfolio page (when investments exist)
• Incubation page (when incubating companies)
• Contact form (if needed later)
• Blog/News section
• Team page

Deployment

• Build: npm run build (Next.js static export)
• Deploy: Vercel (recommended) or Netlify
• Domain: Configure DNS for geekbrain.io
• HTTPS: Automatic with Vercel/Netlify