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

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

2.5 KiB Raw Permalink Blame History