282 lines
7.7 KiB
HTML
282 lines
7.7 KiB
HTML
<!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>
|