Hugging Face's logo

Spaces:
Mishak
/
resume-builder
Running

App Files Community
Mishak commited on
Commit
677a906
·
verified ·
1 Parent(s): afd5196

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +546 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Resume Builder
3
- emoji: 🌍
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: resume-builder
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,546 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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.0">
6
+ <title>ResumeGenius - AI-Powered Resume & Cover Letter Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
19
+ }
20
+
21
+ .resume-paper {
22
+ box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
23
+ background: white;
24
+ min-height: 11in;
25
+ }
26
+
27
+ .template-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
30
+ }
31
+
32
+ .section-highlight {
33
+ border-left: 4px solid #4f46e5;
34
+ }
35
+
36
+ .drag-handle {
37
+ cursor: move;
38
+ }
39
+
40
+ .ai-suggestion {
41
+ background-color: #f0f9ff;
42
+ border-left: 3px solid #38bdf8;
43
+ }
44
+
45
+ /* Custom scrollbar */
46
+ ::-webkit-scrollbar {
47
+ width: 8px;
48
+ }
49
+ ::-webkit-scrollbar-track {
50
+ background: #f1f1f1;
51
+ }
52
+ ::-webkit-scrollbar-thumb {
53
+ background: #c7d2fe;
54
+ border-radius: 4px;
55
+ }
56
+ ::-webkit-scrollbar-thumb:hover {
57
+ background: #a5b4fc;
58
+ }
59
+
60
+ /* Animation for AI loading */
61
+ @keyframes pulse {
62
+ 0%, 100% {
63
+ opacity: 1;
64
+ }
65
+ 50% {
66
+ opacity: 0.5;
67
+ }
68
+ }
69
+ .animate-pulse {
70
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
71
+ }
72
+ </style>
73
+ </head>
74
+ <body class="min-h-screen">
75
+ <!-- Navigation -->
76
+ <nav class="bg-white shadow-sm">
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
78
+ <div class="flex justify-between h-16">
79
+ <div class="flex items-center">
80
+ <div class="flex-shrink-0 flex items-center">
81
+ <i class="fas fa-brain text-indigo-600 text-2xl mr-2"></i>
82
+ <span class="text-xl font-bold text-gray-900">ResumeGenius</span>
83
+ </div>
84
+ </div>
85
+ <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
86
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Templates</a>
87
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Pricing</a>
88
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Resources</a>
89
+ <button id="loginBtn" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
90
+ Sign In
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </nav>
96
+
97
+ <!-- Auth Modal -->
98
+ <div id="authModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
99
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
100
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
101
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
102
+ </div>
103
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
104
+ <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
105
+ <div>
106
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100">
107
+ <i class="fas fa-user text-indigo-600"></i>
108
+ </div>
109
+ <div class="mt-3 text-center sm:mt-5">
110
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Sign in to ResumeGenius</h3>
111
+ <div class="mt-2">
112
+ <p class="text-sm text-gray-500">Access your saved resumes and cover letters</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <div class="mt-5 sm:mt-6 space-y-3">
117
+ <button type="button" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
118
+ <i class="fab fa-google text-red-500 mr-2"></i> Continue with Google
119
+ </button>
120
+ <button type="button" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
121
+ <i class="fab fa-linkedin text-blue-600 mr-2"></i> Continue with LinkedIn
122
+ </button>
123
+ <div class="relative">
124
+ <div class="absolute inset-0 flex items-center">
125
+ <div class="w-full border-t border-gray-300"></div>
126
+ </div>
127
+ <div class="relative flex justify-center text-sm">
128
+ <span class="px-2 bg-white text-gray-500">Or continue with email</span>
129
+ </div>
130
+ </div>
131
+ <form class="space-y-4">
132
+ <div>
133
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
134
+ <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
135
+ </div>
136
+ <div>
137
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
138
+ <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
139
+ </div>
140
+ <div class="flex items-center justify-between">
141
+ <div class="flex items-center">
142
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
143
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
144
+ </div>
145
+ <div class="text-sm">
146
+ <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Forgot password?</a>
147
+ </div>
148
+ </div>
149
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Sign in</button>
150
+ </form>
151
+ <p class="text-center text-sm text-gray-600">
152
+ Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign up</a>
153
+ </p>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Main Content -->
160
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
161
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
162
+ <!-- Left Sidebar -->
163
+ <div class="lg:col-span-4 xl:col-span-3">
164
+ <div class="bg-white rounded-lg shadow p-6 sticky top-8">
165
+ <div class="flex items-center justify-between mb-6">
166
+ <h2 class="text-lg font-medium text-gray-900">Resume Builder</h2>
167
+ <button id="newResumeBtn" class="text-sm text-indigo-600 hover:text-indigo-800">+ New</button>
168
+ </div>
169
+
170
+ <div class="space-y-4">
171
+ <!-- Personal Details -->
172
+ <div class="section-highlight bg-gray-50 p-4 rounded-lg">
173
+ <div class="flex justify-between items-center">
174
+ <h3 class="text-sm font-medium text-gray-900 flex items-center">
175
+ <i class="fas fa-user mr-2 text-indigo-600"></i> Personal Details
176
+ </h3>
177
+ <button class="text-gray-400 hover:text-gray-500">
178
+ <i class="fas fa-chevron-down"></i>
179
+ </button>
180
+ </div>
181
+ <div class="mt-3 space-y-3">
182
+ <div>
183
+ <label class="block text-xs font-medium text-gray-500">Full Name</label>
184
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm">
185
+ </div>
186
+ <div>
187
+ <label class="block text-xs font-medium text-gray-500">Email</label>
188
+ <input type="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm">
189
+ </div>
190
+ <div>
191
+ <label class="block text-xs font-medium text-gray-500">Phone</label>
192
+ <input type="tel" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm">
193
+ </div>
194
+ <div>
195
+ <label class="block text-xs font-medium text-gray-500">LinkedIn</label>
196
+ <input type="url" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm">
197
+ </div>
198
+ <div>
199
+ <label class="block text-xs font-medium text-gray-500">Portfolio</label>
200
+ <input type="url" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm">
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Professional Summary -->
206
+ <div class="section-highlight bg-gray-50 p-4 rounded-lg">
207
+ <div class="flex justify-between items-center">
208
+ <h3 class="text-sm font-medium text-gray-900 flex items-center">
209
+ <i class="fas fa-align-left mr-2 text-indigo-600"></i> Professional Summary
210
+ </h3>
211
+ <button class="text-gray-400 hover:text-gray-500">
212
+ <i class="fas fa-chevron-down"></i>
213
+ </button>
214
+ </div>
215
+ <div class="mt-3">
216
+ <textarea rows="4" class="block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Write a brief summary of your professional background..."></textarea>
217
+ <button class="mt-2 text-xs text-indigo-600 hover:text-indigo-800 flex items-center">
218
+ <i class="fas fa-magic mr-1"></i> Generate with AI
219
+ </button>
220
+ <div class="ai-suggestion mt-2 p-2 rounded text-xs hidden">
221
+ <p>Results-driven software engineer with 5+ years of experience in full-stack development. Specialized in JavaScript frameworks with a proven track record of delivering scalable web applications. Passionate about clean code and agile methodologies.</p>
222
+ <div class="flex justify-end mt-1">
223
+ <button class="text-xs text-indigo-600 hover:text-indigo-800 mr-2">Use This</button>
224
+ <button class="text-xs text-gray-500 hover:text-gray-700">Regenerate</button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Work Experience -->
231
+ <div class="section-highlight bg-gray-50 p-4 rounded-lg">
232
+ <div class="flex justify-between items-center">
233
+ <h3 class="text-sm font-medium text-gray-900 flex items-center">
234
+ <i class="fas fa-briefcase mr-2 text-indigo-600"></i> Work Experience
235
+ </h3>
236
+ <div>
237
+ <button class="text-gray-400 hover:text-gray-500 mr-2">
238
+ <i class="fas fa-chevron-down"></i>
239
+ </button>
240
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm">
241
+ + Add
242
+ </button>
243
+ </div>
244
+ </div>
245
+ <div class="mt-3 space-y-4">
246
+ <div class="border border-gray-200 rounded p-3">
247
+ <div class="flex justify-between">
248
+ <div>
249
+ <input type="text" class="font-medium text-sm border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full" placeholder="Job Title" value="Senior Software Engineer">
250
+ <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full mt-1" placeholder="Company" value="TechCorp Inc.">
251
+ </div>
252
+ <button class="text-gray-400 hover:text-gray-600">
253
+ <i class="fas fa-times"></i>
254
+ </button>
255
+ </div>
256
+ <div class="flex mt-2">
257
+ <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-1/2 mr-2" placeholder="Start Date" value="Jan 2020">
258
+ <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-1/2" placeholder="End Date" value="Present">
259
+ </div>
260
+ <div class="mt-2">
261
+ <div class="flex items-start">
262
+ <span class="text-xs mt-1 mr-2">•</span>
263
+ <textarea rows="1" class="flex-1 text-xs border-b border-gray-200 focus:border-indigo-500 focus:outline-none" placeholder="Achievement or responsibility">Led a team of 5 developers to deliver a customer portal that increased user engagement by 40%</textarea>
264
+ </div>
265
+ <div class="flex items-start mt-1">
266
+ <span class="text-xs mt-1 mr-2">•</span>
267
+ <textarea rows="1" class="flex-1 text-xs border-b border-gray-200 focus:border-indigo-500 focus:outline-none" placeholder="Achievement or responsibility">Optimized application performance, reducing load times by 60% through code refactoring</textarea>
268
+ </div>
269
+ <button class="mt-1 text-xs text-indigo-600 hover:text-indigo-800 flex items-center">
270
+ <i class="fas fa-plus mr-1"></i> Add Bullet Point
271
+ </button>
272
+ <button class="mt-1 text-xs text-indigo-600 hover:text-indigo-800 flex items-center">
273
+ <i class="fas fa-magic mr-1"></i> Enhance with AI
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Education -->
281
+ <div class="section-highlight bg-gray-50 p-4 rounded-lg">
282
+ <div class="flex justify-between items-center">
283
+ <h3 class="text-sm font-medium text-gray-900 flex items-center">
284
+ <i class="fas fa-graduation-cap mr-2 text-indigo-600"></i> Education
285
+ </h3>
286
+ <div>
287
+ <button class="text-gray-400 hover:text-gray-500 mr-2">
288
+ <i class="fas fa-chevron-down"></i>
289
+ </button>
290
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm">
291
+ + Add
292
+ </button>
293
+ </div>
294
+ </div>
295
+ <div class="mt-3 space-y-3">
296
+ <div class="flex justify-between">
297
+ <div>
298
+ <input type="text" class="font-medium text-sm border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full" placeholder="Degree" value="Master of Computer Science">
299
+ <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full mt-1" placeholder="Institution" value="Stanford University">
300
+ </div>
301
+ <button class="text-gray-400 hover:text-gray-600">
302
+ <i class="fas fa-times"></i>
303
+ </button>
304
+ </div>
305
+ <div class="flex">
306
+ <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full" placeholder="Year" value="2018">
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Skills -->
312
+ <div class="section-highlight bg-gray-50 p-4 rounded-lg">
313
+ <div class="flex justify-between items-center">
314
+ <h3 class="text-sm font-medium text-gray-900 flex items-center">
315
+ <i class="fas fa-tools mr-2 text-indigo-600"></i> Skills
316
+ </h3>
317
+ <div>
318
+ <button class="text-gray-400 hover:text-gray-500 mr-2">
319
+ <i class="fas fa-chevron-down"></i>
320
+ </button>
321
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm">
322
+ + Add
323
+ </button>
324
+ </div>
325
+ </div>
326
+ <div class="mt-3">
327
+ <div class="flex flex-wrap gap-2">
328
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
329
+ JavaScript
330
+ <button class="ml-1 text-indigo-600 hover:text-indigo-900">
331
+ <i class="fas fa-times"></i>
332
+ </button>
333
+ </span>
334
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
335
+ React
336
+ <button class="ml-1 text-indigo-600 hover:text-indigo-900">
337
+ <i class="fas fa-times"></i>
338
+ </button>
339
+ </span>
340
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
341
+ Node.js
342
+ <button class="ml-1 text-indigo-600 hover:text-indigo-900">
343
+ <i class="fas fa-times"></i>
344
+ </button>
345
+ </span>
346
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
347
+ AWS
348
+ <button class="ml-1 text-indigo-600 hover:text-indigo-900">
349
+ <i class="fas fa-times"></i>
350
+ </button>
351
+ </span>
352
+ </div>
353
+ <div class="mt-2 relative">
354
+ <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Add skill">
355
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3">
356
+ <button class="text-indigo-600 hover:text-indigo-800">
357
+ <i class="fas fa-magic"></i>
358
+ </button>
359
+ </div>
360
+ </div>
361
+ <div class="ai-suggestion mt-2 p-2 rounded text-xs hidden">
362
+ <p class="font-medium">Suggested skills for Software Engineer:</p>
363
+ <div class="flex flex-wrap gap-1 mt-1">
364
+ <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TypeScript</span>
365
+ <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">GraphQL</span>
366
+ <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Docker</span>
367
+ <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">CI/CD</span>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- More Sections (Collapsed by default) -->
374
+ <div class="border-t border-gray-200 pt-4">
375
+ <button class="w-full flex justify-between items-center text-sm font-medium text-gray-700">
376
+ <span>More Sections</span>
377
+ <i class="fas fa-chevron-down"></i>
378
+ </button>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Cover Letter Generator -->
384
+ <div class="bg-white rounded-lg shadow p-6 mt-6">
385
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Cover Letter Generator</h2>
386
+ <div class="space-y-4">
387
+ <div>
388
+ <label class="block text-sm font-medium text-gray-700 mb-1">Job Title</label>
389
+ <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="e.g. Senior Software Engineer">
390
+ </div>
391
+ <div>
392
+ <label class="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
393
+ <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="e.g. Google">
394
+ </div>
395
+ <div>
396
+ <label class="block text-sm font-medium text-gray-700 mb-1">Job Description</label>
397
+ <textarea rows="4" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Paste the job description here..."></textarea>
398
+ </div>
399
+ <div>
400
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tone</label>
401
+ <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
402
+ <option>Formal</option>
403
+ <option>Persuasive</option>
404
+ <option>Casual</option>
405
+ <option>Technical</option>
406
+ </select>
407
+ </div>
408
+ <button class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
409
+ Generate Cover Letter
410
+ </button>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Main Content Area -->
416
+ <div class="lg:col-span-8 xl:col-span-6 mt-8 lg:mt-0">
417
+ <!-- Template Selection -->
418
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
419
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Select a Template</h2>
420
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
421
+ <div class="template-card cursor-pointer border-2 border-indigo-500 rounded-lg overflow-hidden transition-all duration-200">
422
+ <div class="h-32 bg-gradient-to-r from-indigo-100 to-purple-100 flex items-center justify-center">
423
+ <div class="text-center">
424
+ <i class="fas fa-file-alt text-indigo-500 text-3xl"></i>
425
+ <p class="text-xs font-medium mt-1">Minimalist</p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200">
430
+ <div class="h-32 bg-gradient-to-r from-blue-50 to-cyan-50 flex items-center justify-center">
431
+ <div class="text-center">
432
+ <i class="fas fa-briefcase text-blue-500 text-3xl"></i>
433
+ <p class="text-xs font-medium mt-1">Corporate</p>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200">
438
+ <div class="h-32 bg-gradient-to-r from-purple-50 to-pink-50 flex items-center justify-center">
439
+ <div class="text-center">
440
+ <i class="fas fa-palette text-purple-500 text-3xl"></i>
441
+ <p class="text-xs font-medium mt-1">Creative</p>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200">
446
+ <div class="h-32 bg-gradient-to-r from-gray-50 to-gray-100 flex items-center justify-center">
447
+ <div class="text-center">
448
+ <i class="fas fa-desktop text-gray-500 text-3xl"></i>
449
+ <p class="text-xs font-medium mt-1">Modern</p>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200">
454
+ <div class="h-32 bg-gradient-to-r from-green-50 to-teal-50 flex items-center justify-center">
455
+ <div class="text-center">
456
+ <i class="fas fa-leaf text-green-500 text-3xl"></i>
457
+ <p class="text-xs font-medium mt-1">Clean</p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200">
462
+ <div class="h-32 bg-gradient-to-r from-yellow-50 to-orange-50 flex items-center justify-center">
463
+ <div class="text-center">
464
+ <i class="fas fa-fire text-yellow-500 text-3xl"></i>
465
+ <p class="text-xs font-medium mt-1">Bold</p>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Customization Options -->
473
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
474
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Customize Design</h2>
475
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
476
+ <div>
477
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label>
478
+ <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
479
+ <option>Inter</option>
480
+ <option>Roboto</option>
481
+ <option>Open Sans</option>
482
+ <option>Lato</option>
483
+ <option>Montserrat</option>
484
+ </select>
485
+ </div>
486
+ <div>
487
+ <label class="block text-sm font-medium text-gray-700 mb-1">Primary Color</label>
488
+ <div class="flex items-center">
489
+ <div class="w-8 h-8 rounded-full bg-indigo-600 mr-2"></div>
490
+ <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
491
+ <option>Indigo</option>
492
+ <option>Blue</option>
493
+ <option>Purple</option>
494
+ <option>Teal</option>
495
+ <option>Red</option>
496
+ </select>
497
+ </div>
498
+ </div>
499
+ <div>
500
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label>
501
+ <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
502
+ <option>Small</option>
503
+ <option selected>Medium</option>
504
+ <option>Large</option>
505
+ </select>
506
+ </div>
507
+ <div>
508
+ <label class="block text-sm font-medium text-gray-700 mb-1">Spacing</label>
509
+ <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
510
+ <option>Compact</option>
511
+ <option selected>Normal</option>
512
+ <option>Wide</option>
513
+ </select>
514
+ </div>
515
+ </div>
516
+ </div>
517
+
518
+ <!-- Resume Preview -->
519
+ <div class="bg-white rounded-lg shadow overflow-hidden">
520
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
521
+ <h2 class="text-lg font-medium text-gray-900">Live Preview</h2>
522
+ <div class="flex space-x-2">
523
+ <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
524
+ <i class="fas fa-redo mr-1"></i> Reset
525
+ </button>
526
+ <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
527
+ <i class="fas fa-download mr-1"></i> Export
528
+ </button>
529
+ </div>
530
+ </div>
531
+ <div class="p-6">
532
+ <div class="resume-paper p-8 mx-auto" style="width: 8.5in;">
533
+ <!-- Minimalist Template -->
534
+ <div class="mb-8">
535
+ <h1 class="text-3xl font-bold text-indigo-700 mb-1">Alex Johnson</h1>
536
+ <div class="flex flex-wrap text-sm text-gray-600 space-x-4">
537
+ <span><i class="fas fa-envelope mr-1"></i> alex.johnson@example.com</span>
538
+ <span><i class="fas fa-phone mr-1"></i> (123) 456-7890</span>
539
+ <span><i class="fab fa-linkedin mr-1"></i> linkedin.com/in/alexjohnson</span>
540
+ <span><i class="fas fa-globe mr-1"></i> alexjohnson.dev</span>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="mb-6">
545
+ <h2 class="text-xl font-semibold text-indigo-700 border-b border-indigo-
546
+ </html>