https://github.com/chanmeng666/minimalist-good-post
ใOne star = One happy developer doing a little dance ๐โญ๏ธใA modern blog platform dedicated to minimalist living, built with Docusaurus and enhanced with interactive 3D visualizations. Sharing the art of simple, intentional living through curated articles and guides.
https://github.com/chanmeng666/minimalist-good-post
blog css digital-minimalism documentation docusaurus javascript lifestyle markdown mdx minimalism personal-development productivity react static-site threejs
Last synced: 3 months ago
JSON representation
ใOne star = One happy developer doing a little dance ๐โญ๏ธใA modern blog platform dedicated to minimalist living, built with Docusaurus and enhanced with interactive 3D visualizations. Sharing the art of simple, intentional living through curated articles and guides.
- Host: GitHub
- URL: https://github.com/chanmeng666/minimalist-good-post
- Owner: ChanMeng666
- License: apache-2.0
- Created: 2024-10-27T06:23:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-15T04:14:21.000Z (over 1 year ago)
- Last Synced: 2025-01-15T06:13:27.240Z (over 1 year ago)
- Topics: blog, css, digital-minimalism, documentation, docusaurus, javascript, lifestyle, markdown, mdx, minimalism, personal-development, productivity, react, static-site, threejs
- Language: CSS
- Homepage: https://minimalist-good-post.vercel.app
- Size: 56.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](#)
# ๐ฟ Minimalist Living
Share a Simple and Beautiful Way of Life
A modern blog platform dedicated to minimalist living, built with cutting-edge web technologies.
Features interactive 3D visualizations, comprehensive guides, and a thoughtfully designed minimalist interface.
One-click **FREE** deployment of your minimalist lifestyle blog.
[Live Site][live-site] ยท [Documentation][docs] ยท [Blog Posts][blog] ยท [Issues][github-issues-link]
[][live-site]
[![][github-release-shield]][github-release-link]
[![][cloudflare-shield]][cloudflare-link]
[![][github-stars-shield]][github-stars-link]
[![][github-forks-shield]][github-forks-link]
[![][github-issues-shield]][github-issues-link]
[![][github-license-shield]][github-license-link]
**Share Minimalist Living Repository**
[![][share-x-shield]][share-x-link]
[![][share-telegram-shield]][share-telegram-link]
[![][share-whatsapp-shield]][share-whatsapp-link]
[![][share-reddit-shield]][share-reddit-link]
[![][share-linkedin-shield]][share-linkedin-link]
๐ Pioneering the future of minimalist lifestyle sharing. Built for those seeking intentional living.
> [!TIP]
> Add your project screenshots here to showcase the user interface and key features.
Main Dashboard - Clean, minimalist interface with interactive 3D elements
Blog Interface - Thoughtfully curated content on minimalist living
## ๐ฌ Demo Video
> [!NOTE]
> Experience the interactive 3D models and smooth navigation in action.
https://github.com/user-attachments/assets/804024d8-a380-4de7-875a-9ef2eca167b1
*Interactive 3D models showcasing minimalist objects*
**Tech Stack Badges:**
> [!IMPORTANT]
> This project demonstrates modern web development practices with Docusaurus and React. It combines interactive 3D graphics with content management to provide an immersive educational experience about minimalist living. Features include interactive 3D models, responsive design, dark/light themes, and comprehensive minimalism guides.
๐ Table of Contents
#### TOC
- [๐ฟ Minimalist LivingShare a Simple and Beautiful Way of Life](#-minimalist-livingshare-a-simple-and-beautiful-way-of-life)
- [๐ฌ Demo Video](#-demo-video)
- [TOC](#toc)
- [](#)
- [๐ Introduction](#-introduction)
- [โจ Key Features](#-key-features)
- [`1` Interactive 3D Models](#1-interactive-3d-models)
- [`2` Rich Content Library](#2-rich-content-library)
- [`*` Additional Features](#-additional-features)
- [๐ ๏ธ Tech Stack](#๏ธ-tech-stack)
- [๐๏ธ Architecture](#๏ธ-architecture)
- [System Architecture](#system-architecture)
- [Component Structure](#component-structure)
- [Content Structure](#content-structure)
- [โก๏ธ Performance](#๏ธ-performance)
- [Performance Metrics](#performance-metrics)
- [๐ Getting Started](#-getting-started)
- [Prerequisites](#prerequisites)
- [Quick Installation](#quick-installation)
- [Development Mode](#development-mode)
- [๐ณ Deployment](#-deployment)
- [`A` Cloudflare Pages Deployment](#a-cloudflare-pages-deployment)
- [`B` Docker Deployment](#b-docker-deployment)
- [๐ Usage Guide](#-usage-guide)
- [Content Management](#content-management)
- [Adding 3D Models](#adding-3d-models)
- [Customization](#customization)
- [๐จ Design Philosophy](#-design-philosophy)
- [๐ฆ Project Structure](#-project-structure)
- [โจ๏ธ Development](#๏ธ-development)
- [Local Development](#local-development)
- [Adding Features](#adding-features)
- [Testing](#testing)
- [๐ค Contributing](#-contributing)
- [๐ License](#-license)
- [๐ฅ Author](#-author)
####
## ๐ Introduction
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.
> [!NOTE]
> - Node.js >= 18.0 required
> - Modern browser with WebGL support for 3D models
> - No external accounts required for basic usage
| [![][demo-shield-badge]][live-site] | No installation required! Visit our live site to experience minimalist living content. |
| :------------------------------------ | :--------------------------------------------------------------------------------------------- |
> [!TIP]
> **โญ Star us** to receive all updates about new minimalist living content and features!
โญ Star History
## โจ Key Features
### `1` Interactive 3D Models
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
[![][back-to-top]](#readme-top)
### `2` Rich Content Library
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
[![][back-to-top]](#readme-top)
### `*` Additional Features
Beyond the core features, this platform includes:
- [x] ๐ **Dark/Light Themes**: Seamless theme switching with system preference detection
- [x] ๐ฑ **Mobile-First Design**: Fully responsive with touch-optimized 3D controls
- [x] ๐ **Full-Text Search**: Easy navigation through all content
- [x] ๐ **Mermaid Diagrams**: Visual representation of minimalist concepts
- [x] ๐ **MDX Support**: Enhanced markdown with React components
- [x] ๐จ **Space Grotesk Typography**: Clean, modern font for optimal readability
- [x] โก **Fast Loading**: Optimized performance with Docusaurus
- [x] ๐ก๏ธ **SEO Optimized**: Meta tags and structured data for better discovery
> โจ More features are continuously being added to enhance the minimalist learning experience.
[![][back-to-top]](#readme-top)
## ๐ ๏ธ Tech Stack
Docusaurus 3.5.2
React 18
Three.js
MDX
Mermaid
Cloudflare Pages
**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**: Cloudflare Pages with global CDN
- **Performance**: Optimized bundles and lazy loading
- **SEO**: Automatic sitemap and meta tag generation
> [!TIP]
> Each technology was selected to create a fast, accessible, and visually appealing platform for sharing minimalist living content.
## ๐๏ธ Architecture
### System Architecture
> [!TIP]
> This architecture supports content-driven development and easy expansion, making it perfect for bloggers and content creators focused on minimalist living.
```mermaid
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[Cloudflare Pages 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
```
### Component Structure
```
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
```
### Content Structure
```
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/
โโโ ...
```
## โก๏ธ Performance
### Performance Metrics
**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
> [!NOTE]
> Performance metrics are continuously monitored and optimized for the best user experience.
## ๐ Getting Started
### Prerequisites
> [!IMPORTANT]
> Ensure you have the following installed:
- Node.js 18.0+ ([Download](https://nodejs.org/))
- npm/yarn/pnpm package manager
- Git ([Download](https://git-scm.com/))
- Modern browser with WebGL support
### Quick Installation
**1. Clone Repository**
```bash
git clone https://github.com/ChanMeng666/minimalist-good-post.git
cd minimalist-good-post
```
**2. Install Dependencies**
```bash
# Using npm
npm install
# Using yarn
yarn install
# Using pnpm (recommended)
pnpm install
```
**3. Start Development**
```bash
npm start
```
๐ **Success!** Open [http://localhost:3000](http://localhost:3000) to view the application.
### Development Mode
```bash
# Start with hot reload
npm start
# Build for production
npm run build
# Serve production build locally
npm run serve
# Clear cache
npm run clear
```
## ๐ณ Deployment
### `A` Cloudflare Pages Deployment
**Why Cloudflare Pages:**
- Global CDN with 300+ edge locations
- Zero cold starts for static sites
- Free SSL and unlimited bandwidth
- Built-in DDoS protection
```mermaid
graph LR
A[Local Build] -->|npm run build| B[./build directory]
B -->|wrangler pages deploy| C[Cloudflare Pages CDN]
C --> D[minimalist-good-post.pages.dev]
style A fill:#f9f9f9,stroke:#333
style C fill:#F38020,stroke:#333,color:#fff
style D fill:#4CAF50,stroke:#333,color:#fff
```
**Manual Deployment:**
```bash
# Install Wrangler CLI
npm i -g wrangler
# Login to Cloudflare
wrangler login
# Build the site
npm run build
# Deploy to Cloudflare Pages
wrangler pages deploy ./build --project-name minimalist-good-post
```
**Git Integration (Recommended):**
1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com/) > Pages
2. Connect your GitHub repository
3. Set build command: `npm run build`
4. Set build output directory: `build`
5. Every push to `main` will auto-deploy
### `B` Docker Deployment
```bash
# Build Docker image
docker build -t minimalist-living .
# Run container
docker run -p 3000:3000 minimalist-living
```
**docker-compose.yml:**
```yaml
version: '3.8'
services:
app:
build: .
ports:
- "3000:3000"
environment:
- NODE_ENV=production
```
## ๐ Usage Guide
### Content Management
**Adding Blog Posts:**
1. Create new `.md` or `.mdx` file in `blog/` directory
2. Add frontmatter with metadata:
```markdown
---
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`
### Adding 3D Models
**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:**
```jsx
```
### Customization
**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
## ๐จ Design Philosophy
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
## ๐ฆ Project Structure
```
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
```
## โจ๏ธ Development
### Local Development
**Setup Development Environment:**
```bash
# Clone and install
git clone https://github.com/ChanMeng666/minimalist-good-post.git
cd minimalist-good-post
npm install
# Start development server
npm start
```
### Adding Features
**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`
### Testing
```bash
# Build test
npm run build
# Serve locally
npm run serve
# Clear cache if needed
npm run clear
```
## ๐ค Contributing
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
[![][pr-welcome-shield]][pr-welcome-link]
## ๐ License
This project is licensed under the Apache-2.0 License - see the [LICENSE](LICENSE) file for details.
**Open Source Benefits:**
- โ
Commercial use allowed
- โ
Modification allowed
- โ
Distribution allowed
- โ
Private use allowed
## ๐ฅ Author
**Chan Meng**
- 
LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)
- 
GitHub: [ChanMeng666](https://github.com/ChanMeng666)
- 
Email: [chanmeng.dev@gmail.com](mailto:chanmeng.dev@gmail.com)
- 
Website: [chanmeng.org](https://chanmeng.org/)
---
๐ฟ 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**
---
[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
[live-site]: https://minimalist-good-post.pages.dev
[docs]: https://minimalist-good-post.pages.dev/docs/ultimate-simplicity
[blog]: https://minimalist-good-post.pages.dev/blog
[github-issues-link]: https://github.com/ChanMeng666/minimalist-good-post/issues
[github-stars-link]: https://github.com/ChanMeng666/minimalist-good-post/stargazers
[github-forks-link]: https://github.com/ChanMeng666/minimalist-good-post/forks
[github-contributors-link]: https://github.com/ChanMeng666/minimalist-good-post/contributors
[github-release-link]: https://github.com/ChanMeng666/minimalist-good-post/releases
[pr-welcome-link]: https://github.com/ChanMeng666/minimalist-good-post/pulls
[github-license-link]: https://github.com/ChanMeng666/minimalist-good-post/blob/main/LICENSE
[github-release-shield]: https://img.shields.io/github/v/release/ChanMeng666/minimalist-good-post?color=369eff&labelColor=black&logo=github&style=flat-square
[cloudflare-shield]: https://img.shields.io/badge/cloudflare%20pages-online-F38020?labelColor=black&logo=cloudflarepages&style=flat-square
[cloudflare-link]: https://minimalist-good-post.pages.dev
[github-contributors-shield]: https://img.shields.io/github/contributors/ChanMeng666/minimalist-good-post?color=c4f042&labelColor=black&style=flat-square
[github-forks-shield]: https://img.shields.io/github/forks/ChanMeng666/minimalist-good-post?color=8ae8ff&labelColor=black&style=flat-square
[github-stars-shield]: https://img.shields.io/github/stars/ChanMeng666/minimalist-good-post?color=ffcb47&labelColor=black&style=flat-square
[github-issues-shield]: https://img.shields.io/github/issues/ChanMeng666/minimalist-good-post?color=ff80eb&labelColor=black&style=flat-square
[github-license-shield]: https://img.shields.io/badge/license-Apache--2.0-white?labelColor=black&style=flat-square
[pr-welcome-shield]: https://img.shields.io/badge/๐ค_PRs_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
[demo-shield-badge]: https://img.shields.io/badge/TRY%20DEMO-ONLINE-F38020?labelColor=black&logo=cloudflarepages&style=for-the-badge
[share-x-link]: https://x.com/intent/tweet?hashtags=minimalism,opensource&text=Check%20out%20this%20amazing%20minimalist%20living%20platform&url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fminimalist-good-post
[share-telegram-link]: https://t.me/share/url?text=Check%20out%20this%20minimalist%20living%20platform&url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fminimalist-good-post
[share-whatsapp-link]: https://api.whatsapp.com/send?text=Check%20out%20this%20minimalist%20living%20platform%20https%3A%2F%2Fgithub.com%2FChanMeng666%2Fminimalist-good-post
[share-reddit-link]: https://www.reddit.com/submit?title=Amazing%20Minimalist%20Living%20Platform&url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fminimalist-good-post
[share-linkedin-link]: https://linkedin.com/sharing/share-offsite/?url=https://github.com/ChanMeng666/minimalist-good-post
[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square
[share-telegram-shield]: https://img.shields.io/badge/-share%20on%20telegram-black?labelColor=black&logo=telegram&logoColor=white&style=flat-square
[share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square
[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square
[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black&logo=linkedin&logoColor=white&style=flat-square
