Main Dashboard - Clean, minimalist interface with interactive 3D elements

Blog Interface - Thoughtfully curated content on minimalist living

Tech Stack Badges:

We are passionate about creating digital experiences that promote mindful, intentional living. This platform combines modern web technologies with minimalist design principles to share knowledge about simplifying life and finding joy in less.

Whether you're beginning your minimalism journey or looking to deepen your practice, this platform offers interactive guides, thoughtful articles, and an immersive experience that embodies the minimalist philosophy.

	No installation required! Visit our live site to experience minimalist living content.

⭐ Star History

Experience minimalist objects through immersive 3D visualizations. Our custom Three.js-powered ModelViewer component brings minimalist concepts to life with interactive models including pottery, plants, vinyl records, and furniture.

Interactive 3D models floating with smooth animations

Key capabilities include:

• 🎯 WebGL-Powered: High-performance 3D rendering
• 🎮 Interactive Controls: Orbit, rotate, and explore objects
• 📱 Responsive: Optimized for all device sizes
• ✨ Smooth Animations: Floating and rotation effects
• 🎨 Minimalist Objects: Carefully curated 3D models

Comprehensive guides and articles covering all aspects of minimalist living, from getting started to advanced concepts like digital minimalism and space organization.

Thoughtfully organized content with beautiful typography

Content Categories:

• Beginner Guides: Step-by-step introduction to minimalism
• Digital Minimalism: Technology and mindful usage
• Home & Space: Creating minimalist living environments
• Lifestyle: Daily practices and mindset shifts

Beyond the core features, this platform includes:

• 🌓 Dark/Light Themes: Seamless theme switching with system preference detection
• 📱 Mobile-First Design: Fully responsive with touch-optimized 3D controls
• 🔍 Full-Text Search: Easy navigation through all content
• 📊 Mermaid Diagrams: Visual representation of minimalist concepts
• 📝 MDX Support: Enhanced markdown with React components
• 🎨 Space Grotesk Typography: Clean, modern font for optimal readability
• ⚡ Fast Loading: Optimized performance with Docusaurus
• 🛡️ SEO Optimized: Meta tags and structured data for better discovery

✨ More features are continuously being added to enhance the minimalist learning experience.

Docusaurus 3.5.2

React 18

Three.js

MDX

Mermaid

Vercel

Frontend Stack:

• Framework: Docusaurus 3.5.2 for static site generation
• UI Library: React 18 for component-based architecture
• 3D Graphics: Three.js with GLTFLoader and OrbitControls
• Content: MDX for enhanced markdown capabilities
• Diagrams: Mermaid for visual concept representation
• Icons: Lucide React for consistent iconography

Styling & Design:

• Typography: Space Grotesk font family
• CSS: Custom CSS with CSS variables for theming
• Responsive: Mobile-first design principles
• Themes: Light/dark mode with system preference detection

Development & Deployment:

• Build Tool: Docusaurus CLI with hot reloading
• Deployment: Vercel with automatic builds
• Performance: Optimized bundles and lazy loading
• SEO: Automatic sitemap and meta tag generation

graph TB
    subgraph "Frontend Layer"
        A[Docusaurus App] --> B[React Components]
        B --> C[3D Model Viewer]
        B --> D[Content Pages]
        C --> E[Three.js Engine]
    end
    
    subgraph "Content Layer"
        F[MDX Blog Posts] --> G[Markdown Docs]
        G --> H[Static Images]
        H --> I[3D Models]
    end
    
    subgraph "Build & Deploy"
        J[Docusaurus Build]
        K[Static Site Generation]
        L[Vercel Deployment]
    end
    
    A --> F
    F --> J
    J --> K
    K --> L
    
    subgraph "Assets"
        M[GLTF Models]
        N[Images]
        O[Fonts]
    end
    
    E --> M
    D --> N
    B --> O

src/
├── components/
│   └── ModelViewer.js      # Three.js 3D model component
├── css/
│   └── custom.css          # Global styles and themes
├── pages/
│   ├── index.js           # Homepage with 3D models
│   └── index.module.css   # Homepage-specific styles
└── static/
    ├── img/               # Static images and logos
    └── models/            # 3D GLTF model files

blog/                      # Blog posts (MDX/Markdown)
├── 2024-10-31-minimalist-beginner-guide.md
├── 2024-11-01-digital-minimalism.md
├── 2024-11-01-minimalist-living-space.md
└── ...

docs/                      # Documentation articles
├── ultimate-simplicity.md
├── digital-minimalism-guide.md
├── minimalist-home.md
└── img/                   # Article images organized by topic
    ├── minimalist-home/
    ├── digital-minimalism/
    └── ...

Key Metrics:

• ⚡ 95+ Lighthouse Score across all categories
• 🚀 < 2s First Contentful Paint
• 💨 < 1s Time to Interactive
• 📊 99.9% uptime reliability
• 🎮 60fps 3D model interactions

Performance Optimizations:

• 🎯 Static Site Generation: Pre-built pages for instant loading
• 📦 Code Splitting: Automatic bundle optimization by Docusaurus
• 🖼️ Image Optimization: Responsive images with proper sizing
• 🎨 3D Model Optimization: Compressed GLTF models with efficient loading

• Node.js 18.0+ (Download)
• npm/yarn/pnpm package manager
• Git (Download)
• Modern browser with WebGL support

1. Clone Repository

git clone https://github.com/ChanMeng666/minimalist-good-post.git
cd minimalist-good-post

2. Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm (recommended)
pnpm install

3. Start Development

npm start

🎉 Success! Open http://localhost:3000 to view the application.

# Start with hot reload
npm start

# Build for production
npm run build

# Serve production build locally
npm run serve

# Clear cache
npm run clear

One-Click Deploy:

Manual Deployment:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

# Build Docker image
docker build -t minimalist-living .

# Run container
docker run -p 3000:3000 minimalist-living

docker-compose.yml:

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production

Adding Blog Posts:

1. Create new .md or .mdx file in blog/ directory
2. Add frontmatter with metadata:

---
slug: your-post-slug
title: Your Post Title
authors: [chanmeng]
tags: [minimalism, lifestyle]
---

Your content here...

Adding Documentation:

1. Create new .md file in docs/ directory
2. Add to sidebar configuration in sidebars.js

1. Prepare Model:

• Use GLTF (.glb) format for best performance
• Optimize model size and polygon count
• Place in static/models/ directory

2. Add to Component:

<ModelViewer
  modelPath="/models/your-model.glb"
  width={500}
  height={500}
  title="Your Model Title"
/>

Themes and Styling:

Edit src/css/custom.css to customize:

• Color schemes
• Typography
• Component styles
• Dark/light theme variables

Site Configuration:

Modify docusaurus.config.js for:

• Site metadata
• Navigation structure
• Plugin configuration
• Theme settings

Our design follows minimalist principles:

• Less is More: Clean, uncluttered interfaces
• Intentional Spacing: Generous whitespace for readability
• Typography First: Space Grotesk for modern, clean text
• Interactive Elements: 3D models that enhance, not distract
• Accessibility: High contrast, keyboard navigation, screen reader support

minimalist-good-post/
├── blog/                  # Blog posts (MDX/Markdown)
├── docs/                  # Documentation articles
│   └── img/              # Article images organized by topic
├── src/
│   ├── components/       # React components
│   │   └── ModelViewer.js # 3D model viewer
│   ├── css/             # Custom styles
│   └── pages/           # Static pages
├── static/
│   ├── img/             # Static images and logos
│   └── models/          # 3D GLTF model files
├── docusaurus.config.js  # Main configuration
├── sidebars.js          # Documentation sidebar
└── package.json         # Dependencies and scripts

Setup Development Environment:

# Clone and install
git clone https://github.com/ChanMeng666/minimalist-good-post.git
cd minimalist-good-post
npm install

# Start development server
npm start

1. New 3D Models:

• Add GLTF models to static/models/
• Import in components using ModelViewer
• Configure lighting and controls as needed

2. New Content Types:

• Create new document categories in docs/
• Configure sidebar in sidebars.js
• Add appropriate styling in custom.css

# Build test
npm run build

# Serve locally
npm run serve

# Clear cache if needed
npm run clear

We welcome contributions! Here's how you can help improve this minimalist living platform:

Content Contributions:

• 📝 Articles: Share your minimalism journey
• 🖼️ Images: Add inspiring minimalist photography
• 🎨 3D Models: Contribute minimalist object models
• 🐛 Bug Reports: Help us improve the experience

Development Contributions:

• Follow React and Docusaurus best practices
• Maintain minimalist design principles
• Add tests for new components
• Update documentation

Pull Request Process:

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

This project is licensed under the Apache-2.0 License - see the LICENSE file for details.

Open Source Benefits:

• ✅ Commercial use allowed
• ✅ Modification allowed
• ✅ Distribution allowed
• ✅ Private use allowed

Chan Meng Creator & Lead Developer

Chan Meng

• LinkedIn: chanmeng666
• GitHub: ChanMeng666
• Email: [email protected]
• Website: chanmeng.live

🌿 Sharing the Art of Minimalist Living 🌟
Empowering intentional living through technology

⭐ Star us on GitHub • 📖 Read the Articles • 🐛 Report Issues • 💡 Share Ideas • 🤝 Contribute

Built with ❤️ for the minimalist community