Skip to content

Latest commit

 

History

1 Commit

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

書道の道 - The Way of Shodo

A rich, interactive website dedicated to the art of Japanese calligraphy (書道/Shodo). This project combines traditional Japanese aesthetics with modern web technologies to create an immersive learning experience.

✨ Features

🖌️ Interactive Digital Brush Practice

  • Pressure-sensitive drawing canvas
  • Adjustable brush size and opacity
  • Natural brush stroke simulation
  • Save and clear functionality

📚 Stroke Order Learning

  • Animated demonstrations for basic kanji characters
  • Step-by-step stroke sequence visualization
  • Educational information for each character
  • Interactive character selection

🎨 Gallery Showcase

  • Beautiful display of different calligraphy styles:
    • 楷書体 (Kaisho) - Regular script
    • 行書体 (Gyosho) - Semi-cursive script
    • 草書体 (Sosho) - Cursive script
  • Hover animations and effects

📖 Educational Content

  • History and philosophy of Shodo
  • Traditional tools explanation (筆墨硯紙)
  • Different writing styles and techniques

🚀 Getting Started

  1. Clone the repository:
git clone https://github.com/yourusername/shodo-website.git
cd shodo-website
  1. Open index.html in your web browser:
open index.html

That's it! No build process or dependencies required.

🎯 Demo

Visit the live demo: Shodo Website Demo (Add your GitHub Pages URL here)

📱 Responsive Design

The website is fully responsive and works seamlessly across:

  • Desktop computers
  • Tablets
  • Mobile phones

🛠️ Technologies Used

  • HTML5 - Semantic markup and Canvas API
  • CSS3 - Advanced styling, animations, and grid layouts
  • JavaScript (ES6+) - Interactive features and canvas drawing
  • Google Fonts - Noto Serif JP for authentic Japanese typography

🎨 Design Philosophy

The design embraces traditional Japanese aesthetics:

  • Wabi-sabi - Beauty in simplicity and imperfection
  • Ma - Strategic use of negative space
  • Traditional color palette - Gold accents (#d4af37) on neutral backgrounds
  • Typography - Careful selection of Japanese fonts

🔧 Key Components

Digital Brush Engine

class DigitalBrush {
    // Simulates natural brush behavior
    // Pressure-sensitive strokes
    // Variable opacity and width
}

Stroke Order Animation

class StrokeOrderAnimation {
    // SVG-based stroke animations
    // Timed sequence demonstrations
    // Educational character data
}

📚 Learning Resources

The website includes educational content about:

  • Kanji stroke order rules
  • Brush holding techniques
  • Traditional tools and materials
  • Historical context of Shodo

🎮 Easter Eggs

Try the Konami code (↑↑↓↓←→←→BA) for a special animation!

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. Areas for improvement:

  • Additional kanji characters
  • More stroke order animations
  • Enhanced brush physics
  • Mobile touch improvements

📄 License

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

🙏 Acknowledgments

  • Traditional Shodo masters for inspiration
  • Japanese calligraphy community
  • Open source web development community

📞 Contact

For questions or suggestions, please open an issue on GitHub.


書道は心を込めて文字を書く日本の伝統芸術です。

Shodo is the traditional Japanese art of writing characters with heart and spirit.

About

Interactive Japanese calligraphy (Shodo) learning website with digital brush practice and stroke order animations

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages