Skip to content

Commit 51e15e6

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request #687 from naina-kashyap/my-first-contribution
Web interface for AI resume analyzer
2 parents 8409204 + c766981 commit 51e15e6

4 files changed

Lines changed: 230 additions & 0 deletions

File tree

‎gssoc2/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎gssoc2/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>AI Resume Analyzer</title>
6+
<link rel="stylesheet" href="style.css">
7+
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9+
</head>
10+
11+
<body>
12+
13+
<div class="container">
14+
15+
<h1 class="title">AI RESUME ANALYZER</h1>
16+
17+
<!-- UPLOAD -->
18+
<div class="upload-box">
19+
<i class="fa-solid fa-file-lines icon"></i>
20+
21+
<label class="file-btn">
22+
Choose File
23+
<input type="file" id="resumeInput" hidden>
24+
</label>
25+
26+
<p>Drag & Drop or Click</p>
27+
</div>
28+
29+
<button id="analyzeBtn">Analyze Resume 🚀</button>
30+
31+
<!-- ATS SCORE -->
32+
<div id="ats" class="card hidden">
33+
<h3>ATS Score</h3>
34+
35+
<div class="progress-circle">
36+
<span>82%</span>
37+
</div>
38+
39+
<div class="extra-info">
40+
<p>✔ Formatting Score: 80%</p>
41+
<p>✔ Keyword Match: 75%</p>
42+
</div>
43+
</div>
44+
45+
<!-- LOWER SECTION -->
46+
<div class="bottom-section hidden" id="bottomSection">
47+
48+
<!-- KEYWORDS -->
49+
<div class="card">
50+
<h3>Keywords Match</h3>
51+
52+
<div class="keyword-item">
53+
<span>Python</span>
54+
<div class="bar"><div style="width: 90%"></div></div>
55+
</div>
56+
57+
<div class="keyword-item">
58+
<span>Machine Learning</span>
59+
<div class="bar"><div style="width: 75%"></div></div>
60+
</div>
61+
62+
<div class="keyword-item">
63+
<span>Data Analysis</span>
64+
<div class="bar"><div style="width: 65%"></div></div>
65+
</div>
66+
</div>
67+
68+
<!-- SUGGESTIONS -->
69+
<div class="card">
70+
<h3><i class="fa-solid fa-lightbulb"></i> Suggestions</h3>
71+
72+
<div class="suggestion">
73+
<i class="fa-solid fa-check"></i>
74+
<p>Add more projects</p>
75+
</div>
76+
77+
<div class="suggestion">
78+
<i class="fa-solid fa-check"></i>
79+
<p>Improve formatting</p>
80+
</div>
81+
82+
<div class="suggestion">
83+
<i class="fa-solid fa-check"></i>
84+
<p>Use action verbs</p>
85+
</div>
86+
</div>
87+
88+
</div>
89+
90+
</div>
91+
92+
<script src="script.js"></script>
93+
</body>
94+
</html>

‎gssoc2/script.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
document.getElementById("analyzeBtn").addEventListener("click", () => {
2+
const file = document.getElementById("resumeInput");
3+
4+
if (!file.files.length) {
5+
alert("Upload resume first!");
6+
return;
7+
}
8+
9+
document.getElementById("ats").classList.remove("hidden");
10+
document.getElementById("bottomSection").classList.remove("hidden");
11+
});

‎gssoc2/style.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
body {
2+
margin: 0;
3+
font-family: Arial;
4+
background: linear-gradient(to right, #0f172a, #020617);
5+
color: white;
6+
}
7+
8+
/* CONTAINER */
9+
.container {
10+
max-width: 900px;
11+
margin: auto;
12+
padding: 30px;
13+
}
14+
15+
/* TITLE */
16+
.title {
17+
text-align: center;
18+
font-size: 32px;
19+
margin-bottom: 20px;
20+
21+
background: linear-gradient(90deg, #38bdf8, #22c55e);
22+
-webkit-background-clip: text;
23+
background-clip: text;
24+
-webkit-text-fill-color: transparent;
25+
}
26+
27+
/* UPLOAD */
28+
.upload-box {
29+
border: 2px dashed #38bdf8;
30+
padding: 30px;
31+
border-radius: 12px;
32+
text-align: center;
33+
}
34+
35+
.icon {
36+
font-size: 40px;
37+
}
38+
39+
/* BUTTON */
40+
.file-btn {
41+
background: #38bdf8;
42+
padding: 10px 20px;
43+
border-radius: 8px;
44+
cursor: pointer;
45+
display: inline-block;
46+
margin-top: 10px;
47+
}
48+
49+
#analyzeBtn {
50+
margin-top: 20px;
51+
width: 100%;
52+
padding: 12px;
53+
background: #22c55e;
54+
border: none;
55+
border-radius: 8px;
56+
}
57+
58+
/* CARD */
59+
.card {
60+
background: #0f172a;
61+
padding: 20px;
62+
border-radius: 14px;
63+
border: 1px solid #334155;
64+
margin-top: 25px;
65+
}
66+
67+
/* ATS */
68+
.progress-circle {
69+
width: 130px;
70+
height: 130px;
71+
border-radius: 50%;
72+
border: 10px solid #22c55e;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
margin: 15px auto;
77+
}
78+
79+
.extra-info {
80+
text-align: center;
81+
font-size: 13px;
82+
color: #94a3b8;
83+
}
84+
85+
/* BOTTOM GRID */
86+
.bottom-section {
87+
display: grid;
88+
grid-template-columns: 1fr 1fr;
89+
gap: 20px;
90+
}
91+
92+
/* KEYWORDS */
93+
.keyword-item {
94+
margin-bottom: 15px;
95+
}
96+
97+
.bar {
98+
background: #1e293b;
99+
height: 8px;
100+
border-radius: 5px;
101+
}
102+
103+
.bar div {
104+
height: 100%;
105+
background: #38bdf8;
106+
}
107+
108+
/* SUGGESTIONS */
109+
.suggestion {
110+
display: flex;
111+
gap: 10px;
112+
margin: 10px 0;
113+
}
114+
115+
.suggestion i {
116+
color: #22c55e;
117+
}
118+
119+
/* HIDDEN */
120+
.hidden {
121+
display: none;
122+
}

0 commit comments

Comments
 (0)