498 lines
14 KiB
HTML
498 lines
14 KiB
HTML
<!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>
|