Created visitor counter

css/main.css

@@ -212,4 +212,83 @@ body.dark #darkModeToggle {
 
 body.dark #darkModeToggle:hover {
   background: #3ce8ff;
+}
+
+/* Wrapper for centering counter horizontally */
+.counter-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 40px;
+}
+
+/* Elegant visitor counter */
+.visitor-count {
+  display: inline-block;
+  background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.25),
+      rgba(255, 255, 255, 0.35));
+  /* frosted glass + subtle gradient */
+  color: #333;
+  font-size: 1.2rem;
+  font-weight: 500;
+  padding: 12px 24px;
+  /* slightly larger for elegance */
+  border-radius: 30px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 87, 34, 0.1);
+  /* glow */
+  backdrop-filter: blur(12px);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  margin: 0 auto;
+}
+
+/* Hover effect for interactivity */
+.visitor-count:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 87, 34, 0.2);
+  /* stronger glow on hover */
+}
+
+/* Animate the number pop */
+#visitorCount {
+  display: inline-block;
+  font-weight: bold;
+  transition: transform 0.2s ease, color 0.3s ease;
+}
+
+@keyframes popNumber {
+  0% {
+    transform: scale(1);
+    color: #333;
+  }
+
+  50% {
+    transform: scale(1.3);
+    color: #ff5722;
+  }
+
+  /* accent color during pop */
+  100% {
+    transform: scale(1);
+    color: #333;
+  }
+}
+
+#visitorCount.animate-pop {
+  animation: popNumber 0.4s ease;
+}
+
+.visitor-count-card {
+  background: rgba(179, 105, 105, 0.3);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+body.dark .visitor-count-card {
+  background-color: #467db4;
+  color: #000;
 }

index.html

@@ -218,6 +218,18 @@ <h3>Desktop Chat Application (Local Area Network)</h3>
     </div>
   </section><br />
 
+  <!-- Visitor Counter Section -->
+  <section class="container fade-in counter-container">
+    <div class="visitor-count-card">
+      <div class="visitor-count">
+        <h2 style="color: #222">Visitor Counter</h2>
+        <h3 style="color: #604848">
+          👋 Total Visitors: <span id="visitorCount">Loading...</span>
+        </h3>
+      </div>
+    </div>
+  </section><br />
+
   <!-- Contact Section -->
   <section id="contact" class="container fade-in">
     <h2>Contact Me</h2>
@@ -252,6 +264,7 @@ <h2>Contact Me</h2>
 
   <!-- JS -->
   <script src="/js/common.js"></script>
+  <script type="module" src="/js/visitorCounter.js"></script>
   <script src="/js/main.js"></script>
 </body>
 

js/visitorCounter.js

@@ -0,0 +1,44 @@
+// Import the functions you need from the SDKs you need
+// Import Firebase SDK modules
+import { initializeApp } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-app.js";
+import { getFirestore, doc, getDoc, updateDoc, increment } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-firestore.js";
+
+// 🔧 Your Firebase config (replace these values with your actual project config)
+const firebaseConfig = {
+    apiKey: "AIzaSyD3hwEQ4nOJxzxFWDPC1LrAIogpJ61wuuY",
+    authDomain: "portfolio-visitors-4515d.firebaseapp.com",
+    projectId: "portfolio-visitors-4515d",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+
+// Reference to your Firestore document
+const counterRef = doc(db, "visitors", "mainPage");
+
+// 🔢 Function to safely increment visitor count
+export async function updateVisitorCount() {
+    try {
+        // Increment the counter in Firestore
+        await updateDoc(counterRef, { count: increment(1) });
+        const snap = await getDoc(counterRef);
+
+        if (snap.exists()) {
+            const countEl = document.getElementById("visitorCount");
+            countEl.textContent = snap.data().count;
+
+            // ✨ Animate the number pop
+            countEl.classList.add("animate-pop");
+            setTimeout(() => countEl.classList.remove("animate-pop"), 400); // remove class after animation
+        } else {
+            document.getElementById("visitorCount").textContent = "0";
+        }
+    } catch (e) {
+        console.error("Error updating visitor count:", e);
+        document.getElementById("visitorCount").textContent = "Error";
+    }
+}
+
+// Run immediately when the script loads
+updateVisitorCount();