332 lines
8.4 KiB
HTML
332 lines
8.4 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;
|
||
--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>
|