-
Notifications
You must be signed in to change notification settings - Fork 41
/
resume-page.html
575 lines (515 loc) · 20.1 KB
/
resume-page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
<html>
<head>
<title>Resume generator</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="css/scroll.css"> -->
<link rel="stylesheet" type="text/css" href="css/column_scroll.css">
<link rel="stylesheet" type="text/css" href="css/thin_scroll.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
<meta name="description" content="Online document editor like interface to create and save Resume">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 no-print" id="left">
<div id="panel">
<div id="notice">
<h4>Free resume builder <br></h4>
<h4>Provided by Tnb sem-4 student </h4>
</div>
<button class="btn btn-block btn-primary" data-toggle="modal" data-target="#usageModal">VIEW INSTRUCTIONS</button>
<button class="btn btn-block btn-success" onclick="window.print()">PRINT AS PDF</button>
<hr>
<h3 class="text-center">Template settings</h3>
<button id="customTemplateBtn" class="btn btn-block btn-default" onclick="template('custom');">Use custom template</button>
<h5>
Minor
<div class="toggle-button">
<div class="toggle-option" data-toggle="minor" id="minorShow">Show</div>
<div class="toggle-option selected" data-toggle="minor" id="minorHide">Hide</div>
</div>
</h5>
<h5>
Contact lines
<div class="toggle-button">
<div class="toggle-option" data-toggle="contact" id="contact3">3</div>
<div class="toggle-option selected" data-toggle="contact" id="contact4">4</div>
<div class="toggle-option" data-toggle="contact" id="contact5">5</div>
</div>
</h5>
<h5>
Horizontal margin
<div class="toggle-button">
<div class="toggle-option" data-toggle="margin" id="margin1">1</div>
<div class="toggle-option" data-toggle="margin" id="margin2">2</div>
<div class="toggle-option" data-toggle="margin" id="margin3">3</div>
<div class="toggle-option selected" data-toggle="margin" id="margin4">4</div>
<div class="toggle-option" data-toggle="margin" id="margin5">5</div>
<div class="toggle-option" data-toggle="margin" id="margin6">6</div>
</div>
</h5>
<h5>
Line spacing
<div class="toggle-button">
<div class="toggle-option" data-toggle="line" id="line1">1</div>
<div class="toggle-option" data-toggle="line" id="line2">2</div>
<div class="toggle-option" data-toggle="line" id="line3">3</div>
<div class="toggle-option selected" data-toggle="line" id="line4">4</div>
<div class="toggle-option" data-toggle="line" id="line5">5</div>
<div class="toggle-option" data-toggle="line" id="line6">6</div>
</div>
</h5>
<h5>
Center column no.
<div class="toggle-button">
<div class="toggle-option multi-select" data-toggle="column" id="column1">1</div>
<div class="toggle-option multi-select" data-toggle="column" id="column2">2</div>
<div class="toggle-option multi-select" data-toggle="column" id="column3">3</div>
<div class="toggle-option multi-select" data-toggle="column" id="column4">4</div>
</div>
</h5>
<br>
<div id="customTemplateOptions">
<h5>
Font type
<div class="toggle-button">
<div class="toggle-option" data-toggle="font" id="fontVerdanaSans">1</div>
<div class="toggle-option" data-toggle="font" id="fontVerdanaSerif">2</div>
<div class="toggle-option" data-toggle="font" id="fontRoboto">3</div>
<div class="toggle-option selected" data-toggle="font" id="fontDroid">4</div>
</div>
</h5>
<h5>
Title case
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="case" id="caseNormal">Default</div>
<div class="toggle-option" data-toggle="case" id="caseUpper">Uppercase</div>
</div>
</h5>
<h5>
Title style
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="title" id="titleRuled">Ruled</div>
<div class="toggle-option" data-toggle="title" id="titleShaded">Shaded</div>
</div>
</h5>
<h5>
Title rule position
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="rule" id="ruleAbove">Above title</div>
<div class="toggle-option" data-toggle="rule" id="ruleBelow">Below title</div>
</div>
</h5>
<br>
<h5>
Image
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="image" id="imageShow">Show</div>
<div class="toggle-option" data-toggle="image" id="imageHide">Hide</div>
</div>
</h5>
<h5>
Roll No
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="roll" id="rollShow">Show</div>
<div class="toggle-option" data-toggle="roll" id="rollHide">Hide</div>
</div>
</h5>
<h5>
Course
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="course" id="course1">1 line</div>
<div class="toggle-option" data-toggle="course" id="course2">2 lines</div>
</div>
</h5>
<h5>
Table border
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="table" id="tableShow">Show</div>
<div class="toggle-option" data-toggle="table" id="tableHide">Hide</div>
</div>
</h5>
<h5>
Education year column
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="edyear" id="edyearFirst">First</div>
<div class="toggle-option" data-toggle="edyear" id="edyearLat">Last</div>
</div>
</h5>
<h5>
Experience layout
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="experience" id="experience1">L1</div>
<div class="toggle-option" data-toggle="experience" id="experience2">L2</div>
</div>
</h5>
<h5>
Projects layout
<div class="toggle-button">
<div class="toggle-option selected" data-toggle="projects" id="projects1">L1</div>
<div class="toggle-option" data-toggle="projects" id="projects2">L2</div>
</div>
</h5>
<br>
</div>
<h5>
<button class="btn btn-sm btn-block btn-primary" data-toggle="modal" data-target="#sectionToggleModal">Show/Hide sections</button>
</h5>
<hr>
<h5>
<div id="notice1">
<h4>Free resume builder <br></h4>
<h4>Provided by Tnb sem-4 student </h4>
</div>
</h5>
</div>
</div>
<div class="col-sm-9 text-center" id="right">
<div id="page" class="droid">
<div class="row" style="margin-bottom:10px;">
<div class="col-sm-12">
<div style="display:inline-block;" id="image_box">
<img src="images/iitg_logo.png" height="80" width="80">
</div>
<div id="info" style="display:inline-block;">
<h2 id="contentName">Student Name</h2>
<h5 id="contentRoll">Roll Number : 14010XXXX</h5>
<h5 id="contentCourse">BCA-Tnb college</h5>
<h5 id="contentCollege">Tilka Manjhi Bhagalpur University</h5>
</div>
<div id="contact" style="float:right; display:inline-block;">
+91-9999999999<br>
xyz.xyz@gmail.com<br>
<span class="light" id="contactLink1">www.linkedin.com/in/xyz123<br></span>
<span class="light" id="contactLink2">github.com/xyz123<br></span>
</div>
</div>
</div>
<div class="section" id="sectionEducation">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Education</strong></h4>
<hr class="hr-below">
</div>
<ul class="nobullet">
<li>
<table class="table customBordered" id="educationTable">
<tr>
<td class="header"><strong>Year</strong></td>
<td class="header"><strong>Degree / Certificate</strong></td>
<td class="header"><strong>Institute / Board</strong></td>
<td class="header"><strong>CGPA/Percentage</strong></td>
</tr>
<tr>
<td>2022</td>
<td>BCA-Tnb</td>
<td>TMBU</td>
<td>9.00 (Current)</td>
</tr>
<tr>
<td>2020</td>
<td>Senior secondary</td>
<td>CBSE board</td>
<td>97.0%</td>
</tr>
<tr>
<td>2018</td>
<td>Secondary</td>
<td>CBSE board</td>
<td>10.0</td>
</tr>
</table>
</li>
</ul>
</div>
<div class="section" id="sectionExperience">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Experience</strong></h4>
<hr class="hr-below">
</div>
<ul>
<li>
<div>
<div class="title">XYZ Engineer at 'ABC'</div>
<div class="time right">May 2019 - July 2022</div>
</div>
<div>
<div class="link right">www.abc.in</div>
<div class="text">Analysed app usage statistics to recommend items based on user's preference.</div>
</div>
</li>
<li>
<div>
<div class="title">XYZ Engineer at 'ABC'</div>
<div class="time right">Dec 2020</div>
</div>
<div>
<div class="link right">www.abc.in</div>
<div class="text">Designed methods to improve the existing unit test mechanism.</div>
</div>
</li>
</ul>
</div>
<div class="section" id="sectionSkills">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Technical skills</strong></h4>
<hr class="hr-below">
</div>
<ul>
<li>
<strong><span class="skillCategory">Programming languages</span> :</strong>
C++, Python, Java *
</li>
<li>
<strong><span class="skillCategory">Web technologies</span> :</strong>
HTML, CSS, Javascript
</li>
<li>
<strong><span class="skillCategory">Database management</span> :</strong>
mySQL
</li>
<li>
<strong><span class="skillCategory">Miscellaneous</span> :</strong>
Android programming *
</li>
<li>
<strong><span class="skillCategory">Operating system</span> :</strong>
Windows, Linux
</li>
<div class="star"><i>*<span class="light"> Elementary proficiency</span></i></div>
</ul>
</div>
<div class="section" id="sectionProjects">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Projects</strong></h4>
<hr class="hr-below">
</div>
<ul>
<li>
<div>
<div class="title">Project title</div>
<div class="time right">Ongoing</div>
</div>
<div>
<div class="mentor tab">Project Mentor</div>
</div>
<div>
<div class="text">Graphical interface to share files over institute's network.</div>
</div>
</li>
<li>
<div>
<div class="title">Project title</div>
<div class="time right">Jan 2019 - Mar 2021</div>
</div>
<div>
<div class="mentor tab">Mentor name</div>
<div class="link right">www.xyz.in</div>
</div>
<div>
<div class="text">Graphical interface to share files over institute's network.</div>
</div>
</li>
<li>
<div>
<div class="title">Project title</div>
<div class="time right">Feb 2022</div>
</div>
<div>
<div class="link right">goo.gl/link</div>
</div>
<div>
<div class="text">Graphical interface to share files over institute's network.</div>
</div>
</li>
</ul>
</div>
<div class="section" id="sectionAchievements">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Achievements</strong></h4>
<hr class="hr-below">
</div>
<ul>
<li>
<span class="title">ABC contest 2021 : </span>
<span class="text">Secured 1st position in the National level contest.</span>
</li>
<li>
<span class="title">Joint Entrance Examination 2020 : </span>
<span class="text">Secured All India Rank 1 among 0.15 million candidates appearing for the test.</span>
</li>
<li>
<span class="title">KVPY 2017-18 : </span>
<span class="text">Obtained the National research fellowship scholarship by securing a position in top 1%.</span>
</li>
<li>
<span class="title">ABC Olympiad 2019 : </span>
<span class="text">Qualified for the international stage by securing top position in following stages :</span>
<ul class="decimal">
<li>Qualifiers stage : Bagged 20th position among 5000 candidates.</li>
<li>National level : Bagged 7th position among 250 candidates.</li>
</ul>
</li>
</ul>
</div>
<div class="section" id="sectionCourses">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Key courses taken</strong></h4>
<hr class="hr-below">
</div>
<ul>
<div class="row">
<div class="col-sm-6">
<li>Computer lab</li>
<li>Process design</li>
<li>Statistics *</li>
</div>
<div class="col-sm-6">
<li>Advanced calculus</li>
<li>XYZ architecture *</li>
<li>ABC lab *</li>
</div>
</div>
<div class="star"><i>*<span class="light"> To be completed in Nov 2016</span></i></div>
</ul>
</div>
<div class="section" id="sectionCurricular">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Extracurriculars</strong></h4>
<hr class="hr-below">
</div>
<ul>
<li>
<span class="title">ABC workshop : </span>
<span class="text">Attended a 3-day workshop on Image sensing satellute development.</span>
</li>
<li>
<span class="title">ABC contest 2021 : </span>
<span class="text">Secured 1st position in the National level contest.</span>
</li>
</ul>
</div>
<div class="section" id="sectionInterest">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Fields of interest (OR Research interests)</strong></h4>
<hr class="hr-below">
</div>
<ul>
<div class="row">
<div class="col-sm-6">
<li>Advanced XYZ</li>
<li>ABC design</li>
</div>
<div class="col-sm-6">
<li>XYZ processing</li>
<li>Robotics</li>
</div>
</div>
</ul>
</div>
<div class="section" id="sectionFooterMessage">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h6><strong>(References available on request)</strong></h6>
</div>
</div>
<div class="section" id="sectionPublications">
<div class="section-title ruled rule-above">
<hr class="hr-above">
<h4><strong>Declaration</strong></h4>
<hr class="hr-below">
</div>
<div> <ul>
<li>
<span class="text"><strong> I hereby declare that the information provided is true to the best of my knowledge</strong></span>
</li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<br>
<p><strong> (Your Name)</strong></p>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
<div>
<!-- <div class="mentor">Mentors</div> -->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="usageModal" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5><strong>Note : </strong>Use <strong>Google Chrome</strong>. Other browsers are unable to print properly and don't support some features.</h5>
<h4><strong>Editing content</strong></h4>
<ul>
<li>Edit the Resume content just like a normal document editor (cut,copy,undo etc).</li>
<li>Entire sections can be added, reordered, removed just by cut,copy,pasting method. (Use "show/hide sections" button to hide but retain content)</li>
<li>To remove a section/point/mentor/link etc, just delete it.</li>
<li>For styled/formatted text, select the text portion and press <kbd>Ctrl+b</kbd> for bold, <kbd>Ctrl+i</kbd> for italics, <kbd>Ctrl+u</kbd> for underlined text.</li>
<li>Use "Insert sub-list" button to insert sub-points in a point. (like as in achivements section)</li>
<li>Change indentation and bullet style of the list where your cursor is placed.</li>
</ul>
<h4><strong>Editing template</strong></h4>
<ul>
<li>Use the options in the left panel to modify the template/look.</li>
<li>In case you want to use a different template than the official IITG template, choose the corresponding button to see other setting options. (For on-campus purpose, you must use official IITG template)</li>
</ul>
<h4><strong>Saving</strong></h4>
<ul>
<li>Close any popup box (like this instructions popup ) if opened. Press <kbd>Ctrl+s</kbd></li>
<li>This will save the webpage (a .html file and a folder will be saved. Keep them together)</li>
<li>Open the .html file in browser from your PC.</li>
<li>This way, you can maintain multiple saved copies for each profile/template on your PC.</li>
</ul>
<h4><strong>Print as PDF</strong></h4>
<ul>
<li>Adjust margin in the Chrome's print dialog box. You may need it if a section is getting split between two pages. Print each page separately with different margins if needed.</li>
<li>If URLs or some stray text is being shown in print preview, disable the options "Include headers and footers","Include background graphics" etc in the print dialog box.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal fade" id="sectionToggleModal" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionEducation">Education</label></div>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionExperience">Experience</label></div>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionPublications">Publications</label></div>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionProjects">Projects</label></div>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionSkills">Technical Skills</label></div>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionAchievements">Achievements</label></div>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionCourses">Key courses taken</label></div>
<div class="checkbox"><label><input type="checkbox" name="sectionToggle" checked="true" value="sectionCurricular">Extra curriculars</label></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>