Project Mycelium Website

A multi-page website for Project Mycelium built with React, Vite, TypeScript, and Tailwind CSS.

Tech Stack

• Framework: React 19
• Build Tool: Vite 7
• Language: TypeScript
• Styling: Tailwind CSS 4
• Routing: React Router DOM 7
• Animations: Framer Motion 11

Project Structure

src/
├── components/          # Shared components
│   ├── AnimatedSection.tsx
│   ├── Button.tsx
│   ├── CircleBackground.tsx
│   ├── Container.tsx
│   ├── Header.tsx
│   ├── Layout.tsx
│   └── Logo.tsx
├── pages/              # Page-specific components
│   ├── home/           # Home page blocks
│   ├── cloud/          # Cloud page blocks
│   ├── network/        # Network page blocks
│   │   ├── animations/ # SVG animations
│   │   ├── Hero.tsx
│   │   ├── About.tsx
│   │   ├── Features.tsx
│   │   ├── PrimaryFeatures.tsx
│   │   ├── SecondaryFeatures.tsx
│   │   ├── CallToAction.tsx
│   │   └── NetworkPage.tsx
│   └── agents/         # Agents page blocks
├── styles/
│   └── tailwind.css    # Tailwind configuration
└── App.tsx            # Main app with routing

Pages

• Home (/) - Main landing page with placeholder content
• Cloud (/cloud) - Mycelium Cloud information (placeholder)
• Network (/network) - Full Network page with:
  • Hero section
  • Our Mission (About)
  • Core Components (Features with animations)
  • How It Works
  • Roadmap
  • Call to Action
• Agents (/agents) - Mycelium Agents information (placeholder)

Development

Install dependencies:

npm install

Run development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

Styling

The project follows the same styling conventions as the source Mycelium website:

• Font: Inter (Google Fonts)
• Colors: Custom gray scale and cyan accent
• Animations: Framer Motion with reduced motion support
• Design: Tailwind CSS with custom theme extensions

Migration Notes

This website consolidates multiple one-pager sites into a single multi-page application. The Network page contains fully migrated content from the original www_mycelium_net repository, including:

• All animated SVG components
• Responsive layouts
• Hover effects and transitions
• Accessibility features