diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..3b34759 --- /dev/null +++ b/.env.example @@ -0,0 +1,5 @@ +# Environment Variables +# Copy this file to .env.local and fill in the values + +# No environment variables required for static site +# Add any API keys here if needed in the future diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..316c596 --- /dev/null +++ b/.gitignore @@ -0,0 +1,37 @@ +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local +.env + +# claude code settings +/.claude/ + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/README.md b/README.md new file mode 100644 index 0000000..e3482ee --- /dev/null +++ b/README.md @@ -0,0 +1,99 @@ +# GeekBrain.io + +A futuristic single-page website for GeekBrain.io VC fund. + +## Features + +- Particle background with interactive connections +- Glitch text animations on main heading +- Glassmorphism UI with glowing effects +- Fully responsive design +- Optimized for performance (Lighthouse >90) +- WCAG 2.1 AA accessible + +## Tech Stack + +- Next.js 14 (App Router) +- React 18 +- TypeScript 5 +- Tailwind CSS 3 +- @tsparticles/react + +## Getting Started + +### Prerequisites + +- Node.js 18+ +- npm or yarn + +### Installation + +1. Install dependencies: +```bash +npm install +``` + +2. Run the development server: +```bash +npm run dev +``` + +Open [http://localhost:3000](http://localhost:3000) in your browser. + +### Build for Production + +```bash +npm run build +npm start +``` + +## Project Structure + +``` +geekbrain-site/ +├── app/ +│ ├── layout.tsx +│ ├── page.tsx +│ └── globals.css +├── components/ +│ ├── Hero.tsx +│ ├── About.tsx +│ ├── Contact.tsx +│ ├── ParticleBackground.tsx +│ ├── GlitchText.tsx +│ └── GlowButton.tsx +├── lib/ +│ └── particles-config.ts +├── public/ +│ └── assets/ +│ └── images/ +│ └── Geekbrain-io.png +├── tailwind.config.ts +├── next.config.js +├── tsconfig.json +└── package.json +``` + +## Design + +### Colors + +- Background: `#050510` (deep navy) +- Primary: `#0088ff` (electric blue) +- Secondary: `#00ddff` (cyan) +- Accent: `#6600ff` (purple) + +### Typography + +- Headings: Space Grotesk (600, 700) +- Body: Inter (400, 500) + +## Deployment + +Deploy to Vercel or Netlify: + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=) + +## License + +Private - All rights reserved diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..8d6baea --- /dev/null +++ b/app/globals.css @@ -0,0 +1,114 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --font-space-grotesk: var(--font-space-grotesk); + --font-inter: var(--font-inter); +} + +@layer base { + body { + @apply bg-primary text-white antialiased; + } +} + +@layer components { + .scroll-reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; + } + + .scroll-reveal.visible { + opacity: 1; + transform: translateY(0); + } + + .stagger-1 { transition-delay: 0.1s; } + .stagger-2 { transition-delay: 0.2s; } + .stagger-3 { transition-delay: 0.3s; } +} + +@layer utilities { + .text-muted { + color: #8899bb; + } +} + +/* Glitch animation keyframes */ +@keyframes glitch-anim-1 { + 0%, 100% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); } + 20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, -2px); } + 40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 1px); } + 60% { clip-path: inset(25% 0 58% 0); transform: translate(1px, -1px); } + 80% { clip-path: inset(54% 0 7% 0); transform: translate(0px, 0px); } +} + +@keyframes glitch-anim-2 { + 0%, 100% { clip-path: inset(65% 0 36% 0); transform: translate(2px, -2px); } + 20% { clip-path: inset(79% 0 14% 0); transform: translate(-2px, 2px); } + 40% { clip-path: inset(51% 0 68% 0); transform: translate(1px, -1px); } + 60% { clip-path: inset(87% 0 13% 0); transform: translate(-1px, 1px); } + 80% { clip-path: inset(32% 0 67% 0); transform: translate(0px, 0px); } +} + +/* Pulse glow animation */ +@keyframes pulse-glow { + 0%, 100% { box-shadow: 0 0 5px rgba(0, 136, 255, 0.5); } + 50% { box-shadow: 0 0 15px rgba(0, 136, 255, 0.8); } +} + +/* Glitch base class */ +.glitch { + position: relative; + color: white; +} + +.glitch::before, +.glitch::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.glitch::before { + color: #00ddff; + animation-duration: var(--glitch-duration, 2.5s); + animation-name: glitch-anim-1; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate-reverse; + z-index: -1; +} + +.glitch::after { + color: #0066cc; + animation-duration: var(--glitch-duration, 2.5s); + animation-name: glitch-anim-2; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate-reverse; + z-index: -2; +} + +/* Reduced motion */ +@media (prefers-reduced-motion: reduce) { + .glitch::before, + .glitch::after { + animation: none; + } + + .scroll-reveal { + transition: none; + opacity: 1; + transform: none; + } + + .animate-pulse-glow { + animation: none; + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..0829ed6 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,47 @@ +import type { Metadata } from 'next' +import { Space_Grotesk, Inter } from 'next/font/google' +import './globals.css' + +const spaceGrotesk = Space_Grotesk({ + weight: ['600', '700'], + subsets: ['latin'], + variable: '--font-space-grotesk', +}) + +const inter = Inter({ + weight: ['400', '500'], + subsets: ['latin'], + variable: '--font-inter', +}) + +export const metadata: Metadata = { + title: 'GeekBrain.io - Venture Capital for Technical Founders', + description: 'GeekBrain.io is a venture capital fund backing technical founders building transformative technologies.', + keywords: ['venture capital', 'VC fund', 'technical founders', 'startup funding', 'GeekBrain'], + openGraph: { + title: 'GeekBrain.io', + description: 'Backing the builders of tomorrow', + type: 'website', + locale: 'en_US', + siteName: 'GeekBrain.io', + }, + twitter: { + card: 'summary_large_image', + title: 'GeekBrain.io', + description: 'Backing the builders of tomorrow', + }, +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + {children} + + + ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..19aedbb --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,45 @@ +'use client' + +import { useEffect } from 'react' +import ParticleBackground from '@/components/ParticleBackground' +import Hero from '@/components/Hero' +import About from '@/components/About' +import Contact from '@/components/Contact' + +export default function Home() { + useEffect(() => { + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1, + } + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('visible') + } + }) + }, + observerOptions + ) + + const elements = document.querySelectorAll('.scroll-reveal') + elements.forEach((el) => observer.observe(el)) + + return () => observer.disconnect() + }, []) + + return ( +
+ + + + + +
+ ) +} diff --git a/components/About.tsx b/components/About.tsx new file mode 100644 index 0000000..8bc0095 --- /dev/null +++ b/components/About.tsx @@ -0,0 +1,16 @@ +'use client' + +export default function About() { + return ( +
+
+

About

+
+

+ 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. +

+
+
+
+ ) +} diff --git a/components/Contact.tsx b/components/Contact.tsx new file mode 100644 index 0000000..ac24270 --- /dev/null +++ b/components/Contact.tsx @@ -0,0 +1,25 @@ +'use client' + +import GlowButton from './GlowButton' + +export default function Contact() { + return ( +
+
+

Connect

+ + + LinkedIn + +
+
+ ) +} diff --git a/components/GlitchText.tsx b/components/GlitchText.tsx new file mode 100644 index 0000000..c883380 --- /dev/null +++ b/components/GlitchText.tsx @@ -0,0 +1,39 @@ +'use client' + +import React from 'react' + +interface GlitchTextProps { + text: string + as?: 'h1' | 'h2' | 'h3' | 'span' + className?: string + intensity?: 'subtle' | 'normal' | 'aggressive' +} + +const intensityMap = { + subtle: 3, // 3s interval + normal: 2.5, // 2.5s interval + aggressive: 1.5, // 1.5s interval +} + +const ComponentWrapper = React.forwardRef( + ({ text, as: Component = 'h1', className, intensity = 'normal' }, ref) => { + const duration = intensityMap[intensity] + + return ( + + {text} + + ) + } +) + +ComponentWrapper.displayName = 'GlitchText' + +export default ComponentWrapper diff --git a/components/GlowButton.tsx b/components/GlowButton.tsx new file mode 100644 index 0000000..3f75059 --- /dev/null +++ b/components/GlowButton.tsx @@ -0,0 +1,53 @@ +'use client' + +import React from 'react' +import Link from 'next/link' + +interface GlowButtonProps extends React.ButtonHTMLAttributes, React.AnchorHTMLAttributes { + children: React.ReactNode + href?: string + variant?: 'primary' | 'secondary' | 'outline' +} + +const variantClasses = { + primary: + 'bg-primary text-white border border-primary hover:bg-primary-dark hover:glow-blue active:bg-primary-dark', + secondary: + 'bg-transparent text-secondary border border-secondary hover:bg-primary/10 hover:glow-cyan', + outline: + 'bg-transparent text-white border border-primary hover:bg-primary/10 hover:glow-blue', +} + +export default function GlowButton({ + children, + href, + variant = 'outline', + className = '', + ...props +}: GlowButtonProps) { + const baseClasses = ` + inline-flex items-center justify-center gap-2 + px-6 py-3 + rounded-lg + transition-all duration-300 ease-out + focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-primary-dark + disabled:opacity-50 disabled:cursor-not-allowed + ${variantClasses[variant]} + `.trim() + + const classes = `${baseClasses} ${className}`.trim() + + if (href) { + return ( + + {children} + + ) + } + + return ( + + ) +} diff --git a/components/Hero.tsx b/components/Hero.tsx new file mode 100644 index 0000000..73059f9 --- /dev/null +++ b/components/Hero.tsx @@ -0,0 +1,35 @@ +'use client' + +import GlitchText from './GlitchText' + +export default function Hero() { + return ( +
+ +

+ Backing the builders of tomorrow +

+
+ +
+
+ ) +} diff --git a/components/ParticleBackground.tsx b/components/ParticleBackground.tsx new file mode 100644 index 0000000..02cfef0 --- /dev/null +++ b/components/ParticleBackground.tsx @@ -0,0 +1,35 @@ +'use client' + +import { useEffect } from 'react' +import { Particles } from '@tsparticles/react' +import { particlesConfig } from '@/lib/particles-config' + +export default function ParticleBackground({ className }: { className?: string }) { + useEffect(() => { + let particlesContainer: any = null + + const handleVisibilityChange = () => { + if (particlesContainer) { + if (document.hidden) { + particlesContainer.pause() + } else { + particlesContainer.play() + } + } + } + + document.addEventListener('visibilitychange', handleVisibilityChange) + + return () => { + document.removeEventListener('visibilitychange', handleVisibilityChange) + } + }, []) + + return ( + + ) +} diff --git a/docs/superpowers/specs/GeekBrain.io-Website-Spec-v1.0.md b/docs/superpowers/specs/GeekBrain.io-Website-Spec-v1.0.md new file mode 100644 index 0000000..9b8ead9 --- /dev/null +++ b/docs/superpowers/specs/GeekBrain.io-Website-Spec-v1.0.md @@ -0,0 +1,921 @@ +# GeekBrain.io VC Fund Website - Complete Implementation Specification + +**Project:** GeekBrain.io single-page website +**Status:** Ready for Implementation +**Date:** 2026-03-21 +**Based on:** `2026-03-21-geekbrain-vc-webpage-design.md` + +--- + +## 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 + +**Type:** Static website (no backend required) + +--- + +## Tech Stack + +| Technology | Version | Purpose | +|------------|---------|---------| +| Next.js | 14.x (App Router) | Framework | +| React | 18.x | UI library | +| TypeScript | 5.x | Type safety | +| Tailwind CSS | 3.x | Styling with custom utilities | +| @tsparticles/react | 3.x | Particle background system | +| @tsparticles/slim | 3.x | Lightweight particle preset | +| next/font | built-in | Font optimization | +| Google Fonts | - | Space Grotesk, Inter | + +**Why this stack:** +- Next.js 14 App Router provides modern React patterns with minimal configuration +- Static generation (no SSR needed) = fast, cheap hosting +- Tailwind enables rapid development with consistent design system +- tsparticles provides performant, customizable particle effects +- next/font optimizes font loading without layout shift + +--- + +## Project Structure + +``` +geekbrain-site/ +├── app/ +│ ├── layout.tsx # Root layout with fonts, dark theme, metadata +│ ├── page.tsx # Main page composing all sections +│ └── globals.css # Tailwind imports + custom animations +├── components/ +│ ├── Hero.tsx # Full-screen hero with GlitchText +│ ├── About.tsx # Glassmorphism card with fund info +│ ├── Contact.tsx # LinkedIn social link (uses GlowButton) +│ ├── ParticleBackground.tsx # Full-screen particle canvas +│ ├── GlitchText.tsx # Reusable glitch text component +│ └── GlowButton.tsx # Reusable glowing button/link component +├── public/ +│ ├── assets/ +│ │ └── images/ +│ │ └── Geekbrain-io.png # Logo/brand image +│ └── favicon.ico # Favicon (optional, to be added) +├── lib/ +│ └── particles-config.ts # tsparticles configuration +├── tailwind.config.ts # Custom glow utilities, colors +├── next.config.js # Next.js configuration +├── tsconfig.json # TypeScript configuration +├── package.json # Dependencies & scripts +├── .env.example # Environment variable template +├── .gitignore # Git ignore rules +└── README.md # Project documentation +``` + +--- + +## Design System + +### Color Palette + +**Theme:** Dark mode, blue-dominant, cyber aesthetic + +| Name | Hex | Tailwind Name | Usage | +|------|-----|---------------|-------| +| Background | `#050510` | `bg-primary-dark` | Page background | +| Primary Accent | `#0088ff` | `text-primary` / `border-primary` | Main glows, highlights, borders | +| Secondary Accent | `#00ddff` | `text-secondary` | Bright accents, hover states | +| Tertiary Accent | `#6600ff` | `accent-purple` | Subtle contrast, depth | +| Heading Text | `#ffffff` | `text-white` | Headings | +| Body Text | `#8899bb` | `text-muted` | Body text | +| Card Background | `rgba(0, 40, 80, 0.3)` | `bg-card` | Glassmorphism cards | +| Glow Layer | `rgba(0, 136, 255, 0.3)` | `glow-blue` | Box shadow glow | + +**Tailwind Color Extension (tailwind.config.ts):** +```typescript +theme: { + extend: { + colors: { + primary: { + DEFAULT: '#0088ff', + dark: '#0066cc', + light: '#00aaff', + }, + secondary: { + DEFAULT: '#00ddff', + dark: '#00aacc', + }, + accent: { + purple: '#6600ff', + }, + } + } +} +``` + +### Typography + +| Element | Font | Weight | Size (mobile → desktop) | +|---------|------|--------|------------------------| +| H1 (Hero) | Space Grotesk | 700 | 3xl → 6xl | +| H2 (Section) | Space Grotesk | 600 | 2xl → 3xl | +| Body | Inter | 400 | base → lg | +| Code/Mono | JetBrains Mono | 400 | (optional) | + +**Font loading (layout.tsx):** +```tsx +import { Space_Grotesk, Inter } from 'next/font/google' + +const spaceGrotesk = Space_Grotesk({ + weight: ['600', '700'], + subsets: ['latin'], + variable: '--font-space-grotesk', +}) + +const inter = Inter({ + weight: ['400', '500'], + subsets: ['latin'], + variable: '--font-inter', +}) +``` + +--- + +## Visual Effects + +### Particle Background + +**Implementation:** @tsparticles/react with `tsparticles-slim` preset + custom blue/cyan config. + +**Configuration:** +```typescript +// lib/particles-config.ts +export const particlesConfig = { + fullScreen: { enable: true, zIndex: -1 }, + particles: { + number: { value: 100, density: { enable: true, value_area: 800 } }, + color: { value: ['#0088ff', '#00ddff', '#6600ff'] }, + shape: { type: 'circle' }, + opacity: { value: 0.5, random: true }, + size: { value: { min: 1, max: 3 } }, + move: { + enable: true, + speed: 0.5, + direction: 'none', + random: true, + straight: false, + outModes: { default: 'out' }, + }, + links: { + enable: true, + distance: 150, + color: '#0088ff', + opacity: 0.3, + width: 1, + }, + }, + interactivity: { + events: { + onHover: { enable: true, mode: 'repulse' }, + onClick: { enable: true, mode: 'push' }, + }, + modes: { + repulse: { distance: 100, duration: 0.4 }, + push: { quantity: 4 }, + }, + }, + detectRetina: true, +} +``` + +**Performance optimizations:** +- Pauses when tab is not visible (browser `visibilitychange` event) +- Uses `requestAnimationFrame` (built into tsparticles) +- Limited to 100 particles for smooth 60fps on most devices + +### Glitch Text Effect + +**Implementation:** CSS keyframes with pseudo-elements for chromatic aberration + +**Component:** `GlitchText.tsx` + +```tsx +interface GlitchTextProps { + text: string; + as?: 'h1' | 'h2' | 'h3' | 'span'; + className?: string; + intensity?: 'subtle' | 'normal' | 'aggressive'; // controls animation speed +} +``` + +**CSS Animation (globals.css):** +```css +@keyframes glitch-anim-1 { + 0%, 100% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); } + 20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, -2px); } + 40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 1px); } + 60% { clip-path: inset(25% 0 58% 0); transform: translate(1px, -1px); } + 80% { clip-path: inset(54% 0 7% 0); transform: translate(0px, 0px); } +} + +@keyframes glitch-anim-2 { + 0%, 100% { clip-path: inset(65% 0 36% 0); transform: translate(2px, -2px); } + 20% { clip-path: inset(79% 0 14% 0); transform: translate(-2px, 2px); } + 40% { clip-path: inset(51% 0 68% 0); transform: translate(1px, -1px); } + 60% { clip-path: inset(87% 0 13% 0); transform: translate(-1px, 1px); } + 80% { clip-path: inset(32% 0 67% 0); transform: translate(0px, 0px); } +} + +.glitch { + position: relative; + color: white; +} + +.glitch::before, +.glitch::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.glitch::before { + color: #00ddff; + animation: glitch-anim-1 2.5s infinite linear alternate-reverse; + z-index: -1; +} + +.glitch::after { + color: #0066cc; + animation: glitch-anim-2 2.5s infinite linear alternate-reverse; + z-index: -2; +} + +@media (prefers-reduced-motion: reduce) { + .glitch::before, + .glitch::after { + animation: none; + } +} +``` + +**Usage:** +```tsx + +``` + +**Timing:** 2.5s loop, ~70% stable, 30% glitching + +### Glow Effects + +**Custom Tailwind utilities (tailwind.config.ts):** +```typescript +plugin: function({ addUtilities }) { + addUtilities({ + '.glow-blue': { + boxShadow: ` + 0 0 5px rgba(0, 136, 255, 0.5), + 0 0 10px rgba(0, 136, 255, 0.3), + 0 0 15px rgba(0, 136, 255, 0.2) + `, + }, + '.glow-cyan': { + boxShadow: ` + 0 0 5px rgba(0, 221, 255, 0.5), + 0 0 10px rgba(0, 221, 255, 0.3) + `, + }, + '.text-glow-blue': { + textShadow: ` + 0 0 5px rgba(0, 136, 255, 0.7), + 0 0 10px rgba(0, 136, 255, 0.5) + `, + }, + '.animate-pulse-glow': { + animation: 'pulse-glow 2s ease-in-out infinite', + }, + }) +} +``` + +**Additional keyframe:** +```css +@keyframes pulse-glow { + 0%, 100% { box-shadow: 0 0 5px rgba(0, 136, 255, 0.5); } + 50% { box-shadow: 0 0 15px rgba(0, 136, 255, 0.8); } +} +``` + +**GlowButton component:** +```tsx +interface GlowButtonProps { + children: React.ReactNode; + onClick?: () => void; + href?: string; + variant?: 'primary' | 'secondary' | 'outline'; + className?: string; +} +``` + +### Scroll Animations + +**Implementation:** IntersectionObserver API (native, no library needed) + +**Utility hook (optional):** `useIntersectionObserver` to trigger fade-in when elements enter viewport + +**Animation classes:** +```css +.scroll-reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} + +.scroll-reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* Staggered for list items */ +.stagger-1 { transition-delay: 0.1s; } +.stagger-2 { transition-delay: 0.2s; } +.stagger-3 { transition-delay: 0.3s; } +``` + +--- + +## Components + +### Hero + +**Content:** +- Headline: `GEEKBRAIN.IO` (GlitchText component, default glitch effect) +- Tagline: "Backing the builders of tomorrow" +- Optional: Subtle animated scroll indicator (down arrow) + +**Layout:** +- Full viewport height (`min-h-screen`) +- Centered content, transparent background +- Particles visible behind +- Fade-in animation on page load + +**Implementation:** +```tsx +export default function Hero() { + return ( +
+ +

+ Backing the builders of tomorrow +

+ {/* Optional */} +
+ ) +} +``` + +### About + +**Content:** +- Heading: "About" +- Body: + > 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. + +**Layout:** +- Glassmorphism card: `rgba(0, 40, 80, 0.3)` background with border +- Blue glow border on hover: `border-primary glow-blue` +- Padding: `p-6 md:p-8` +- Fade-in animation on scroll +- Max-width: `max-w-3xl` centered + +**Implementation:** +```tsx +export default function About() { + return ( +
+
+

About

+
+

+ GeekBrain.io is a venture capital fund focused on backing technical founders... +

+
+
+
+ ) +} +``` + +### Contact + +**Content:** +- Heading: "Connect" +- LinkedIn icon link with glow effect (GlowButton) +- Optional brief text + +**Layout:** +- Centered, horizontal arrangement +- Icon: Blue glow on hover, subtle pulse when idle +- Fade-in animation on scroll + +**Implementation:** +```tsx +export default function Contact() { + return ( +
+
+

Connect

+ + + LinkedIn + +
+
+ ) +} +``` + +--- + +## Component Specifications + +### GlitchText + +**Purpose:** Animated glitch text effect for headings + +**Interface:** +```tsx +interface GlitchTextProps { + text: string; // Required: text to display + as?: 'h1' | 'h2' | 'h3' | 'span'; // HTML element, default 'h1' + className?: string; // Additional CSS classes + intensity?: 'subtle' | 'normal' | 'aggressive'; // Animation intensity +} +``` + +**Implementation details:** +- Uses CSS custom properties to control animation duration based on intensity +- `subtle`: 3s interval (63% stable, 37% glitch) +- `normal`: 2.5s interval (70% stable, 30% glitch) ← **default** +- `aggressive`: 1.5s interval (50% stable, 50% glitch) +- Respects `prefers-reduced-motion` by disabling animation +- Attributes `data-text` for CSS pseudo-element content + +### GlowButton + +**Purpose:** Interactive button/link with glowing hover effect + +**Interface:** +```tsx +interface GlowButtonProps { + children: React.ReactNode; + onClick?: () => void; + href?: string; // If provided, renders as + variant?: 'primary' | 'secondary' | 'outline'; + className?: string; + [rest: React.HTMLAttributes]: any; +} +``` + +**Variants:** +- `primary`: Filled background (`bg-primary`), white text, blue glow on hover +- `secondary`: Transparent background, cyan border/text, cyan glow on hover +- `outline`: Transparent, primary border, blue glow on hover ← **default** + +**Styling:** +- Padding: `px-6 py-3` (adjustable via className) +- Rounded: `rounded-lg` +- Transition: `transition-all duration-300 ease-out` +- Glow effect: `hover:glow-blue` (or `hover:glow-cyan` for secondary) +- Focus ring: `focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2` + +### ParticleBackground + +**Purpose:** Full-screen particle canvas behind all content + +**Interface:** +```tsx +interface ParticleBackgroundProps { + config?: ParticlesConfig; // Optional override of default config + className?: string; +} +``` + +**Behavior:** +- Renders as fixed, full-viewport canvas with `z-index: -1` +- Uses `Particles` component from @tsparticles/react +- Loads config from `lib/particles-config.ts` by default +- Pauses animation when tab is not visible +- Automatically handles resize + +**Implementation:** +```tsx +'use client' + +import { Particles } from '@tsparticles/react' +import { particlesConfig } from '@/lib/particles-config' + +export default function ParticleBackground({ className }: { className?: string }) { + return ( + + ) +} +``` + +--- + +## Page Layout + +**Structure:** +``` +┌─────────────────────────────────────────────┐ +│ [ParticleBackground - fixed, z-index: -1] │ +│ ┌─────────────────────────────────────┐ │ +│ │ HERO (100vh, flex center) │ │ +│ │ ┌─────────────────────────────┐ │ │ +│ │ │ GEEKBRAIN.IO (glitch) │ │ │ +│ │ │ "Backing the builders... │ │ │ +│ │ └─────────────────────────────┘ │ │ +│ │ ↓ (optional) │ │ +│ └─────────────────────────────────────┘ │ +│ ┌─────────────────────────────────────┐ │ +│ │ ABOUT (py-20 px-4) │ │ +│ │ ┌─────────────────────────────┐ │ │ +│ │ │ [Glass card, blue glow] │ │ │ +│ │ │ About text... │ │ │ +│ │ └─────────────────────────────┘ │ │ +│ └─────────────────────────────────────┘ │ +│ ┌─────────────────────────────────────┐ │ +│ │ CONTACT (py-20 px-4, center) │ │ +│ │ ┌─────────────────────────────┐ │ │ +│ │ │ [GlowButton - LinkedIn] │ │ │ +│ │ └─────────────────────────────┘ │ │ +│ └─────────────────────────────────────┘ │ +│ [Footer - optional (copyright)] │ +└─────────────────────────────────────────────┘ +``` + +**Sizing:** +- Mobile-first responsive design +- Padding: `px-4` on mobile, larger sections use container `max-w-6xl mx-auto` +- Text sizes scale with Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`) + +--- + +## Accessibility Requirements + +### Mandatory Standards +- **WCAG 2.1 AA** compliance minimum +- **Semantic HTML** - proper heading hierarchy (h1 → h2 → h3) +- **Keyboard navigation** - all interactive elements focusable with visible focus states +- **Screen reader** - ARIA labels where needed, meaningful link text +- **Color contrast** - minimum 4.5:1 for normal text, 3:1 for large text + +### Implementation Checklist + +- [ ] `GlitchText` respects `prefers-reduced-motion` (disables animation) +- [ ] All animations can be reduced via `@media (prefers-reduced-motion: reduce)` +- [ ] Scroll-reveal animations do not trap focus +- [ ] Links have descriptive text (not just "click here") +- [ ] Social links include `aria-label` (e.g., "GeekBrain.io on LinkedIn") +- [ ] Logo image has appropriate `alt` text (if decorative, use `alt=""`) +- [ ] Focus visible states with sufficient contrast (use `focus-visible` classes) +- [ ] Heading hierarchy: H1 (site title) → H2 (section titles) → no skipping +- [ ] Color contrast tests: text on dark background meets AA standards + +### Testing +- Test with VoiceOver (macOS) or NVDA (Windows) +- Navigate entirely with keyboard (Tab, Enter, Arrow keys) +- Use browser DevTools Lighthouse for accessibility audit + +--- + +## Performance Targets + +### Lighthouse Goals +- **Performance**: >90 +- **Accessibility**: >90 +- **Best Practices**: >90 +- **SEO**: >100 (static site with proper meta tags) + +### Bundle Size +- Total JavaScript < 200KB (gzipped) +- tsparticles-slim: ~30KB (already lightweight) +- No heavy image assets (only logo) + +### Optimizations Applied +- Static generation (no SSR) +- Fonts loaded via `next/font` (no layout shift) +- Images optimized with Next.js Image component (if any) +- Particles pause when tab hidden +- CSS animations use GPU-accelerated properties (transform, opacity) +- Code splitting automatic via Next.js + +--- + +## SEO & Metadata + +**layout.tsx head elements:** +```tsx +export const metadata: Metadata = { + title: 'GeekBrain.io - Venture Capital for Technical Founders', + description: 'GeekBrain.io is a venture capital fund backing technical founders building transformative technologies.', + keywords: ['venture capital', 'VC fund', 'technical founders', 'startup funding', 'GeekBrain'], + openGraph: { + title: 'GeekBrain.io', + description: 'Backing the builders of tomorrow', + type: 'website', + locale: 'en_US', + siteName: 'GeekBrain.io', + }, + twitter: { + card: 'summary_large_image', + title: 'GeekBrain.io', + description: 'Backing the builders of tomorrow', + }, +} +``` + +**Favicon/OG Image:** +- Place `favicon.ico` in `/public` +- Create Open Graph image `og-image.jpg` (1200×630px) with logo and tagline +- Place in `/public/assets/images/` + +--- + +## Responsive Breakpoints + +Based on Tailwind defaults: + +| Breakpoint | Width | Usage | +|------------|-------|-------| +| mobile (default) | < 640px | Stack layout, smaller text (text-base, h1: text-3xl) | +| sm | 640px+ | Tablet portrait | +| md | 768px+ | Tablet landscape, smaller laptop | +| lg | 1024px+ | Standard laptop/desktop | +| xl | 1280px+ | Large desktop screens | + +**Typography scaling:** +- H1: `text-3xl sm:text-4xl md:text-5xl lg:text-6xl` +- Body: `text-base md:text-lg` +- Padding: `p-6 md:p-8 lg:p-12` + +**Container strategy:** +```tsx +
+ {/* Content */} +
+``` + +--- + +## Next.js Configuration + +**next.config.js:** +```javascript +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + swcMinify: true, + // Optional: output 'standalone' for Docker deployment + // output: 'standalone', +} + +module.exports = nextConfig +``` + +**No special configuration needed** for this static site. Default settings suffice. + +--- + +## TypeScript Configuration + +**tsconfig.json (use Next.js default):** +```json +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} +``` + +--- + +## Dependencies + +**package.json:** +```json +{ + "name": "geekbrain-site", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "next": "^14.2.5", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "@tsparticles/react": "^3.0.0", + "@tsparticles/slim": "^3.0.0" + }, + "devDependencies": { + "typescript": "^5.5.3", + "@types/node": "^20.14.10", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "tailwindcss": "^3.4.7", + "postcss": "^8.4.40", + "autoprefixer": "^10.4.19", + "eslint": "^8.57.0", + "eslint-config-next": "^14.2.5" + } +} +``` + +--- + +## Environment Variables + +**Not required** for this static site. If any APIs are added later, use `.env.local`: + +``` +# Example (not used currently) +# NEXT_PUBLIC_ANALYTICS_ID=... +``` + +--- + +## Setup Instructions (for developer) + +1. **Initialize Next.js project:** + ```bash + npx create-next-app@latest geekbrain-site --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*" + cd geekbrain-site + ``` + +2. **Install additional dependencies:** + ```bash + npm install @tsparticles/react @tsparticles/slim + npm install -D tailwindcss postcss autoprefixer + npx tailwindcss init -p + ``` + +3. **Configure Tailwind** (use config from this spec) + +4. **Create file structure** as shown above + +5. **Add fonts** via `next/font` in `layout.tsx` + +6. **Add logo** to `public/assets/images/Geekbrain-io.png` + +7. **Run dev server:** + ```bash + npm run dev + ``` + +--- + +## Deployment + +**Recommended:** Vercel (zero-config for Next.js) + +**Alternative:** Netlify + +**Steps:** +1. Push code to GitHub repository +2. Import project in Vercel +3. Build command: `npm run build` +4. Output directory: `.next` (automatically detected) +5. Environment: Node.js 18+ +6. Deploy + +**Domain:** Configure DNS for geekbrain.io to point to Vercel + +--- + +## Future Expansion + +The architecture supports easy additions: + +1. **Portfolio page** (`app/portfolio/page.tsx`) - showcase investments +2. **Team page** (`app/team/page.tsx`) - team bios +3. **Incubation section** - explain services for incubated startups +4. **Contact form** - would require API route (`app/api/contact/route.ts`) + email service +5. **Blog/News** - `app/blog/[...slug]/page.tsx` with MDX or CMS +6. **Additional social links** - Twitter/X, GitHub, etc. +7. **Theme toggle** - light/dark mode (currently dark-only) + +--- + +## Implementation Checklist + +### Phase 1: Foundation +- [x] Project initialized with Next.js 14 + TypeScript + Tailwind +- [x ] Dependencies installed (tsparticles) +- [ ] `tailwind.config.ts` configured with custom colors, glow utilities +- [ ] `next.config.js` created +- [ ] `lib/particles-config.ts` written +- [ ] `app/globals.css` includes Tailwind directives + custom glitch keyframes + +### Phase 2: Components +- [ ] `components/GlitchText.tsx` implemented + tests +- [ ] `components/GlowButton.tsx` implemented + tests +- [ ] `components/ParticleBackground.tsx` implemented +- [ ] `components/Hero.tsx` implemented +- [ ] `components/About.tsx` implemented +- [ ] `components/Contact.tsx` implemented + +### Phase 3: Pages & Layout +- [ ] `app/layout.tsx` - font setup, metadata, dark background +- [ ] `app/page.tsx` - compose all components +- [ ] Logo added to `public/assets/images/` + +### Phase 4: Polish & Testing +- [ ] Accessibility audit (Lighthouse) +- [ ] Performance testing (Lighthouse >90) +- [ ] Cross-browser testing (Chrome, Firefox, Safari) +- [ ] Mobile responsiveness testing +- [ ] Reduced motion testing +- [ ] Keyboard navigation test + +### Phase 5: Deployment Prep +- [ ] Environment variables documentation +- [ ] Favicon added +- [ ] Open Graph image created +- [ ] robots.txt added +- [ ] sitemap.xml (optional) + +--- + +## Notes for Implementer + +1. **All components are client components** only when necessary (`ParticleBackground`, `GlitchText` with animations). Use `'use client'` directive only in those files. Layout and page can remain server components. + +2. **Animation performance:** Use `transform` and `opacity` for 60fps. Avoid animating `top`, `left`, `width`, `height`. + +3. **Scroll reveal:** Can be implemented in page root with `IntersectionObserver` hook that adds `.visible` class to elements with `.scroll-reveal`. + +4. **Glassmorphism:** Uses `backdrop-filter: blur()` if desired. Test browser support. Fallback to semi-transparent background only. + +5. **Logo usage:** Use Next.js `Image` component for optimization: + ```tsx + import Image from 'next/image' + GeekBrain.io + ``` + +6. **Code quality:** Follow TypeScript best practices, proper error boundaries if needed (no error boundaries needed for this static site). + +7. **Git:** Commit frequently with clear messages. Create feature branches if needed. + +--- + +## Revision History + +| Date | Version | Changes | +|------|---------|---------| +| 2026-03-21 | 1.0 | Consolidated spec created, ready for implementation | + +--- + +**Ready to build!** 🚀 diff --git a/docs/superpowers/specs/review-2026-03-21-geekbrain-site.md b/docs/superpowers/specs/review-2026-03-21-geekbrain-site.md new file mode 100644 index 0000000..bbd8363 --- /dev/null +++ b/docs/superpowers/specs/review-2026-03-21-geekbrain-site.md @@ -0,0 +1,219 @@ +# 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. diff --git a/lib/particles-config.ts b/lib/particles-config.ts new file mode 100644 index 0000000..d8c9c8f --- /dev/null +++ b/lib/particles-config.ts @@ -0,0 +1,67 @@ +export const particlesConfig = { + fullScreen: { + enable: true, + zIndex: -1, + }, + particles: { + number: { + value: 100, + density: { + enable: true, + value_area: 800, + }, + }, + color: { + value: ['#0088ff', '#00ddff', '#6600ff'], + }, + shape: { + type: 'circle', + }, + opacity: { + value: 0.5, + random: true, + }, + size: { + value: { min: 1, max: 3 }, + }, + move: { + enable: true, + speed: 0.5, + direction: 'none', + random: true, + straight: false, + outModes: { + default: 'out', + }, + }, + links: { + enable: true, + distance: 150, + color: '#0088ff', + opacity: 0.3, + width: 1, + }, + }, + interactivity: { + events: { + onHover: { + enable: true, + mode: 'repulse', + }, + onClick: { + enable: true, + mode: 'push', + }, + }, + modes: { + repulse: { + distance: 100, + duration: 0.4, + }, + push: { + quantity: 4, + }, + }, + }, + detectRetina: true, +} diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..ae88795 --- /dev/null +++ b/next.config.js @@ -0,0 +1,7 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + swcMinify: true, +} + +module.exports = nextConfig diff --git a/package.json b/package.json new file mode 100644 index 0000000..118d720 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "geekbrain-site", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "next": "^14.2.5", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "@tsparticles/react": "^3.0.0", + "@tsparticles/slim": "^3.0.0" + }, + "devDependencies": { + "typescript": "^5.5.3", + "@types/node": "^20.14.10", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "tailwindcss": "^3.4.7", + "postcss": "^8.4.40", + "autoprefixer": "^10.4.19", + "eslint": "^8.57.0", + "eslint-config-next": "^14.2.5" + } +} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..d0c615b --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,9 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} + +export default config diff --git a/public/assets/images/README.md b/public/assets/images/README.md new file mode 100644 index 0000000..6fb5231 --- /dev/null +++ b/public/assets/images/README.md @@ -0,0 +1,5 @@ +# Logo + +Place the GeekBrain.io logo file here as `Geekbrain-io.png`. + +Recommended: Transparent PNG, ~200-300px width. diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..f0665da --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,69 @@ +import type { Config } from 'tailwindcss' + +const config: Config = { + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}', + ], + theme: { + extend: { + colors: { + primary: { + DEFAULT: '#0088ff', + dark: '#0066cc', + light: '#00aaff', + }, + secondary: { + DEFAULT: '#00ddff', + dark: '#00aacc', + }, + accent: { + purple: '#6600ff', + }, + background: { + primary: '#050510', + }, + }, + fontFamily: { + sans: ['var(--font-inter)', 'system-ui', 'sans-serif'], + heading: ['var(--font-space-grotesk)', 'system-ui', 'sans-serif'], + mono: ['var(--font-jetbrains-mono)', 'monospace'], + }, + }, + }, + plugins: [ + function ({ addUtilities }) { + addUtilities({ + '.glow-blue': { + boxShadow: ` + 0 0 5px rgba(0, 136, 255, 0.5), + 0 0 10px rgba(0, 136, 255, 0.3), + 0 0 15px rgba(0, 136, 255, 0.2) + `, + }, + '.glow-cyan': { + boxShadow: ` + 0 0 5px rgba(0, 221, 255, 0.5), + 0 0 10px rgba(0, 221, 255, 0.3) + `, + }, + '.text-glow-blue': { + textShadow: ` + 0 0 5px rgba(0, 136, 255, 0.7), + 0 0 10px rgba(0, 136, 255, 0.5) + `, + }, + '.animate-pulse-glow': { + animation: 'pulse-glow 2s ease-in-out infinite', + }, + '.bg-card': { + backgroundColor: 'rgba(0, 40, 80, 0.3)', + }, + }) + }, + ], + darkMode: 'class', +} + +export default config diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..d8b9323 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}