resumeranker-pro / index.html
deepakpro's picture
This model is designed to automatically analyze resumes submitted by students. It uses Natural Language Processing (NLP) to extract key skills and a Decision Tree machine learning algorithm trained on TF-IDF features to classify each resume into one of four categories: Web Developer, Data Analyst, AI/ML Specialist, or Core Engineer. In addition to predicting the category, the model also identifies and highlights the top three most relevant skills from the resume. This system helps recruiters and placement cells quickly sort and evaluate talent based on skills and job-fit."
f391f76 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ResumeRanker Pro 🌟</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-section {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
padding: 5rem 0;
border-radius: 0 0 20px 20px;
}
.upload-container {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-top: -3rem;
}
.feature-icon {
font-size: 2.5rem;
color: #6e8efb;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="hero-section text-center">
<div class="container">
<h1 class="display-4 fw-bold mb-3">ResumeRanker Pro 🌟</h1>
<p class="lead mb-4">Advanced NLP and Decision Tree-powered resume classification for student talent evaluation</p>
</div>
</div>
<div class="container">
<div class="upload-container">
<h2 class="text-center mb-4">Upload Resume</h2>
<div class="d-flex justify-content-center">
<div class="text-center">
<div class="mb-3">
<input type="file" class="form-control" id="resumeUpload" accept=".pdf,.doc,.docx,.txt">
</div>
<button class="btn btn-primary btn-lg" id="analyzeBtn">
<i class="fas fa-magic me-2"></i> Analyze Resume
</button>
</div>
</div>
</div>
<div class="row mt-5" id="resultsSection" style="display: none;">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title"><i class="fas fa-tag me-2"></i>Job Category Prediction</h3>
<p class="text-muted small mb-2">Categories: Web Developer, Data Analyst, AI/ML Specialist, Core Engineer</p>
<div class="mt-3" id="categoryResult"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title"><i class="fas fa-star me-2"></i>Key Skill Extraction</h3>
<p class="text-muted small mb-2">NLP-identified top 3 most relevant skills</p>
<div class="mt-3" id="skillsResult"></div>
</div>
</div>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon">
<i class="fas fa-brain"></i>
</div>
<h4>NLP + Decision Tree</h4>
<p>TF-IDF features with Decision Tree model for classification</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon">
<i class="fas fa-file-alt"></i>
</div>
<h4>Student Focused</h4>
<p>Optimized for analyzing student resumes and early-career profiles</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="feature-icon">
<i class="fas fa-chart-bar"></i>
</div>
<h4>4-Category System</h4>
<p>Classifies into Web, Data, AI/ML or Core engineering roles</p>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-light py-4 mt-5">
<div class="container text-center">
<p class="mb-0">© 2023 ResumeRanker Pro 🌟 - AI Resume Classification System</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('analyzeBtn').addEventListener('click', function() {
// Simulate analysis
document.getElementById('resultsSection').style.display = 'block';
document.getElementById('categoryResult').innerHTML = `
<div class="alert alert-success">
<h4 class="alert-heading">AI/ML Specialist</h4>
<p class="mb-1"><strong>Confidence:</strong> 86%</p>
<p>This profile shows strong machine learning and data science competencies.</p>
</div>
`;
document.getElementById('skillsResult').innerHTML = `
<div class="d-flex flex-wrap gap-2">
<span class="badge bg-primary p-2">Python (92%)</span>
<span class="badge bg-primary p-2">TensorFlow (87%)</span>
<span class="badge bg-primary p-2">NLP (84%)</span>
</div>
`;
// Scroll to results
document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
});
</script>
</body>
</html>