Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit fecec19

Browse files
programmerrajaprogrammerraja
committedMay 24, 2025·
updated hirezen
1 parent 92d8bb8 commit fecec19

File tree

4 files changed

+424
-13
lines changed

4 files changed

+424
-13
lines changed
 

‎hirezen/assets/hero.jpg

103 KB
Loading

‎hirezen/assets/preview.png

299 KB
Loading

‎hirezen/index.html

Lines changed: 409 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,411 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>HireZen - AI-Powered Interview Assistant</title>
8-
<meta name="description" content="Generate tailored interview questions, track feedback, and create professional reports with our Chrome extension powered by AI." />
9-
<script type="module" crossorigin src="./assets/index-DauIYK8C.js"></script>
10-
<link rel="stylesheet" crossorigin href="./assets/index-DDleST4l.css">
11-
</head>
12-
<body>
13-
<div id="root"></div>
14-
</body>
15-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>HireZen - AI-Powered Interview Questions Generator</title>
8+
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
9+
<script>tailwind.config = { theme: { extend: { colors: { primary: '#1C1C1E', secondary: '#2C2C2E' }, borderRadius: { 'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px', 'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px', 'full': '9999px', 'button': '8px' } } } }</script>
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
13+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
15+
<style>
16+
:where([class^="ri-"])::before {
17+
content: "\f3c2";
18+
}
19+
20+
body {
21+
font-family: 'Inter', sans-serif;
22+
}
23+
24+
.hero-section {
25+
background-image: url('./assets/hero.jpg');
26+
background-size: cover;
27+
background-position: right center;
28+
background-repeat: no-repeat;
29+
}
30+
31+
.feature-card:hover {
32+
transform: translateY(-5px);
33+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
34+
}
35+
36+
input:focus,
37+
button:focus {
38+
outline: none;
39+
ring: 2px;
40+
ring-color: rgba(79, 70, 229, 0.5);
41+
}
42+
</style>
43+
</head>
44+
45+
<body class="bg-[#1C1C1E] text-gray-200">
46+
<!-- Header/Navigation -->
47+
<header class="w-full bg-[#2C2C2E] shadow-sm fixed top-0 z-50">
48+
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
49+
<a href="#" class="text-2xl font-['Pacifico'] text-white">HireZen</a>
50+
<div class="flex items-center space-x-6">
51+
<a href="#features"
52+
class="hidden md:block text-gray-400 hover:text-white transition-colors">Features</a>
53+
<a href="#how-it-works" class="hidden md:block text-gray-400 hover:text-white transition-colors">How It
54+
Works</a>
55+
<a href="#privacy" class="hidden md:block text-gray-400 hover:text-white transition-colors">Privacy</a>
56+
<!-- <a href="https://github.com/programmerraja/hirezen"
57+
class="hidden md:flex items-center text-white hover:text-primary transition-colors">
58+
<div class="w-5 h-5 flex items-center justify-center mr-1">
59+
<i class="ri-github-line"></i>
60+
</div>
61+
<span>GitHub</span>
62+
</a> -->
63+
64+
<a href="./hirezen.zip" download="hirezen.zip"
65+
class="whitespace-nowrap bg-primary text-white px-5 py-2 !rounded-button hover:bg-primary/90 transition-colors">Download
66+
Extension</a>
67+
</div>
68+
</div>
69+
</header>
70+
<!-- Hero Section -->
71+
<section class="hero-section pt-32 pb-20 min-h-[90vh] flex items-center">
72+
<div class="container mx-auto px-4 w-full">
73+
<div class="flex flex-col md:flex-row items-center">
74+
<div class="w-full md:w-1/2 pr-0 md:pr-8 mb-10 md:mb-0 bg-white/80 backdrop-blur-sm p-8 rounded-2xl">
75+
<h1
76+
class="text-4xl md:text-6xl font-bold leading-tight mb-6 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
77+
Turn Any Resume Into Tailored Interview Questions Instantly</h1>
78+
<p class="text-lg text-gray-700 mb-8 font-medium">Save time and focus on real conversations. HireZen
79+
helps you generate interview questions from resumes using AI, all inside a lightweight Chrome
80+
extension.</p>
81+
<div class="flex flex-col sm:flex-row gap-4">
82+
<a href="./hirezen.zip" download="hirezen.zip"
83+
class="whitespace-nowrap bg-primary text-white px-8 py-4 !rounded-button hover:bg-primary/90 transition-colors text-center font-semibold">Download
84+
Extension</a>
85+
<a href="https://github.com/programmerraja/hirezen"
86+
class="whitespace-nowrap bg-white/90 backdrop-blur-sm border-2 border-gray-900 text-gray-900 px-8 py-4 !rounded-button hover:bg-gray-50 transition-colors flex items-center justify-center font-semibold">
87+
<div class="w-5 h-5 flex items-center justify-center mr-2">
88+
<i class="ri-github-line"></i>
89+
</div>
90+
<span>View on GitHub</span>
91+
</a>
92+
</div>
93+
</div>
94+
<div class="w-full md:w-1/2">
95+
<!-- Vector illustration is handled by background image -->
96+
</div>
97+
</div>
98+
</div>
99+
</section>
100+
<!-- Features Section -->
101+
<section id="features" class="py-20 bg-[#2C2C2E]">
102+
<div class="container mx-auto px-4">
103+
<div class="text-center mb-16">
104+
<h2 class="text-3xl font-bold mb-4 text-white">Powerful Features for Efficient Interviews</h2>
105+
<p class="text-lg text-gray-300 max-w-2xl mx-auto">Streamline your interview process with these
106+
time-saving tools designed for developers and hiring managers.</p>
107+
</div>
108+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
109+
<!-- Feature 1 -->
110+
<div class="feature-card bg-[#3A3A3C] p-6 rounded-lg shadow-md transition-all duration-300">
111+
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
112+
<div class="w-6 h-6 flex items-center justify-center text-white">
113+
<i class="ri-file-pdf-line"></i>
114+
</div>
115+
</div>
116+
<h3 class="text-xl font-semibold mb-2 text-white">Resume Parsing</h3>
117+
<p class="text-gray-300">Upload PDF resumes and let HireZen automatically extract and analyze the
118+
candidate's experience and skills.</p>
119+
</div>
120+
<!-- Feature 2 -->
121+
<div class="feature-card bg-[#3A3A3C] p-6 rounded-lg shadow-md transition-all duration-300">
122+
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
123+
<div class="w-6 h-6 flex items-center justify-center text-white">
124+
<i class="ri-robot-line"></i>
125+
</div>
126+
</div>
127+
<h3 class="text-xl font-semibold mb-2 text-white">AI-Generated Questions</h3>
128+
<p class="text-gray-300">Get tailored interview questions based on the candidate's specific
129+
experience, skills, and job requirements.</p>
130+
</div>
131+
<!-- Feature 3 -->
132+
<div class="feature-card bg-[#3A3A3C] p-6 rounded-lg shadow-md transition-all duration-300">
133+
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
134+
<div class="w-6 h-6 flex items-center justify-center text-white">
135+
<i class="ri-printer-line"></i>
136+
</div>
137+
</div>
138+
<h3 class="text-xl font-semibold mb-2 text-white">Print Feedback</h3>
139+
<p class="text-gray-300">Generate PDF reports with candidate details and interview feedback for HR
140+
teams and hiring managers.</p>
141+
</div>
142+
<!-- Feature 4 -->
143+
<div class="feature-card bg-[#3A3A3C] p-6 rounded-lg shadow-md transition-all duration-300">
144+
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
145+
<div class="w-6 h-6 flex items-center justify-center text-white">
146+
<i class="ri-settings-line"></i>
147+
</div>
148+
</div>
149+
<h3 class="text-xl font-semibold mb-2 text-white">Custom LLM Provider</h3>
150+
<p class="text-gray-300">Configure your own LLM provider and API key for maximum flexibility and
151+
control over the AI capabilities.</p>
152+
</div>
153+
<!-- Feature 5 -->
154+
<div class="feature-card bg-[#3A3A3C] p-6 rounded-lg shadow-md transition-all duration-300">
155+
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
156+
<div class="w-6 h-6 flex items-center justify-center text-white">
157+
<i class="ri-google-line"></i>
158+
</div>
159+
</div>
160+
<h3 class="text-xl font-semibold mb-2 text-white">Google Meet Integration</h3>
161+
<p class="text-gray-300">Seamlessly integrate with Google Meet for a smooth interview experience
162+
without switching between applications.</p>
163+
</div>
164+
<!-- Feature 6 -->
165+
<div class="feature-card bg-[#3A3A3C] p-6 rounded-lg shadow-md transition-all duration-300">
166+
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
167+
<div class="w-6 h-6 flex items-center justify-center text-white">
168+
<i class="ri-lock-line"></i>
169+
</div>
170+
</div>
171+
<h3 class="text-xl font-semibold mb-2 text-white">100% Local Storage</h3>
172+
<p class="text-gray-300">All data stays on your device with no backend or tracking, ensuring
173+
complete privacy and security.</p>
174+
</div>
175+
</div>
176+
</div>
177+
</section>
178+
<!-- How It Works Section -->
179+
180+
181+
<section id="how-it-works" class="py-20">
182+
<div class="container mx-auto px-4">
183+
<div class="text-center mb-16">
184+
<h2 class="text-3xl font-bold mb-4 text-white">How HireZen Works</h2>
185+
<p class="text-lg text-gray-300 max-w-2xl mx-auto">
186+
Three simple steps to transform your interview process and save
187+
valuable time.
188+
</p>
189+
</div>
190+
<div class="flex flex-col md:flex-row justify-between items-start gap-8">
191+
<!-- Step 1 -->
192+
<div class="flex-1 text-center bg-[#3A3A3C] p-8 rounded-lg shadow-md">
193+
<div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-6">
194+
<div class="w-8 h-8 flex items-center justify-center text-white text-xl font-bold">
195+
1
196+
</div>
197+
</div>
198+
<h3 class="text-xl font-semibold mb-3 text-white">Upload Resume</h3>
199+
<p class="text-gray-300">
200+
Upload the candidate's resume in PDF format through the Chrome
201+
extension. HireZen will automatically parse and analyze the
202+
content.
203+
</p>
204+
</div>
205+
<!-- Step Connector -->
206+
<div class="hidden md:block w-24 self-center">
207+
<div class="border-t-2 border-dashed border-gray-600 mt-8"></div>
208+
</div>
209+
<!-- Step 2 -->
210+
<div class="flex-1 text-center bg-[#3A3A3C] p-8 rounded-lg shadow-md">
211+
<div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-6">
212+
<div class="w-8 h-8 flex items-center justify-center text-white text-xl font-bold">
213+
2
214+
</div>
215+
</div>
216+
<h3 class="text-xl font-semibold mb-3 text-white">
217+
Generate Questions
218+
</h3>
219+
<p class="text-gray-300">
220+
With a single click, generate tailored interview questions based
221+
on the candidate's experience, skills, and your job requirements.
222+
</p>
223+
</div>
224+
<!-- Step Connector -->
225+
<div class="hidden md:block w-24 self-center">
226+
<div class="border-t-2 border-dashed border-gray-600 mt-8"></div>
227+
</div>
228+
<!-- Step 3 -->
229+
<div class="flex-1 text-center bg-[#3A3A3C] p-8 rounded-lg shadow-md">
230+
<div class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-6">
231+
<div class="w-8 h-8 flex items-center justify-center text-white text-xl font-bold">
232+
3
233+
</div>
234+
</div>
235+
<h3 class="text-xl font-semibold mb-3 text-white">
236+
Conduct & Document
237+
</h3>
238+
<p class="text-gray-300">
239+
Use the generated questions during your interview, add notes, and
240+
export a professional PDF report with your feedback.
241+
</p>
242+
</div>
243+
</div>
244+
</div>
245+
</section>
246+
<!-- Demo Section -->
247+
<section class="py-20 bg-[#2C2C2E]">
248+
<div class="container mx-auto px-4">
249+
<div class="text-center mb-16">
250+
<h2 class="text-3xl font-bold mb-4">See HireZen in Action</h2>
251+
<p class="text-lg text-white max-w-2xl mx-auto">A lightweight Chrome extension that transforms how
252+
you prepare for and conduct technical interviews.</p>
253+
</div>
254+
<div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
255+
<img src="./assets/preview.png" alt="HireZen Chrome Extension Demo" class="w-full h-auto object-top">
256+
<!-- <div class="p-6">
257+
<h3 class="text-xl font-semibold mb-2">Powerful AI, Simple Interface</h3>
258+
<p class="text-white">HireZen's intuitive design makes it easy to upload resumes, generate
259+
questions, and document feedback—all without leaving your browser.</p>
260+
</div> -->
261+
</div>
262+
</div>
263+
</section>
264+
<!-- Privacy Section -->
265+
<section id="privacy" class="py-20">
266+
<div class="container mx-auto px-4">
267+
<div class="max-w-3xl mx-auto">
268+
<div class="text-center mb-12">
269+
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
270+
<div class="w-8 h-8 flex items-center justify-center text-primary">
271+
<i class="ri-shield-check-line"></i>
272+
</div>
273+
</div>
274+
<h2 class="text-3xl font-bold mb-4">Privacy First Approach</h2>
275+
<p class="text-lg text-gray-600">Your data never leaves your device. We take privacy and security
276+
seriously.</p>
277+
</div>
278+
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
279+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
280+
<div class="flex items-start">
281+
<div class="w-10 h-10 flex items-center justify-center mr-4 text-primary">
282+
<i class="ri-hard-drive-2-line"></i>
283+
</div>
284+
<div>
285+
<h3 class="text-lg font-semibold text-gray-900 mb-2">100% Local Storage</h3>
286+
<p class="text-gray-600">All data is stored locally on your device. We don't have a
287+
backend server or database.</p>
288+
</div>
289+
</div>
290+
<div class="flex items-start">
291+
<div class="w-10 h-10 flex items-center justify-center mr-4 text-primary">
292+
<i class="ri-key-line"></i>
293+
</div>
294+
<div>
295+
<h3 class="text-lg font-semibold text-gray-900 mb-2">Secure API Key Handling</h3>
296+
<p class="text-gray-600">Your API keys are encrypted and stored securely in your
297+
browser's local storage.</p>
298+
</div>
299+
</div>
300+
<div class="flex items-start">
301+
<div class="w-10 h-10 flex items-center justify-center mr-4 text-primary">
302+
<i class="ri-eye-off-line"></i>
303+
</div>
304+
<div>
305+
<h3 class="text-lg font-semibold text-gray-900 mb-2">No Tracking or Analytics</h3>
306+
<p class="text-gray-600">We don't track your usage or collect any analytics about how
307+
you use the extension.</p>
308+
</div>
309+
</div>
310+
<div class="flex items-start">
311+
<div class="w-10 h-10 flex items-center justify-center mr-4 text-primary">
312+
<i class="ri-user-settings-line"></i>
313+
</div>
314+
<div>
315+
<h3 class="text-lg font-semibold text-gray-900 mb-2">Your LLM, Your Control</h3>
316+
<p class="text-gray-600">Use your preferred LLM provider with your own API key for
317+
complete control over data flow.</p>
318+
</div>
319+
</div>
320+
</div>
321+
</div>
322+
</div>
323+
</div>
324+
</section>
325+
<!-- Testimonial Section -->
326+
327+
<!-- CTA Section -->
328+
<section class="py-20 bg-[#2C2C2E]">
329+
<div class="container mx-auto px-4">
330+
<div class="max-w-3xl mx-auto text-center">
331+
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Interview Process?</h2>
332+
<p class="text-lg text-white mb-8">Join developers and hiring managers who are saving time and
333+
conducting better technical interviews with HireZen.</p>
334+
<div class="flex flex-col sm:flex-row justify-center gap-4">
335+
<a href="https://programmerraja.is-a.dev/hirezen/"
336+
class="whitespace-nowrap bg-primary text-white px-8 py-3 !rounded-button hover:bg-primary/90 transition-colors text-center">Try
337+
It Now</a>
338+
<a href="https://github.com/programmerraja/hirezen"
339+
class="whitespace-nowrap bg-white border border-gray-300 text-gray-700 px-8 py-3 !rounded-button hover:bg-gray-50 transition-colors flex items-center justify-center">
340+
<div class="w-5 h-5 flex items-center justify-center mr-2">
341+
<i class="ri-github-line"></i>
342+
</div>
343+
<span>View on GitHub</span>
344+
</a>
345+
</div>
346+
</div>
347+
</div>
348+
</section>
349+
<!-- Footer -->
350+
<footer class="bg-gray-900 text-white py-12">
351+
<div class="container mx-auto px-4">
352+
<div class="flex flex-col md:flex-row justify-between items-center">
353+
<div class="mb-6 md:mb-0">
354+
<a href="#" class="text-2xl font-['Pacifico'] text-white">HireZen</a>
355+
<p class="text-gray-400 mt-2">AI-powered interview questions generator</p>
356+
</div>
357+
<div class="flex flex-col items-center md:items-end">
358+
<div class="flex space-x-4 mb-4">
359+
<a href="https://github.com/programmerraja/hirezen"
360+
class="text-gray-400 hover:text-white transition-colors">
361+
<div class="w-8 h-8 flex items-center justify-center">
362+
<i class="ri-github-fill ri-lg"></i>
363+
</div>
364+
</a>
365+
<a href="https://x.com/Programmerraja/" class="text-gray-400 hover:text-white transition-colors">
366+
<div class="w-8 h-8 flex items-center justify-center">
367+
<i class="ri-twitter-x-fill ri-lg"></i>
368+
</div>
369+
</a>
370+
<a href="https://www.linkedin.com/in/programmerraja/" class="text-gray-400 hover:text-white transition-colors">
371+
<div class="w-8 h-8 flex items-center justify-center">
372+
<i class="ri-linkedin-box-fill ri-lg"></i>
373+
</div>
374+
</a>
375+
</div>
376+
<a href="https://www.buymeacoffee.com/"
377+
class="bg-[#FFDD00] text-[#000000] px-4 py-2 !rounded-button hover:bg-[#FFDD00]/90 transition-colors flex items-center">
378+
<div class="w-5 h-5 flex items-center justify-center mr-2">
379+
<i class="ri-cup-line"></i>
380+
</div>
381+
<span class="whitespace-nowrap">Buy Me a Coffee</span>
382+
</a>
383+
</div>
384+
</div>
385+
<div class="border-t border-gray-800 mt-8 pt-8 text-center md:text-left">
386+
<p class="text-gray-400 text-sm">© 2025 HireZen. All rights reserved. Made with ❤️ by programmerraja.
387+
</p>
388+
</div>
389+
</div>
390+
</footer>
391+
<script id="scrollBehavior">
392+
document.addEventListener('DOMContentLoaded', function () {
393+
const links = document.querySelectorAll('a[href^="#"]');
394+
links.forEach(link => {
395+
link.addEventListener('click', function (e) {
396+
e.preventDefault();
397+
const targetId = this.getAttribute('href').substring(1);
398+
const targetElement = document.getElementById(targetId);
399+
if (targetElement) {
400+
window.scrollTo({
401+
top: targetElement.offsetTop - 80,
402+
behavior: 'smooth'
403+
});
404+
}
405+
});
406+
});
407+
});
408+
</script>
409+
</body>
410+
411+
</html>

‎hirezen/indexw.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>HireZen - AI-Powered Interview Assistant</title>
8+
<meta name="description" content="Generate tailored interview questions, track feedback, and create professional reports with our Chrome extension powered by AI." />
9+
<script type="module" crossorigin src="./assets/index-DauIYK8C.js"></script>
10+
<link rel="stylesheet" crossorigin href="./assets/index-DDleST4l.css">
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.