|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ATS Score Checker for Data Scientists & ML Engineers</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.5s ease-in-out; |
|
|
} |
|
|
.resume-preview { |
|
|
min-height: 300px; |
|
|
background-color: #f8fafc; |
|
|
border: 2px dashed #cbd5e1; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
.keyword-match { |
|
|
background-color: #d1fae5; |
|
|
padding: 0.2rem; |
|
|
border-radius: 0.2rem; |
|
|
} |
|
|
.keyword-miss { |
|
|
background-color: #fee2e2; |
|
|
padding: 0.2rem; |
|
|
border-radius: 0.2rem; |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.tooltip .tooltiptext { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.tooltip:hover .tooltiptext { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="gradient-bg text-white py-8 px-4 shadow-lg"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold">Data Science Resume Analyzer</h1> |
|
|
<p class="mt-2">Optimize your resume for ATS systems and get more interviews</p> |
|
|
</div> |
|
|
<div class="bg-white/20 p-3 rounded-full"> |
|
|
<i class="fas fa-robot text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="md:col-span-1 bg-white p-6 rounded-lg shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Upload Your Resume</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="resume-upload"> |
|
|
Choose File (PDF or DOCX) |
|
|
</label> |
|
|
<div class="flex items-center justify-center w-full"> |
|
|
<label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> |
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6"> |
|
|
<i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i> |
|
|
<p class="mb-2 text-sm text-gray-500">Click to upload or drag and drop</p> |
|
|
<p class="text-xs text-gray-500">PDF, DOCX (Max. 2MB)</p> |
|
|
</div> |
|
|
<input id="resume-upload" type="file" class="hidden" accept=".pdf,.docx" /> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="job-title"> |
|
|
Target Job Title |
|
|
</label> |
|
|
<select id="job-title" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="data_scientist">Data Scientist</option> |
|
|
<option value="ml_engineer">Machine Learning Engineer</option> |
|
|
<option value="data_engineer">Data Engineer</option> |
|
|
<option value="ai_researcher">AI Researcher</option> |
|
|
<option value="mlops">MLOps Engineer</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="experience-level"> |
|
|
Experience Level |
|
|
</label> |
|
|
<select id="experience-level" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="entry">Entry Level (0-2 years)</option> |
|
|
<option value="mid">Mid Level (3-5 years)</option> |
|
|
<option value="senior">Senior Level (5+ years)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button id="analyze-btn" class="w-full gradient-bg text-white py-3 px-4 rounded-md font-medium hover:opacity-90 transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-search mr-2"></i> Analyze Resume |
|
|
</button> |
|
|
|
|
|
<div class="mt-6 p-4 bg-blue-50 rounded-lg"> |
|
|
<h3 class="font-medium text-blue-800 mb-2">Tips for Better ATS Scores</h3> |
|
|
<ul class="text-sm text-blue-700 space-y-1"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Use standard section headings (Experience, Education, Skills)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Include relevant keywords from the job description</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Avoid graphics, tables, and complex formatting</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
|
|
<span>Use bullet points instead of paragraphs</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-2 space-y-6"> |
|
|
|
|
|
<div id="score-card" class="bg-white p-6 rounded-lg shadow-md hidden"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">ATS Score Analysis</h2> |
|
|
<div class="flex items-center"> |
|
|
<span id="score-value" class="text-3xl font-bold mr-2">0</span> |
|
|
<span class="text-gray-500">/100</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>ATS Compatibility</span> |
|
|
<span id="score-percent">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="score-bar" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-6"> |
|
|
<div class="bg-green-50 p-4 rounded-lg border border-green-200"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-green-800">Strengths</h3> |
|
|
<i class="fas fa-thumbs-up text-green-500"></i> |
|
|
</div> |
|
|
<ul id="strengths-list" class="mt-2 text-sm text-green-700 space-y-1"> |
|
|
|
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-red-50 p-4 rounded-lg border border-red-200"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-red-800">Improvements</h3> |
|
|
<i class="fas fa-exclamation-triangle text-red-500"></i> |
|
|
</div> |
|
|
<ul id="improvements-list" class="mt-2 text-sm text-red-700 space-y-1"> |
|
|
|
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="keyword-analysis" class="bg-white p-6 rounded-lg shadow-md hidden"> |
|
|
<h2 class="text-xl font-semibold mb-4">Keyword Analysis</h2> |
|
|
<p class="text-gray-600 mb-4">These are the most important keywords for your target role. The highlighted ones were found in your resume.</p> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium mb-2">Technical Skills</h3> |
|
|
<div id="technical-keywords" class="flex flex-wrap gap-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium mb-2">Tools & Frameworks</h3> |
|
|
<div id="tools-keywords" class="flex flex-wrap gap-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-2">Methodologies</h3> |
|
|
<div id="methodology-keywords" class="flex flex-wrap gap-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resume-preview-container" class="bg-white p-6 rounded-lg shadow-md hidden"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Resume Preview</h2> |
|
|
<button id="download-btn" class="text-sm bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Download |
|
|
</button> |
|
|
</div> |
|
|
<div id="resume-preview" class="resume-preview p-4 overflow-auto"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="detailed-analysis" class="bg-white p-6 rounded-lg shadow-md hidden"> |
|
|
<h2 class="text-xl font-semibold mb-4">Detailed Analysis</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium flex items-center"> |
|
|
<i class="fas fa-file-alt text-blue-500 mr-2"></i> |
|
|
Content Score |
|
|
</h3> |
|
|
<div class="flex items-center"> |
|
|
<span id="content-score" class="font-bold mr-1">0</span> |
|
|
<span class="text-gray-500">/30</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="content-bar" class="progress-bar h-2.5 rounded-full bg-blue-500" style="width: 0%"></div> |
|
|
</div> |
|
|
<div id="content-feedback" class="mt-2 text-sm text-gray-600"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium flex items-center"> |
|
|
<i class="fas fa-key text-purple-500 mr-2"></i> |
|
|
Keyword Score |
|
|
</h3> |
|
|
<div class="flex items-center"> |
|
|
<span id="keyword-score" class="font-bold mr-1">0</span> |
|
|
<span class="text-gray-500">/30</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="keyword-bar" class="progress-bar h-2.5 rounded-full bg-purple-500" style="width: 0%"></div> |
|
|
</div> |
|
|
<div id="keyword-feedback" class="mt-2 text-sm text-gray-600"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium flex items-center"> |
|
|
<i class="fas fa-paint-brush text-green-500 mr-2"></i> |
|
|
Formatting Score |
|
|
</h3> |
|
|
<div class="flex items-center"> |
|
|
<span id="formatting-score" class="font-bold mr-1">0</span> |
|
|
<span class="text-gray-500">/20</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="formatting-bar" class="progress-bar h-2.5 rounded-full bg-green-500" style="width: 0%"></div> |
|
|
</div> |
|
|
<div id="formatting-feedback" class="mt-2 text-sm text-gray-600"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium flex items-center"> |
|
|
<i class="fas fa-briefcase text-yellow-500 mr-2"></i> |
|
|
Experience Score |
|
|
</h3> |
|
|
<div class="flex items-center"> |
|
|
<span id="experience-score" class="font-bold mr-1">0</span> |
|
|
<span class="text-gray-500">/20</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="experience-bar" class="progress-bar h-2.5 rounded-full bg-yellow-500" style="width: 0%"></div> |
|
|
</div> |
|
|
<div id="experience-feedback" class="mt-2 text-sm text-gray-600"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const analyzeBtn = document.getElementById('analyze-btn'); |
|
|
const scoreCard = document.getElementById('score-card'); |
|
|
const keywordAnalysis = document.getElementById('keyword-analysis'); |
|
|
const resumePreviewContainer = document.getElementById('resume-preview-container'); |
|
|
const detailedAnalysis = document.getElementById('detailed-analysis'); |
|
|
const downloadBtn = document.getElementById('download-btn'); |
|
|
const resumeUpload = document.getElementById('resume-upload'); |
|
|
|
|
|
|
|
|
let originalResumeContent = ''; |
|
|
let analyzedResumeContent = ''; |
|
|
|
|
|
|
|
|
const roleKeywords = { |
|
|
data_scientist: { |
|
|
technical: ['Python', 'R', 'SQL', 'Statistics', 'Data Analysis', 'Data Visualization', |
|
|
'Machine Learning', 'Deep Learning', 'Natural Language Processing', 'Predictive Modeling'], |
|
|
tools: ['Pandas', 'NumPy', 'Scikit-learn', 'TensorFlow', 'PyTorch', 'Keras', |
|
|
'Matplotlib', 'Seaborn', 'Tableau', 'Power BI', 'Spark', 'Hadoop'], |
|
|
methodology: ['A/B Testing', 'Hypothesis Testing', 'Feature Engineering', 'Model Evaluation', |
|
|
'Cross-Validation', 'Data Cleaning', 'EDA', 'CRISP-DM'] |
|
|
}, |
|
|
ml_engineer: { |
|
|
technical: ['Python', 'Machine Learning', 'Deep Learning', 'Neural Networks', 'Computer Vision', |
|
|
'Natural Language Processing', 'Algorithm Development', 'Model Deployment', 'ML Pipelines'], |
|
|
tools: ['TensorFlow', 'PyTorch', 'Keras', 'Scikit-learn', 'OpenCV', 'NLTK', |
|
|
'Docker', 'Kubernetes', 'AWS SageMaker', 'MLflow', 'Airflow'], |
|
|
methodology: ['Model Optimization', 'Hyperparameter Tuning', 'Transfer Learning', 'Data Augmentation', |
|
|
'Model Serving', 'CI/CD', 'MLOps', 'Feature Engineering'] |
|
|
}, |
|
|
data_engineer: { |
|
|
technical: ['SQL', 'NoSQL', 'ETL', 'Data Pipelines', 'Data Warehousing', 'Data Modeling', |
|
|
'Distributed Systems', 'Big Data', 'Data Quality', 'Data Governance'], |
|
|
tools: ['Spark', 'Hadoop', 'Kafka', 'Airflow', 'Snowflake', 'Redshift', |
|
|
'BigQuery', 'PostgreSQL', 'MongoDB', 'Docker', 'Kubernetes'], |
|
|
methodology: ['Data Architecture', 'Schema Design', 'Performance Optimization', 'Data Security', |
|
|
'Data Integration', 'Stream Processing', 'Batch Processing'] |
|
|
}, |
|
|
ai_researcher: { |
|
|
technical: ['Python', 'Machine Learning', 'Deep Learning', 'Reinforcement Learning', 'Computer Vision', |
|
|
'Natural Language Processing', 'Generative Models', 'Neural Networks', 'Algorithm Design'], |
|
|
tools: ['TensorFlow', 'PyTorch', 'Keras', 'JAX', 'OpenAI Gym', 'Hugging Face', |
|
|
'Matplotlib', 'Seaborn', 'Jupyter Notebook', 'LaTeX'], |
|
|
methodology: ['Research Methodology', 'Literature Review', 'Experimental Design', 'Model Interpretation', |
|
|
'Transfer Learning', 'Few-shot Learning', 'Self-supervised Learning'] |
|
|
}, |
|
|
mlops: { |
|
|
technical: ['Python', 'Machine Learning', 'Model Deployment', 'CI/CD', 'Monitoring', |
|
|
'Infrastructure as Code', 'Cloud Computing', 'Containerization', 'Orchestration'], |
|
|
tools: ['Docker', 'Kubernetes', 'AWS', 'GCP', 'Azure', 'MLflow', |
|
|
'Kubeflow', 'Airflow', 'Prometheus', 'Grafana', 'Terraform'], |
|
|
methodology: ['MLOps', 'DevOps', 'Model Versioning', 'A/B Testing', 'Canary Deployments', |
|
|
'Performance Monitoring', 'Logging', 'Alerting'] |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const sampleResume = { |
|
|
content: `John Doe |
|
|
Data Scientist |
|
|
|
|
|
EXPERIENCE |
|
|
Senior Data Scientist |
|
|
ABC Tech (2020 - Present) |
|
|
- Developed machine learning models using Python and TensorFlow to improve product recommendations |
|
|
- Led A/B testing initiatives that increased conversion rates by 15% |
|
|
- Built data pipelines with Spark and Airflow to process large datasets |
|
|
|
|
|
Data Analyst |
|
|
XYZ Corp (2017 - 2020) |
|
|
- Performed exploratory data analysis using Pandas and NumPy |
|
|
- Created interactive dashboards in Tableau for business stakeholders |
|
|
- Wrote SQL queries to extract and transform data from multiple sources |
|
|
|
|
|
EDUCATION |
|
|
MS in Data Science |
|
|
University of Tech (2016) |
|
|
|
|
|
SKILLS |
|
|
Python, R, SQL, Machine Learning, Data Visualization, Statistics, TensorFlow, PyTorch, Spark` |
|
|
}; |
|
|
|
|
|
|
|
|
resumeUpload.addEventListener('change', function(e) { |
|
|
const file = e.target.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
|
|
|
|
|
|
originalResumeContent = `Uploaded file: ${file.name}\n\n${sampleResume.content}`; |
|
|
}); |
|
|
|
|
|
|
|
|
downloadBtn.addEventListener('click', function() { |
|
|
if (!analyzedResumeContent) { |
|
|
alert('Please analyze your resume first'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const blob = new Blob([originalResumeContent], { type: 'text/plain' }); |
|
|
|
|
|
|
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
|
|
|
|
|
|
const today = new Date(); |
|
|
const dateStr = today.toISOString().split('T')[0]; |
|
|
|
|
|
|
|
|
const jobTitle = document.getElementById('job-title').value; |
|
|
const formattedJobTitle = jobTitle.split('_').map(word => |
|
|
word.charAt(0).toUpperCase() + word.slice(1) |
|
|
).join(' '); |
|
|
|
|
|
a.download = `Resume_${formattedJobTitle}_${dateStr}.txt`; |
|
|
|
|
|
|
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
|
|
|
|
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
}); |
|
|
|
|
|
|
|
|
analyzeBtn.addEventListener('click', function() { |
|
|
|
|
|
|
|
|
|
|
|
const jobTitle = document.getElementById('job-title').value; |
|
|
const experienceLevel = document.getElementById('experience-level').value; |
|
|
|
|
|
|
|
|
originalResumeContent = originalResumeContent || sampleResume.content; |
|
|
analyzedResumeContent = originalResumeContent; |
|
|
|
|
|
|
|
|
scoreCard.classList.remove('hidden'); |
|
|
keywordAnalysis.classList.remove('hidden'); |
|
|
resumePreviewContainer.classList.remove('hidden'); |
|
|
detailedAnalysis.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const scores = calculateScores(analyzedResumeContent, jobTitle, experienceLevel); |
|
|
|
|
|
|
|
|
updateScoreCard(scores); |
|
|
updateKeywordAnalysis(analyzedResumeContent, jobTitle); |
|
|
updateResumePreview(analyzedResumeContent, jobTitle); |
|
|
updateDetailedAnalysis(scores); |
|
|
}); |
|
|
|
|
|
|
|
|
function calculateScores(resumeContent, jobTitle, experienceLevel) { |
|
|
|
|
|
|
|
|
|
|
|
const keywords = roleKeywords[jobTitle]; |
|
|
let contentScore = 0; |
|
|
let keywordScore = 0; |
|
|
let formattingScore = 0; |
|
|
let experienceScore = 0; |
|
|
|
|
|
|
|
|
const hasExperience = resumeContent.toLowerCase().includes('experience'); |
|
|
const hasEducation = resumeContent.toLowerCase().includes('education'); |
|
|
const hasSkills = resumeContent.toLowerCase().includes('skills'); |
|
|
|
|
|
if (hasExperience) contentScore += 10; |
|
|
if (hasEducation) contentScore += 5; |
|
|
if (hasSkills) contentScore += 5; |
|
|
|
|
|
|
|
|
const bulletPoints = (resumeContent.match(/-/g) || []).length; |
|
|
formattingScore += Math.min(bulletPoints, 10); |
|
|
|
|
|
|
|
|
const lineCount = resumeContent.split('\n').length; |
|
|
if (lineCount >= 15 && lineCount <= 40) formattingScore += 10; |
|
|
|
|
|
|
|
|
let foundKeywords = 0; |
|
|
let totalKeywords = 0; |
|
|
|
|
|
|
|
|
for (const keyword of keywords.technical) { |
|
|
totalKeywords++; |
|
|
if (resumeContent.toLowerCase().includes(keyword.toLowerCase())) { |
|
|
foundKeywords++; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
for (const keyword of keywords.tools) { |
|
|
totalKeywords++; |
|
|
if (resumeContent.toLowerCase().includes(keyword.toLowerCase())) { |
|
|
foundKeywords++; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
for (const keyword of keywords.methodology) { |
|
|
totalKeywords++; |
|
|
if (resumeContent.toLowerCase().includes(keyword.toLowerCase())) { |
|
|
foundKeywords++; |
|
|
} |
|
|
} |
|
|
|
|
|
keywordScore = Math.round((foundKeywords / totalKeywords) * 30); |
|
|
|
|
|
|
|
|
if (experienceLevel === 'entry') { |
|
|
experienceScore = resumeContent.toLowerCase().includes('intern') ? 15 : 10; |
|
|
} else if (experienceLevel === 'mid') { |
|
|
experienceScore = (resumeContent.match(/\d+\+? years/g) || []).length >= 3 ? 15 : 10; |
|
|
} else { |
|
|
experienceScore = (resumeContent.match(/\d+\+? years/g) || []).length >= 5 ? 20 : 15; |
|
|
} |
|
|
|
|
|
|
|
|
const totalScore = contentScore + keywordScore + formattingScore + experienceScore; |
|
|
|
|
|
return { |
|
|
total: totalScore, |
|
|
content: contentScore, |
|
|
keyword: keywordScore, |
|
|
formatting: formattingScore, |
|
|
experience: experienceScore |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function updateScoreCard(scores) { |
|
|
document.getElementById('score-value').textContent = scores.total; |
|
|
document.getElementById('score-percent').textContent = `${scores.total}%`; |
|
|
document.getElementById('score-bar').style.width = `${scores.total}%`; |
|
|
|
|
|
|
|
|
if (scores.total >= 80) { |
|
|
document.getElementById('score-bar').classList.add('bg-green-500'); |
|
|
} else if (scores.total >= 50) { |
|
|
document.getElementById('score-bar').classList.add('bg-yellow-500'); |
|
|
} else { |
|
|
document.getElementById('score-bar').classList.add('bg-red-500'); |
|
|
} |
|
|
|
|
|
|
|
|
const strengthsList = document.getElementById('strengths-list'); |
|
|
const improvementsList = document.getElementById('improvements-list'); |
|
|
|
|
|
strengthsList.innerHTML = ''; |
|
|
improvementsList.innerHTML = ''; |
|
|
|
|
|
|
|
|
if (scores.keyword >= 20) { |
|
|
strengthsList.innerHTML += '<li>Strong keyword matching for your target role</li>'; |
|
|
} |
|
|
if (scores.formatting >= 15) { |
|
|
strengthsList.innerHTML += '<li>Good resume formatting and structure</li>'; |
|
|
} |
|
|
if (scores.content >= 20) { |
|
|
strengthsList.innerHTML += '<li>Comprehensive content with all key sections</li>'; |
|
|
} |
|
|
|
|
|
|
|
|
if (scores.keyword < 15) { |
|
|
improvementsList.innerHTML += '<li>Add more relevant technical keywords</li>'; |
|
|
} |
|
|
if (scores.formatting < 10) { |
|
|
improvementsList.innerHTML += '<li>Improve formatting with more bullet points</li>'; |
|
|
} |
|
|
if (scores.content < 15) { |
|
|
improvementsList.innerHTML += '<li>Ensure all standard sections are included</li>'; |
|
|
} |
|
|
|
|
|
|
|
|
if (strengthsList.innerHTML === '') { |
|
|
strengthsList.innerHTML = '<li>No significant strengths identified</li>'; |
|
|
} |
|
|
if (improvementsList.innerHTML === '') { |
|
|
improvementsList.innerHTML = '<li>No major improvements needed</li>'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateKeywordAnalysis(resumeContent, jobTitle) { |
|
|
const keywords = roleKeywords[jobTitle]; |
|
|
|
|
|
|
|
|
const technicalKeywordsDiv = document.getElementById('technical-keywords'); |
|
|
technicalKeywordsDiv.innerHTML = ''; |
|
|
|
|
|
keywords.technical.forEach(keyword => { |
|
|
const hasKeyword = resumeContent.toLowerCase().includes(keyword.toLowerCase()); |
|
|
const span = document.createElement('span'); |
|
|
span.className = hasKeyword ? 'keyword-match' : 'keyword-miss'; |
|
|
span.textContent = keyword; |
|
|
|
|
|
if (!hasKeyword) { |
|
|
const tooltip = document.createElement('div'); |
|
|
tooltip.className = 'tooltip'; |
|
|
tooltip.innerHTML = `<span class="tooltiptext">This important keyword is missing from your resume</span>${keyword}`; |
|
|
technicalKeywordsDiv.appendChild(tooltip); |
|
|
} else { |
|
|
technicalKeywordsDiv.appendChild(span); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const toolsKeywordsDiv = document.getElementById('tools-keywords'); |
|
|
toolsKeywordsDiv.innerHTML = ''; |
|
|
|
|
|
keywords.tools.forEach(keyword => { |
|
|
const hasKeyword = resumeContent.toLowerCase().includes(keyword.toLowerCase()); |
|
|
const span = document.createElement('span'); |
|
|
span.className = hasKeyword ? 'keyword-match' : 'keyword-miss'; |
|
|
span.textContent = keyword; |
|
|
|
|
|
if (!hasKeyword) { |
|
|
const tooltip = document.createElement('div'); |
|
|
tooltip.className = 'tooltip'; |
|
|
tooltip.innerHTML = `<span class="tooltiptext">This important tool is missing from your resume</span>${keyword}`; |
|
|
toolsKeywordsDiv.appendChild(tooltip); |
|
|
} else { |
|
|
toolsKeywordsDiv.appendChild(span); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const methodologyKeywordsDiv = document.getElementById('methodology-keywords'); |
|
|
methodologyKeywordsDiv.innerHTML = ''; |
|
|
|
|
|
keywords.methodology.forEach(keyword => { |
|
|
const hasKeyword = resumeContent.toLowerCase().includes(keyword.toLowerCase()); |
|
|
const span = document.createElement('span'); |
|
|
span.className = hasKeyword ? 'keyword-match' : 'keyword-miss'; |
|
|
span.textContent = keyword; |
|
|
|
|
|
if (!hasKeyword) { |
|
|
const tooltip = document.createElement('div'); |
|
|
tooltip.className = 'tooltip'; |
|
|
tooltip.innerHTML = `<span class="tooltiptext">This methodology is important for your role</span>${keyword}`; |
|
|
methodologyKeywordsDiv.appendChild(tooltip); |
|
|
} else { |
|
|
methodologyKeywordsDiv.appendChild(span); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateResumePreview(resumeContent, jobTitle) { |
|
|
const resumePreview = document.getElementById('resume-preview'); |
|
|
const keywords = [ |
|
|
...roleKeywords[jobTitle].technical, |
|
|
...roleKeywords[jobTitle].tools, |
|
|
...roleKeywords[jobTitle].methodology |
|
|
]; |
|
|
|
|
|
let highlightedContent = resumeContent; |
|
|
|
|
|
|
|
|
keywords.forEach(keyword => { |
|
|
const regex = new RegExp(keyword, 'gi'); |
|
|
highlightedContent = highlightedContent.replace(regex, match => { |
|
|
return `<span class="keyword-match">${match}</span>`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
highlightedContent = highlightedContent.replace(/\n/g, '<br>'); |
|
|
|
|
|
resumePreview.innerHTML = highlightedContent; |
|
|
} |
|
|
|
|
|
|
|
|
function updateDetailedAnalysis(scores) { |
|
|
document.getElementById('content-score').textContent = scores.content; |
|
|
document.getElementById('keyword-score').textContent = scores.keyword; |
|
|
document.getElementById('formatting-score').textContent = scores.formatting; |
|
|
document.getElementById('experience-score').textContent = scores.experience; |
|
|
|
|
|
document.getElementById('content-bar').style.width = `${(scores.content / 30) * 100}%`; |
|
|
document.getElementById('keyword-bar').style.width = `${(scores.keyword / 30) * 100}%`; |
|
|
document.getElementById('formatting-bar').style.width = `${(scores.formatting / 20) * 100}%`; |
|
|
document.getElementById('experience-bar').style.width = `${(scores.experience / 20) * 100}%`; |
|
|
|
|
|
|
|
|
let contentFeedback = ''; |
|
|
if (scores.content >= 25) { |
|
|
contentFeedback = 'Your resume has all the essential sections with detailed content.'; |
|
|
} else if (scores.content >= 15) { |
|
|
contentFeedback = 'Your resume has most key sections but could use more detail in some areas.'; |
|
|
} else { |
|
|
contentFeedback = 'Your resume is missing important sections. Add Experience, Education, and Skills sections.'; |
|
|
} |
|
|
document.getElementById('content-feedback').textContent = contentFeedback; |
|
|
|
|
|
|
|
|
let keywordFeedback = ''; |
|
|
if (scores.keyword >= 25) { |
|
|
keywordFeedback = 'Excellent keyword optimization! Your resume matches most important terms for your target role.'; |
|
|
} else if (scores.keyword >= 15) { |
|
|
keywordFeedback = 'Your resume includes some important keywords but could use more technical terms.'; |
|
|
} else { |
|
|
keywordFeedback = 'Your resume is missing many important keywords. Review the keyword analysis above.'; |
|
|
} |
|
|
document.getElementById('keyword-feedback').textContent = keywordFeedback; |
|
|
|
|
|
|
|
|
let formattingFeedback = ''; |
|
|
if (scores.formatting >= 15) { |
|
|
formattingFeedback = 'Great formatting! Your resume uses bullet points effectively and has an appropriate length.'; |
|
|
} else if (scores.formatting >= 10) { |
|
|
formattingFeedback = 'Your formatting is decent but could be improved with more bullet points and better structure.'; |
|
|
} else { |
|
|
formattingFeedback = 'Your resume formatting needs work. Use more bullet points and keep it between 1-2 pages.'; |
|
|
} |
|
|
document.getElementById('formatting-feedback').textContent = formattingFeedback; |
|
|
|
|
|
|
|
|
let experienceFeedback = ''; |
|
|
if (scores.experience >= 15) { |
|
|
experienceFeedback = 'Your experience section effectively showcases your relevant background.'; |
|
|
} else { |
|
|
experienceFeedback = 'Your experience section could better highlight your relevant skills and achievements.'; |
|
|
} |
|
|
document.getElementById('experience-feedback').textContent = experienceFeedback; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Jurk06/data-science-resume-analyser" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
