komalharshita · komalharshita · May 18, 2026 · May 15, 2026 · May 17, 2026 · May 17, 2026
diff --git a/static/script.js b/static/script.js
@@ -15,6 +15,12 @@
 var isIndexPage  = !!document.getElementById("recommend-form");
 // PROJECT_ID is set by the server only on detail pages, so if it's missing we're elsewhere
 var isDetailPage = typeof PROJECT_ID !== "undefined";
+var modal = document.getElementById('github-modal-overlay');
+var openModalBtn = document.getElementById('btn-show-github'); // The trigger in your main form
+var closeModalBtn = document.getElementById('btn-close-github');
+var fetchBtn = document.getElementById('btn-fetch-github');
+var githubInput = document.getElementById('github-username');
+var errorMsg = document.getElementById('github-modal-error');
 
 
 // ============================================================
@@ -350,6 +356,9 @@ if (isIndexPage) {
   }
 
   function syncSkillsHiddenInput() {
+    if (!skillsHidden){
+      var skillsHidden = document.getElementById("skills");
+    }
     // Keep the hidden <input> in sync for form serialisation
     // The API expects a comma-separated string, so join the array that way
     skillsHidden.value = selectedSkills.join(", ");
@@ -715,6 +724,66 @@ if (isDetailPage) {
   }
 } // end isDetailPage
 
+if (
+    openModalBtn &&
+    closeModalBtn &&
+    modal &&
+    githubInput &&
+    fetchBtn &&
+    errorMsg
+) {
+// 1. Open Github Input Modal
+  openModalBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      modal.classList.add('active');
+      githubInput.focus();
+  });
+
+  // 2. Close Github Input Modal
+  const closeGithubModal = () => {
+      modal.classList.remove('active');
+      githubInput.value = '';
+      errorMsg.textContent = '';
+  };
+
+  closeModalBtn.addEventListener('click', closeGithubModal);
+
+  // Close on clicking outside the card
+  modal.addEventListener('click', (e) => {
+      if (e.target === modal) closeGithubModal();
+  });
+
+  // 3. Fetch Skills Logic
+  fetchBtn.addEventListener('click', async () => {
+      const username = githubInput.value.trim();
+      if (!username) return;
+
+      fetchBtn.disabled = true;
+      fetchBtn.textContent = 'Syncing...';
+
+      try {
+          const response = await fetch(`https://api.github.com/users/${username}/repos`);
+          if (!response.ok) throw new Error();
+
+          const repos = await response.json();
+          const langs = [...new Set(repos.map(r => r.language).filter(Boolean))];
+
+          if (langs.length > 0) {
+              langs.forEach(lang => {
+                  if (typeof addSkill === 'function') addSkill(lang);
+              });
+              closeGithubModal();
+          } else {
+              errorMsg.textContent = "No public languages found.";
+          }
+      } catch (err) {
+          errorMsg.textContent = err.message ?? "Failed to fetch skills";
+      } finally {
+          fetchBtn.disabled = false;
+          fetchBtn.textContent = 'Fetch Skills';
+      }
+  });
+}
 
 /* ---- Scroll-to-top button ---- */
 
@@ -743,4 +812,4 @@ function scrollToTop() {
 if (scrollTopBtn) {
     window.addEventListener('scroll', handleScroll);
     scrollTopBtn.addEventListener('click', scrollToTop);
-}
+}
diff --git a/static/style.css b/static/style.css
@@ -1789,6 +1789,49 @@ select:focus {
   .section-sub { margin-bottom: 40px; }
 }
 
+.github-input-reveal input {
+    border: 1px solid var(--border);
+    border-radius: var(--r-xs);
+    font-family: var(--font-body);
+}
+
+.github-input-reveal input:focus {
+    border-color: var(--indigo-400);
+    outline: none;
+    background: var(--white);
+}
+
+#btn-show-github {
+    border: 1px solid transparent;
+    transition: all var(--t);
+    color: var(--indigo-600);
+    background: var(--indigo-50);
+}
+
+#btn-show-github:hover {
+    background: var(--indigo-100);
+    border-color: rgba(79, 110, 247, 0.2);
+}
+
+#github-modal-overlay.active {
+    display: flex !important; /* Overrides the 'none' display */
+    backdrop-filter: blur(4px);
+    animation: fadeIn 0.2s ease;
+}
+
+#github-modal-overlay .sidebar-card {
+    transform: scale(0.9);
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+#github-modal-overlay.active .sidebar-card {
+    transform: scale(1);
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
 
 @media (max-width: 768px) {
 

diff --git a/templates/index.html b/templates/index.html
@@ -337,16 +337,24 @@ <h2 class="section-title">Find Your Next Project</h2>
       <div class="form-card-outer">
         <div class="form-card" id="form-section">
           <form id="recommend-form" novalidate>
-
-            <!-- Skills input with chip selector -->
             <div class="form-group">
-              <label for="skills-input">
-                Your Skills
-                <span class="tooltip"
-                  title="Add technologies, programming languages, or tools you know like Python, React, Git, SQL, etc.">
-                  ⓘ
-                </span>
-              </label>
+              <div class="form-label-row" style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px;">
+                <label for="skills-input">
+                  Your Skills
+                  <span class="tooltip"
+                    title="Add technologies, programming languages, or tools you know like Python, React, Git, SQL, etc.">
+                    ⓘ
+                  </span>
+                </label>
+
+                <!-- Inline GitHub Trigger -->
+                <div class="github-inline-trigger" id="github-trigger-wrap" style="line-height: 1.2;">
+                  <button type="button" id="btn-show-github" class="resource-link" style="padding: 4px 8px; border-radius: var(--r-xs); font-size: 0.75rem; gap: 6px;">
+                    <svg style="width:14px; fill:currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.041-1.416-4.041-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                    <span>Import from GitHub</span>
+                  </button>
+                </div>
+              </div>
               <div class="skill-input-wrap" id="skill-input-wrap">
                 <div class="skill-chips-selected" id="skill-chips-selected"></div>
                 <input type="text" id="skills-input" placeholder="Type a skill and press Enter..." autocomplete="off" />
@@ -598,7 +606,34 @@ <h4 class="footer-col-title">About Us</h4>
     </div>
   </footer>
 
-  <script src="/static/data/skills.js"></script>
+  <!-- GitHub Modal Overlay -->
+  <div class="code-panel-overlay" id="github-modal-overlay" style="align-items: center; justify-content: center; opacity: 1;">
+    <div class="sidebar-card" style="width: 100%; max-width: 400px; margin: 20px; z-index: 400; box-shadow: 0 20px 50px rgba(0,0,0,0.3);">
+
+      <div class="sidebar-card-title">
+        <svg style="width:18px; fill:var(--indigo-600)" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.041-1.416-4.041-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+        Sync with GitHub
+      </div>
+
+      <p class="sidebar-card-desc" style="margin-bottom: 20px;">Enter your username to import coding languages from your top repositories into the skills list.<br/> Note: We use stars to determine top repositories</p>
+
+      <div class="form-group" style="margin-bottom: 20px;">
+        <div class="skill-input-wrap">
+          <span style="color:var(--gray-400); font-family:var(--font-mono); font-size:0.8rem; margin-left:8px;">@</span>
+          <input type="text" id="github-username" placeholder="username" style="border:none; outline:none; flex:1; padding:10px;">
+        </div>
+        <div class="form-error-msg" id="github-modal-error"></div>
+      </div>
+
+      <div style="display: flex; gap: 12px;">
+        <button type="button" id="btn-fetch-github" class="btn-primary" style="flex: 2; padding: 10px; font-size: 0.85rem;">Fetch Skills</button>
+        <button type="button" id="btn-close-github" class="btn-view-code-sm" style="flex: 1; border-color: var(--border); color: var(--text-body);">Cancel</button>
+      </div>
+
+    </div>
+  </div>
+
+    <script src="/static/data/skills.js"></script>
   <script src="/static/script.js"></script>
 </body>