feat: include .hidden in styles, introduce new js file for resume analyzer

Author: NehaP1706

web-app/css/styles.css

@@ -939,6 +939,10 @@ body.sidebar-active .hero-controls {
   color: #000;
 }
 
+.hidden {
+  display: none !important;
+}
+
 /* ── AI Resume Analyzer ────────────────────────────────────── */
 .resume-analyzer-shell {
   max-width: 960px;

web-app/index.html

@@ -681,6 +681,7 @@ <h3>Legal</h3>
 <script src="js/projects/spot-the-difference.js"></script>
 <script src="js/projects/color-palette.js"></script>
 <script src="js/projects/ceasar-cipher.js"></script>
+<script src="js/projects/resume-analyzer.js"></script>
 <!-- Registry: maps project names to their module functions -->
 <script src="js/projects.js"></script>
 <script src="js/playground.js"></script>

web-app/js/projects.js

@@ -3320,108 +3320,8 @@ function getProductivePetHTML() {
     `;
 }
 
-function getAIResumeAnalyzerHTML() {
-    return `
-        <div class="resume-analyzer-shell">
-            <div class="resume-analyzer-hero">
-                <div class="resume-analyzer-copy">
-                    <span class="resume-analyzer-badge">GSSoC Utility</span>
-                    <h2>AI Resume Analyzer</h2>
-                    <p>Upload a resume and get a quick ATS-style snapshot with keyword, structure, and formatting feedback.</p>
-                </div>
-                <div class="resume-analyzer-pill">No backend required</div>
-            </div>
-
-            <div class="resume-analyzer-grid">
-                <section class="resume-panel resume-upload-panel">
-                    <div class="resume-upload-box">
-                        <i class="fa-solid fa-file-lines resume-upload-icon"></i>
-                        <label class="resume-file-btn">
-                            Choose File
-                            <input type="file" id="resumeInput" accept=".pdf,.doc,.docx,.txt" hidden>
-                        </label>
-                        <p>Drag &amp; drop or click to choose a resume</p>
-                    </div>
-
-                    <button class="resume-analyze-btn" id="analyzeBtn" type="button">Analyze Resume 🚀</button>
-                </section>
-
-                <section class="resume-panel resume-score-panel hidden" id="ats">
-                    <h3>ATS Score</h3>
-                    <div class="resume-progress-circle">
-                        <span>82%</span>
-                    </div>
-                    <div class="resume-extra-info">
-                        <p>✔ Formatting Score: 80%</p>
-                        <p>✔ Keyword Match: 75%</p>
-                    </div>
-                </section>
-
-                <section class="resume-panel resume-bottom-panel hidden" id="bottomSection">
-                    <div class="resume-mini-card">
-                        <h3>Keywords Match</h3>
-
-                        <div class="resume-keyword-item">
-                            <span>Python</span>
-                            <div class="resume-bar"><div style="width: 90%"></div></div>
-                        </div>
-
-                        <div class="resume-keyword-item">
-                            <span>Machine Learning</span>
-                            <div class="resume-bar"><div style="width: 75%"></div></div>
-                        </div>
-
-                        <div class="resume-keyword-item">
-                            <span>Data Analysis</span>
-                            <div class="resume-bar"><div style="width: 65%"></div></div>
-                        </div>
-                    </div>
-
-                    <div class="resume-mini-card">
-                        <h3><i class="fa-solid fa-lightbulb"></i> Suggestions</h3>
-
-                        <div class="resume-suggestion">
-                            <i class="fa-solid fa-check"></i>
-                            <p>Add more projects</p>
-                        </div>
-
-                        <div class="resume-suggestion">
-                            <i class="fa-solid fa-check"></i>
-                            <p>Improve formatting</p>
-                        </div>
-
-                        <div class="resume-suggestion">
-                            <i class="fa-solid fa-check"></i>
-                            <p>Use action verbs</p>
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
-    `;
-}
-
-function initAIResumeAnalyzer() {
-    const analyzeBtn = document.getElementById('analyzeBtn');
-    const resumeInput = document.getElementById('resumeInput');
-    const ats = document.getElementById('ats');
-    const bottomSection = document.getElementById('bottomSection');
-
-    if (!analyzeBtn || !resumeInput || !ats || !bottomSection) return;
-
-    analyzeBtn.addEventListener('click', () => {
-        if (!resumeInput.files.length) {
-            alert('Upload resume first!');
-            return;
-        }
-
-        ats.classList.remove('hidden');
-        bottomSection.classList.remove('hidden');
-    });
-}
-
-
-
+// getAIResumeAnalyzerHTML and initAIResumeAnalyzer are defined in
+// js/projects/resume-analyzer.js to keep the codebase organized and modular.
 
 
 function initializeProject(projectName) {