🎨 Learn A Day | Interactive Chinese Etymology Digital Art Project

A beautiful, interactive journey through 3000+ years of Chinese character history

Experience the fascinating stories behind Chinese characters through stunning animated calligraphy, deep etymological insights, and the cultural connections between Chinese, Japanese, and Korean languages.

✨ What Makes This Special

• 🖌️ Animated Calligraphy: Watch characters come to life with beautiful stroke-by-stroke animations
• 📖 Rich Etymology: Discover the ancient origins and evolution of each character
• 🌏 CJK Connections: Learn how Chinese characters influenced Japanese kanji and Korean hanja
• 🎭 Interactive Experience: Swipe, tap, and explore at your own pace
• 🎨 Digital Art: Each character is presented as a work of art with dynamic animations
• 🔊 Audio Narration: Listen to pronunciation guides and fascinating stories
• 📱 Mobile-First: Optimized for touch and gesture-based interaction

🌟 Featured Characters

Character	Pinyin	Meaning	Story
上下	shàngxià	Up & Down	Simple ideograms showing position in space and time
歡迎	huānyíng	Welcome	Joy (歡) meets encounter (迎) on life's journey
左右	zuǒyòu	Left & Right	Mirrored hands with fascinating folk etymology
未来	wèilái	Future	"Not yet" (未) but "to come" (來) - borrowed from Sanskrit
感謝	gǎnxiè	Thank You	Heart (心) of feeling expressing humble gratitude
世界	shìjiè	World	Generation (世) meets boundary (界) - from Buddhist texts

🚀 Getting Started

Prerequisites

• Node.js 18+ or pnpm
• npm, yarn, pnpm, or bun

Installation

# Clone the repository
git clone https://github.com/yourusername/learn-a-day.git

# Install dependencies
npm install
# or
pnpm install

# Set up environment variables
cp .env.example .env.local
# Add your configuration

# Run the development server
npm run dev

Open http://localhost:3000 to start exploring!

🎯 Key Features

Interactive Learning Experience

• Swipe Navigation: Seamlessly move between character history, pronunciation, and etymology
• Visual Storytelling: Each section uses animations, scrolling effects, and interactive elements
• Audio Integration: Native pronunciation in Chinese, Japanese, and Korean
• Progress Tracking: Save your learning journey with Supabase authentication

Technical Highlights

• Next.js 15 App Router: Server-side rendering for optimal performance
• Framer Motion: Smooth, gesture-based animations
• TypeScript: Type-safe development
• Supabase: User authentication and progress tracking
• Responsive Design: Beautiful on mobile, tablet, and desktop

📂 Project Structure

learn-a-day/
├── src/
│   ├── app/                    # Next.js 15 App Router
│   │   ├── layout.tsx         # SEO metadata & structured data
│   │   ├── page.tsx           # Main experience
│   │   ├── sitemap.ts         # Dynamic sitemap generation
│   │   └── words/[words]/     # Individual character pages
│   ├── components/            # React components
│   │   ├── Morph.tsx         # Character animations
│   │   ├── Whiteboard.tsx    # Calligraphy drawing
│   │   ├── FoldableMap.tsx   # Interactive visuals
│   │   └── ...
│   ├── data/
│   │   ├── information.ts     # Character data
│   │   └── onboarding.ts      # Learning sequence
│   └── styles/                # Global CSS
├── public/                    # Static assets
│   ├── *.svg                 # Character stroke SVGs
│   ├── *.mp3                 # Audio narrations
│   └── robots.txt            # SEO configuration
└── README.md

🎨 Design Philosophy

This project celebrates the beauty of written language as an art form. Each character tells a story spanning millennia, connecting ancient oracle bone inscriptions to modern digital typography. We believe learning should be:

• Delightful: Beautiful animations and smooth interactions
• Meaningful: Deep cultural and historical context
• Accessible: Clear explanations for all levels
• Engaging: Interactive, not passive consumption

🌐 SEO & Discoverability

This project includes comprehensive SEO optimization:

• Dynamic sitemap generation
• Structured data (JSON-LD) for rich search results
• Open Graph and Twitter Card metadata
• Semantic HTML and accessibility features
• Optimized meta descriptions highlighting the interactive, fun nature

🤝 Contributing

We welcome contributions! Whether you're interested in:

• Adding new characters and etymology
• Improving animations and interactions
• Translating content
• Fixing bugs or improving performance

Please feel free to open an issue or submit a pull request.

📝 License

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

🙏 Acknowledgments

• Character etymology research from ancient texts and modern scholarship
• Audio recordings by native speakers
• Inspired by the rich history of CJK writing systems
• Built with love for language, art, and technology

🔗 Links

• Website: learnaday.com
• Twitter: @bhadayun

---

Made with ❤️ for language lovers, etymology enthusiasts, and digital art appreciators

Discover a new character every day. Experience the beauty of written language.