matx104.com.pk

Cloud Security · DevSecOps · Multi-Cloud Systems Leadership Personal flagship site of Muhammad Abdullah Tariq — Pakistan's youngest CISSP at 22, Lead Multi Cloud DevOps Engineer.

🌐 Live: matx104.com.pk 📄 Resume: Download PDF · Source HTML 🔗 Connect: LinkedIn · GitHub · TopMate · Upwork

A vanilla HTML/CSS/JavaScript single-page application with no build step, hosted on GitHub Pages. Designed to surface 7+ years of cloud security and DevSecOps work across a clear hierarchy: hero credentials, flagship project constellation, real LinkedIn recommendations, and a bookable services layer.

---

Table of Contents

• Pages
• Architecture
• Ambient Experience
• Content Management
• Local Development
• Deployment
• Forms (Formspree)
• Theming
• Accessibility & Performance
• License

---

Pages

A 10-page hash-routed SPA. Each page is a function in js/pages.js returning an HTML string.

Route	Purpose
/ (Home)	Hero · 6-stat proof strip · WAZIR Stack flagship + 6 standalones · 6 featured testimonials · Ask MAT (coming soon)
/about	Monarch MAT brand-forward identity · 21 awards · Hafiz-ul-Quran + craft anchors
/skills	8 capability domain clusters (Cloud, Security, DevOps, Containers, Languages, Monitoring, GRC, Tools)
/journey	12-role chronological career timeline + personal-growth journey
/projects	The WAZIR Stack (3 bridged) + 6 Standalone Flagships + Tier-2 builds (15 total projects)
/certifications	9 anchor credentials + 15 issuer clusters covering 100+ certifications
/testimonials	30 real LinkedIn recommendations with category-filter bar (leadership / managers / reports / clients / peers / academic)
/services	"What I Do" capability domains (Option 2 voice) + 4 bookable channels (TopMate · Upwork · Mentoga · LinkedIn)
/blog	Roadmap of upcoming long-form posts
/personal-sites	Curated personal-sites collection (coming soon)
/contact	Formspree-powered contact form with inquiry-type routing

---

Architecture

Stack

• HTML / CSS / JavaScript — vanilla, no framework, no build step
• Hash-based SPA router (js/router.js) — works on GitHub Pages without server-side rewrites
• Custom canvas cosmos engine (js/cosmos.js) — stars, nebulae, shooting stars, click pulses
• particles.js — constellation network layer (mouse-grab + click-push interactivity)
• Formspree — contact form delivery (no backend needed)
• Google Fonts — Orbitron (display) · Rajdhani (body) · JetBrains Mono (mono)
• Font Awesome 6.5.1 — iconography

File Map

.
├── index.html                          # Single page shell, routes render into #app
├── CNAME                               # Custom domain (matx104.com.pk)
├── README.md                           # This file
├── CLAUDE.md                           # Agent instructions (canonical)
├── AGENTS.md → CLAUDE.md               # Symlink for tool-agnostic agent discovery
│
├── css/
│   └── styles.css                      # Single stylesheet (~6,500 lines, theme-tokenized)
│
├── js/
│   ├── data.js                         # PortfolioData global — all content lives here
│   ├── pages.js                        # Pages.{name}() functions return HTML strings
│   ├── router.js                       # Hash routing + page-init hooks
│   ├── main.js                         # Loader, theme, particles, ambient layers, magnetism
│   └── cosmos.js                       # Custom canvas engine for the cosmic backdrop
│
├── docs/
│   ├── profile-data.md                 # Source-of-truth for ALL content (read first)
│   ├── personal-sites-inventory.md     # Private inventory of personal sites
│   └── agents/                         # Matt Pocock engineering-skills config
│       ├── issue-tracker.md
│       ├── triage-labels.md
│       └── domain.md
│
└── assets/
    ├── Muhammad_Abdullah_Tariq_Resume.pdf  # ATS-friendly resume (3 pages)
    └── resume.html                         # Source HTML for the resume PDF

---

Ambient Experience

The site uses five coordinated visual layers to feel alive without overwhelming content. Each layer disables cleanly under prefers-reduced-motion.

1. Cosmos canvas — js/cosmos.js (z-index 0)

A custom 2D canvas engine inspired by the visual identity of the ARMORY project. Five sub-layers in a single rAF loop:

• Deep starfield — up to 720 tiny pinpoints with slow scroll-parallax (4% of scroll distance)
• Mid starfield — up to 240 brighter twinkling stars with halos · ~30% accent-colored · cursor-excite on click (within 220px)
• Nebulae — up to 7 drifting radial-gradient clouds (5-color palette dark · 5-color saturated palette light) · pre-rendered to offscreen canvas for drawImage perf
• Shooting stars — accent-colored streaks every 2-5 seconds (desktop) or 4-9 seconds (mobile)
• Click pulses — expanding rings rendered at click points; nearby mid-stars excite

Counts scale to viewport for performance:

Viewport	Deep stars	Mid stars	Nebulae	Meteor freq
≤ 480px (phones)	180	60	4	4-9s
481-768px (tablets)	360	120	5	4-9s
> 768px (desktop)	720	240	7	2-5s

Theme-reactive: reads --accent from CSS; re-seeds on theme toggle so dark mode uses cyan/blue/purple/pink/emerald, light mode uses saturated blue/purple/pink/sky/indigo at higher alpha to remain visible against white.

2. Constellation network — particles.js (z-index 1)

130 particles (55 on mobile) connected by lines within 150px (110px on mobile). Mouse-grab at 220px range; click-push spawns 4 new particles. Theme-reactive via --accent re-init.

3. Cursor spotlight — CSS variables (z-index 1)

Soft 720px radial glow tracks cursor position via --mouse-x / --mouse-y CSS custom properties. JS only updates the position on rAF; browser handles the paint. mix-blend-mode: screen on dark, multiply on light. Disabled on coarse pointers.

4. Scan-grid backdrop — pure CSS (z-index 0)

Faint 48px linear-gradient grid drifting over 90 seconds, with a radial mask vignetting toward the edges. Pure CSS, no JS cost. Cyberpunk DevSecOps signature.

5. Card magnetism — js/main.js

13 card classes auto-bound (.flagship-card, .stack-card, .capability-card, .anchor-cert-card, .cluster-card, .award-card, .booking-card, .career-card, .testimonial-card, .home-quote-card, .home-project-card, .home-cert-badge, .home-skill-chip).

Cards tilt up to 4° toward the cursor via perspective(1000px) rotateX/rotateY. An inner radial halo (320px) tracks the cursor's exact position inside each card. Re-bound on every page navigation since the SPA recreates DOM.

---

Content Management

All content flows through one of two source-of-truth surfaces:

1. docs/profile-data.md — the canonical document. Aggregates LinkedIn experience, recommendations, awards, education, Credly badges, CertDirectory certs, Microsoft Learn transcript, Coursera credentials, roadmap.sh skills, plus identity / hero positioning / proof stats.
2. js/data.js — runtime mirror of the above, shaped for direct rendering. Hand-curated from profile-data.md.

Update protocol: when LinkedIn / Credly / Coursera change, refresh docs/profile-data.md first, then propagate the deltas to js/data.js.

The resume PDF (assets/Muhammad_Abdullah_Tariq_Resume.pdf) is generated from assets/resume.html via headless Chromium. To regenerate after content changes: edit the HTML → use any browser's Print → Save as PDF, or run a Playwright script with page.pdf().

---

Local Development

# Clone
git clone https://github.com/matx104/CV.git matx104-cv
cd matx104-cv

# Run any static server
python3 -m http.server 8765
# or: npx serve, caddy, etc.

# Open
open http://localhost:8765

No build step. No dependencies to install. Edit any file, refresh the browser.

---

Deployment

Hosted on GitHub Pages from the main branch root. Pushing to main auto-triggers a Pages rebuild (~60 s).

• Custom domain: matx104.com.pk (via CNAME file)
• Cert: GitHub Pages auto-issues Let's Encrypt
• Pages source: Deploy from a branch → main → / (root)

Why GitHub Pages over Vercel/Netlify

For a static SPA with hash routing, GitHub Pages is sufficient and removes a vendor dependency. The eventual "Ask MAT" AI guide will run on Oracle Cloud (separate from this static site), bridged via a hardened HTTP gateway — keeping the public surface on GitHub Pages and the compute on infrastructure I already own.

---

Forms (Formspree)

The contact form posts via vanilla JS AJAX to a single Formspree endpoint (xbdwywrl). Inline status messages — no page redirect.

Spam protection: hidden _gotcha honeypot + Formspree's reCAPTCHA fallback.

Inquiry types routed to a single inbox via the type field:

• General Inquiry · Project Collaboration · Security Consulting · Mentoring · Job Opportunity · Speaking · Recruiter

The Services page CTAs route bookable engagements to dedicated platforms instead of email:

• TopMate (paid 1:1 mentoring · CISSP prep · career guidance)
• Upwork (hourly + fixed-price professional engagements · 7+ years Top-Rated)
• Mentoga (free mentoring for Pakistan-focused students)
• LinkedIn (recruiter outreach · speaking · podcast invitations)

To swap or rotate the Formspree endpoint:

1. Create a new form at formspree.io/forms
2. Replace the form ID in js/pages.js (search for formspree.io/f/)

---

Theming

Dark mode is the default; visitors can toggle to light via the navbar moon/sun icon. Theme persists in localStorage. CSS custom properties drive every color token — --accent, --accent-subtle, --bg-base, --bg-elevated, --text-primary, --text-secondary, --text-muted, --border, etc.

When the theme toggles, the cosmos canvas and particles constellation both re-init so their colors match the new palette.

---

Accessibility & Performance

• prefers-reduced-motion: reduce — disables cosmos, particles, spotlight, scan-grid, magnetism, pulse animations
• pointer: coarse — drops cursor-aware effects (no real cursor to track), keeps gentle hover lift
• Cosmos canvas caps devicePixelRatio at 2× for retina perf · auto-rescales counts on viewport breakpoint crossing
• All scroll/mousemove handlers passive + requestAnimationFrame throttled
• Symmetric grids — every section uses explicit column counts so no orphan rows at any breakpoint:

Section	Cards	Grid
Hero stats	6	6 / 3 / 2 col
Standalones (home + projects)	6	3 / 2 / 1 col
Capability Domains	6	3 / 2 / 1 col
Booking Channels	4	2 / 1 col
Anchor Credentials	9	3 / 2 / 1 col
Issuer Clusters	15	3 / 2 / 1 col
Awards	21	3 / 2 / 1 col
Home testimonials strip	6	3 / 2 / 1 col
Featured testimonials filter	30	3 col with category filter

Resume PDF is ATS-friendly: single column, semantic HTML, standard fonts (Inter / Helvetica fallback chain), no tables for layout, real text layer extractable by Workday / Greenhouse / Lever.

---

Credits & Inspiration

• Layered cosmic visual identity — inspired by my ARMORY project's animation system (deep starfield + mid twinkles + nebulae + click-pulses). Built from scratch for this site, not copied.
• Hero positioning + IA — distilled from a structured grilling session against Matt Pocock-style engineering skills (docs/agents/).
• Testimonials, awards, certifications — pulled directly from LinkedIn, Credly, CertDirectory, Microsoft Learn, Coursera, and roadmap.sh.

---

License

The code is mine. The content (writing, recommendations, awards, project descriptions) is mine. Don't copy the personal narrative or testimonials — those belong to the people who wrote them. The structural patterns (hash routing, ambient cosmos, source-of-truth MD, symmetric grids, Formspree integration) are free to learn from.

---

Built with discipline, ﷺ.