zeshan/hurricane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e43a6b0d38b91928442c5bddda4d34249cfacc91
hurricane/cv/index.html

565 lines
17 KiB
HTML
Raw Normal View History

map
2026-02-12 17:26:28 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Zeshan Tariq – Azure DevOps · SRE · SOC · Kubernetes Engineer</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- META DESCRIPTION -->
<meta name="description" content="Zeshan Tariq – Azure DevOps, SRE, SOC and DevSecOps engineer specialising in Azure, Kubernetes (AKS), Terraform, CI/CD and secure cloud automation. Available for remote contract & permanent roles.">
<!-- KEYWORDS -->
<meta name="keywords" content="Azure DevOps Engineer, SRE, SOC Engineer, DevSecOps, Kubernetes Engineer, AKS, Terraform, Cloud Engineer, Remote DevOps, Platform Engineer">
<!-- CANONICAL URL -->
<link rel="canonical" href="https://azuredevops.co.uk" />
<!-- OPEN GRAPH (SOCIAL SHARING) -->
<meta property="og:title" content="Zeshan Tariq – Azure DevOps & SRE Engineer">
<meta property="og:description" content="Cloud & platform engineer specialising in Azure, Kubernetes, DevOps, SOC and secure automation. Available for remote contract & permanent roles.">
<meta property="og:url" content="https://azuredevops.co.uk">
<meta property="og:type" content="website">
<!-- Optional: update this to your real preview image -->
<meta property="og:image" content="https://azuredevops.co.uk/preview.jpg">
<!-- TWITTER CARD -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Zeshan Tariq – DevOps · SRE · SOC">
<meta name="twitter:description" content="Azure DevOps, SRE, SOC and DevSecOps engineer. Kubernetes, AKS, CI/CD, Terraform — available for remote roles.">
<meta name="twitter:image" content="https://azuredevops.co.uk/preview.jpg">
<!-- STRUCTURED DATA: PERSON -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Zeshan Tariq",
"jobTitle": "Azure DevOps / SRE / SOC Engineer",
"url": "https://azuredevops.co.uk",
"email": "mailto:zeshan@azuredevops.co.uk",
"description": "Cloud & platform engineer specialising in Azure, Kubernetes (AKS), Terraform, CI/CD and secure cloud automation.",
"knowsAbout": [
"Azure",
"Kubernetes",
"AKS",
"DevOps",
"SRE",
"SOC",
"DevSecOps",
"Terraform",
"CI/CD Pipelines",
"Cloud Security"
]
}
</script>
<style>
:root {
--bg: #141618;
--bg-chat: #181a1c;
--bubble-assistant: #202326;
--bubble-user: #191b1e;
--bubble-system: #111315;
--border-subtle: #2a2c2e;
--accent: #10b981; /* green */
--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;
position: relative;
}
/* soft bottom vignette */
body::after {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 120px;
background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
pointer-events: none;
z-index: 0;
}
.app {
width: 100%;
max-width: 900px;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
/* 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: 14px 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.assistant {
justify-content: flex-start;
}
.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);
}
.row.system .bubble {
background: var(--bubble-system);
border-radius: 999px;
padding-inline: 16px;
text-align: center;
font-size: 12px;
color: var(--text-soft);
}
.row.user .bubble {
background: var(--bubble-user);
border-radius: var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble);
}
.row.assistant .bubble {
background: var(--bubble-assistant);
border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;
border-left: 3px solid var(--accent); /* ChatGPT-style accent bar */
padding-left: 14px;
}
.bubble h1 {
font-size: 15px;
margin-bottom: 4px;
}
.bubble small {
font-size: 11px;
color: var(--text-muted);
}
.bubble strong {
color: var(--text-main);
font-weight: 600;
}
.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 */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
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: 11px;
font-family: var(--font-mono);
overflow-x: auto;
color: var(--text-soft);
}
code {
font-family: var(--font-mono);
white-space: pre;
}
.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>
<!-- Hidden H1 for SEO (not visible, but indexable) -->
<h1 style="position:absolute; left:-9999px; top:-9999px;">
Zeshan Tariq – Azure DevOps, SRE, SOC & Kubernetes Engineer
</h1>
<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 contract &amp; permanent roles
</div>
</div>
<!-- Chat UI -->
<div class="chat-shell" aria-label="Profile overview of Zeshan Tariq, Azure DevOps, SRE, SOC and Kubernetes Engineer">
<div class="chat-inner">
<!-- System / intro -->
<div class="row system">
<div class="bubble">
Profile: <strong>SOC / SRE / DevOps / DevSecOps / Kubernetes</strong>
</div>
</div>
<!-- USER: who are you -->
<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 + quick 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">
<h1>Zeshan Tariq</h1>
<small>SOC · SRE · DevOps · DevSecOps · Kubernetes</small>
<p style="margin-top:6px;">
I’m a cloud &amp; 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: CV -->
<div class="row user">
<div class="bubble">
Where can I see your full experience and roles?
</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">
The CV has all the detail — roles, dates, clients, and full stack.
<br />
<!-- replace filename with your real CV if needed -->
<a href="zt1125.docx" 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: what kind of work -->
<div class="row user">
<div class="bubble">
In practical terms, what kind of work do you do?
</div>
<div class="avatar user">U</div>
</div>
<!-- ASSISTANT: concise work 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 and operate <strong>Azure &amp; AKS platforms</strong>, automate
infrastructure with <strong>Terraform/Bicep</strong>, build
<strong>CI/CD pipelines</strong>, and use <strong>SOC tooling</strong>
and <strong>SRE metrics</strong> to keep services secure and reliable.
</div>
</div>
<!-- USER: 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: TypeScript snippet -->
<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">
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: contact -->
<div class="row user">
<div class="bubble">
How do I contact you about a role?
</div>
<div class="avatar user">U</div>
</div>
<!-- ASSISTANT: contact info -->
<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 simplest way is email — the site and CV give extra context if you need it.
<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>Chat-style profile · CV-first</span>
</footer>
</div>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>
Reference in New Issue Copy Permalink