🚀 My-Projects

A curated collection of front-end web projects built using HTML, CSS, and JavaScript.

This repository brings together multiple mini-projects and UI experiments into one organized portfolio for learning, practice, and showcasing skills.

🎯 Goal: Learn by building & maintain all projects in a single, structured repository.

---

📌 Highlights

• ✅ 30+ mini projects
• ✅ Beginner to intermediate level
• ✅ Tailwind-styled landing page with glassmorphism
• ✅ Descriptions on all project cards
• ✅ Live-preview friendly (open in browser / Live Server)
• ✅ One main repo – easy maintenance

---

📁 Repository Structure

My-Projects
│
├── index.html              # Main portfolio page
├── style.css               # Global styles
├── script.js               # Search + routing helpers
├── html/                   # Project listing pages (10, 20, HTML-CSS, JS)
├── 10 Project/             # Mini projects
├── 20 Basic Project/       # Basic projects
├── HTML-CSS-Project/       # Pure HTML/CSS UIs
├── Project/                # Other JS logic apps
└── README.md

---

📌 What’s Inside?

This repository contains multiple project folders, including:

• 10 Projects – Small to medium-level practice projects
• 20 Basic Projects – Beginner-friendly projects to strengthen fundamentals
• HTML-CSS Projects – Frontend UI projects using pure HTML and CSS
• Other Projects – JavaScript and logic-based applications

Each folder represents an independent project with its own source files.

---

🛠 Tech Stack

• HTML5
• CSS3
• JavaScript (ES6+)
• Tailwind CSS (CDN)
• Font Awesome (icons)

---

▶️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/debug-node/My-Projects.git

2. Open the folder in VS Code.

3. Open index.html in your browser
   OR use the Live Server extension (no build step needed—Tailwind is via CDN).

4. Click on any project to see it run.

---

🔗 Special Note: Loan Calculator

• 📁 Path: 10 Project/Loan Calculator
• 🔖 Maintained as an individual GitHub repository
• 🔗 Linked using Git submodule
• 🧩 Keeps code modular & reusable
• ⚡ If needed, initialize submodules: git submodule update --init --recursive

---

🎯 Learning Outcomes

By working on these projects, you’ll understand:

• DOM manipulation
• Event handling
• CSS layouts & animations
• JavaScript logic building
• Project structuring
• Git & GitHub workflows

---

🌱 Future Improvements

• Generate project lists from a JSON source
• Add live demo links per project
• Add light/dark theme toggle
• Bundle optional local Tailwind build (for offline use / custom @apply)

---

⭐ Support

If you like this repository, don’t forget to give it a ⭐ on GitHub!

---

📄 License

This project is open-source and free to use for learning purposes.

---

👤 Author

Aditya Kumar
GitHub: debug-node

---