updated readme.md

README.md

@@ -1,33 +1,101 @@
-<h1>Metro Station Finder - WIP</h1>
+<!--Banner --->
+<div align="center">
+  <img src="https://github.com/tashfiqul-islam/metro-station-finder/blob/master/public/metro-station-finder.png" alt="Metro-Banner" />
+</div>
 
-<h2>Introduction</h2>
+<!-- Project Title Section -->
+<h1 align="center">Metro Station Finder - WIP</h1>
+
+<!-- GHA, Prettier & Linting Badges -->
+<p align="center">
+  <a href="https://github.com/tashfiqul-islam/metro-station-finder/actions/workflows/nextjs.yml">
+    <img src="https://img.shields.io/badge/Deployment-Passing-4BC51D?logo=github" alt="Deployment Passing">
+  </a>
+  <img src="https://img.shields.io/badge/Lint-Passing-00aa00?logo=eslint&logoColor=white" alt="Lint Passing">
+  <img src="https://img.shields.io/badge/Code Style-Prettier-ff69b4?logo=prettier&logoColor=white" alt="Code Style Prettier">
+</p>
+
+<br>
+
+<!-- Introduction Section -->
+<h2>🚇 Introduction</h2>
 <p>
-  Metro Station Finder is a Next.js application that allows users to find the nearest metro station in Dhaka city, Bangladesh. By entering a location, users can view a map with the nearest metro station and the distance to it.
+  Finding the closest metro station in Dhaka was a real headache. Every time someone asked, "Where's the nearest metro station to where I'm going?" I had to dig through maps, trying to figure it out. It was a slow and annoying process because Google Maps still needed to show metro stations. That's when I thought of a better way. I created the Metro Station Finder, a simple app made with Next.js. It makes my life easier by quickly showing the closest metro station and how far it is just by entering a location. No more map headaches!
 </p>
 
-<h2>Features</h2>
+<br>
+
+<!-- Features Section -->
+<h2>✨ Features</h2>
 <ul>
   <li>Search functionality to input a location.</li>
   <li>Interactive map view to display user's location and nearest metro station.</li>
   <li>Distance calculation from the user's location to the nearest metro station.</li>
 </ul>
 
-<h2>Technology Stack</h2>
-<ul>
-  <li><strong>Frontend</strong>: Next.js, React</li>
-  <li><strong>Styling</strong>: Tailwind CSS</li>
-  <li><strong>Maps</strong>: Google Maps API</li>
-  <li><strong>Language</strong>: TypeScript</li>
-</ul>
+<br>
+
+<!-- Technology Stack Section -->
+<h2>💻 Tech Stack</h2>
+<p>
+    <!-- Next.js Badge -->
+    <a href="https://nextjs.org/" target="_blank">
+        <img src="https://img.shields.io/badge/Next.js-14.0.4-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js">
+    </a>
+    <!-- React Badge -->
+    <a href="https://reactjs.org/" target="_blank">
+        <img src="https://img.shields.io/badge/React-18-61DAFB?style=for-the-badge&logo=react&logoColor=white" alt="React">
+    </a>
+    <!-- Tailwind CSS Badge -->
+    <a href="https://tailwindcss.com/" target="_blank">
+        <img src="https://img.shields.io/badge/Tailwind CSS-3.4.1-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS">
+    </a>
+    <!-- Google Maps API Badge -->
+    <a href="https://developers.google.com/maps/documentation/javascript/overview" target="_blank">
+        <img src="https://img.shields.io/badge/Google Maps API-Latest-4285F4?style=for-the-badge&logo=google-maps&logoColor=white" alt="Google Maps API">
+    </a>
+    <!-- TypeScript Badge -->
+    <a href="https://www.typescriptlang.org/" target="_blank">
+        <img src="https://img.shields.io/badge/TypeScript-5-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript">
+    </a>
+</p>
+
+<br>
+
+<!-- Hosted with GitHub Pages -->
+<h2>Hosted with GitHub Pages</h2>
+<p>
+  <a href="https://tashfiqul-islam.github.io/metro-station-finder/">
+    <img src="https://img.shields.io/badge/GitHub Pages-Visit-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Pages">
+  </a>
+</p>
 
+<br>
+
+<!-- Usage -->
+<h2>Usage</h2>
+<p>
+  Enter a location in the search bar and click the 'Search' button. The map will update to show your location and the nearest metro station, along with the distance to it.
+</p>
+
+<br>
+
+<!-- Getting Started Section -->
 <h2>Getting Started</h2>
 
+<!-- Prerequisites -->
 <h3>Prerequisites</h3>
-<ul>
-  <li>Node.js</li>
-  <li>npm (Node Package Manager)</li>
-</ul>
+<p>
+  <img src="https://img.shields.io/badge/Node.js-v20.10.0-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js">
+  <img src="https://img.shields.io/badge/npm-v10.3.0-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="npm">
+</p>
+<h6>
+  <em>P.S. This is what I had installed while working on this.</em>
+</h6>
 
+<br>
+
+<!-- Installation -->
 <h3>Installation</h3>
 <ol>
   <li>Clone the repository:<br>
@@ -45,25 +113,43 @@
   </li>
 </ol>
 
+<br>
+
+<!-- Running the Application -->
 <h3>Running the Application</h3>
-<p>To start the development server, run:</p>
-<code>npm run dev</code>
-<p>Navigate to <a href="http://localhost:3000">http://localhost:3000</a> to view the application.</p>
+<ol>
+  <li><p>To start the development server, run: </p></li>
+  <code>npm run dev</code>
+  <li><p>Navigate to <a href="http://localhost:3000">http://localhost:3000</a> to view the application.</p></li>
+</ol>
 
-<h2>Usage</h2>
-<p>
-  Enter a location in the search bar and click the 'Search' button. The map will update to show your location and the nearest metro station, along with the distance to it.
-</p>
+<br>
 
+<!-- Contributing -->
 <h2>Contributing</h2>
 <p>
   Contributions to the Metro Station Finder are welcome. Please ensure to update tests as appropriate.
 </p>
 
-<h2>License</h2>
-<p><a href="https://choosealicense.com/licenses/mit/">MIT</a></p>
+<br>
 
-<h2>Contact</h2>
+<!-- License section -->
+<h2>📜 License</h2>
 <p>
-  For any queries, you can reach out via <a href="mailto:[email protected]">my email</a>.
+    Licensed under the <a href="LICENSE">MIT License</a>.<br>
+    <em>Feel free to use and modify as you like.</em>
 </p>
+
+<br>
+
+<!-- Footer Section -->
+<div>
+    <p>
+        <strong>This project was a learning journey, crafted with ❤️ by Tashfiq.</strong><br>
+        <em>A stepping stone in my ongoing quest to become a Programming Ninja!</em>
+    </p>
+    <p>
+        <a href="https://github.com/tashfiqul-islam" target="_blank">🌟 Follow me on GitHub</a> —
+        I promise, my future projects will only have <em>slightly</em> fewer bugs! 🐛
+    </p>
+</div>

next.config.js

@@ -1,9 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export', // Enable static HTML export
-  images: {
-    unoptimized: true, // Disable Image Optimization API for export
-  },
   env: {
     NEXT_PUBLIC_GOOGLE_MAPS_API_KEY:
       process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,

src/components/MetroInfoCard.tsx

@@ -30,7 +30,7 @@ const MetroInfoCard: React.FC<MetroInfoCardProps> = ({
           <div className="flex items-center">
             {/* Icon for Metro Station */}
             <Image
-              src="/metro-station.png"
+              src="https://github.com/tashfiqul-islam/metro-station-finder/raw/master/public/metro-station.png"
               alt="Metro Station"
               width={24}
               height={24}
@@ -46,7 +46,7 @@ const MetroInfoCard: React.FC<MetroInfoCardProps> = ({
             {/* Apply negative margin to the second section */}
             {/* Icon for Direction */}
             <Image
-              src="/direction.png"
+              src="https://github.com/tashfiqul-islam/metro-station-finder/raw/master/public/direction.png"
               alt="Direction"
               width={24}
               height={24}