Ayushparikh-code · atharvachavan289-gif · Apr 22, 2026 · Apr 23, 2026 · May 11, 2026 · May 11, 2026
diff --git a/breaking-bad-characters/README.md b/breaking-bad-characters/README.md
@@ -1,33 +1,44 @@
-# Breaking Bad Characters - React Application   
+# 🧪 Breaking Bad Characters Explorer
 
-## About the Project
-A single page web application that uses the breaking bad API to display and filter characters from the show
+A sleek, single-page React application that fetches and displays character data from the Breaking Bad universe. Users can easily browse and dynamically filter through their favorite characters using real-time API data.
 
-## Technologies Used
+This project is part of the `Web-dev-mini-projects` collection.
 
-- React
-  - Hooks
-  - Components
-- CSS
-  - CSS Grid
-- Javascript
-  - Axios
-  - ES6
-- API
-  - Breaking Bad API
+## ✨ Key Features
+* **Dynamic Grid Layout:** Displays character profiles in a highly responsive CSS Grid.
+* **Live Filtering:** Instantly search and filter characters by name.
+* **API Integration:** Asynchronously fetches character details (like name, nickname, and portrait) from an external endpoint.
 
+## 🛠️ Tech Stack
+* **Frontend Framework:** React (Functional Components & Hooks)
+* **Styling:** CSS3 (focused on CSS Grid for layout)
+* **JavaScript:** ES6+ syntax
+* **Data Fetching:** Axios for handling asynchronous HTTP requests
 
-## API Used
-Breaking Bad Character API
+## 📡 API Reference
+This project relies on the Breaking Bad Character API to populate the user interface.
+* **Endpoint Used:** `https://www.breakingbadapi.com/api/characters`
 
-Link : https://www.breakingbadapi.com/api/characters
+## 🏃‍♂️ How to Run Locally
 
-## How to use the Project
+To get this React application running on your local machine, follow these steps:
 
-1. Download or clone the repository `git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git`
-2. Go to the directory
-3. Open the terminal, and type `npm start`
+1. **Clone the repository:**
+   ```bash
+   git clone [https://github.com/Ayushparikh-code/Web-dev-mini-projects.git](https://github.com/Ayushparikh-code/Web-dev-mini-projects.git)
+Navigate to the directory:
+Open your terminal and change into the specific Breaking Bad project folder.
 
+Install dependencies:
+Because this project uses React and Axios, you must install the Node modules first:
+
+Bash
+npm install
+Start the development server:
+
+Bash
+npm start
+The application will automatically compile and open in your default browser at http://localhost:3000
 
 ## Screenshots
 

diff --git a/parallex-website/README.md b/parallex-website/README.md
@@ -1,47 +1,49 @@
-# Welcome 🖐 to the Parallex Website
-This is a basic HTML, CSS, JAVASCRIPT website where images of this website has their position fixed that results in giving the parallex look and that is why it is called Parallex Website. This gives the look of modern website.
+# 🌌 Parallax Website
 
+**Welcome 🖐 to the Parallax Website!** This is a beautiful and basic web project that demonstrates how to create a stunning "parallax" scrolling effect. By fixing the position of the background images, the foreground content scrolls past them, giving the webpage a sleek, 3D, and highly modern look!
 
-## 💻Tech Stack
-<br>
-
-![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
-![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
-![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+## ✨ Features
 
-<br>
+* **Parallax Scrolling:** Creates a dynamic and interactive illusion of depth as you scroll down the page.
+* **Modern Design:** Gives a professional and highly engaging look to a standard webpage.
+* **Beginner Friendly:** A great way to learn how background-attachment and basic positioning work in CSS.
 
+## 💻 Tech Stack
 
-### How to get the project on your local machine:
+This project uses standard front-end technologies along with a simple backend server to run:
 
----
+* **HTML5:** To build the structure of the website.
+* **CSS3:** To style the pages and create the fixed-image parallax effect.
+* **JavaScript:** For any interactive front-end elements.
+* **Node.js:** To run the local server and serve the files.
 
-- Download or clone the repository
+## 🚀 How to Run It on Your Computer
 
-```
-git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
-```
+Follow these steps to get the project running on your local machine:
 
-- Go to the directory
-- Open parallex-website folder
-- Open the terminal and run 
-```
-node app.js
-```
-- Open *localhost:3000* in your browser.
+**1. Download the code:** Open your terminal and clone the repository:
+```bash
+git clone [https://github.com/Ayushparikh-code/Web-dev-mini-projects.git](https://github.com/Ayushparikh-code/Web-dev-mini-projects.git)
+2. Open the project folder: Navigate into the main repository folder and find the parallax website directory:
 
-*** 
-###Remember: 
-If you are using node then you need to reload your server everytime you make changes in your file. Otherwise if you have nodemon installed, you can use nodemon. 
-***
+Bash
+cd Web-dev-mini-projects
+cd parallex-website
+3. Start the server: Run the following command in your terminal to start the Node application:
 
+Bash
+node app.js
+4. View in Browser: Open your favorite web browser and go to:
 
-<br>
+Plaintext
+http://localhost:3000
+💡 Pro Tip for Developers:
+If you are using standard node, you will need to restart your server in the terminal every time you make changes to your files. If you want the server to restart automatically, install and use nodemon instead! (nodemon app.js)
 
 ##Screenshot
 
 ![Demo1](public/images/demo.png)
 <br>
 
 
-## Happy Coding!
+## Happy Coding!
diff --git a/solarsystem3d/README.MD b/solarsystem3d/README.MD
@@ -1,62 +1,76 @@
-## A Brief of the Prototype:
-# Solar System Visualization
+# 🌌 3D Solar System Visualization
 
-This project is an interactive, web-based visualization of our solar system, created using HTML5 Canvas and JavaScript. It provides an engaging and educational experience for users to explore the planets, asteroid belts, and other celestial bodies in our solar system.
+**Welcome to the Solar System Visualization!** This project is an interactive, web-based journey through our solar system, built beautifully using HTML5 Canvas and JavaScript. It provides a highly engaging and educational experience, allowing users to explore planets, asteroid belts, and other celestial bodies right in their browser!
 
-## Features
+## ✨ Features
 
-- Realistic representation of the Sun, planets, and their orbits
-- Animated planetary motion with varying speeds
-- Asteroid belts (Main Asteroid Belt, Earth's Asteroid Belt, and Kuiper Belt)
-- Earth's moon (satellite)
-- Saturn's rings
-- Interactive zoom functionality
-- Click-to-view planet information
-- Responsive design that adapts to different screen sizes
+* **Realistic Rendering:** Features the Sun, planets, Earth's Moon, and beautiful details like Saturn's rings.
+* **Dynamic Animations:** Watch planets orbit at varying, realistic speeds.
+* **Asteroid Belts:** Accurately features the Main Asteroid Belt, Earth's Asteroid Belt, and the distant Kuiper Belt.
+* **Interactive Zoom:** Easily zoom in and out to explore the massive scale of the solar system.
+* **Informative Popups:** Click on any planet to instantly view its name and orbit radius!
+* **Responsive Design:** Smoothly adapts to fit different screen sizes.
 
-## How to Use
+## 🛠️ Technical Details
 
-1. Open the index.html file in a modern web browser.
-2. The solar system will automatically start animating.
-3. Use the zoom controls in the top-right corner to zoom in and out:
-   - Click the "+" button to zoom in
-   - Click the "-" button to zoom out
-4. Click on any planet to view its name and orbit radius.
-5. Click anywhere else to close the planet information popup.
-##Just install live server extension on vs code and run the index.htmnl file on it and enjoy
+* **HTML5 Canvas:** Powers the high-performance rendering of the space environment.
+* **Vanilla JavaScript:** Handles all the complex math, orbital animations, and user interactivity.
+* **Dynamic Assets:** Planet images are loaded dynamically from an `images` folder to keep the code clean.
+* **Custom Zoom Engine:** Built from scratch to allow users to dive deep into the details of the solar system.
 
+## 🚀 How to Run It on Your Computer
 
-## Technical Details
+**The Easiest Way (Using VS Code):**
+1. Open the project folder in Visual Studio Code.
+2. Install the **Live Server** extension.
+3. Right-click the `index.html` file and select **"Open with Live Server"**. The animation will start automatically!
 
-- The visualization is built using HTML5 Canvas for rendering.
-- JavaScript is used for animation and interactivity.
-- Planet images are loaded dynamically (ensure the images folder is present with appropriate planet images).
-- The project uses a custom zoom implementation to allow users to explore the solar system in detail.
+**The Standard Way:**
+1. Clone the repository:
+   ```bash
+   git clone [https://github.com/atharvachavan289-gif/Web-dev-mini-projects.git](https://github.com/atharvachavan289-gif/Web-dev-mini-projects.git)
+
+Navigate to the solarsystem3d folder.
 
-## Customization
+Make sure the images folder is present with the appropriate planet images.
 
-You can easily customize various aspects of the visualization:
+Double-click index.html to open it in any modern web browser (Chrome, Firefox, Safari, or Edge).
 
-- Adjust planet sizes, colors, and orbit radii in the planets array.
-- Modify the number and properties of asteroids in the asteroidBelt, earthAsteroidBelt, and kuiperBelt arrays.
-- Change the appearance of Saturn's rings by modifying the saturnRings object.
-- Adjust the zoom limits by changing the maxZoom and minZoom variables.
+🎮 How to Use & Explore
+Zoom In/Out: Use the "+" and "-" zoom controls located in the top-right corner of the screen.
 
-## Browser Compatibility
+Get Info: Click directly on any planet to reveal a popup with its details.
 
-This visualization should work in all modern web browsers that support HTML5 Canvas. For the best experience, use the latest version of Chrome, Firefox, Safari, or Edge.
+Close Info: Click anywhere else in the empty space background to close the planet info popup.
 
-## Known Issues
+⚙️ Customization
+Want to make your own universe? You can easily tweak the JavaScript code to customize the visualization:
 
-- The background space sound may not autoplay in some browsers due to autoplay restrictions. Users may need to interact with the page first to start the audio.
+Planets: Adjust sizes, colors, and orbit radii directly in the planets array.
 
-## Future Improvements
+Asteroids: Modify the density and properties inside the asteroidBelt, earthAsteroidBelt, and kuiperBelt arrays.
 
-- Add more detailed information for each planet
-- Implement touch controls for mobile devices
-- Add options to adjust animation speed
-- Include more celestial bodies like dwarf planets and comets
+Saturn's Rings: Change their appearance via the saturnRings object.
 
-## Credits
+Zoom Limits: Tweak the maxZoom and minZoom variables to restrict or expand how far users can zoom.
 
-This Solar System Visualization was created as an educational project. Planet images and astronomical data are based on publicly available information from NASA and other space agencies.
+⚠️ Known Issues & Compatibility
+Browser Support: Works perfectly in all modern web browsers supporting HTML5 Canvas.
+
+Audio Autoplay: Modern browsers often block audio from playing automatically. If you don't hear the background space ambiance, simply click anywhere on the page to start the audio!
+
+🔮 Future Improvements
+We are always looking to expand the universe! Planned updates include:
+
+Adding more detailed astronomical information for each planet.
+
+Implementing touch controls for seamless mobile device exploration.
+
+Adding a slider to adjust the animation speed of the orbits.
+
+Including more celestial bodies like dwarf planets (Pluto!) and comets.
+
+🙌 Credits
+This Solar System Visualization was created as a fun, educational project. The planet images and astronomical data are inspired by publicly available information from NASA and other amazing space agencies.
+
+Happy Exploring! 💻🚀
diff --git a/speed-distance-time-calculator/readme.md b/speed-distance-time-calculator/readme.md
@@ -1,5 +1,34 @@
-# Welcome 🖐 to the Speed-Distance-Time Calculator Website
-It is a multi pager Speed Distance Time Calculator with simple but user-friendly design.
+# ⏱️ Speed-Distance-Time Calculator
+
+A clean, multi-page web application designed to instantly calculate speed, distance, or time. Featuring a simple and user-friendly interface, this tool provides dedicated calculation pages for each specific metric to ensure a frictionless user experience.
+
+This project is part of the `Web-dev-mini-projects` collection.
+
+## ✨ Key Features
+* **Multi-Page Architecture:** Dedicated pages tailored specifically for calculating Speed, Time, and Distance individually.
+* **Instant Results:** Performs mathematical conversions and calculations in real-time.
+* **Intuitive UI:** A straightforward, accessible design that makes navigation and data entry effortless.
+* **No Dependencies:** Built entirely with pure web technologies for rapid load times.
+
+## 🛠️ Tech Stack
+* **HTML5:** Semantic structure and multi-page routing.
+* **CSS3:** Custom styling for a clean, responsive layout.
+* **Vanilla JavaScript:** Mathematical logic and DOM manipulation.
+
+## 🏃‍♂️ How to Run Locally
+
+Getting this project running on your machine takes just a few seconds:
+
+1. **Clone the repository:**
+   ```bash
+   git clone [https://github.com/Ayushparikh-code/Web-dev-mini-projects.git](https://github.com/Ayushparikh-code/Web-dev-mini-projects.git)
+Navigate to the correct directory:
+Open your terminal and change into the specific calculator folder:
+
+Bash
+cd Web-dev-mini-projects/speed-distance-time-calculator
+Run the application:
+Simply double-click the index.html file to open the Homepage in your default web browser. (Alternatively, use the "Live Server" extension in VS Code for a better development experience).
 
 ## Default view of the website
 HOMEPAGE
@@ -25,23 +54,6 @@ Distance Calculator
 <br>
 
 
-### How to get the website on your local machine:
-
----
-
-- Download or clone the repository
-
-```
-git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
-```
-
-- Go to the directory
-```
-cd speed-distance-time-calculator
-````
- - Run the index.html file and see the results
-
-<br>
 
 
 ## Happy Coding!