cover.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="https://unpkg.com/docx@9.5.0/build/index.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  7. <style>
  8. *{box-sizing:border-box;margin:0;padding:0;}
  9. body{font-family:var(--font-sans,system-ui,sans-serif);background:transparent;}
  10. .app{display:grid;grid-template-columns:300px 1fr;min-height:640px;}
  11. .sidebar{background:var(--color-background-secondary);border-right:0.5px solid var(--color-border-tertiary);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.85rem;overflow-y:auto;}
  12. h2{font-size:11px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.07em;}
  13. .field{display:flex;flex-direction:column;gap:5px;}
  14. .field label{font-size:12px;color:var(--color-text-secondary);font-weight:500;}
  15. .field input,.field textarea{font-size:13px;padding:7px 10px;border:0.5px solid var(--color-border-secondary);border-radius:8px;background:var(--color-background-primary);color:var(--color-text-primary);font-family:inherit;outline:none;}
  16. .field input:focus,.field textarea:focus{border-color:#185FA5;box-shadow:0 0 0 2px rgba(24,95,165,0.15);}
  17. .field textarea{resize:vertical;min-height:54px;}
  18. .toggle-row{display:flex;align-items:center;gap:8px;}
  19. .toggle{position:relative;width:36px;height:20px;flex-shrink:0;}
  20. .toggle input{opacity:0;width:0;height:0;}
  21. .slider{position:absolute;inset:0;border-radius:20px;background:var(--color-border-secondary,#ccc);cursor:pointer;transition:background .2s;}
  22. .toggle input:checked+.slider{background:#185FA5;}
  23. .slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#fff;transition:transform .2s;}
  24. .toggle input:checked+.slider:before{transform:translateX(16px);}
  25. .toggle-label{font-size:12px;color:var(--color-text-secondary);}
  26. .fmt-row{display:flex;gap:8px;}
  27. .fmt-btn{flex:1;padding:7px 0;font-size:12px;font-weight:500;border:0.5px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;background:var(--color-background-primary);color:var(--color-text-secondary);transition:all .15s;}
  28. .fmt-btn.active{background:#185FA5;color:#fff;border-color:#185FA5;}
  29. .dl-btn{width:100%;padding:10px;font-size:13px;font-weight:500;border-radius:8px;border:none;cursor:pointer;background:#185FA5;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s;margin-top:auto;}
  30. .dl-btn:disabled{opacity:.55;cursor:not-allowed;}
  31. .dl-btn:hover:not(:disabled){opacity:.85;}
  32. .hint{font-size:11px;color:var(--color-text-tertiary);}
  33. .sep{border:none;border-top:0.5px solid var(--color-border-tertiary);margin:.1rem 0;}
  34. .preview-wrap{background:#e0dedd;padding:1.5rem;overflow-y:auto;display:flex;justify-content:center;}
  35. .page{background:#fff;width:100%;max-width:560px;min-height:760px;padding:2.2rem 2.5rem;box-shadow:0 2px 20px rgba(0,0,0,0.12);font-family:Calibri,Georgia,serif;color:#1a1a1a;font-size:11.5px;line-height:1.6;}
  36. .ltr-name{font-size:21px;font-weight:700;text-align:center;color:#1a1a1a;}
  37. .ltr-sub{font-size:10.5px;text-align:center;color:#555;font-style:italic;margin-top:2px;}
  38. .ltr-contact{font-size:9.5px;text-align:center;color:#555;margin-top:2px;}
  39. .ltr-rule{border:none;border-top:1.5px solid #1A5276;margin:10px 0 14px;}
  40. .ltr-date{font-size:10.5px;color:#555;margin-bottom:10px;}
  41. .ltr-addr{font-size:11px;margin-bottom:2px;}
  42. .ltr-subject{font-size:11px;font-weight:700;color:#1A5276;margin:10px 0 8px;}
  43. .ltr-body{margin-bottom:7px;text-align:justify;}
  44. .ltr-closing{margin-top:14px;}
  45. .ltr-sig{font-weight:700;margin-top:22px;}
  46. .fname{font-size:11.5px;color:var(--color-text-primary);word-break:break-all;}
  47. </style>
  48. </head>
  49. <body>
  50. <div class="app">
  51. <aside class="sidebar">
  52. <h2>Customise</h2>
  53. <div class="field">
  54. <label>Date</label>
  55. <div class="toggle-row">
  56. <label class="toggle">
  57. <input type="checkbox" id="useToday" checked>
  58. <span class="slider"></span>
  59. </label>
  60. <span class="toggle-label">Use today's date</span>
  61. </div>
  62. <div id="dateRow" style="display:none;flex-direction:column;gap:4px;">
  63. <input type="text" id="dateInput" maxlength="8" placeholder="DDMMYYYY" style="margin-top:4px;">
  64. <span class="hint" id="dateHint"></span>
  65. </div>
  66. <span class="hint" id="todayHint"></span>
  67. </div>
  68. <hr class="sep">
  69. <div class="field">
  70. <label>Hiring Manager Name</label>
  71. <input type="text" id="manager" placeholder="e.g. Sarah Johnson">
  72. <span class="hint" id="greetHint">Used in greeting: Dear Hiring Manager,</span>
  73. </div>
  74. <div class="field">
  75. <label>Company Name</label>
  76. <input type="text" id="company" placeholder="e.g. Google">
  77. </div>
  78. <div class="field">
  79. <label>Subject Line</label>
  80. <textarea id="subject" rows="3">Application for DevOps / Network Security / SOC Engineer Role</textarea>
  81. </div>
  82. <hr class="sep">
  83. <div class="field">
  84. <label>Format</label>
  85. <div class="fmt-row">
  86. <button class="fmt-btn active" id="btnDocx" onclick="setFmt('docx')">DOCX</button>
  87. <button class="fmt-btn" id="btnPdf" onclick="setFmt('pdf')">PDF</button>
  88. </div>
  89. </div>
  90. <button class="dl-btn" id="dlBtn" onclick="doDownload()">
  91. ↓ Download DOCX
  92. </button>
  93. <span class="hint" id="fnameHint" style="text-align:center;">Parv_Ashwani_Cover_Company.docx</span>
  94. </aside>
  95. <div class="preview-wrap">
  96. <div class="page" id="previewPage">
  97. <div class="ltr-name">PARV ASHWANI</div>
  98. <div class="ltr-sub">Network &amp; Security Engineer | DevOps | Cloud Infrastructure</div>
  99. <div class="ltr-contact">parvashwaniofficial@gmail.com | +91 7007682851 | Lucknow, India | linkedin.com/in/parvashwani</div>
  100. <hr class="ltr-rule">
  101. <div class="ltr-date" id="pvDate"></div>
  102. <div class="ltr-addr" style="font-weight:700;" id="pvManager">Hiring Manager</div>
  103. <div class="ltr-addr" id="pvCompany">[Company Name]</div>
  104. <div class="ltr-subject">Re: <span id="pvSubject">Application for DevOps / Network Security / SOC Engineer Role</span></div>
  105. <p class="ltr-body" id="pvGreet">Dear Hiring Manager,</p>
  106. <p class="ltr-body">I am writing to express my strong interest in a DevOps, Network Security, or SOC Analyst role at your organisation. With over 1.5 years of professional experience at HCLTech as a Tech Lead for Citrix NetScaler operations, a Microsoft Azure Network Engineer Associate certification, and a deep passion for automation and infrastructure reliability, I am confident I can deliver immediate and lasting value to your team.</p>
  107. <p class="ltr-body">At HCLTech, I have been the go-to engineer for complex Citrix CVAD and NetScaler challenges, leading root-cause analysis through detailed network trace and log review using tools like Wireshark and TShark. Beyond my individual contributions, I have taken on a mentorship role, guiding other engineers through Linux and FreeBSD administration, cloud architecture patterns across AWS, Azure, and GCP, and virtualisation platforms including VMware, Hyper-V, and XenServer. This breadth of knowledge positions me well for both hands-on DevOps pipelines and security operations environments.</p>
  108. <p class="ltr-body">I have a strong scripting background in Python, Bash, and Shell, which I apply to automate repetitive operational tasks and build internal tooling. My personal projects, including a self-hosted Git platform, a browser-based HAR network analyser, and a SAML debugging browser extension, demonstrate my instinct to solve real engineering problems with clean, deployable software. I am equally comfortable at the terminal and in a collaborative DevOps or SOC workflow.</p>
  109. <p class="ltr-body">I am particularly excited by opportunities that combine infrastructure reliability with security observability, whether that means building CI/CD pipelines, maintaining cloud networking at scale, or monitoring and responding to threats in a SOC environment. I thrive in fast-paced teams and bring an analytical, collaborative mindset to every challenge.</p>
  110. <p class="ltr-body">I would welcome the opportunity to discuss how my skills and experience align with your team's needs. Thank you for your time and consideration.</p>
  111. <div class="ltr-closing">Sincerely,</div>
  112. <div class="ltr-sig">Parv Ashwani</div>
  113. </div>
  114. </div>
  115. </div>
  116. <script>
  117. var fmt = 'docx';
  118. function getTodayStr() {
  119. var d = new Date();
  120. var dd = String(d.getDate()).padStart(2,'0');
  121. var mm = String(d.getMonth()+1).padStart(2,'0');
  122. var yyyy = String(d.getFullYear());
  123. return dd+mm+yyyy;
  124. }
  125. function formatDate(s) {
  126. if (!s || s.length !== 8) return '';
  127. var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  128. var dd = parseInt(s.slice(0,2),10);
  129. var mm = parseInt(s.slice(2,4),10);
  130. var yyyy = s.slice(4);
  131. if (mm < 1 || mm > 12 || dd < 1 || dd > 31) return '';
  132. return months[mm-1] + ' ' + dd + ', ' + yyyy;
  133. }
  134. function safeFilename(c) {
  135. return (c||'Company').replace(/[^a-zA-Z0-9_ \-]/g,'').replace(/\s+/g,'_') || 'Company';
  136. }
  137. function getManager() { return document.getElementById('manager').value.trim() || 'Hiring Manager'; }
  138. function getCompany() { return document.getElementById('company').value.trim() || '[Company Name]'; }
  139. function getSubject() { return document.getElementById('subject').value.trim() || 'Application for DevOps / Network Security / SOC Engineer Role'; }
  140. function getDate() {
  141. var useToday = document.getElementById('useToday').checked;
  142. return formatDate(useToday ? getTodayStr() : document.getElementById('dateInput').value);
  143. }
  144. function setFmt(f) {
  145. fmt = f;
  146. document.getElementById('btnDocx').className = 'fmt-btn' + (f==='docx'?' active':'');
  147. document.getElementById('btnPdf').className = 'fmt-btn' + (f==='pdf'?' active':'');
  148. document.getElementById('dlBtn').textContent = '↓ Download ' + f.toUpperCase();
  149. updateHint();
  150. }
  151. function updateHint() {
  152. var c = safeFilename(getCompany());
  153. document.getElementById('fnameHint').textContent = 'Parv_Ashwani_Cover_' + c + '.' + fmt;
  154. }
  155. function updatePreview() {
  156. var m = getManager(), co = getCompany(), sub = getSubject(), dt = getDate();
  157. document.getElementById('pvDate').textContent = dt;
  158. document.getElementById('pvManager').textContent = m;
  159. document.getElementById('pvCompany').textContent = co;
  160. document.getElementById('pvSubject').textContent = sub;
  161. document.getElementById('pvGreet').textContent = 'Dear ' + m + ',';
  162. document.getElementById('greetHint').textContent = 'Greeting: Dear ' + m + ',';
  163. updateHint();
  164. }
  165. document.getElementById('useToday').addEventListener('change', function() {
  166. document.getElementById('dateRow').style.display = this.checked ? 'none' : 'flex';
  167. document.getElementById('todayHint').textContent = this.checked ? formatDate(getTodayStr()) : '';
  168. updatePreview();
  169. });
  170. document.getElementById('dateInput').addEventListener('input', function() {
  171. var v = this.value.replace(/\D/g,'').slice(0,8);
  172. this.value = v;
  173. document.getElementById('dateHint').textContent = v.length===8 ? formatDate(v) : '';
  174. updatePreview();
  175. });
  176. ['manager','company','subject'].forEach(function(id) {
  177. document.getElementById(id).addEventListener('input', updatePreview);
  178. });
  179. function init() {
  180. document.getElementById('todayHint').textContent = formatDate(getTodayStr());
  181. updatePreview();
  182. }
  183. init();
  184. async function doDownload() {
  185. var btn = document.getElementById('dlBtn');
  186. btn.disabled = true;
  187. btn.textContent = 'Generating…';
  188. try {
  189. if (fmt === 'docx') await downloadDocx();
  190. else await downloadPdf();
  191. } catch(e) {
  192. alert('Error: ' + e.message);
  193. }
  194. btn.disabled = false;
  195. btn.textContent = '↓ Download ' + fmt.toUpperCase();
  196. }
  197. async function downloadDocx() {
  198. var d = window.docx;
  199. if (!d) { alert('docx library not loaded yet, please wait a moment and try again.'); return; }
  200. var { Document, Packer, Paragraph, TextRun, AlignmentType, BorderStyle } = d;
  201. var m = getManager(), co = getCompany(), sub = getSubject(), dt = getDate() || formatDate(getTodayStr());
  202. var font = 'Calibri';
  203. var paras = [
  204. new Paragraph({ children: [new TextRun({ text: 'PARV ASHWANI', bold: true, size: 40, font, color: '1a1a1a' })], alignment: AlignmentType.CENTER, spacing: { after: 40 } }),
  205. new Paragraph({ children: [new TextRun({ text: 'Network & Security Engineer | DevOps | Cloud Infrastructure', size: 20, font, color: '555555', italics: true })], alignment: AlignmentType.CENTER, spacing: { after: 40 } }),
  206. new Paragraph({ children: [new TextRun({ text: 'parvashwaniofficial@gmail.com | +91 7007682851 | Lucknow, India | linkedin.com/in/parvashwani', size: 18, font, color: '555555' })], alignment: AlignmentType.CENTER, spacing: { after: 60 } }),
  207. new Paragraph({ border: { bottom: { style: BorderStyle.SINGLE, size: 8, color: '1A5276', space: 4 } }, spacing: { before: 40, after: 120 }, children: [] }),
  208. new Paragraph({ children: [new TextRun({ text: dt, size: 20, font, color: '555555' })], spacing: { before: 200, after: 80 } }),
  209. new Paragraph({ children: [new TextRun({ text: m, bold: true, size: 22, font })], spacing: { after: 40 } }),
  210. new Paragraph({ children: [new TextRun({ text: co, size: 22, font })], spacing: { after: 40 } }),
  211. new Paragraph({ children: [new TextRun({ text: 'Re: ' + sub, bold: true, size: 21, font, color: '1A5276' })], spacing: { before: 160, after: 100 } }),
  212. new Paragraph({ children: [new TextRun({ text: 'Dear ' + m + ',', size: 22, font })], spacing: { before: 80, after: 80 } }),
  213. ];
  214. var bodies = [
  215. 'I am writing to express my strong interest in a DevOps, Network Security, or SOC Analyst role at your organisation. With over 1.5 years of professional experience at HCLTech as a Tech Lead for Citrix NetScaler operations, a Microsoft Azure Network Engineer Associate certification, and a deep passion for automation and infrastructure reliability, I am confident I can deliver immediate and lasting value to your team.',
  216. 'At HCLTech, I have been the go-to engineer for complex Citrix CVAD and NetScaler challenges, leading root-cause analysis through detailed network trace and log review using tools like Wireshark and TShark. Beyond my individual contributions, I have taken on a mentorship role, guiding other engineers through Linux and FreeBSD administration, cloud architecture patterns across AWS, Azure, and GCP, and virtualisation platforms including VMware, Hyper-V, and XenServer. This breadth of knowledge positions me well for both hands-on DevOps pipelines and security operations environments.',
  217. 'I have a strong scripting background in Python, Bash, and Shell, which I apply to automate repetitive operational tasks and build internal tooling. My personal projects, including a self-hosted Git platform, a browser-based HAR network analyser, and a SAML debugging browser extension, demonstrate my instinct to solve real engineering problems with clean, deployable software. I am equally comfortable at the terminal and in a collaborative DevOps or SOC workflow.',
  218. 'I am particularly excited by opportunities that combine infrastructure reliability with security observability, whether that means building CI/CD pipelines, maintaining cloud networking at scale, or monitoring and responding to threats in a SOC environment. I thrive in fast-paced teams and bring an analytical, collaborative mindset to every challenge.',
  219. 'I would welcome the opportunity to discuss how my skills and experience align with your team\'s needs. Thank you for your time and consideration.',
  220. ];
  221. bodies.forEach(function(txt) {
  222. paras.push(new Paragraph({ children: [new TextRun({ text: txt, size: 22, font })], spacing: { before: 80, after: 80 }, alignment: AlignmentType.JUSTIFIED }));
  223. });
  224. paras.push(new Paragraph({ children: [new TextRun({ text: 'Sincerely,', size: 22, font })], spacing: { before: 200, after: 80 } }));
  225. paras.push(new Paragraph({ children: [new TextRun({ text: 'Parv Ashwani', bold: true, size: 22, font })], spacing: { before: 80 } }));
  226. var doc = new Document({
  227. sections: [{ properties: { page: { size: { width: 12240, height: 15840 }, margin: { top: 1080, right: 1080, bottom: 1080, left: 1080 } } }, children: paras }]
  228. });
  229. var buf = await Packer.toBuffer(doc);
  230. var blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
  231. triggerDownload(blob, 'Parv_Ashwani_Cover_' + safeFilename(co) + '.docx');
  232. }
  233. async function downloadPdf() {
  234. var jsPDF = window.jspdf && window.jspdf.jsPDF;
  235. if (!jsPDF) { alert('jsPDF not loaded yet.'); return; }
  236. var m = getManager(), co = getCompany(), sub = getSubject(), dt = getDate() || formatDate(getTodayStr());
  237. var doc = new jsPDF({ unit: 'pt', format: 'letter' });
  238. var W = doc.internal.pageSize.getWidth(), mg = 54, cw = W - mg * 2;
  239. doc.setFont('helvetica','bold'); doc.setFontSize(20); doc.setTextColor(26,26,26);
  240. doc.text('PARV ASHWANI', W/2, 60, { align: 'center' });
  241. doc.setFont('helvetica','italic'); doc.setFontSize(10); doc.setTextColor(85,85,85);
  242. doc.text('Network & Security Engineer | DevOps | Cloud Infrastructure', W/2, 75, { align: 'center' });
  243. doc.setFont('helvetica','normal'); doc.setFontSize(9);
  244. doc.text('parvashwaniofficial@gmail.com | +91 7007682851 | Lucknow, India | linkedin.com/in/parvashwani', W/2, 89, { align: 'center' });
  245. doc.setDrawColor(26,82,118); doc.setLineWidth(1.2); doc.line(mg, 98, W-mg, 98);
  246. var y = 116, lh = 13.5;
  247. doc.setFont('helvetica','normal'); doc.setFontSize(10); doc.setTextColor(85,85,85);
  248. doc.text(dt, mg, y); y += lh * 1.5;
  249. doc.setFont('helvetica','bold'); doc.setFontSize(11); doc.setTextColor(26,26,26);
  250. doc.text(m, mg, y); y += lh;
  251. doc.setFont('helvetica','normal');
  252. doc.text(co, mg, y); y += lh * 1.6;
  253. doc.setFont('helvetica','bold'); doc.setFontSize(10); doc.setTextColor(26,82,118);
  254. var subLines = doc.splitTextToSize('Re: ' + sub, cw);
  255. doc.text(subLines, mg, y); y += subLines.length * lh + 8;
  256. doc.setFont('helvetica','normal'); doc.setFontSize(10.5); doc.setTextColor(26,26,26);
  257. var bodyParas = [
  258. 'Dear ' + m + ',',
  259. 'I am writing to express my strong interest in a DevOps, Network Security, or SOC Analyst role at your organisation. With over 1.5 years of professional experience at HCLTech as a Tech Lead for Citrix NetScaler operations, a Microsoft Azure Network Engineer Associate certification, and a deep passion for automation and infrastructure reliability, I am confident I can deliver immediate and lasting value to your team.',
  260. 'At HCLTech, I have been the go-to engineer for complex Citrix CVAD and NetScaler challenges, leading root-cause analysis through detailed network trace and log review using tools like Wireshark and TShark. Beyond my individual contributions, I have taken on a mentorship role, guiding other engineers through Linux and FreeBSD administration, cloud architecture patterns across AWS, Azure, and GCP, and virtualisation platforms including VMware, Hyper-V, and XenServer. This breadth of knowledge positions me well for both hands-on DevOps pipelines and security operations environments.',
  261. 'I have a strong scripting background in Python, Bash, and Shell, which I apply to automate repetitive operational tasks and build internal tooling. My personal projects, including a self-hosted Git platform, a browser-based HAR network analyser, and a SAML debugging browser extension, demonstrate my instinct to solve real engineering problems with clean, deployable software. I am equally comfortable at the terminal and in a collaborative DevOps or SOC workflow.',
  262. 'I am particularly excited by opportunities that combine infrastructure reliability with security observability, whether that means building CI/CD pipelines, maintaining cloud networking at scale, or monitoring and responding to threats in a SOC environment. I thrive in fast-paced teams and bring an analytical, collaborative mindset to every challenge.',
  263. 'I would welcome the opportunity to discuss how my skills and experience align with your team\'s needs. Thank you for your time and consideration.'
  264. ];
  265. bodyParas.forEach(function(txt, i) {
  266. var lines = doc.splitTextToSize(txt, cw);
  267. var ph = doc.internal.pageSize.getHeight();
  268. if (y + lines.length * lh > ph - 60) { doc.addPage(); y = mg; }
  269. doc.text(lines, mg, y); y += lines.length * lh + 8;
  270. });
  271. y += 8;
  272. doc.text('Sincerely,', mg, y); y += lh * 2.5;
  273. doc.setFont('helvetica','bold');
  274. doc.text('Parv Ashwani', mg, y);
  275. doc.save('Parv_Ashwani_Cover_' + safeFilename(co) + '.pdf');
  276. }
  277. function triggerDownload(blob, name) {
  278. var url = URL.createObjectURL(blob);
  279. var a = document.createElement('a');
  280. a.href = url; a.download = name; document.body.appendChild(a); a.click();
  281. setTimeout(function() { URL.revokeObjectURL(url); document.body.removeChild(a); }, 500);
  282. }
  283. </script>
  284. </body>
  285. </html>