Hugging Face's logo

Spaces:
Kowshik24
/
linkesite
Running

App Files Community
Kowshik24 commited on
Commit
c537e55
·
verified ·
1 Parent(s): df938ba

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +620 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Linkesite
3
- emoji: 👁
4
- colorFrom: purple
5
  colorTo: blue
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: linkesite
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,620 @@
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>LinkedIn Profile to Website</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #0a66c2;
11
+ --secondary: #004182;
12
+ --light: #f3f6f8;
13
+ --gray: #e6e9ec;
14
+ --dark-gray: #6e6e6e;
15
+ --text: #333333;
16
+ --white: #ffffff;
17
+ --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
18
+ }
19
+
20
+ * {
21
+ margin: 0;
22
+ padding: 0;
23
+ box-sizing: border-box;
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
+ }
26
+
27
+ body {
28
+ background-color: var(--light);
29
+ color: var(--text);
30
+ line-height: 1.6;
31
+ }
32
+
33
+ .container {
34
+ max-width: 1200px;
35
+ margin: 0 auto;
36
+ padding: 20px;
37
+ }
38
+
39
+ header {
40
+ background-color: var(--white);
41
+ box-shadow: var(--shadow);
42
+ padding: 15px 0;
43
+ position: sticky;
44
+ top: 0;
45
+ z-index: 100;
46
+ }
47
+
48
+ .header-content {
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ }
53
+
54
+ .logo {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 10px;
58
+ font-weight: 600;
59
+ color: var(--primary);
60
+ }
61
+
62
+ .logo i {
63
+ font-size: 28px;
64
+ }
65
+
66
+ .converter-section {
67
+ background-color: var(--white);
68
+ border-radius: 8px;
69
+ padding: 40px;
70
+ margin: 40px 0;
71
+ box-shadow: var(--shadow);
72
+ text-align: center;
73
+ }
74
+
75
+ h1 {
76
+ margin-bottom: 20px;
77
+ color: var(--primary);
78
+ }
79
+
80
+ .description {
81
+ margin-bottom: 30px;
82
+ color: var(--dark-gray);
83
+ max-width: 700px;
84
+ margin-left: auto;
85
+ margin-right: auto;
86
+ }
87
+
88
+ .input-group {
89
+ display: flex;
90
+ flex-direction: column;
91
+ gap: 20px;
92
+ max-width: 500px;
93
+ margin: 0 auto;
94
+ }
95
+
96
+ .input-field {
97
+ position: relative;
98
+ }
99
+
100
+ .input-field i {
101
+ position: absolute;
102
+ left: 15px;
103
+ top: 50%;
104
+ transform: translateY(-50%);
105
+ color: var(--dark-gray);
106
+ }
107
+
108
+ input {
109
+ width: 100%;
110
+ padding: 12px 15px 12px 45px;
111
+ border: 1px solid var(--gray);
112
+ border-radius: 4px;
113
+ font-size: 16px;
114
+ transition: all 0.3s;
115
+ }
116
+
117
+ input:focus {
118
+ outline: none;
119
+ border-color: var(--primary);
120
+ box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.2);
121
+ }
122
+
123
+ button {
124
+ background-color: var(--primary);
125
+ color: white;
126
+ border: none;
127
+ padding: 12px 24px;
128
+ border-radius: 4px;
129
+ cursor: pointer;
130
+ font-size: 16px;
131
+ font-weight: 600;
132
+ transition: all 0.3s;
133
+ }
134
+
135
+ button:hover {
136
+ background-color: var(--secondary);
137
+ }
138
+
139
+ .profile-website {
140
+ background-color: var(--white);
141
+ border-radius: 8px;
142
+ margin: 40px 0;
143
+ box-shadow: var(--shadow);
144
+ display: none;
145
+ }
146
+
147
+ .website-header {
148
+ background-color: var(--primary);
149
+ color: white;
150
+ padding: 40px;
151
+ border-radius: 8px 8px 0 0;
152
+ display: flex;
153
+ flex-direction: column;
154
+ align-items: center;
155
+ text-align: center;
156
+ position: relative;
157
+ }
158
+
159
+ .profile-pic {
160
+ width: 150px;
161
+ height: 150px;
162
+ border-radius: 50%;
163
+ object-fit: cover;
164
+ border: 4px solid white;
165
+ margin-bottom: 20px;
166
+ box-shadow: var(--shadow);
167
+ }
168
+
169
+ .personal-info h2 {
170
+ font-size: 28px;
171
+ margin-bottom: 5px;
172
+ }
173
+
174
+ .headline {
175
+ font-size: 18px;
176
+ margin-bottom: 10px;
177
+ opacity: 0.9;
178
+ }
179
+
180
+ .location {
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ gap: 5px;
185
+ font-size: 16px;
186
+ margin-bottom: 20px;
187
+ }
188
+
189
+ .contact-info {
190
+ position: absolute;
191
+ top: 20px;
192
+ right: 20px;
193
+ background-color: rgba(255, 255, 255, 0.9);
194
+ padding: 10px;
195
+ border-radius: 4px;
196
+ color: var(--text);
197
+ }
198
+
199
+ .website-body {
200
+ padding: 40px;
201
+ display: grid;
202
+ grid-template-columns: 1fr 2fr;
203
+ gap: 30px;
204
+ }
205
+
206
+ .sidebar {
207
+ display: flex;
208
+ flex-direction: column;
209
+ gap: 30px;
210
+ }
211
+
212
+ .card {
213
+ background-color: var(--light);
214
+ border-radius: 8px;
215
+ padding: 20px;
216
+ }
217
+
218
+ .card h3 {
219
+ margin-bottom: 15px;
220
+ color: var(--primary);
221
+ display: flex;
222
+ align-items: center;
223
+ gap: 10px;
224
+ }
225
+
226
+ .main-content {
227
+ display: flex;
228
+ flex-direction: column;
229
+ gap: 30px;
230
+ }
231
+
232
+ .about-section p {
233
+ margin-bottom: 15px;
234
+ }
235
+
236
+ .experience-item, .education-item {
237
+ margin-bottom: 20px;
238
+ padding-bottom: 20px;
239
+ border-bottom: 1px solid var(--gray);
240
+ }
241
+
242
+ .experience-item:last-child, .education-item:last-child {
243
+ margin-bottom: 0;
244
+ padding-bottom: 0;
245
+ border-bottom: none;
246
+ }
247
+
248
+ .job-title, .degree {
249
+ font-weight: 600;
250
+ font-size: 18px;
251
+ }
252
+
253
+ .company-name, .school-name {
254
+ color: var(--primary);
255
+ font-weight: 500;
256
+ }
257
+
258
+ .date-range {
259
+ color: var(--dark-gray);
260
+ font-size: 14px;
261
+ margin: 5px 0;
262
+ }
263
+
264
+ .skills-container {
265
+ display: flex;
266
+ flex-wrap: wrap;
267
+ gap: 8px;
268
+ }
269
+
270
+ .skill-tag {
271
+ background-color: var(--gray);
272
+ padding: 5px 10px;
273
+ border-radius: 20px;
274
+ font-size: 14px;
275
+ }
276
+
277
+ .social-links {
278
+ display: flex;
279
+ gap: 15px;
280
+ }
281
+
282
+ .social-links a {
283
+ color: var(--text);
284
+ font-size: 20px;
285
+ transition: all 0.3s;
286
+ }
287
+
288
+ .social-links a:hover {
289
+ color: var(--primary);
290
+ }
291
+
292
+ .loading {
293
+ display: none;
294
+ text-align: center;
295
+ padding: 20px;
296
+ }
297
+
298
+ .spinner {
299
+ border: 4px solid rgba(0, 0, 0, 0.1);
300
+ border-radius: 50%;
301
+ border-top: 4px solid var(--primary);
302
+ width: 40px;
303
+ height: 40px;
304
+ animation: spin 1s linear infinite;
305
+ margin: 0 auto 15px;
306
+ }
307
+
308
+ @keyframes spin {
309
+ 0% { transform: rotate(0deg); }
310
+ 100% { transform: rotate(360deg); }
311
+ }
312
+
313
+ .error {
314
+ color: #ff4444;
315
+ margin-top: 10px;
316
+ display: none;
317
+ }
318
+
319
+ @media (max-width: 768px) {
320
+ .website-body {
321
+ grid-template-columns: 1fr;
322
+ }
323
+
324
+ .header-content {
325
+ flex-direction: column;
326
+ gap: 15px;
327
+ }
328
+
329
+ .converter-section {
330
+ padding: 20px;
331
+ }
332
+
333
+ .website-header {
334
+ padding: 30px 15px;
335
+ }
336
+
337
+ .contact-info {
338
+ position: static;
339
+ margin-bottom: 20px;
340
+ }
341
+ }
342
+ </style>
343
+ </head>
344
+ <body>
345
+ <header>
346
+ <div class="container header-content">
347
+ <div class="logo">
348
+ <i class="fab fa-linkedin"></i>
349
+ <span>LinkedIn to Website</span>
350
+ </div>
351
+ <div>
352
+ <button id="export-btn" style="display: none;"><i class="fas fa-download"></i> Export Website</button>
353
+ </div>
354
+ </div>
355
+ </header>
356
+
357
+ <main class="container">
358
+ <section class="converter-section">
359
+ <h1>Turn Your LinkedIn Profile into a Personal Website</h1>
360
+ <p class="description">
361
+ Transform your LinkedIn profile into a beautiful, standalone website. Enter your LinkedIn handle and email below to generate your personal portfolio website instantly.
362
+ </p>
363
+
364
+ <div class="input-group">
365
+ <div class="input-field">
366
+ <i class="fab fa-linkedin"></i>
367
+ <input type="text" id="linkedin-handle" placeholder="LinkedIn handle (e.g. johndoe)">
368
+ </div>
369
+
370
+ <div class="input-field">
371
+ <i class="fas fa-envelope"></i>
372
+ <input type="email" id="user-email" placeholder="Your email address">
373
+ </div>
374
+
375
+ <button id="generate-btn"><i class="fas fa-magic"></i> Generate Website</button>
376
+ <p class="error" id="error-message">Please enter valid LinkedIn handle and email address</p>
377
+ </div>
378
+
379
+ <div class="loading" id="loading">
380
+ <div class="spinner"></div>
381
+ <p>Generating your website from LinkedIn profile...</p>
382
+ </div>
383
+ </section>
384
+
385
+ <section class="profile-website" id="generated-website">
386
+ <div class="website-header">
387
+ <div class="contact-info">
388
+ <p id="contact-email"></p>
389
+ </div>
390
+ <img src="https://via.placeholder.com/150" alt="Profile picture" class="profile-pic" id="profile-pic">
391
+ <div class="personal-info">
392
+ <h2 id="full-name">John Doe</h2>
393
+ <p class="headline" id="headline">Senior Software Engineer | Web Developer | React Specialist</p>
394
+ <p class="location"><i class="fas fa-map-marker-alt"></i> <span id="location">San Francisco, California</span></p>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="website-body">
399
+ <aside class="sidebar">
400
+ <div class="card">
401
+ <h3><i class="fas fa-info-circle"></i> About</h3>
402
+ <div id="about-content">
403
+ <p>Experienced software engineer with 8+ years of experience in web development. Specializing in React, Node.js, and modern JavaScript frameworks. Passionate about creating efficient, scalable applications with clean code.</p>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="card">
408
+ <h3><i class="fas fa-bullseye"></i> Skills</h3>
409
+ <div class="skills-container" id="skills">
410
+ <span class="skill-tag">JavaScript</span>
411
+ <span class="skill-tag">React</span>
412
+ <span class="skill-tag">Node.js</span>
413
+ <span class="skill-tag">HTML/CSS</span>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="card">
418
+ <h3><i class="fas fa-graduation-cap"></i> Education</h3>
419
+ <div id="education-list">
420
+ <div class="education-item">
421
+ <p class="degree">Master of Computer Science</p>
422
+ <p class="school-name">Stanford University</p>
423
+ <p class="date-range">2010 - 2012</p>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="card">
429
+ <h3><i class="fas fa-link"></i> Connect</h3>
430
+ <div class="social-links">
431
+ <a href="#" id="linkedin-link"><i class="fab fa-linkedin"></i></a>
432
+ <a href="#"><i class="fab fa-github"></i></a>
433
+ <a href="#"><i class="fab fa-twitter"></i></a>
434
+ </div>
435
+ </div>
436
+ </aside>
437
+
438
+ <div class="main-content">
439
+ <div class="card">
440
+ <h3><i class="fas fa-briefcase"></i> Experience</h3>
441
+ <div id="experience-list">
442
+ <div class="experience-item">
443
+ <p class="job-title">Senior Software Engineer</p>
444
+ <p class="company-name">Google</p>
445
+ <p class="date-range">Jan 2018 - Present</p>
446
+ <p>Led frontend development for Google Drive web application. Implemented new features using React and Redux.</p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="card">
452
+ <h3><i class="fas fa-medal"></i> Projects</h3>
453
+ <div id="projects-list">
454
+ <div class="experience-item">
455
+ <p class="job-title">E-commerce Platform</p>
456
+ <p class="date-range">2020</p>
457
+ <p>Built a full-stack e-commerce platform with React, Node.js, and MongoDB. Implemented payment processing and inventory management.</p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="card">
463
+ <h3><i class="fas fa-certificate"></i> Certifications</h3>
464
+ <div id="certifications-list">
465
+ <div class="experience-item">
466
+ <p class="job-title">React - The Complete Guide</p>
467
+ <p class="company-name">Udemy</p>
468
+ <p class="date-range">Issued 2019</p>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </section>
475
+ </main>
476
+
477
+ <script>
478
+ document.addEventListener('DOMContentLoaded', function() {
479
+ const generateBtn = document.getElementById('generate-btn');
480
+ const linkedinHandle = document.getElementById('linkedin-handle');
481
+ const userEmail = document.getElementById('user-email');
482
+ const errorMessage = document.getElementById('error-message');
483
+ const loading = document.getElementById('loading');
484
+ const generatedWebsite = document.getElementById('generated-website');
485
+ const exportBtn = document.getElementById('export-btn');
486
+
487
+ generateBtn.addEventListener('click', function() {
488
+ // Validate inputs
489
+ if (!linkedinHandle.value.trim() || !userEmail.value.trim() || !userEmail.value.includes('@')) {
490
+ errorMessage.style.display = 'block';
491
+ return;
492
+ }
493
+
494
+ errorMessage.style.display = 'none';
495
+ loading.style.display = 'block';
496
+ generatedWebsite.style.display = 'none';
497
+
498
+ // Simulate API call with setTimeout
499
+ setTimeout(function() {
500
+ generateProfileWebsite(linkedinHandle.value.trim(), userEmail.value.trim());
501
+ loading.style.display = 'none';
502
+ generatedWebsite.style.display = 'block';
503
+ exportBtn.style.display = 'block';
504
+ }, 2000);
505
+ });
506
+
507
+ exportBtn.addEventListener('click', function() {
508
+ // Export the generated website as HTML file
509
+ const htmlContent = document.documentElement.outerHTML;
510
+ const blob = new Blob([htmlContent], {type: 'text/html'});
511
+ const url = URL.createObjectURL(blob);
512
+
513
+ const a = document.createElement('a');
514
+ a.href = url;
515
+ a.download = 'my-profile-website.html';
516
+ document.body.appendChild(a);
517
+ a.click();
518
+ document.body.removeChild(a);
519
+ URL.revokeObjectURL(url);
520
+ });
521
+
522
+ function generateProfileWebsite(handle, email) {
523
+ // In a real app, you would fetch actual data from LinkedIn API
524
+ // For this demo, we're using mock data based on the input
525
+
526
+ // Set the contact email
527
+ document.getElementById('contact-email').textContent = email;
528
+
529
+ // Set LinkedIn profile link
530
+ document.getElementById('linkedin-link').href = `https://linkedin.com/in/${handle}`;
531
+
532
+ // Generate mock profile data
533
+ const names = handle.split(/[-_]/).map(name =>
534
+ name.charAt(0).toUpperCase() + name.slice(1)
535
+ );
536
+
537
+ const fullName = names.length >= 2
538
+ ? `${names[0]} ${names[1]}`
539
+ : `${handle.charAt(0).toUpperCase() + handle.slice(1)} User`;
540
+
541
+ const mockCompanies = ['Google', 'Microsoft', 'Amazon', 'Facebook', 'Apple'];
542
+ const mockTitles = ['Senior Developer', 'Tech Lead', 'Software Engineer', 'Product Manager'];
543
+ const mockSkills = ['JavaScript', 'React', 'Node.js', 'Python', 'HTML', 'CSS', 'TypeScript'];
544
+ const mockLocations = ['San Francisco, CA', 'New York, NY', 'Seattle, WA', 'Austin, TX'];
545
+ const mockUniversities = ['Stanford', 'MIT', 'Harvard', 'Berkeley'];
546
+
547
+ // Set profile data
548
+ document.getElementById('full-name').textContent = fullName;
549
+ document.getElementById('headline').textContent = `${mockTitles[Math.floor(Math.random() * mockTitles.length)]} | ${mockSkills[Math.floor(Math.random() * mockSkills.length)]} Expert`;
550
+ document.getElementById('location').textContent = mockLocations[Math.floor(Math.random() * mockLocations.length)];
551
+ document.getElementById('profile-pic').src = `https://i.pravatar.cc/150?u=${handle}`;
552
+ document.getElementById('about-content').innerHTML = `
553
+ <p>${fullName} is a ${Math.floor(Math.random() * 10) + 3}-year experienced professional in ${mockSkills[Math.floor(Math.random() * mockSkills.length)]} development.</p>
554
+ <p>Specializing in building scalable web applications and leading development teams to deliver high-quality software solutions.</p>
555
+ `;
556
+
557
+ // Generate random skills
558
+ const skillsContainer = document.getElementById('skills');
559
+ skillsContainer.innerHTML = '';
560
+ const numSkills = Math.floor(Math.random() * 5) + 3;
561
+ const selectedSkills = new Set();
562
+
563
+ while (selectedSkills.size < numSkills) {
564
+ const skill = mockSkills[Math.floor(Math.random() * mockSkills.length)];
565
+ selectedSkills.add(skill);
566
+ }
567
+
568
+ selectedSkills.forEach(skill => {
569
+ const skillTag = document.createElement('span');
570
+ skillTag.className = 'skill-tag';
571
+ skillTag.textContent = skill;
572
+ skillsContainer.appendChild(skillTag);
573
+ });
574
+
575
+ // Generate experience
576
+ const experienceList = document.getElementById('experience-list');
577
+ experienceList.innerHTML = '';
578
+
579
+ const numJobs = Math.floor(Math.random() * 3) + 1;
580
+ for (let i = 0; i < numJobs; i++) {
581
+ const company = mockCompanies[Math.floor(Math.random() * mockCompanies.length)];
582
+ const title = mockTitles[Math.floor(Math.random() * mockTitles.length)];
583
+ const startYear = 2020 - Math.floor(Math.random() * 5);
584
+ const endYear = startYear + Math.floor(Math.random() * 3) + 1;
585
+
586
+ const experienceItem = document.createElement('div');
587
+ experienceItem.className = 'experience-item';
588
+ experienceItem.innerHTML = `
589
+ <p class="job-title">${title}</p>
590
+ <p class="company-name">${company}</p>
591
+ <p class="date-range">${startYear} - ${i === numJobs - 1 ? 'Present' : endYear}</p>
592
+ <p>Responsible for ${mockSkills[Math.floor(Math.random() * mockSkills.length)]} development and ${['team leadership', 'product architecture', 'code reviews', 'mentoring'][Math.floor(Math.random() * 4)]}.</p>
593
+ `;
594
+ experienceList.appendChild(experienceItem);
595
+ }
596
+
597
+ // Generate education
598
+ const educationList = document.getElementById('education-list');
599
+ educationList.innerHTML = '';
600
+
601
+ const university = mockUniversities[Math.floor(Math.random() * mockUniversities.length)];
602
+ const degree = ['Bachelor', 'Master'][Math.floor(Math.random() * 2)];
603
+ const gradYear = 2010 + Math.floor(Math.random() * 5);
604
+
605
+ const educationItem = document.createElement('div');
606
+ educationItem.className = 'education-item';
607
+ educationItem.innerHTML = `
608
+ <p class="degree">${degree} of Science in Computer Science</p>
609
+ <p class="school-name">${university} University</p>
610
+ <p class="date-range">${gradYear - 4} - ${gradYear}</p>
611
+ `;
612
+ educationList.appendChild(educationItem);
613
+
614
+ // Generate projects
615
+ // (Similar structure can be used for other sections)
616
+ }
617
+ });
618
+ </script>
619
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
620
+ </html>