forked from emre/www_projectmycelium_com
docs: update README with comprehensive project documentation
- Expanded project overview with detailed technology stack and dependencies - Added deployment information for production and staging environments - Included complete development setup instructions and contribution guidelines - Added issue reporting process and contact information - Updated file structure documentation with new component organization - Included branding guidelines and font specifications - Added links to project management
This commit is contained in:
252
README.md
252
README.md
@@ -1,93 +1,195 @@
|
|||||||
# Project Mycelium Website
|
# Project Mycelium Website
|
||||||
|
|
||||||
A multi-page website for Project Mycelium built with React, Vite, TypeScript, and Tailwind CSS.
|
All in one project mycelium website
|
||||||
|
|
||||||
## Tech Stack
|
|
||||||
|
|
||||||
- **Framework**: React 19
|
- **Repository:** [https://git.ourworld.tf/ourworld_web/www_project_mycelium_com/](https://git.ourworld.tf/ourworld_web/www_project_mycelium_com/)
|
||||||
- **Build Tool**: Vite 7
|
|
||||||
|
|
||||||
|
- **Main Branch (Production):** [https://www.projectmycelium.com/](https://www.projectmycelium.com)
|
||||||
|
- **Dev Branch (Staging):** [https://www2.projectmycelium.com/](https://www2.projectmycelium.com/)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## About
|
||||||
|
|
||||||
|
|
||||||
|
This is the official website for Mycelium , built using Vite.js and Tailwind CSS.
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## Technologies
|
||||||
|
|
||||||
|
|
||||||
|
- **Framework**: Vite.js (React)
|
||||||
- **Language**: TypeScript
|
- **Language**: TypeScript
|
||||||
- **Styling**: Tailwind CSS 4
|
- **Styling**: Tailwind CSS
|
||||||
- **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
|
## Dependencies
|
||||||
- **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
|
- **@emailjs/browser**: ^4.4.1
|
||||||
|
- **@headlessui/react**: ^2.2.9
|
||||||
|
- **@heroicons/react**: ^2.2.0
|
||||||
|
- **@lobehub/icons**: ^1.97.2
|
||||||
|
- **@radix-ui/react-icons**: ^1.3.2
|
||||||
|
- **@react-three/drei**: ^9.89.2
|
||||||
|
- **@react-three/fiber**: ^8.15.12
|
||||||
|
- **@tabler/icons-react**: ^3.35.0
|
||||||
|
- **@tailwindcss/forms**: ^0.5.10
|
||||||
|
- **@types/node**: ^20.19.23
|
||||||
|
- **@types/react**: ^18.3.26
|
||||||
|
- **@types/react-dom**: ^18.3.7
|
||||||
|
- **@types/react-router-dom**: ^5.3.3
|
||||||
|
- **class-variance-authority**: ^0.7.1
|
||||||
|
- **clsx**: ^2.1.1
|
||||||
|
- **cobe**: ^0.6.5
|
||||||
|
- **dotted-map**: ^2.2.3
|
||||||
|
- **framer-motion**: ^10.18.0
|
||||||
|
- **lucide-react**: ^0.544.0
|
||||||
|
- **motion**: ^12.23.24
|
||||||
|
- **popmotion**: ^11.0.5
|
||||||
|
- **react**: ^18.3.1
|
||||||
|
- **react-countup**: ^6.5.3
|
||||||
|
- **react-dom**: ^18.3.1
|
||||||
|
- **react-icons**: ^5.5.0
|
||||||
|
- **react-router-dom**: ^7.9.4
|
||||||
|
- **react-type-animation**: ^3.2.0
|
||||||
|
- **tailwind-merge**: ^3.3.1
|
||||||
|
- **tailwindcss**: ^4.1.15
|
||||||
|
- **three**: ^0.151.0
|
||||||
|
- **typescript**: ^5.9.3
|
||||||
|
- **use-debounce**: ^10.0.6
|
||||||
|
|
||||||
Install dependencies:
|
### Dev Dependencies
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
Run development server:
|
- **@tailwindcss/postcss**: ^4.1.15
|
||||||
```bash
|
- **@types/three**: ^0.151.0
|
||||||
npm run dev
|
- **@vitejs/plugin-react**: ^5.0.4
|
||||||
```
|
- **autoprefixer**: ^10.4.20
|
||||||
|
- **eslint**: ^8.57.1
|
||||||
|
- **prettier**: ^3.6.2
|
||||||
|
- **prettier-plugin-tailwindcss**: ^0.6.14
|
||||||
|
- **sharp**: ^0.33.1
|
||||||
|
- **tw-animate-css**: ^1.4.0
|
||||||
|
- **vite**: ^7.1.7
|
||||||
|
|
||||||
Build for production:
|
---
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
Preview production build:
|
|
||||||
```bash
|
|
||||||
npm run preview
|
|
||||||
```
|
|
||||||
|
|
||||||
## Styling
|
## File Structure
|
||||||
|
|
||||||
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
|
- **Pages**: `src/pages`
|
||||||
|
- **Components**: `src/components`
|
||||||
|
- **Images**: `public/images`, `src/images`
|
||||||
|
- **CSS**: `src/index.css`, `src/App.css`
|
||||||
|
|
||||||
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
|
## Branding
|
||||||
|
|
||||||
|
|
||||||
|
- **Font**: 'Mulish', 'Neuton'
|
||||||
|
- **Logos**: `public/images/logo.svg`, `public/images/logomark.svg`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## Get Started
|
||||||
|
|
||||||
|
|
||||||
|
Follow these steps to get the project running locally:
|
||||||
|
|
||||||
|
|
||||||
|
1. **Install Dependencies**:
|
||||||
|
|
||||||
|
`npm install`
|
||||||
|
|
||||||
|
2. **Build the Project**:
|
||||||
|
|
||||||
|
`npm run build`
|
||||||
|
|
||||||
|
3. **Start the Development Server**:
|
||||||
|
|
||||||
|
`npm run dev`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## Development Guide
|
||||||
|
|
||||||
|
|
||||||
|
This project follows a modular, component-based architecture. Pages are assembled by combining reusable components into a single layout.
|
||||||
|
|
||||||
|
|
||||||
|
### Homepage Structure
|
||||||
|
|
||||||
|
|
||||||
|
The homepage is composed of components from `src/components` and pages are defined in `src/pages`.
|
||||||
|
|
||||||
|
To edit a specific section of the homepage, navigate to `src/components/` and modify the corresponding component file.
|
||||||
|
|
||||||
|
|
||||||
|
### Base Layout
|
||||||
|
|
||||||
|
The base layout for all pages is defined in `src/components/Layout.tsx`.
|
||||||
|
|
||||||
|
|
||||||
|
### Creating a New Page
|
||||||
|
|
||||||
|
To create a new page, add a new route in `src/App.tsx` and create a corresponding component in `src/pages`.
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
|
||||||
|
- **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.
|
||||||
|
- **Always work on the `development` branch.** Create a feature branch from `development` and submit your pull request to `development`.
|
||||||
|
- **Request a review.** After submitting your pull request, ask the team to review and accept it into the `main` branch.
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## Report an Error
|
||||||
|
|
||||||
|
|
||||||
|
To report an issue, please use the following link and provide the requested information:
|
||||||
|
|
||||||
|
|
||||||
|
- **Issue Tracker**: [git.ourworld.tf/ourworld_web/HOME/issues/new](https://git.ourworld.tf/ourworld_web/HOME/issues/new) and tag **OW Website & Wiki Project 2025**
|
||||||
|
|
||||||
|
|
||||||
|
- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
|
||||||
|
|
||||||
|
|
||||||
|
When reporting an issue, please include:
|
||||||
|
|
||||||
|
|
||||||
|
- **URL**: The page where the error occurred.
|
||||||
|
- **Repo**: The repository you are working with.
|
||||||
|
- **Branch**: The specific branch you are on.
|
||||||
|
- **Problem**: A detailed description of the problem.
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## Questions
|
||||||
|
|
||||||
|
|
||||||
|
If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).
|
||||||
|
|||||||
Reference in New Issue
Block a user