🚀 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 & data loader
├── html/                   # Project listing pages (10, 20, HTML-CSS, JS)
├── data/                   # JSON data files with project metadata
├── 10-project/             # 10 Mini projects
├── 20-basic-project/       # 20 Beginner-friendly projects
├── HTML-CSS-Project/       # 16 Pure HTML/CSS UI projects
├── other-projects/         # 12 JavaScript 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

---

🌱 Features Implemented

• ✅ Dynamic JSON-driven project system – All projects listed from JSON data
• ✅ Live project links – Direct links to each project
• ✅ Search functionality – Filter projects by name
• ✅ GitHub code links – Quick access to project source code
• ✅ Responsive design – Works on all devices
• ✅ Deployed on Vercel – View Live

---

⭐ 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

---