swapnilsparsh · geetanjali55 · Oct 23, 2025 · swapnilsparsh · Oct 23, 2025 · swapnilsparsh
diff --git a/projects/skillswapproject/README.md b/projects/skillswapproject/README.md
@@ -0,0 +1 @@
+# skillswap-project
diff --git a/projects/skillswapproject/assets/logo.png b/projects/skillswapproject/assets/logo.png
diff --git a/projects/skillswapproject/index.html b/projects/skillswapproject/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SkillSwap - Skill Input & Profile Setup</title>
+  <link rel="stylesheet" href="styles/style.css" />
+  <style>
+
+</style>
+
+</head>
+
+<body>
+
+  <!-- Floating Brain Icon -->
+  <img
+    src="https://tse4.mm.bing.net/th/id/OIP.p81Ig9UBzOwOV8Im3JmN4AHaHa?pid=Api&P=0&h=180"
+    alt="Brain Icon"
+    class="floating-brain"
+    title="Brain Power! Hover me!"
+  />
+
+  <!-- Background Side Quotes -->
+  <div class="side-quotes">
+    <span class="side-quote" style="top: 15%; left: 5%;">“Learning never exhausts the mind.”</span>
+    <span class="side-quote" style="top: 40%; right: 6%;">“Education is the most powerful weapon.”</span>
+    <span class="side-quote" style="top: 75%; left: 8%;">“An investment in knowledge pays the best interest.”</span>
+  </div>
+
+  <!-- Hero / Welcome Section at the Top - full width -->
+  <section class="hero-section">
+    <div class="content-wrapper">
+      <h1>Welcome to SkillSwap 🌱</h1>
+      <p>Connect. Learn. Teach. Grow.</p>
+      <div class="hero-buttons">
+        <button onclick="scrollToSection('form-section')">Get Started</button>
+        <button onclick="scrollToSection('saved-profiles')">Saved Profiles</button>
+        <button onclick="scrollToSection('recommendations')">Browse Swaps</button>
+      </div>
+    </div>
+
+    <!-- Moved inside hero -->
+    <section id="form-section" class="envelope-container">
+      <div class="envelope">
+        <div class="body">
+          <div class="card" tabindex="0">
+            <h2>Fill your Skill Journey 🚀</h2>
+            <form id="profile-form" autocomplete="off">
+              <label for="name">Your Name</label>
+              <input type="text" id="name" name="name" required />
+
+              <label for="skill-offer">Skill You Offer</label>
+              <input type="text" id="skill-offer" name="skillOffer" required />
+
+              <label for="skill-want">Skill You Want to Learn</label>
+              <input type="text" id="skill-want" name="skillWant" required />
+
+              <label for="location">Location (City)</label>
+              <input type="text" id="location" name="location" required />
+
+              <label for="email">Your Email</label>
+              <input type="email" id="email" name="email" required />
+
+              <button type="submit" class="send-btn">✉️ Send</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- <section id="recommendations" class="recommendations-section">
+      <h3>Find Available Skill Swaps</h3>
+      <input type="search" id="search-filter" placeholder="Search by skill or name..." />
+      <div class="recommendations-grid"></div>
+    </section> -->
+
+    <section id="recommendations" class="recommendations-section">
+  <h1>Find Available Skill Swaps</h2>
+
+  <div class="recommendations-container">
+    <input
+      type="search"
+      id="search-filter"
+      class="search-input"
+      placeholder="Search by skill or name..."
+    />
+
+    <div class="recommendations-grid" id="recommendations-grid">
+      <!-- Cards will be inserted here dynamically -->
+    </div>
+  </div>
+</section>
+
+
+    <section id="saved-profiles" class="saved-profiles-section">
+      <h3>Saved Profiles for Later</h3>
+      <div id="saved-profiles-list" class="recommendations-grid"></div>
+    </section>
+
+  </section>
+
+  <!-- JavaScript for scroll parallax effect on quotes -->
+  <script>
+    window.addEventListener("scroll", () => {
+      const scrollY = window.scrollY;
+      const quotes = document.querySelectorAll(".side-quote");
+      quotes.forEach((quote, i) => {
+        const speed = (i + 1) * 0.15;
+        quote.style.transform = `translateY(${scrollY * speed}px)`;
+      });
+    });
+
+    function scrollToSection(id) {
+      const el = document.getElementById(id);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  </script>
+
+  <script src="scripts/main.js"></script>
+</body>
+</html>
diff --git a/projects/skillswapproject/matches.html b/projects/skillswapproject/matches.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SkillSwap - Matches & Chat Preview</title>
+  <link rel="stylesheet" href="styles/style.css" />
+</head>
+<body>
+  <main class="page-container">
+
+    <section class="matches-subsection">
+      <h2>Your Matches 🔄</h2>
+      <div id="matches-list" class="recommendations-grid">
+        <!-- Mutual matches appear here -->
+      </div>
+    </section>
+
+    <section class="matches-subsection" style="margin-top: 3rem;">
+      <h2>One-sided Interests ⭐</h2>
+      <div id="one-sided-list" class="recommendations-grid">
+        <!-- One-sided interest matches appear here -->
+      </div>
+    </section>
+
+    <!-- Chat preview modal / section -->
+    <div id="chat-preview" class="chat-preview hidden">
+      <h3>Chat with <span id="chat-user-name"></span></h3>
+      <div class="chat-messages" id="chat-messages"></div>
+      <div class="chat-controls">
+        <input type="text" id="chat-input" placeholder="Type your message..." />
+        <button id="send-chat-btn">Send</button>
+        <button id="email-chat-btn" title="Send Email">📧 Email</button>
+        <button id="close-chat-btn">Close</button>
+      </div>
+    </div>
+
+  </main>
+
+  <script src="scripts/matches.js"></script>
+</body>
+</html>
diff --git a/projects/skillswapproject/scripts/main.js b/projects/skillswapproject/scripts/main.js
@@ -0,0 +1,158 @@
+// Helper function to simulate async saving
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// DOM Elements
+const form = document.getElementById("profile-form");
+const recommendationsGrid = document.querySelector(".recommendations-grid");
+
+const searchInput = document.getElementById("search-filter");
+const savedProfilesContainer = document.getElementById("saved-profiles-list");
+
+let allProfiles = [];
+let savedProfiles = [];
+
+// Load profiles on page load
+window.addEventListener("DOMContentLoaded", () => {
+  const savedData = localStorage.getItem("skillSwap_profiles");
+  const savedLaterData = localStorage.getItem("skillSwap_savedProfiles");
+
+  allProfiles = savedData ? JSON.parse(savedData) : [];
+  savedProfiles = savedLaterData ? JSON.parse(savedLaterData) : [];
+
+  renderRecommendations();
+  renderSavedProfiles();
+});
+
+// Handle form submission
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+
+  const user = {
+    name: form.name.value.trim(),
+    skillOffer: form.skillOffer.value.trim(),
+    skillWant: form.skillWant.value.trim(),
+    location: form.location.value.trim(),
+    email: form.email.value.trim(),
+  };
+
+  await delay(500);
+  allProfiles.push(user);
+  localStorage.setItem("skillSwap_profiles", JSON.stringify(allProfiles));
+
+  document.querySelector(".card").classList.add("locked");
+  showSuccessMessage();
+  renderRecommendations();
+});
+
+// Show a message + "Find Matches" button
+function showSuccessMessage() {
+  const successMsg = document.createElement("div");
+  successMsg.className = "success-message";
+  successMsg.innerHTML = `
+    <p>✅ Profile saved successfully!</p>
+    <a href="matches.html" class="find-matches-btn">🔍 Find Matches</a>
+  `;
+  form.parentElement.appendChild(successMsg);
+}
+
+// Render Recommendations
+function renderRecommendations() {
+  recommendationsGrid.innerHTML = "";
+
+  const filtered = filterProfiles(searchInput.value);
+
+  if (filtered.length === 0) {
+    recommendationsGrid.innerHTML = "<p>No users found.</p>";
+    return;
+  }
+
+  filtered.forEach((profile) => {
+    const card = document.createElement("div");
+    card.className = "user-card";
+    card.innerHTML = `
+      <h4>${profile.name}</h4>
+      <p><strong>Offers:</strong> ${profile.skillOffer}</p>
+      <p><strong>Wants:</strong> ${profile.skillWant}</p>
+      <p><strong>City:</strong> ${profile.location}</p>
+      <p><strong>Email:</strong> ${profile.email || "N/A"}</p>
+      <button class="save-btn">💾 Save for Later</button>
+    `;
+
+    card
+      .querySelector(".save-btn")
+      .addEventListener("click", () => saveProfileForLater(profile));
+    recommendationsGrid.appendChild(card);
+  });
+}
+
+// Filter logic
+searchInput.addEventListener("input", renderRecommendations);
+
+function filterProfiles(query) {
+  query = query.toLowerCase();
+  return allProfiles.filter(
+    (p) =>
+      p.name.toLowerCase().includes(query) ||
+      p.skillOffer.toLowerCase().includes(query) ||
+      p.skillWant.toLowerCase().includes(query)
+  );
+}
+
+// Save profile for later
+function saveProfileForLater(profile) {
+  const alreadySaved = savedProfiles.some((p) => p.name === profile.name);
+  if (alreadySaved) {
+    alert(`${profile.name} is already saved.`);
+    return;
+  }
+
+  savedProfiles.push(profile);
+  localStorage.setItem(
+    "skillSwap_savedProfiles",
+    JSON.stringify(savedProfiles)
+  );
+  renderSavedProfiles();
+}
+
+// Render Saved Profiles
+function renderSavedProfiles() {
+  if (!savedProfilesContainer) return;
+
+  savedProfilesContainer.innerHTML = "";
+
+  if (savedProfiles.length === 0) {
+    savedProfilesContainer.innerHTML = "<p>No saved profiles yet.</p>";
+    return;
+  }
+
+  savedProfiles.forEach((profile) => {
+    const card = document.createElement("div");
+    card.className = "user-card";
+    card.innerHTML = `
+      <h4>${profile.name}</h4>
+      <p><strong>Offers:</strong> ${profile.skillOffer}</p>
+      <p><strong>Wants:</strong> ${profile.skillWant}</p>
+      <p><strong>City:</strong> ${profile.location}</p>
+      <p><strong>Email:</strong> ${profile.email || "N/A"}</p>
+      <button class="remove-save-btn">❌ Remove</button>
+    `;
+
+    card.querySelector(".remove-save-btn").addEventListener("click", () => {
+      removeSavedProfile(profile.name);
+    });
+
+    savedProfilesContainer.appendChild(card);
+  });
+}
+
+// Remove from saved
+function removeSavedProfile(name) {
+  savedProfiles = savedProfiles.filter((p) => p.name !== name);
+  localStorage.setItem(
+    "skillSwap_savedProfiles",
+    JSON.stringify(savedProfiles)
+  );
+  renderSavedProfiles();
+}