CalliCraft is an interactive, beginner-friendly web platform that teaches the timeless art of calligraphy — covering history, writing styles, technique galleries, and hands-on learning resources.

🌐 View Live Demo  ·  🐛 Report a Bug  ·  💡 Request Feature

---

📚 Table of Contents

• About the Project
• Features
• Pages Overview
• Tech Stack
• Getting Started
• Project Structure
• Team
• Future Roadmap
• Contributing
• License

---

🎨 About the Project

CalliCraft (formerly quickcalligraphy-learning) is a multi-page educational website that makes calligraphy approachable for absolute beginners and interesting for enthusiasts.

Whether you're curious about the origins of Chinese ink brush scripts, want to explore Western Gothic lettering, or simply want to see what beautiful handwriting looks like across cultures — CalliCraft brings it all together in one clean, animated, fully responsive experience.

This project was built as a collaborative team effort at APTECH, combining structured web development with a genuine passion for art and creative education.

🎯 Target Audience	🗺️ Core Focus	💡 Key Value
Beginners & Enthusiasts	Calligraphy Education	Accessible Skill-Building
Students & Artists	History + Modern Styles	Creativity Meets Technology

---

✨ Features

• 🏠 Welcome Landing Page — Elegant introduction with an animated hero section
• 📖 History & Origins — Deep dive into the evolution of calligraphy across cultures
• 🖋️ Style Catalogue — Easy, complex, and culturally diverse writing styles
• 🖼️ Visual Gallery — Curated collection of calligraphy artwork and examples
• 📬 Contact Form — Reach out, give feedback, or ask questions
• 📱 Fully Responsive — Optimized for desktop, tablet, and mobile
• ✨ Scroll Animations — Smooth AOS (Animate on Scroll) transitions throughout
• 🎨 Clean UI/UX — Thoughtfully designed visual hierarchy and typography

---

📄 Pages Overview

CalliCraft/
│
├── 🏠  Home Page       →  Hero banner, intro section, quick navigation
├── ℹ️  About Page      →  History of calligraphy, cultural significance, modern use
├── 🖋️  Styles Page     →  Easy styles, complex scripts, cultural writing systems
├── 🖼️  Gallery Page    →  Curated images of calligraphy examples and artwork
└── 📬  Contact Page    →  Contact form, location details, feedback section

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Semantic page structure and content markup
CSS3	Custom styling, transitions, and visual design
Bootstrap 5	Responsive grid layout and UI components
AOS (Animate on Scroll)	Smooth scroll-triggered entrance animations
Font Awesome	Scalable vector icons throughout the interface

---

🚀 Getting Started

Prerequisites

All you need is a modern web browser — no installations or build tools required!

Option 1 — Clone & Open Locally

# Clone the repository
git clone https://github.com/itxashancode/CalliCraft.git

# Navigate into the project folder
cd CalliCraft

# Open in your browser
open index.html
# On Windows:
start index.html

Option 2 — Download ZIP

1. Click the green Code button at the top of this page
2. Select Download ZIP
3. Extract the folder anywhere on your machine
4. Open index.html in any browser

No npm. No config. No setup. Just open and explore. ✅

---

📁 Project Structure

CalliCraft/
│
├── index.html          # Main entry point — Home Page
├── index.css           # Global stylesheet with custom design tokens
│
├── assets/             # (recommended for expansion)
│   ├── images/         # Calligraphy gallery images
│   ├── fonts/          # Custom web fonts
│   └── icons/          # Favicon and icon assets
│
└── README.md           # Project documentation (you are here)

---

👥 Team

This project was built collaboratively by four APTECH students:

👤 Member	🛠️ Contribution
Manahil	Home Page layout and site-wide navigation structure
Ailsa Khan Ghori	Gallery section and Styles catalogue page
Umul Banin	Contact page design and feedback form functionality
Ashan (@itxashancode)	About page, CSS design system, and AOS scroll animations

---

🔮 Future Roadmap

Here's what's planned for future versions of CalliCraft:

• 📥 Downloadable practice sheets — Printable templates for different calligraphy styles
• 🎬 Video tutorials — Step-by-step guided lessons embedded directly in the site
• 🌙 Dark mode — Toggle between light and elegant dark themes
• 🔍 Search & Filter — Browse styles and gallery items by category or difficulty level
• 📱 Progressive Web App (PWA) — Installable experience on mobile devices
• 🌐 Multi-language support — Content available in Urdu, Arabic, and Chinese

---

🤝 Contributing

Contributions are welcome and appreciated! To contribute:

1. Fork this repository
2. Create a feature branch: git checkout -b feature/your-feature-name
3. Commit your changes: git commit -m "feat: add [your feature]"
4. Push to your fork: git push origin feature/your-feature-name
5. Open a Pull Request — describe what you changed and why

Please keep your code clean, well-commented, and consistent with the existing structure.

---

🏷️ Topics & SEO Keywords

calligraphy calligraphy-learning html-css bootstrap5 web-design beginner-friendly educational-website art-education frontend-development responsive-design aos-animations open-source student-project typography lettering beautiful-writing

---

📄 License

This project is open source and available under the MIT License.

---

"Calligraphy is the art of giving form to signs in an expressive, harmonious, and skillful manner."

Made with ✒️ and ❤️ by itxashancode & Team · Pakistan 🇵🇰

⭐ If you found this project useful or inspiring, give it a star — it really helps!