94 lines
2.5 KiB
Markdown
94 lines
2.5 KiB
Markdown
# 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:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
Run development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Build for production:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Preview production build:
|
|
```bash
|
|
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
|