🚀 ProjectVerse

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

• ✅ 50+ live 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

ProjectVerse
│
├── index.html              # Main landing page
├── style.css               # Global styles
├── script.js               # Search + routing helpers & data loader
├── pages/                  # Category pages (mini-projects, beginner-projects, html-css-projects, js-projects)
├── data/                   # JSON data files with project metadata
│   ├── mini-projects.json
│   ├── beginner-projects.json
│   ├── html-css-projects.json
│   ├── js-projects.json
│   └── categories.json
├── projects/               # All project source files organized cleanly
│   ├── mini/               # 10 Mini practice projects
│   ├── beginner/           # 20 Beginner-friendly fundamental projects
│   ├── html-css/           # 20 Pure HTML/CSS UI projects
│   └── js/                 # 20 JavaScript logic apps
└── README.md

---

📌 What’s Inside?

This repository contains 70 interactive projects categorized into:

• Mini Projects (projects/mini/) – 10 small calculators, widgets & utilities
• Beginner Projects (projects/beginner/) – 20 fundamental JavaScript concept apps
• UI/UX Designs (projects/html-css/) – 20 frontend UI designs using pure HTML and CSS
• Logic Apps (projects/js/) – 20 JavaScript apps with advanced logic and interactivity

Each folder represents an independent project with its own clean 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/ProjectVerse.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: projects/mini/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
• Clean project structuring
• Git & GitHub workflows

---

🌱 Features Implemented

• ✅ Dynamic JSON-driven project system – All projects listed from JSON data
• ✅ Interactive In-line Player – Preview any project directly within the app
• ✅ Live project links – Direct links to each project
• ✅ Search functionality – Filter 70+ projects in real time
• ✅ 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 and development purposes.

---