map
This commit is contained in:
mrzta
497
cv archive/index2.html
Normal file
497
cv archive/index2.html
Normal file
@@ -0,0 +1,497 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Zeshan Tariq – DevOps · SRE · SOC</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #020617;
|
||||
--bg-alt: #020617;
|
||||
--accent-1: #22d3ee;
|
||||
--accent-2: #a855f7;
|
||||
--accent-3: #4ade80;
|
||||
--text-main: #e5e7eb;
|
||||
--text-soft: #9ca3af;
|
||||
--text-muted: #6b7280;
|
||||
--border-subtle: rgba(148,163,184,0.35);
|
||||
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||
"Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin:0; padding:0; }
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-main);
|
||||
background:
|
||||
radial-gradient(circle at top, #0b1120 0, #020617 45%, #000 100%);
|
||||
color: var(--text-main);
|
||||
padding: 32px 16px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: 100%;
|
||||
max-width: 1120px;
|
||||
}
|
||||
|
||||
/* TOP NAV / HEADER TAG */
|
||||
.top-bar {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom: 28px;
|
||||
gap:12px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.brand-mark span {
|
||||
color: var(--accent-1);
|
||||
}
|
||||
|
||||
.nav-chip {
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
background: rgba(15,23,42,0.9);
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-size: clamp(26px, 4vw, 36px);
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.hero-name span {
|
||||
background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
font-size: 11px;
|
||||
color: var(--text-soft);
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
max-width: 620px;
|
||||
margin: 0 auto 18px;
|
||||
font-size: 13px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.hero-sub strong {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.hero-pills {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
flex-wrap:wrap;
|
||||
gap:8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
font-size: 11px;
|
||||
padding: 5px 11px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: rgba(15,23,42,0.9);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:7px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-3);
|
||||
box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
gap:10px;
|
||||
flex-wrap:wrap;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
text-decoration:none;
|
||||
border-radius: 999px;
|
||||
padding: 9px 20px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
border: 1px solid rgba(34,211,238,0.85);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(34,211,238,0.28), rgba(15,23,42,1));
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(34,211,238,0.4),
|
||||
0 18px 40px rgba(8,47,73,0.9);
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
transition:
|
||||
transform 160ms ease-out,
|
||||
box-shadow 160ms ease-out,
|
||||
background 160ms ease-out;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px) scale(1.02);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(34,211,238,0.4), rgba(15,23,42,1));
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(34,211,238,0.7),
|
||||
0 24px 60px rgba(15,23,42,0.95);
|
||||
}
|
||||
|
||||
.btn-primary svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* MAIN VISUAL */
|
||||
.visual-wrap {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.visual-card {
|
||||
position: relative;
|
||||
border-radius: 28px;
|
||||
border: 1px solid rgba(148,163,184,0.35);
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(34,211,238,0.16), transparent 55%),
|
||||
radial-gradient(circle at 100% 100%, rgba(168,85,247,0.25), transparent 55%),
|
||||
#020617;
|
||||
box-shadow: 0 32px 90px rgba(15,23,42,0.95);
|
||||
padding: 18px 18px 14px;
|
||||
}
|
||||
|
||||
.visual-label {
|
||||
position:absolute;
|
||||
top: 16px;
|
||||
left: 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
z-index: 2;
|
||||
display:flex;
|
||||
gap:8px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.visual-label-dot {
|
||||
width:6px;
|
||||
height:6px;
|
||||
border-radius:999px;
|
||||
background: var(--accent-1);
|
||||
}
|
||||
|
||||
.visual-card svg {
|
||||
width:100%;
|
||||
height:auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* CONTACT SECTION */
|
||||
.contact {
|
||||
margin-top: 24px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(15,23,42,0.85);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
gap:18px;
|
||||
flex-wrap:wrap;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-soft);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.contact-body {
|
||||
color: var(--text-soft);
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contact-links span {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.contact-links a {
|
||||
color: var(--accent-1);
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.contact-links a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 16px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
gap:8px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
@media (max-width:640px) {
|
||||
.top-bar { flex-direction:column; align-items:flex-start; }
|
||||
.visual-card { border-radius:22px; padding:14px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<!-- TOP STRIP -->
|
||||
<div class="top-bar">
|
||||
<div class="brand-mark">
|
||||
<span>ZESHAN</span> · AZURE · KUBERNETES
|
||||
</div>
|
||||
<div class="nav-chip">
|
||||
Single-page profile · CV first
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HERO -->
|
||||
<header class="hero">
|
||||
<h1 class="hero-name">
|
||||
<span>Zeshan</span> Tariq
|
||||
</h1>
|
||||
<div class="hero-tags">
|
||||
SOC · SRE · DEVOPS · DEVSECOPS · KUBERNETES
|
||||
</div>
|
||||
<p class="hero-sub">
|
||||
Cloud & platform engineer focused on <strong>Azure</strong>, <strong>Kubernetes</strong>,
|
||||
and <strong>secure automation</strong>. This page is the signal — the details live in my CV.
|
||||
</p>
|
||||
|
||||
<div class="hero-pills">
|
||||
<div class="pill status-pill">
|
||||
<span class="status-dot"></span>
|
||||
Available for remote roles
|
||||
</div>
|
||||
<div class="pill">Azure · AKS · Terraform</div>
|
||||
<div class="pill">CI/CD · GitHub · GitLab</div>
|
||||
<div class="pill">SOC · Sentinel · SRE</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions">
|
||||
<!-- change filename to your real CV -->
|
||||
<a href="cv-zeshan-tariq.pdf" class="btn-primary" download>
|
||||
<span>Download CV</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M12 3v12m0 0 4-4m-4 4-4-4M5 18h14"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- BIG CODE / PLATFORM VISUAL -->
|
||||
<section class="visual-wrap" aria-hidden="true">
|
||||
<div class="visual-card">
|
||||
<div class="visual-label">
|
||||
<span class="visual-label-dot"></span>
|
||||
azure-kubernetes-engineer.ts
|
||||
</div>
|
||||
<svg viewBox="0 0 960 420">
|
||||
<!-- background halo -->
|
||||
<defs>
|
||||
<radialGradient id="halo" cx="50%" cy="0%" r="80%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.45"/>
|
||||
<stop offset="40%" stop-color="#0f172a" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#020617" stop-opacity="1"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="frameStroke" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.9"/>
|
||||
<stop offset="50%" stop-color="#4ade80" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.9"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- halo -->
|
||||
<circle cx="480" cy="30" r="260" fill="url(#halo)" opacity="0.7"/>
|
||||
|
||||
<!-- central rounded frame -->
|
||||
<rect x="80" y="80" width="800" height="260" rx="26"
|
||||
fill="#020617" stroke="url(#frameStroke)" stroke-width="1.6"/>
|
||||
|
||||
<!-- subtle grid -->
|
||||
<g stroke="#0b1120" stroke-width="0.8">
|
||||
<line x1="120" y1="120" x2="840" y2="120"/>
|
||||
<line x1="120" y1="150" x2="840" y2="150"/>
|
||||
<line x1="120" y1="180" x2="840" y2="180"/>
|
||||
<line x1="120" y1="210" x2="840" y2="210"/>
|
||||
<line x1="120" y1="240" x2="840" y2="240"/>
|
||||
<line x1="120" y1="270" x2="840" y2="270"/>
|
||||
<line x1="120" y1="300" x2="840" y2="300"/>
|
||||
|
||||
<line x1="180" y1="110" x2="180" y2="320"/>
|
||||
<line x1="260" y1="110" x2="260" y2="320"/>
|
||||
<line x1="340" y1="110" x2="340" y2="320"/>
|
||||
<line x1="500" y1="110" x2="500" y2="320"/>
|
||||
<line x1="660" y1="110" x2="660" y2="320"/>
|
||||
<line x1="780" y1="110" x2="780" y2="320"/>
|
||||
</g>
|
||||
|
||||
<!-- left code panel -->
|
||||
<rect x="120" y="120" width="380" height="220" rx="18"
|
||||
fill="#020617" stroke="#0f172a" stroke-width="1"/>
|
||||
|
||||
<!-- code text (reduced to fit) -->
|
||||
<g font-family="monospace" font-size="12">
|
||||
<text x="140" y="148" fill="#4ade80">
|
||||
import { AzureKubernetesServices } from '@azure/aks';
|
||||
</text>
|
||||
<text x="140" y="168" fill="#4ade80">
|
||||
import { Engineer, Experience } from '@professional/core';
|
||||
</text>
|
||||
|
||||
<text x="140" y="194" fill="#4ade80">export</text>
|
||||
<text x="192" y="194" fill="#4ade80">class</text>
|
||||
<text x="244" y="194" fill="#22d3ee">AzureKubernetesEngineer</text>
|
||||
<text x="140" y="214" fill="#e5e7eb">implements Engineer {</text>
|
||||
|
||||
<text x="156" y="236" fill="#e5e7eb">
|
||||
constructor(private azure: AzureKubernetesServices) {}
|
||||
</text>
|
||||
|
||||
<text x="156" y="260" fill="#4ade80">experience</text>
|
||||
<text x="244" y="260" fill="#e5e7eb">: Experience = {</text>
|
||||
<text x="176" y="280" fill="#4ade80">years</text>
|
||||
<text x="224" y="280" fill="#e5e7eb">:</text>
|
||||
<text x="236" y="280" fill="#22d3ee">8</text>
|
||||
<text x="252" y="280" fill="#e5e7eb">,</text>
|
||||
<text x="176" y="300" fill="#4ade80">specialties</text>
|
||||
<text x="272" y="300" fill="#e5e7eb">:</text>
|
||||
<text x="284" y="300" fill="#22d3ee">
|
||||
['devops','sre','soc','devsecops']
|
||||
</text>
|
||||
<text x="156" y="320" fill="#e5e7eb">};</text>
|
||||
|
||||
<text x="156" y="344" fill="#22d3ee">deploySolution(solution: any) {</text>
|
||||
<text x="176" y="364" fill="#4ade80">return</text>
|
||||
<text x="232" y="364" fill="#22d3ee">
|
||||
this.azure.deploy({ solution, orchestration: 'Kubernetes',
|
||||
</text>
|
||||
<text x="176" y="384" fill="#22d3ee">
|
||||
cloud: 'Azure' });
|
||||
</text>
|
||||
<text x="156" y="404" fill="#e5e7eb">}</text>
|
||||
</g>
|
||||
|
||||
<!-- right "radar" metrics panel -->
|
||||
<rect x="540" y="120" width="260" height="220" rx="18"
|
||||
fill="#020617" stroke="#0f172a" stroke-width="1"/>
|
||||
|
||||
<!-- concentric circles -->
|
||||
<circle cx="670" cy="220" r="70" fill="#020617" stroke="#0f172a" stroke-width="1"/>
|
||||
<circle cx="670" cy="220" r="52" fill="none" stroke="#0f172a" stroke-width="0.8"/>
|
||||
<circle cx="670" cy="220" r="34" fill="none" stroke="#0f172a" stroke-width="0.8"/>
|
||||
<circle cx="670" cy="220" r="18" fill="none" stroke="#0f172a" stroke-width="0.8"/>
|
||||
|
||||
<!-- sweep -->
|
||||
<path d="M670 220 L720 210 A70 70 0 0 0 670 150z"
|
||||
fill="rgba(34,211,238,0.55)"/>
|
||||
<circle cx="670" cy="220" r="5" fill="#4ade80"/>
|
||||
<circle cx="702" cy="194" r="4" fill="#22d3ee"/>
|
||||
<circle cx="648" cy="196" r="4" fill="#a855f7"/>
|
||||
<circle cx="694" cy="244" r="4" fill="#facc15"/>
|
||||
|
||||
<!-- labels -->
|
||||
<g font-family="var(--font-mono)" font-size="11" fill="#9ca3af">
|
||||
<text x="582" y="150">MTTR < 30m</text>
|
||||
<text x="582" y="168">SLO 99.9%</text>
|
||||
<text x="582" y="186">AKS clusters: 12</text>
|
||||
<text x="582" y="204">Pipelines: 40+</text>
|
||||
<text x="582" y="222">Alerts tuned: yes</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT -->
|
||||
<section class="contact" id="contact">
|
||||
<div>
|
||||
<div class="contact-title">Contact</div>
|
||||
<div class="contact-body">
|
||||
For remote DevOps, SRE, SOC or DevSecOps work, email me or visit my site.
|
||||
The CV contains full experience, clients and stack details.
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-links">
|
||||
<span>e: <a href="mailto:zeshan@azuredevops.co.uk">zeshan@azuredevops.co.uk</a></span>
|
||||
<span>w: <a href="https://azuredevops.co.uk" target="_blank" rel="noopener">azuredevops.co.uk</a></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<span>© <span id="year"></span> Zeshan Tariq</span>
|
||||
<span>Dark single-page · SVG-driven hero</span>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById("year").textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
331
cv archive/index3.html
Normal file
331
cv archive/index3.html
Normal file
@@ -0,0 +1,331 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Zeshan Tariq – DevOps · SRE · SOC</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #020617;
|
||||
--card: #020617;
|
||||
--border: #1f2933;
|
||||
--accent: #38bdf8;
|
||||
--accent-soft: #0ea5e9;
|
||||
--text-main: #e5e7eb;
|
||||
--text-soft: #9ca3af;
|
||||
--text-muted: #6b7280;
|
||||
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: var(--bg);
|
||||
color: var(--text-main);
|
||||
font-family: var(--font-main);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 22px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 11px;
|
||||
color: var(--text-soft);
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tagline strong {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 4px 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.hero-text p {
|
||||
font-size: 13px;
|
||||
color: var(--text-soft);
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.hero-text p strong {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--accent);
|
||||
padding: 8px 18px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
background: #020617;
|
||||
color: var(--text-main);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #0b1724;
|
||||
border-color: var(--accent-soft);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.code-card {
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card);
|
||||
padding: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.code-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.code-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.code-svg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contact {
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contact-links span {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.contact {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<header>
|
||||
<div>
|
||||
<div class="name">Zeshan Tariq</div>
|
||||
<div class="tagline">
|
||||
<strong>SOC</strong> / SRE / DEVOPS / DEVSECOPS / KUBERNETES
|
||||
</div>
|
||||
</div>
|
||||
<div class="status">
|
||||
<span class="status-dot"></span>
|
||||
Available for remote roles
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<p>
|
||||
Cloud & platform engineer focused on <strong>Azure</strong>,
|
||||
<strong>Kubernetes</strong>, and <strong>secure automation</strong>.
|
||||
For full details, see the CV.
|
||||
</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<!-- Change filename to your real CV name -->
|
||||
<a href="cv-zeshan-tariq.pdf" class="btn-primary" download>
|
||||
<span>Download CV</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M12 3v12m0 0 4-4m-4 4-4-4M5 18h14"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="code-card" aria-hidden="true">
|
||||
<div class="code-label">
|
||||
<span class="code-dot"></span>
|
||||
azure-kubernetes-engineer.ts
|
||||
</div>
|
||||
<!-- Simple SVG "code box" using your snippet, reduced to fit -->
|
||||
<svg class="code-svg" viewBox="0 0 640 200">
|
||||
<rect x="0.5" y="0.5" width="639" height="199" rx="10" fill="#020617" stroke="#1f2933"/>
|
||||
<!-- header bar -->
|
||||
<rect x="10" y="10" width="620" height="22" rx="7" fill="#020617" />
|
||||
<circle cx="24" cy="21" r="4" fill="#f97316"/>
|
||||
<circle cx="38" cy="21" r="4" fill="#facc15"/>
|
||||
<circle cx="52" cy="21" r="4" fill="#22c55e"/>
|
||||
<text x="70" y="25" fill="#6b7280" font-family="monospace" font-size="11">
|
||||
src/azure-kubernetes-engineer.ts
|
||||
</text>
|
||||
|
||||
<!-- code text (shrunk version of your snippet) -->
|
||||
<g font-family="monospace" font-size="11">
|
||||
<text x="20" y="50" fill="#22c55e">
|
||||
import { AzureKubernetesServices } from '@azure/kubernetes-engine';
|
||||
</text>
|
||||
<text x="20" y="68" fill="#22c55e">
|
||||
import { Engineer, Experience } from '@professional/core';
|
||||
</text>
|
||||
|
||||
<text x="20" y="92" fill="#22c55e">export</text>
|
||||
<text x="70" y="92" fill="#22c55e">class</text>
|
||||
<text x="130" y="92" fill="#38bdf8">AzureKubernetesEngineer</text>
|
||||
<text x="325" y="92" fill="#22c55e">implements</text>
|
||||
<text x="410" y="92" fill="#e5e7eb">Engineer {</text>
|
||||
|
||||
<text x="36" y="112" fill="#e5e7eb">
|
||||
constructor(private azure: AzureKubernetesServices) {}
|
||||
</text>
|
||||
|
||||
<text x="36" y="132" fill="#22c55e">experience</text>
|
||||
<text x="120" y="132" fill="#e5e7eb">: Experience = { years: 8,</text>
|
||||
<text x="36" y="150" fill="#22c55e">specialties</text>
|
||||
<text x="130" y="150" fill="#e5e7eb">
|
||||
: ['application dev','config mgmt','cloud']
|
||||
</text>
|
||||
<text x="36" y="168" fill="#e5e7eb">};</text>
|
||||
|
||||
<text x="36" y="188" fill="#38bdf8">
|
||||
deploySolution(solution: any) { return this.azure.deploy({ solution }); }
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</section>
|
||||
|
||||
<section class="contact" id="contact">
|
||||
<div>
|
||||
<div style="font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px;">
|
||||
Contact
|
||||
</div>
|
||||
<p>
|
||||
For remote DevOps, SRE, SOC or DevSecOps work, email me or visit my site.
|
||||
</p>
|
||||
</div>
|
||||
<div class="contact-links">
|
||||
<span>e: <a href="mailto:zeshan@azuredevops.co.uk">zeshan@azuredevops.co.uk</a></span>
|
||||
<span>w: <a href="https://azuredevops.co.uk" target="_blank" rel="noopener">azuredevops.co.uk</a></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
© <span id="year"></span> Zeshan Tariq · Minimal dark profile
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById("year").textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
281
cv archive/index4.html
Normal file
281
cv archive/index4.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>ZT – DevOps · SRE · SOC</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
/* ChatGPT-like calm neutral palette */
|
||||
--bg: #141618;
|
||||
--bg-alt: #1a1c1e;
|
||||
--card: #1b1d1f;
|
||||
--border: #2a2c2e;
|
||||
--accent: #10b981; /* green like ChatGPT’s “accept” button */
|
||||
--accent-soft: #34d399;
|
||||
--text-main: #e5e7eb;
|
||||
--text-soft: #bfc4c9;
|
||||
--text-muted: #8b8f94;
|
||||
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
|
||||
body {
|
||||
min-height:100vh;
|
||||
background: radial-gradient(circle at top, #1c1e20 0%, #141618 70%);
|
||||
color: var(--text-main);
|
||||
font-family: var(--font-main);
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
padding:28px 16px;
|
||||
}
|
||||
|
||||
.shell { width:100%; max-width:780px; }
|
||||
|
||||
header {
|
||||
margin-bottom: 26px;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size:22px;
|
||||
letter-spacing:0.18em;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size:11px;
|
||||
letter-spacing:0.24em;
|
||||
text-transform:uppercase;
|
||||
color: var(--text-soft);
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
.tagline strong { color:var(--accent); }
|
||||
|
||||
.status {
|
||||
font-size:11px;
|
||||
color:var(--text-soft);
|
||||
border-radius:999px;
|
||||
border:1px solid var(--border);
|
||||
padding:5px 12px;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:6px;
|
||||
white-space:nowrap;
|
||||
background:#1a1c1e;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width:8px; height:8px;
|
||||
border-radius:50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.hero { margin-bottom:24px; }
|
||||
|
||||
.hero-text p {
|
||||
font-size:13px;
|
||||
color:var(--text-soft);
|
||||
max-width:520px;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.hero-text p strong { color:var(--text-main); }
|
||||
|
||||
.actions { display:flex; gap:10px; flex-wrap:wrap; }
|
||||
|
||||
.btn-primary {
|
||||
border-radius:999px;
|
||||
padding:8px 18px;
|
||||
font-size:11px;
|
||||
letter-spacing:0.14em;
|
||||
text-transform:uppercase;
|
||||
font-weight:600;
|
||||
border:1px solid var(--accent);
|
||||
background:#121415;
|
||||
color:var(--text-main);
|
||||
text-decoration:none;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
transition:0.15s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background:#161819;
|
||||
border-color:var(--accent-soft);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary svg { width:14px; height:14px; }
|
||||
|
||||
.code-card {
|
||||
border-radius:16px;
|
||||
border:1px solid var(--border);
|
||||
background: var(--card);
|
||||
padding:14px;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
|
||||
.code-label {
|
||||
font-family:var(--font-mono);
|
||||
font-size:11px;
|
||||
color:var(--text-muted);
|
||||
margin-bottom:8px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:6px;
|
||||
}
|
||||
|
||||
.code-dot {
|
||||
width:7px; height:7px;
|
||||
border-radius:50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.code-svg { width:100%; display:block; }
|
||||
|
||||
.contact {
|
||||
border-top:1px solid var(--border);
|
||||
padding-top:14px;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
flex-wrap:wrap;
|
||||
gap:12px;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
.contact-links { display:flex; flex-direction:column; gap:4px; }
|
||||
|
||||
.contact-links span { color:var(--text-muted); }
|
||||
|
||||
a { color:var(--accent); }
|
||||
a:hover { text-decoration:underline; }
|
||||
|
||||
footer {
|
||||
margin-top:10px;
|
||||
font-size:11px;
|
||||
color:var(--text-muted);
|
||||
}
|
||||
|
||||
@media(max-width:640px){
|
||||
header { flex-direction:column; align-items:flex-start; }
|
||||
.contact { flex-direction:column; align-items:flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
|
||||
<header>
|
||||
<div>
|
||||
<div class="name">Zeshan Tariq</div>
|
||||
<div class="tagline">
|
||||
<strong>SOC</strong> / SRE / DEVOPS / DEVSECOPS / KUBERNETES
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<span class="status-dot"></span>
|
||||
Available for remote roles · contract & permanent
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<p>
|
||||
Cloud & platform engineer focused on <strong>Azure</strong>,
|
||||
<strong>Kubernetes</strong>, and <strong>secure automation</strong>.
|
||||
For full details, see the CV.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a href="cv-zeshan-tariq.pdf" class="btn-primary" download>
|
||||
Download CV
|
||||
<svg viewBox="0 0 24 24"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 18h14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="code-card">
|
||||
<div class="code-label">
|
||||
<span class="code-dot"></span> azure-kubernetes-engineer.ts
|
||||
</div>
|
||||
|
||||
<svg class="code-svg" viewBox="0 0 640 200">
|
||||
<rect x="0.5" y="0.5" width="639" height="199" rx="10" fill="#1b1d1f" stroke="#2a2c2e"/>
|
||||
<rect x="10" y="10" width="620" height="22" rx="7" fill="#1b1d1f"/>
|
||||
<circle cx="24" cy="21" r="4" fill="#ef4444"/>
|
||||
<circle cx="38" cy="21" r="4" fill="#f59e0b"/>
|
||||
<circle cx="52" cy="21" r="4" fill="#10b981"/>
|
||||
<text x="70" y="25" fill="#777" font-family="monospace" font-size="11">
|
||||
src/azure-kubernetes-engineer.ts
|
||||
</text>
|
||||
|
||||
<g font-family="monospace" font-size="11">
|
||||
<text x="20" y="50" fill="#10b981">
|
||||
import { AzureKubernetesServices } from '@azure/kubernetes-engine';
|
||||
</text>
|
||||
<text x="20" y="68" fill="#10b981">
|
||||
import { Engineer, Experience } from '@professional/core';
|
||||
</text>
|
||||
|
||||
<text x="20" y="92" fill="#10b981">export</text>
|
||||
<text x="70" y="92" fill="#10b981">class</text>
|
||||
<text x="130" y="92" fill="#38bdf8">AzureKubernetesEngineer</text>
|
||||
<text x="325" y="92" fill="#10b981">implements</text>
|
||||
<text x="410" y="92" fill="#e5e7eb">Engineer {</text>
|
||||
|
||||
<text x="36" y="112" fill="#e5e7eb">
|
||||
constructor(private azure: AzureKubernetesServices) {}
|
||||
</text>
|
||||
|
||||
<text x="36" y="132" fill="#10b981">experience</text>
|
||||
<text x="120" y="132" fill="#e5e7eb">: Experience = { years: 8,</text>
|
||||
<text x="36" y="150" fill="#10b981">specialties</text>
|
||||
<text x="130" y="150" fill="#e5e7eb">
|
||||
: ['application dev','config mgmt','cloud']
|
||||
</text>
|
||||
<text x="36" y="168" fill="#e5e7eb">};</text>
|
||||
|
||||
<text x="36" y="188" fill="#38bdf8">
|
||||
deploySolution(solution: any) { return this.azure.deploy({ solution }); }
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</section>
|
||||
|
||||
<section class="contact">
|
||||
<div>
|
||||
<div style="font-family:var(--font-mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-soft); margin-bottom:4px;">
|
||||
Contact
|
||||
</div>
|
||||
|
||||
<p>
|
||||
For remote DevOps, SRE, SOC or DevSecOps work, email me or visit my site.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-links">
|
||||
<span>e: <a href="mailto:zeshan@azuredevops.co.uk">zeshan@azuredevops.co.uk</a></span>
|
||||
<span>w: <a href="https://azuredevops.co.uk" target="_blank" rel="noopener">azuredevops.co.uk</a></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
© <span id="year"></span> Zeshan Tariq
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.getElementById("year").textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
491
cv archive/index5.html
Normal file
491
cv archive/index5.html
Normal file
@@ -0,0 +1,491 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Zeshan Tariq – DevOps · SRE · SOC</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #141618;
|
||||
--bg-alt: #1a1c1e;
|
||||
--bg-chat: #181a1c;
|
||||
--bubble-assistant: #202326;
|
||||
--bubble-user: #191b1e;
|
||||
--bubble-system: #111315;
|
||||
--border-subtle: #2a2c2e;
|
||||
--accent: #10b981;
|
||||
--accent-soft: #34d399;
|
||||
--text-main: #e5e7eb;
|
||||
--text-soft: #c2c6cb;
|
||||
--text-muted: #8b8f94;
|
||||
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace;
|
||||
--radius-bubble: 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top, #1d1f21 0%, #141618 60%, #111315 100%);
|
||||
color: var(--text-main);
|
||||
font-family: var(--font-main);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 12px;
|
||||
}
|
||||
|
||||
.app {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header / top bar */
|
||||
.top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.top-title span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.top-status {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: #151719;
|
||||
color: var(--text-soft);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* Chat container */
|
||||
.chat-shell {
|
||||
border-radius: 16px;
|
||||
background: var(--bg-chat);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 16px 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.chat-inner {
|
||||
padding: 0 12px 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.row.system { justify-content: center; }
|
||||
|
||||
.row.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.row.user .bubble {
|
||||
background: var(--bubble-user);
|
||||
border-radius: var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble);
|
||||
}
|
||||
|
||||
.row.assistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.row.assistant .bubble {
|
||||
background: var(--bubble-assistant);
|
||||
border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;
|
||||
}
|
||||
|
||||
.row.system .bubble {
|
||||
background: var(--bubble-system);
|
||||
border-radius: 999px;
|
||||
padding-inline: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.avatar.assistant {
|
||||
background: #101112;
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.avatar.user {
|
||||
background: #0f766e;
|
||||
color: #ecfdf5;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 10px 12px;
|
||||
max-width: 100%;
|
||||
font-size: 13px;
|
||||
color: var(--text-soft);
|
||||
border: 1px solid rgba(42, 44, 46, 0.9);
|
||||
}
|
||||
|
||||
.bubble strong {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bubble h1 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.bubble small {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* CV button inside bubble */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
padding: 7px 16px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--accent);
|
||||
background: #111315;
|
||||
color: var(--text-main);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #151719;
|
||||
border-color: var(--accent-soft);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* Code bubble */
|
||||
pre {
|
||||
margin-top: 6px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
background: #111315;
|
||||
border: 1px solid #242628;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
overflow-x: auto;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* Contact list inside bubble */
|
||||
.contact-list {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contact-list div {
|
||||
margin-bottom: 2px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-soft);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.top-bar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- Top bar -->
|
||||
<div class="top-bar">
|
||||
<div class="top-title">
|
||||
<span>Zeshan Tariq</span> · DevOps · SRE · SOC
|
||||
</div>
|
||||
<div class="top-status">
|
||||
<span class="status-dot"></span>
|
||||
Available for remote roles · contract & permanent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat UI -->
|
||||
<div class="chat-shell">
|
||||
<div class="chat-inner">
|
||||
<!-- System-ish intro -->
|
||||
<div class="row system">
|
||||
<div class="bubble">
|
||||
Profile loaded: <strong>SOC / SRE / DevOps / DevSecOps / Kubernetes</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User asks who you are -->
|
||||
<div class="row user">
|
||||
<div class="bubble">
|
||||
Who are you and what do you do?
|
||||
</div>
|
||||
<div class="avatar user">U</div>
|
||||
</div>
|
||||
|
||||
<!-- Assistant: intro -->
|
||||
<div class="row assistant">
|
||||
<div class="avatar assistant">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
<path d="M8 16.5c1-.9 2.3-1.5 4-1.5s3 .6 4 1.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="bubble">
|
||||
<h1>Zeshan Tariq</h1>
|
||||
<small>SOC · SRE · DevOps · DevSecOps · Kubernetes</small>
|
||||
<p style="margin-top:6px;">
|
||||
I’m a cloud & platform engineer focused on <strong>Azure</strong>,
|
||||
<strong>Kubernetes</strong>, and <strong>secure automation</strong> — combining
|
||||
<strong>SOC practices</strong> with <strong>SRE principles</strong> to keep systems
|
||||
reliable and secure.
|
||||
</p>
|
||||
<div class="chip-row">
|
||||
<div class="chip">Azure · AKS</div>
|
||||
<div class="chip">Kubernetes · Docker</div>
|
||||
<div class="chip">Terraform · CI/CD</div>
|
||||
<div class="chip">Sentinel · SOC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User asks for CV -->
|
||||
<div class="row user">
|
||||
<div class="bubble">
|
||||
Can I see the full details of your experience?
|
||||
</div>
|
||||
<div class="avatar user">U</div>
|
||||
</div>
|
||||
|
||||
<!-- Assistant: CV download -->
|
||||
<div class="row assistant">
|
||||
<div class="avatar assistant">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
<path d="M8 16.5c1-.9 2.3-1.5 4-1.5s3 .6 4 1.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="bubble">
|
||||
Absolutely. The CV carries all the detail (roles, dates, full stack, and examples).
|
||||
<br />
|
||||
<a href="cv-zeshan-tariq.pdf" class="btn-primary" download>
|
||||
Download CV
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M12 3v12m0 0 4-4m-4 4-4-4M5 18h14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User asks what you actually do -->
|
||||
<div class="row user">
|
||||
<div class="bubble">
|
||||
In a sentence or two, what kind of work do you do?
|
||||
</div>
|
||||
<div class="avatar user">U</div>
|
||||
</div>
|
||||
|
||||
<!-- Assistant: short skills summary -->
|
||||
<div class="row assistant">
|
||||
<div class="avatar assistant">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
<path d="M8 16.5c1-.9 2.3-1.5 4-1.5s3 .6 4 1.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="bubble">
|
||||
I design, build and operate <strong>Azure</strong> and <strong>Kubernetes</strong> platforms,
|
||||
automate infrastructure with <strong>Terraform/Bicep</strong>, run
|
||||
<strong>CI/CD pipelines</strong>, and use <strong>SOC tooling</strong>
|
||||
and <strong>SRE metrics</strong> to keep services healthy.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User asks for code sample -->
|
||||
<div class="row user">
|
||||
<div class="bubble">
|
||||
Show me a small code sample that represents how you think.
|
||||
</div>
|
||||
<div class="avatar user">U</div>
|
||||
</div>
|
||||
|
||||
<!-- Assistant: your TypeScript snippet in a code bubble -->
|
||||
<div class="row assistant">
|
||||
<div class="avatar assistant">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
<path d="M8 16.5c1-.9 2.3-1.5 4-1.5s3 .6 4 1.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="bubble">
|
||||
Here’s a condensed TypeScript-style example that reflects what I do with Azure, AKS and
|
||||
translating requirements into platform configuration:
|
||||
<pre><code>import { AzureKubernetesServices } from '@azure/kubernetes-engine';
|
||||
import { Engineer, Experience } from '@professional/core';
|
||||
|
||||
export class AzureKubernetesEngineer implements Engineer {
|
||||
constructor(private azureServices: AzureKubernetesServices) {}
|
||||
|
||||
experience: Experience = {
|
||||
years: 8,
|
||||
sectors: ['government', 'consultancy', 'finance'],
|
||||
specialties: [
|
||||
'application development',
|
||||
'configuration management',
|
||||
'public cloud deployment',
|
||||
],
|
||||
};
|
||||
|
||||
deploySolution(solution: any) {
|
||||
return this.azureServices.deploy({
|
||||
solution,
|
||||
orchestration: 'Kubernetes',
|
||||
cloud: 'Azure',
|
||||
});
|
||||
}
|
||||
|
||||
bridgeBusinessAndTechnology(requirements: any) {
|
||||
return this.azureServices.configure(requirements);
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User asks how to contact -->
|
||||
<div class="row user">
|
||||
<div class="bubble">
|
||||
How do I contact you if I want to talk about a role?
|
||||
</div>
|
||||
<div class="avatar user">U</div>
|
||||
</div>
|
||||
|
||||
<!-- Assistant: contact bubble -->
|
||||
<div class="row assistant" id="contact">
|
||||
<div class="avatar assistant">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
<path d="M8 16.5c1-.9 2.3-1.5 4-1.5s3 .6 4 1.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="1.2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="bubble">
|
||||
The easiest way is email, but you can also find more context on my site.
|
||||
<div class="contact-list">
|
||||
<div>e: <a href="mailto:zeshan@azuredevops.co.uk">zeshan@azuredevops.co.uk</a></div>
|
||||
<div>w: <a href="https://azuredevops.co.uk" target="_blank" rel="noopener">azuredevops.co.uk</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<span>© <span id="year"></span> Zeshan Tariq</span>
|
||||
<span>Minimal chat-style profile · CV-first</span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("year").textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user