sasha-astiadi
24f6da37ed
- Removed CircleBackground component and its instances from desktop and mobile views for cleaner design - Updated image shadows from shadow-xl to shadow-2xl for stronger depth effect - Modified image positioning with -ml-32 margin for better layout alignment in tablet and desktop views - Removed unnecessary background animations to improve visual focus on feature screenshots
Project Mycelium Website
All in one project mycelium website
-
Repository: https://git.ourworld.tf/ourworld_web/www_projectmycelium_com/
-
Main Branch (Production): https://www.projectmycelium.com/
-
Dev Branch (Staging): 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
- Styling: Tailwind CSS
Dependencies
- @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
Dev Dependencies
- @tailwindcss/postcss: ^4.1.15
- @types/three: ^0.151.0
- @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
File Structure
- Pages:
src/pages - Components:
src/components - Images:
public/images,src/images - CSS:
src/index.css,src/App.css
Branding
- Font: 'Mulish', 'Neuton'
- Logos:
public/images/logo.svg,public/images/logomark.svg
Get Started
Follow these steps to get the project running locally:
-
Install Dependencies:
npm install -
Build the Project:
npm run build -
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
mainbranch directly. All changes must be reviewed and merged by the team through a pull request. - Always work on the
developmentbranch. Create a feature branch fromdevelopmentand submit your pull request todevelopment. - Request a review. After submitting your pull request, ask the team to review and accept it into the
mainbranch.
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 and tag OW Website & Wiki Project 2025
-
See the current web rpoject on OW Website & Wiki Project 2025
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.