492 lines
14 KiB
HTML
492 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: #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>
|