├── script.js
├── style.css
├── Capture12.PNG
├── Capture9.PNG
├── README.md
└── index.html


/script.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Capture12.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/cv-score-checker/main/Capture12.PNG


--------------------------------------------------------------------------------
/Capture9.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/cv-score-checker/main/Capture9.PNG


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cv-score-checker
 2 | <div align="center">
 3 |   <img src="Capture9.PNG" alt="DevOpsShack Banner">
 4 | </div>
 5 | # 📄 Enhanced Offline Resume Analyzer
 6 | 
 7 | This is a client-side (browser-based) web application designed to help users analyze their resumes against specific job roles. It provides instant feedback on keyword matching, resume length, and general structure, with the ability to upload PDF files and download an analysis report as a DOCX document.
 8 | 
 9 | **Crucially, this tool operates entirely offline in your browser after the initial load, ensuring your resume data remains private and is never sent to a server.**
10 | 
11 | ## ✨ Features
12 | 
13 | * **Offline Operation:** Your data stays on your device.
14 | * **PDF Resume Upload:** Directly upload your PDF resume for analysis.
15 | * **Role-Based Keyword Matching:** Select a job role to see how well your resume matches relevant industry keywords.
16 | * **Resume Score:** Get an immediate score out of 10 indicating your resume's overall strength.
17 | * **Detailed Feedback:**
18 |     * Overall assessment.
19 |     * Keyword analysis (found vs. missing).
20 |     * Identification of overused phrases (highlighted in the displayed resume).
21 |     * Suggestions for grammar, clarity, and formatting improvements.
22 |     * Checks for essential contact information.
23 |     * Guidance on quantifying achievements and using strong action verbs.
24 | * **Dynamic Theme Toggle:** Switch between dark and light modes for comfortable viewing.
25 | * **Download Analysis Report:** Generate and download a `.docx` file containing your original resume text and the full analysis report.
26 | 
27 | ## 🚀 How to Use (Local Setup)
28 | 
29 | This application is designed to run directly in your web browser without needing a server.
30 | <div align="center">
31 |   <img src="Capture12.PNG" alt="DevOpsShack Banner">
32 | </div>
33 | 
34 | 1.  **Download/Clone the Repository:**
35 |     * If you have the files (e.g., `index.html`, `style.css`, `script.js`), ensure they are all in the same folder.
36 |     * If this were a Git repository, you would clone it: `git clone <repository_url>`
37 | 
38 | 2.  **Open `index.html`:**
39 |     * Navigate to the folder where you saved the files.
40 |     * Double-click the `index.html` file. It will open automatically in your default web browser.
41 | 
42 | ## 💻 Technologies Used
43 | 
44 | [!CSS3]
45 | ![Fortran](https://img.shields.io/badge/Fortran-%23734F96.svg?style=for-the-badge&logo=fortran&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)  ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) !
46 | ** A JavaScript library by Mozilla for parsing and rendering PDF files directly in the browser.
47 | * [docx](https://docx.js.org/#/):** A JavaScript library for generating `.docx` files.
48 | * [Font Awesome](https://fontawesome.com/):** For various icons used throughout the UI.
49 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8" />
  5 | <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 | <title>Resume Analyzer</title>
  7 | <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
  8 | <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.7.0/docx.min.js"></script>
  9 | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
 10 | <style>
 11 |   /*html file included script and style file */
 12 |   /* Light pastel animated gradient background */
 13 |   @keyframes pastelShift {
 14 |     0% {background-position: 0% 50%;}
 15 |     50% {background-position: 100% 50%;}
 16 |     100% {background-position: 0% 50%;}
 17 |   }
 18 | 
 19 |   body {
 20 |     margin: 0;
 21 |     font-family: 'Inter', sans-serif;
 22 |     background: linear-gradient(270deg, #A8E6CF, #FFD3B6, #FFAAA5, #FF8B94);
 23 |     background-size: 800% 800%;
 24 |     animation: pastelShift 30s ease infinite;
 25 |     color: #333;
 26 |     min-height: 100vh;
 27 |     display: flex;
 28 |     justify-content: center;
 29 |     align-items: center;
 30 |     padding: 2rem 1rem;
 31 |   }
 32 | 
 33 |   .container {
 34 |     width: 100%;
 35 |     max-width: 900px;
 36 |   }
 37 | 
 38 |   .card {
 39 |     background: rgba(255, 255, 255, 0.85);
 40 |     border-radius: 20px;
 41 |     box-shadow: 0 12px 30px rgba(0,0,0,0.15);
 42 |     padding: 2rem 2.5rem;
 43 |     color: #333;
 44 |     transition: box-shadow 0.3s ease;
 45 |   }
 46 |   .card:hover {
 47 |     box-shadow: 0 16px 48px rgba(0,0,0,0.25);
 48 |   }
 49 | 
 50 |   h1 {
 51 |     text-align: center;
 52 |     margin-bottom: 1rem;
 53 |     font-weight: 700;
 54 |     font-size: 2.5rem;
 55 |     color: #ff6b6b;
 56 |     text-shadow: 1px 1px 3px #ffaaa5aa;
 57 |   }
 58 | 
 59 |   textarea {
 60 |     width: 100%;
 61 |     height: 200px;
 62 |     border-radius: 15px;
 63 |     border: 2px solid #ffaaa5;
 64 |     padding: 1rem;
 65 |     font-family: 'Courier New', monospace;
 66 |     font-size: 1rem;
 67 |     resize: vertical;
 68 |     background: #fff;
 69 |     color: #333;
 70 |     box-shadow: inset 0 0 8px #ffaaa5aa;
 71 |     transition: border-color 0.3s ease;
 72 |   }
 73 |   textarea:focus {
 74 |     border-color: #ff6b6b;
 75 |     outline: none;
 76 |     box-shadow: inset 0 0 12px #ff6b6baa;
 77 |   }
 78 | 
 79 |   select, button, input[type="file"] {
 80 |     margin-top: 1rem;
 81 |     border-radius: 12px;
 82 |     border: 2px solid #ffaaa5;
 83 |     padding: 0.85rem 1.4rem;
 84 |     font-size: 1rem;
 85 |     font-weight: 600;
 86 |     cursor: pointer;
 87 |     background: white;
 88 |     color: #ff6b6b;
 89 |     transition: all 0.3s ease;
 90 |   }
 91 | 
 92 |   select:hover, button:hover, input[type="file"]:hover {
 93 |     background: #ff6b6b;
 94 |     color: white;
 95 |     border-color: #ff6b6b;
 96 |   }
 97 | 
 98 |   button {
 99 |     margin-right: 1rem;
100 |   }
101 | 
102 |   input[type="file"] {
103 |     padding: 0.6rem 1rem;
104 |   }
105 | 
106 |   #output {
107 |     margin-top: 1.5rem;
108 |     background: #fff6f6;
109 |     padding: 1.5rem;
110 |     border-radius: 15px;
111 |     font-family: 'Courier New', monospace;
112 |     font-size: 1rem;
113 |     max-height: 300px;
114 |     overflow-y: auto;
115 |     color: #333;
116 |     white-space: pre-wrap;
117 |     box-shadow: 0 4px 12px #ffaaa5aa;
118 |   }
119 | 
120 |   #rating {
121 |     margin-top: 1.2rem;
122 |     font-size: 1.6rem;
123 |     font-weight: 700;
124 |     text-align: center;
125 |   }
126 | 
127 |   /* Bold colored scores */
128 |   .score-cgpa { color: #ff6b6b; font-weight: 700; }
129 |   .score-exp { color: #f7b733; font-weight: 700; }
130 |   .score-projects { color: #4caf50; font-weight: 700; }
131 |   .score-skills { color: #00bcd4; font-weight: 700; }
132 |   .final-score { color: #e91e63; font-weight: 900; font-size: 1.8rem; }
133 | 
134 |   .highlight {
135 |     background: #ff6b6b;
136 |     color: white;
137 |     padding: 2px 6px;
138 |     border-radius: 6px;
139 |   }
140 | 
141 |   /* Responsive */
142 |   @media (max-width: 768px) {
143 |     .card {
144 |       padding: 1.5rem 1.8rem;
145 |     }
146 |     textarea {
147 |       height: 150px;
148 |     }
149 |   }
150 | </style>
151 | </head>
152 | <body>
153 |   <div class="container">
154 |     <div class="card">
155 |       <h1>📄 Resume Analyzer</h1>
156 |       <input type="file" id="pdfInput" accept="application/pdf" />
157 |       <textarea id="resumeInput" placeholder="Paste or upload your resume here..."></textarea>
158 |       <label for="role" style="display:block; margin-top:1rem; font-weight:600; color:#ff6b6b;">Job Role:</label>
159 |       <select id="role">
160 |         <option>Software Engineer</option>
161 |         <option>Data Analyst</option>
162 |         <option>Product Manager</option>
163 |         <option>UI/UX Designer</option>
164 |         <option>Marketing Manager</option>
165 |         <option>DevOps Engineer</option>
166 |         <option>web developer</option>
167 |       </select>
168 |       <div style="margin-top:1.5rem;">
169 |         <button onclick="analyzeResume()">Analyze</button>
170 |         <button onclick="downloadDocx()">Download as .docx</button>
171 |       </div>
172 |       <div id="rating"></div>
173 |       <div id="output"></div>
174 |     </div>
175 |   </div>
176 | 
177 | <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
178 | <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.7.0/docx.min.js"></script>
179 | <script>
180 |   document.getElementById("pdfInput").addEventListener("change", async (e) => {
181 |     const file = e.target.files[0];
182 |     if (file && file.type === "application/pdf") {
183 |       const reader = new FileReader();
184 |       reader.onload = async () => {
185 |         const pdf = await pdfjsLib.getDocument({ data: reader.result }).promise;
186 |         let text = "";
187 |         for (let i = 1; i <= pdf.numPages; i++) {
188 |           const page = await pdf.getPage(i);
189 |           const content = await page.getTextContent();
190 |           text += content.items.map(item => item.str).join(" ") + "\n";
191 |         }
192 |         document.getElementById("resumeInput").value = text;
193 |       };
194 |       reader.readAsArrayBuffer(file);
195 |     }
196 |   });
197 | 
198 |   function analyzeResume() {
199 |     const resume = document.getElementById("resumeInput").value.trim();
200 |     const role = document.getElementById("role").value;
201 |     const output = document.getElementById("output");
202 |     const rating = document.getElementById("rating");
203 | 
204 |     if (!resume) {
205 |       output.innerHTML = "❗ Please enter or upload a resume.";
206 |       rating.innerHTML = "";
207 |       return;
208 |     }
209 | 
210 |     const keywords = {
211 |       "Software Engineer": ["JavaScript", "React", "Node.js", "Git", "Agile", "REST"],
212 |       "Data Analyst": ["SQL", "Excel", "Python", "Power BI", "Tableau", "Statistics"],
213 |       "Product Manager": ["Roadmap", "Stakeholders", "MVP", "KPIs", "User Stories"],
214 |       "UI/UX Designer": ["Figma", "Wireframes", "Prototypes", "User Research", "Accessibility"],
215 |       "Marketing Manager": ["SEO", "Campaigns", "Google Ads", "Analytics", "Branding"],
216 |       "DevOps Engineer": ["CI/CD", "Docker", "Kubernetes", "AWS", "Monitoring"],
217 |       "web developer": ["HTML", "CSS", "JS", "AWS", "Typescript"]
218 |     };
219 | 
220 |     let totalScore = 0;
221 |     let maxTotal = 20;
222 |     let details = [];
223 | 
224 |     // CGPA
225 |     let cgpaScore = 0;
226 |     let cgpaText = "<span class='score-cgpa'>CGPA not found</span>";
227 |     const cgpaMatch = resume.match(/\b(CGPA|GPA)[^\d]*(\d\.\d{1,2})/i);
228 |     if (cgpaMatch) {
229 |       const cgpaValue = parseFloat(cgpaMatch[2]);
230 |       cgpaScore = Math.min(5, (cgpaValue / 10) * 5);
231 |       cgpaText = `<span class='score-cgpa'>CGPA found: ${cgpaValue} — Score: ${cgpaScore.toFixed(1)}/5</span>`;
232 |     }
233 |     totalScore += cgpaScore;
234 |     details.push(cgpaText);
235 | 
236 |     // Experience
237 |     let expScore = 0;
238 |     let expText = "<span class='score-exp'>Experience not found</span>";
239 |     const expMatch = resume.match(/(\d+)[+\s-]*(years|yrs)/i);
240 |     if (expMatch) {
241 |       const years = parseInt(expMatch[1], 10);
242 |       expScore = Math.min(5, (years / 10) * 5);
243 |       expText = `<span class='score-exp'>Experience found: ${years} years — Score: ${expScore.toFixed(1)}/5</span>`;
244 |     }
245 |     totalScore += expScore;
246 |     details.push(expText);
247 | 
248 |     // Projects
249 |     let projScore = 0;
250 |     let projText = "<span class='score-projects'>Projects section unclear</span>";
251 |     const projCount = (resume.match(/\b(project|developed|built|designed)\b/gi) || []).length;
252 |     projScore = Math.min(5, projCount);
253 |     projText = `<span class='score-projects'>Projects keywords mentions: ${projCount} — Score: ${projScore}/5</span>`;
254 |     totalScore += projScore;
255 |     details.push(projText);
256 | 
257 |     // Skills
258 |     let skillScore = 0;
259 |     let skillText = "<span class='score-skills'>Skills missing for the role</span>";
260 |     const roleSkills = keywords[role];
261 |     let skillHits = 0;
262 |     roleSkills.forEach(skill => {
263 |       if (resume.toLowerCase().includes(skill.toLowerCase())) skillHits++;
264 |     });
265 |     skillScore = Math.min(5, skillHits);
266 |     skillText = `<span class='score-skills'>Skills matched for role (${role}): ${skillHits} / ${roleSkills.length} — Score: ${skillScore}/5</span>`;
267 |     totalScore += skillScore;
268 |     details.push(skillText);
269 | 
270 |     const finalScore = (totalScore / maxTotal) * 10;
271 | 
272 |     // Readability check
273 |     const sentenceCount = resume.split(/[.!?]/).length;
274 |     const wordCount = resume.split(/\s+/).length;
275 |     const avgWords = wordCount / (sentenceCount || 1);
276 |     let readabilityNote = "";
277 |     if (avgWords > 25) readabilityNote = "💡 Try shortening sentences for better clarity.";
278 | 
279 |     rating.innerHTML = `<div class="final-score">⭐ Final Resume Score: ${finalScore.toFixed(1)} / 10</div>`;
280 | 
281 |     const overused = ["hardworking", "team player", "motivated", "responsible"];
282 |     const highlighted = resume.replace(
283 |       new RegExp(`\\b(${overused.join("|")})\\b`, "gi"),
284 |       '<span class="highlight">$1</span>'
285 |     );
286 | 
287 |     let feedback = `<strong>✅ Resume Content Preview with Highlights:</strong><br><br>${highlighted}<br><br>`;
288 |     feedback += `<strong>📊 Score Breakdown:</strong><br>• ${details.join("<br>• ")}<br>`;
289 |     if (readabilityNote) feedback += `<br><em>${readabilityNote}</em>`;
290 | 
291 |     output.innerHTML = feedback;
292 |   }
293 | 
294 |   function downloadDocx() {
295 |     const { Document, Packer, Paragraph } = window.docx;
296 |     const text = document.getElementById("resumeInput").value;
297 |     const doc = new Document({
298 |       sections: [{
299 |         properties: {},
300 |         children: [new Paragraph(text)]
301 |       }]
302 |     });
303 | 
304 |     Packer.toBlob(doc).then(blob => {
305 |       const link = document.createElement("a");
306 |       link.href = URL.createObjectURL(blob);
307 |       link.download = "Improved_Resume.docx";
308 |       link.click();
309 |     });
310 |   }
311 | </script>
312 | </body>
313 | </html>
314 | 


--------------------------------------------------------------------------------