{"id":7,"date":"2026-08-18T22:34:00","date_gmt":"2026-08-18T22:34:00","guid":{"rendered":"https:\/\/zeeshansaqib.com\/?page_id=7"},"modified":"2026-08-18T22:35:37","modified_gmt":"2026-08-18T22:35:37","slug":"home","status":"publish","type":"page","link":"https:\/\/zeeshansaqib.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nZeeshan Saqib \u2014 WordPress & Automation Developer<\/title>\r\n<meta name=\"description\" content=\"Zeeshan Saqib builds WordPress websites, booking systems and AI-powered automation on Fiverr.\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --bg-void:#0a0e17;\r\n --bg-alt:#0d1220;\r\n --bg-panel:#121826;\r\n --bg-panel-2:#161e30;\r\n --border:#1e2636;\r\n --accent-flow:#ffd23f;\r\n --accent-flow-dim:#ffd23f33;\r\n --accent-signal:#ff8a3d;\r\n --accent-signal-dim:#ff8a3d33;\r\n --text-primary:#f5f7fa;\r\n --text-muted:#8d96ac;\r\n --text-faint:#5b6478;\r\n --dot-color:rgba(255,255,255,0.05);\r\n --node-highlight-bg:#332b0f;\r\n --node-signal-bg:#2a1c10;\r\n --on-accent:#14161c;\r\n --radius:14px;\r\n --maxw:1180px;\r\n color-scheme:dark;\r\n }\r\n html[data-theme=\"light\"]{\r\n --bg-void:#f5f6fb;\r\n --bg-alt:#eef1f8;\r\n --bg-panel:#ffffff;\r\n --bg-panel-2:#eef1f8;\r\n --border:#dfe3ee;\r\n --accent-flow:#b8790a;\r\n --accent-flow-dim:#b8790a22;\r\n --accent-signal:#e8681f;\r\n --accent-signal-dim:#e8681f22;\r\n --text-primary:#12151f;\r\n --text-muted:#4b5268;\r\n --text-faint:#848da3;\r\n --dot-color:rgba(10,14,23,0.07);\r\n --node-highlight-bg:#fff6e0;\r\n --node-signal-bg:#fff1e6;\r\n color-scheme:light;\r\n }\r\n *{box-sizing:border-box; margin:0; padding:0;}\r\n html{scroll-behavior:smooth;}\r\n body{\r\n background:var(--bg-void);\r\n color:var(--text-primary);\r\n font-family:'Inter',sans-serif;\r\n line-height:1.6;\r\n overflow-x:hidden;\r\n transition:background .35s ease, color .35s ease;\r\n position:relative;\r\n }\r\n html.has-custom-cursor, html.has-custom-cursor body, html.has-custom-cursor a, html.has-custom-cursor button{\r\n cursor:none;\r\n }\r\n @media (prefers-reduced-motion: reduce){\r\n *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}\r\n }\r\n a{color:inherit; text-decoration:none;}\r\n img{max-width:100%; display:block;}\r\n h1,h2,h3{font-family:'Sora',sans-serif; letter-spacing:-0.01em;}\r\n .mono{font-family:'IBM Plex Mono',monospace;}\r\n .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}\r\n .eyebrow{\r\n font-family:'IBM Plex Mono',monospace;\r\n font-size:0.78rem;\r\n letter-spacing:0.12em;\r\n text-transform:uppercase;\r\n color:var(--accent-flow);\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n margin-bottom:18px;\r\n }\r\n .eyebrow::before{\r\n content:\"\";\r\n width:7px; height:7px; border-radius:50%;\r\n background:var(--accent-flow);\r\n box-shadow:0 0 0 4px var(--accent-flow-dim);\r\n }\r\n a:focus-visible, button:focus-visible{outline:2px solid var(--accent-flow); outline-offset:3px;}\r\n\r\n \/* ---------- AMBIENT BACKGROUND ---------- *\/\r\n .bg-dots{\r\n position:fixed; inset:0; z-index:0; pointer-events:none;\r\n background-image:radial-gradient(var(--dot-color) 1px, transparent 1px);\r\n background-size:26px 26px;\r\n }\r\n .bg-blob{\r\n position:fixed; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;\r\n opacity:0.18;\r\n }\r\n .bg-blob.b1{width:520px; height:520px; background:var(--accent-flow); top:-140px; left:-120px;}\r\n .bg-blob.b2{width:460px; height:460px; background:var(--accent-signal); top:40%; right:-160px;}\r\n .bg-blob.b3{width:420px; height:420px; background:var(--accent-flow); bottom:-160px; left:30%;}\r\n main, header, footer{position:relative; z-index:1;}\r\n\r\n \/* ---------- SCROLL PROGRESS ---------- *\/\r\n .progress-bar{\r\n position:fixed; top:0; left:0; height:3px; width:0%;\r\n background:linear-gradient(90deg, var(--accent-flow), var(--accent-signal));\r\n z-index:200; transition:width .05s linear;\r\n }\r\n\r\n \/* ---------- CUSTOM CURSOR ---------- *\/\r\n .cursor-dot, .cursor-ring{\r\n position:fixed; top:0; left:0; pointer-events:none; z-index:999;\r\n border-radius:50%; transform:translate(-50%,-50%);\r\n }\r\n .cursor-dot{\r\n width:6px; height:6px; background:var(--accent-signal);\r\n transition:background .2s;\r\n }\r\n .cursor-ring{\r\n width:36px; height:36px; border:1px solid var(--accent-flow);\r\n transition:width .18s ease, height .18s ease, border-color .18s ease, background .18s ease;\r\n }\r\n .cursor-ring.hover{\r\n width:64px; height:64px; background:var(--accent-flow-dim); border-color:var(--accent-flow);\r\n }\r\n .cursor-ring.hover::after{\r\n content:\"VIEW\"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;\r\n font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.08em; color:var(--accent-flow);\r\n }\r\n @media (pointer:coarse){ .cursor-dot, .cursor-ring{display:none;} }\r\n\r\n \/* ---------- NAV ---------- *\/\r\n header{\r\n position:sticky; top:0; z-index:100;\r\n background:color-mix(in srgb, var(--bg-void) 82%, transparent);\r\n backdrop-filter:blur(10px);\r\n border-bottom:1px solid var(--border);\r\n }\r\n nav{\r\n max-width:var(--maxw); margin:0 auto; padding:16px 28px;\r\n display:flex; align-items:center; justify-content:space-between; gap:20px;\r\n }\r\n .logo{\r\n display:flex; align-items:center; gap:10px;\r\n font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem;\r\n }\r\n .logo-mark{\r\n width:34px; height:34px; border-radius:9px;\r\n background:linear-gradient(135deg, var(--accent-flow), var(--accent-signal));\r\n display:flex; align-items:center; justify-content:center;\r\n color:var(--on-accent); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:0.85rem;\r\n position:relative;\r\n }\r\n .logo-mark::after{\r\n content:\"\";\r\n position:absolute; inset:-4px;\r\n border:1px solid var(--accent-flow-dim);\r\n border-radius:12px;\r\n }\r\n .nav-links{display:flex; gap:28px; font-size:0.92rem; color:var(--text-muted);}\r\n .nav-links a{transition:color .2s;}\r\n .nav-links a:hover{color:var(--accent-flow);}\r\n .nav-right{display:flex; align-items:center; gap:14px;}\r\n .theme-toggle{\r\n width:52px; height:28px; border-radius:20px; border:1px solid var(--border);\r\n background:var(--bg-panel); position:relative; cursor:pointer; flex-shrink:0;\r\n }\r\n .theme-toggle .knob{\r\n position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;\r\n background:var(--accent-flow); display:flex; align-items:center; justify-content:center;\r\n font-size:11px; transition:left .25s ease;\r\n }\r\n html[data-theme=\"light\"] .theme-toggle .knob{ left:26px; }\r\n .nav-cta{\r\n padding:10px 18px; border-radius:8px;\r\n background:var(--accent-flow); color:var(--on-accent);\r\n font-weight:600; font-size:0.9rem; white-space:nowrap;\r\n transition:transform .2s, box-shadow .2s;\r\n }\r\n .nav-cta:hover{transform:translateY(-2px); box-shadow:0 8px 24px var(--accent-flow-dim);}\r\n .nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}\r\n .nav-toggle span{width:24px; height:2px; background:var(--text-primary);}\r\n\r\n \/* ---------- SECTION SHELL (clear boundaries) ---------- *\/\r\n .section-shell{\r\n position:relative;\r\n padding:96px 0;\r\n border-top:1px solid var(--border);\r\n background:var(--bg-void);\r\n }\r\n .section-shell.alt{ background:var(--bg-alt); }\r\n .section-shell::before{\r\n content:attr(data-tag);\r\n position:absolute; top:22px; left:28px;\r\n font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em;\r\n color:var(--text-faint); text-transform:uppercase;\r\n }\r\n .section-head{max-width:640px; margin-bottom:56px;}\r\n .section-head h2{font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; margin-bottom:14px;}\r\n .section-head p{color:var(--text-muted); font-size:1.02rem;}\r\n\r\n \/* ---------- REVEAL ANIMATION ---------- *\/\r\n .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}\r\n .reveal.in-view{opacity:1; transform:translateY(0);}\r\n\r\n \/* ---------- HERO ---------- *\/\r\n .hero{padding-top:64px;}\r\n .hero-grid{\r\n display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;\r\n }\r\n .hero h1{\r\n font-size:clamp(2.3rem, 4.6vw, 3.6rem);\r\n font-weight:800; line-height:1.08; margin-bottom:22px;\r\n }\r\n .hero h1 .hl{ color:var(--accent-flow); }\r\n .hero p.lead{\r\n color:var(--text-muted); font-size:1.08rem; max-width:520px; margin-bottom:32px;\r\n }\r\n .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px;}\r\n .btn{\r\n padding:14px 26px; border-radius:9px; font-weight:600; font-size:0.95rem;\r\n display:inline-flex; align-items:center; gap:8px;\r\n transition:transform .2s, box-shadow .2s, background .2s;\r\n border:1px solid transparent; cursor:pointer;\r\n }\r\n .btn-primary{background:var(--accent-flow); color:var(--on-accent);}\r\n .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 28px var(--accent-flow-dim);}\r\n .btn-ghost{border-color:var(--border); color:var(--text-primary);}\r\n .btn-ghost:hover{border-color:var(--accent-flow); color:var(--accent-flow);}\r\n .hero-stats{\r\n display:grid; grid-template-columns:repeat(4,1fr); gap:18px;\r\n border-top:1px solid var(--border); padding-top:28px;\r\n }\r\n .stat b{\r\n display:block; font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:800; color:var(--text-primary);\r\n }\r\n .stat span{font-size:0.78rem; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;}\r\n\r\n \/* ---------- HERO DIAGRAM ---------- *\/\r\n .flow-panel{\r\n background:var(--bg-panel);\r\n border:1px solid var(--border);\r\n border-radius:18px;\r\n padding:26px 20px 30px;\r\n position:relative;\r\n overflow:hidden;\r\n }\r\n .flow-panel::before{\r\n content:\"pipeline.canvas\";\r\n position:absolute; top:14px; left:20px;\r\n font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--text-faint);\r\n }\r\n .flow-svg{width:100%; height:auto; margin-top:22px;}\r\n .flow-node-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--text-primary); }\r\n .flow-line{ stroke:var(--border); stroke-width:2; fill:none; }\r\n .flow-line-active{\r\n stroke:var(--accent-flow); stroke-width:2; fill:none;\r\n stroke-dasharray:6 7; animation:dashmove 1.6s linear infinite;\r\n }\r\n @keyframes dashmove{ to{ stroke-dashoffset:-52; } }\r\n .flow-dot{ fill:var(--accent-signal); }\r\n .pulse{ animation:pulse 2.4s ease-in-out infinite; }\r\n @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.45;} }\r\n\r\n \/* ---------- ABOUT ---------- *\/\r\n .about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}\r\n .about-card{\r\n background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);\r\n padding:28px; position:relative;\r\n }\r\n .about-id{display:flex; align-items:center; gap:14px; margin-bottom:18px;}\r\n .avatar-ring{\r\n width:56px; height:56px; border-radius:50%;\r\n background:linear-gradient(135deg, var(--accent-flow), var(--accent-signal));\r\n display:flex; align-items:center; justify-content:center;\r\n font-family:'Sora',sans-serif; font-weight:800; color:var(--on-accent); font-size:1.1rem;\r\n }\r\n .about-id .name{font-weight:700; font-family:'Sora',sans-serif;}\r\n .about-id .role{font-size:0.85rem; color:var(--text-muted);}\r\n .rating-line{display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--text-muted); margin-top:10px;}\r\n .rating-line b{color:var(--text-primary);}\r\n .about-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}\r\n .tag{\r\n font-family:'IBM Plex Mono',monospace; font-size:0.72rem; padding:6px 10px;\r\n border:1px solid var(--border); border-radius:6px; color:var(--text-muted);\r\n }\r\n .about-copy p{color:var(--text-muted); margin-bottom:18px;}\r\n .about-copy p strong{color:var(--text-primary); font-weight:600;}\r\n .mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}\r\n .mini-stat{\r\n background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; padding:16px;\r\n text-align:center;\r\n }\r\n .mini-stat b{display:block; font-family:'Sora',sans-serif; font-size:1.3rem; color:var(--accent-flow);}\r\n .mini-stat span{font-size:0.74rem; color:var(--text-faint);}\r\n\r\n \/* ---------- SERVICES ---------- *\/\r\n .services-pipe{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}\r\n .service-card{\r\n background:var(--bg-panel); border:1px solid var(--border);\r\n padding:30px 26px; position:relative;\r\n }\r\n .service-card:first-child{border-radius:var(--radius) 0 0 var(--radius);}\r\n .service-card:last-child{border-radius:0 var(--radius) var(--radius) 0;}\r\n .service-card + .service-card{border-left:none;}\r\n .service-connector{\r\n position:absolute; top:50%; right:-1px; transform:translateY(-50%);\r\n width:20px; height:20px; background:var(--bg-void);\r\n border:1px solid var(--border); border-radius:50%;\r\n display:flex; align-items:center; justify-content:center; z-index:2;\r\n }\r\n .service-connector::after{content:\"\"; width:7px; height:7px; border-radius:50%; background:var(--accent-flow);}\r\n .service-num{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--accent-flow); margin-bottom:14px; display:block;}\r\n .service-card h3{font-size:1.15rem; margin-bottom:10px;}\r\n .service-card p{color:var(--text-muted); font-size:0.92rem; margin-bottom:16px;}\r\n .service-chip-row{display:flex; flex-wrap:wrap; gap:6px;}\r\n\r\n \/* ---------- SKILLS ---------- *\/\r\n .skills-grid{display:flex; flex-wrap:wrap; gap:12px;}\r\n .skill-chip{\r\n display:flex; align-items:center; gap:10px;\r\n background:var(--bg-panel); border:1px solid var(--border); border-radius:10px;\r\n padding:12px 18px; font-size:0.9rem; transition:border-color .2s, transform .2s;\r\n }\r\n .skill-chip:hover{border-color:var(--accent-flow); transform:translateY(-3px);}\r\n .skill-dot{width:6px; height:6px; border-radius:50%; background:var(--accent-flow); flex-shrink:0;}\r\n\r\n \/* ---------- WORK \/ GIGS ---------- *\/\r\n .subhead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap;}\r\n .subhead h3{font-size:1.2rem;}\r\n .subhead .link-out{font-size:0.85rem; color:var(--accent-flow); font-weight:600;}\r\n .work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-bottom:72px;}\r\n .work-card{\r\n background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);\r\n padding:30px; display:flex; flex-direction:column; gap:16px;\r\n transition:border-color .2s, transform .2s;\r\n }\r\n .work-card:hover{border-color:var(--accent-flow); transform:translateY(-4px);}\r\n .work-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}\r\n .work-badge{\r\n font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--accent-signal);\r\n border:1px solid var(--accent-signal-dim); padding:5px 10px; border-radius:6px;\r\n }\r\n .work-rating{font-size:0.85rem; color:var(--text-muted); white-space:nowrap;}\r\n .work-card h3{font-size:1.25rem;}\r\n .work-card p{color:var(--text-muted); font-size:0.94rem;}\r\n .work-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:14px; border-top:1px solid var(--border);}\r\n .work-price b{font-family:'Sora',sans-serif; font-size:1.2rem;}\r\n .work-price span{font-size:0.75rem; color:var(--text-faint);}\r\n .work-link{font-size:0.85rem; color:var(--accent-flow); font-weight:600; display:inline-flex; align-items:center; gap:6px;}\r\n\r\n \/* ---------- PORTFOLIO GALLERY (template cards, real project links) ---------- *\/\r\n .filter-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}\r\n .filter-tab{\r\n font-family:'IBM Plex Mono',monospace; font-size:0.76rem; letter-spacing:0.03em;\r\n padding:9px 16px; border-radius:20px; border:1px solid var(--border);\r\n background:var(--bg-panel); color:var(--text-muted); cursor:pointer;\r\n transition:border-color .2s, color .2s, background .2s;\r\n }\r\n .filter-tab:hover{ color:var(--accent-flow); border-color:var(--accent-flow); }\r\n .filter-tab.active{ background:var(--accent-flow); color:var(--on-accent); border-color:var(--accent-flow); }\r\n .portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}\r\n .portfolio-card{\r\n background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);\r\n overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, opacity .4s ease, max-height .4s ease;\r\n display:flex; flex-direction:column;\r\n }\r\n .portfolio-card.hidden-item{ display:none; }\r\n .portfolio-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.25); border-color:var(--accent-flow); }\r\n .project-thumb{\r\n aspect-ratio:16\/10; position:relative; overflow:hidden;\r\n display:flex; align-items:center; justify-content:center;\r\n }\r\n .project-thumb .browser-bar{\r\n position:absolute; top:0; left:0; right:0; height:28px;\r\n background:rgba(0,0,0,0.28); display:flex; align-items:center; gap:6px; padding:0 10px; z-index:2;\r\n }\r\n .project-thumb .browser-bar span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.55); }\r\n .project-thumb .browser-bar .addr{\r\n margin-left:8px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:rgba(255,255,255,0.85);\r\n background:rgba(255,255,255,0.12); padding:2px 8px; border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80%;\r\n }\r\n .project-thumb .thumb-icon{\r\n font-size:2.6rem; opacity:0.9; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.25)); transition:transform .4s ease;\r\n }\r\n .portfolio-card:hover .thumb-icon{ transform:scale(1.12) rotate(-4deg); }\r\n .thumb-travel{ background:linear-gradient(150deg,#1f8f7a,#0c4f43); }\r\n .thumb-property{ background:linear-gradient(150deg,#c96a1f,#7a3c0e); }\r\n .thumb-transport{ background:linear-gradient(150deg,#5b4fc4,#2c2170); }\r\n .portfolio-body{ padding:20px; display:flex; flex-direction:column; flex:1; }\r\n .portfolio-body h4{ font-family:'Sora',sans-serif; font-size:1.02rem; margin-bottom:6px; }\r\n .portfolio-body p{ color:var(--text-muted); font-size:0.86rem; margin-bottom:12px; flex:1; }\r\n .portfolio-scope{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }\r\n .portfolio-foot{\r\n display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--border);\r\n }\r\n .portfolio-domain{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--text-faint); }\r\n .visit-link{\r\n font-size:0.82rem; font-weight:600; color:var(--accent-flow); display:inline-flex; align-items:center; gap:5px;\r\n }\r\n .load-more-wrap{ display:flex; justify-content:center; margin-top:36px; }\r\n .load-more-btn{\r\n padding:12px 28px; border-radius:9px; border:1px solid var(--border); background:var(--bg-panel);\r\n color:var(--text-primary); font-weight:600; font-size:0.9rem; cursor:pointer; transition:border-color .2s, color .2s;\r\n }\r\n .load-more-btn:hover{ border-color:var(--accent-flow); color:var(--accent-flow); }\r\n .load-more-btn.done{ display:none; }\r\n .portfolio-note{ color:var(--text-faint); font-size:0.82rem; margin-top:14px; text-align:center; }\r\n\r\n \/* ---------- TESTIMONIAL MARQUEE ---------- *\/\r\n .marquee-wrap{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }\r\n .marquee-track{ display:flex; gap:20px; width:max-content; animation:marquee 48s linear infinite; }\r\n .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }\r\n @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }\r\n\r\n \/* ---------- EXPERIENCE ---------- *\/\r\n .timeline{position:relative; padding-left:32px; border-left:1px solid var(--border);}\r\n .tl-item{position:relative; padding-bottom:48px;}\r\n .tl-item:last-child{padding-bottom:0;}\r\n .tl-dot{\r\n position:absolute; left:-37px; top:4px;\r\n width:12px; height:12px; border-radius:50%;\r\n background:var(--bg-void); border:2px solid var(--accent-flow);\r\n }\r\n .tl-period{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--accent-flow); margin-bottom:6px; display:block;}\r\n .tl-item h3{font-size:1.15rem; margin-bottom:4px;}\r\n .tl-org{color:var(--text-faint); font-size:0.85rem; margin-bottom:12px;}\r\n .tl-item p{color:var(--text-muted); font-size:0.94rem; max-width:640px;}\r\n .tl-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}\r\n\r\n \/* ---------- TESTIMONIALS ---------- *\/\r\n .test-card{\r\n background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);\r\n padding:24px; display:flex; flex-direction:column; gap:12px; width:300px; flex-shrink:0;\r\n }\r\n .stars{color:var(--accent-signal); font-size:0.9rem; letter-spacing:2px;}\r\n .test-card p{color:var(--text-muted); font-size:0.9rem; font-style:italic;}\r\n .test-who{display:flex; align-items:center; gap:12px; margin-top:auto;}\r\n .test-avatar{\r\n width:38px; height:38px; border-radius:50%; background:var(--bg-panel-2);\r\n border:1px solid var(--border);\r\n display:flex; align-items:center; justify-content:center;\r\n font-family:'Sora',sans-serif; font-size:0.85rem; font-weight:700; color:var(--accent-flow);\r\n }\r\n .test-who .n{font-size:0.88rem; font-weight:600;}\r\n .test-who .c{font-size:0.76rem; color:var(--text-faint);}\r\n .test-note{\r\n margin-top:32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;\r\n padding:16px 20px; border:1px dashed var(--border); border-radius:10px; font-size:0.85rem; color:var(--text-muted);\r\n }\r\n .test-note a{color:var(--accent-flow); font-weight:600;}\r\n\r\n\r\n \/* ---------- CONTACT ---------- *\/\r\n .contact-panel{\r\n background:linear-gradient(145deg, var(--bg-panel), var(--bg-panel-2));\r\n border:1px solid var(--border); border-radius:20px;\r\n padding:64px 48px; text-align:center; position:relative; overflow:hidden;\r\n }\r\n .contact-panel::before{\r\n content:\"\"; position:absolute; inset:0;\r\n background:radial-gradient(circle at 50% 0%, var(--accent-flow-dim), transparent 60%);\r\n pointer-events:none;\r\n }\r\n .contact-panel h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:16px;}\r\n .contact-panel p{color:var(--text-muted); max-width:520px; margin:0 auto 34px;}\r\n .contact-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}\r\n .contact-links{\r\n display:flex; gap:26px; justify-content:center; flex-wrap:wrap;\r\n margin-top:38px; font-size:0.88rem; color:var(--text-muted);\r\n position:relative; z-index:1;\r\n }\r\n .contact-links a:hover{color:var(--accent-flow);}\r\n\r\n footer{padding:36px 0; text-align:center; color:var(--text-faint); font-size:0.82rem; border-top:1px solid var(--border);}\r\n\r\n \/* ---------- RESPONSIVE ---------- *\/\r\n @media (max-width: 900px){\r\n .hero-grid{grid-template-columns:1fr; gap:44px;}\r\n .about-grid{grid-template-columns:1fr;}\r\n .services-pipe{grid-template-columns:1fr;}\r\n .service-card{border-radius:0 !important; border-left:1px solid var(--border) !important; border-top:none;}\r\n .service-card:first-child{border-radius:var(--radius) var(--radius) 0 0 !important; border-top:1px solid var(--border) !important;}\r\n .service-card:last-child{border-radius:0 0 var(--radius) var(--radius) !important;}\r\n .service-connector{top:auto; bottom:-11px; right:50%; transform:translateX(50%) rotate(90deg);}\r\n .work-grid{grid-template-columns:1fr;}\r\n .portfolio-grid{grid-template-columns:repeat(2,1fr);}\r\n .hero-stats{grid-template-columns:repeat(2,1fr); row-gap:22px;}\r\n }\r\n @media (max-width: 720px){\r\n .nav-links{\r\n position:absolute; top:100%; left:0; right:0;\r\n background:var(--bg-void); border-bottom:1px solid var(--border);\r\n flex-direction:column; padding:20px 28px; gap:18px;\r\n display:none;\r\n }\r\n .nav-links.open{display:flex;}\r\n .nav-toggle{display:flex;}\r\n .nav-cta{display:none;}\r\n .section-shell{padding:64px 0;}\r\n .portfolio-grid{grid-template-columns:1fr;}\r\n .test-card{width:260px;}\r\n .contact-panel{padding:48px 24px;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"bg-dots\"><\/div>\r\n<div class=\"bg-blob b1\"><\/div>\r\n<div class=\"bg-blob b2\"><\/div>\r\n<div class=\"bg-blob b3\"><\/div>\r\n<div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n<div class=\"cursor-dot\" id=\"cursorDot\"><\/div>\r\n<div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\r\n\r\n<header>\r\n <nav>\r\n <a href=\"#top\" class=\"logo\">\r\n <span class=\"logo-mark\">ZS<\/span>\r\n Zeeshan Saqib\r\n <\/a>\r\n <div class=\"nav-links\" id=\"navLinks\">\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#services\">Services<\/a>\r\n <a href=\"#work\">Work<\/a>\r\n <a href=\"#experience\">Experience<\/a>\r\n <a href=\"#testimonials\">Reviews<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <div class=\"nav-right\">\r\n <button class=\"theme-toggle\" id=\"themeToggle\" aria-label=\"Toggle light and dark mode\" aria-pressed=\"false\">\r\n <span class=\"knob\" id=\"themeKnob\">\u263e<\/span>\r\n <\/button>\r\n <a href=\"https:\/\/www.fiverr.com\/conversations\/muzmalgrafic\" target=\"_blank\" rel=\"noopener\" class=\"nav-cta\">Start a project<\/a>\r\n <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"Toggle menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n<\/header>\r\n\r\n<main id=\"top\">\r\n\r\n <!-- HERO -->\r\n <section class=\"section-shell hero\" data-tag=\"Sheet 01 \u00b7 Intro\">\r\n <div class=\"wrap hero-grid\">\r\n <div>\r\n <div class=\"eyebrow reveal\">Available for new projects on Fiverr<\/div>\r\n <h1 class=\"reveal\">I Build Websites That <span class=\"hl\">Run Themselves.<\/span><\/h1>\r\n <p class=\"lead reveal\">WordPress developer and automation builder on Fiverr, based in Pakistan. I ship business websites, booking systems, and AI-powered workflows that keep working long after handoff.<\/p>\r\n <div class=\"hero-ctas reveal\">\r\n <a href=\"#work\" class=\"btn btn-primary\">See my work<\/a>\r\n <a href=\"https:\/\/www.fiverr.com\/conversations\/muzmalgrafic\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-ghost\">Message on Fiverr<\/a>\r\n <\/div>\r\n <div class=\"hero-stats reveal\">\r\n <div class=\"stat\"><b>113<\/b><span>FIVERR REVIEWS<\/span><\/div>\r\n <div class=\"stat\"><b>Lvl 2<\/b><span>FIVERR SELLER<\/span><\/div>\r\n <div class=\"stat\"><b>4.7\u2605<\/b><span>AVG. RATING<\/span><\/div>\r\n <div class=\"stat\"><b>$20\/hr<\/b><span>STARTING RATE<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flow-panel reveal\">\r\n <svg class=\"flow-svg\" viewBox=\"0 0 460 340\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Diagram of the build pipeline: brief, design, WordPress build, automation, and launch\">\r\n <path class=\"flow-line\" d=\"M90,50 L90,120\" \/>\r\n <path class=\"flow-line-active\" d=\"M90,120 L90,190\" \/>\r\n <path class=\"flow-line\" d=\"M90,190 L230,190\" \/>\r\n <path class=\"flow-line-active\" d=\"M230,190 L230,260\" \/>\r\n <path class=\"flow-line\" d=\"M230,260 L370,260\" \/>\r\n <path class=\"flow-line-active\" d=\"M370,120 L370,190\" \/>\r\n <path class=\"flow-line\" d=\"M370,50 L370,120\" \/>\r\n\r\n <rect x=\"45\" y=\"20\" width=\"90\" height=\"30\" rx=\"8\" fill=\"var(--bg-panel-2)\" stroke=\"var(--border)\"\/>\r\n <text x=\"90\" y=\"39\" text-anchor=\"middle\" class=\"flow-node-label\">Client Brief<\/text>\r\n\r\n <rect x=\"35\" y=\"120\" width=\"110\" height=\"30\" rx=\"8\" fill=\"var(--bg-panel-2)\" stroke=\"var(--border)\"\/>\r\n <text x=\"90\" y=\"139\" text-anchor=\"middle\" class=\"flow-node-label\">Design (Elementor)<\/text>\r\n\r\n <rect x=\"165\" y=\"175\" width=\"130\" height=\"30\" rx=\"8\" fill=\"var(--node-highlight-bg)\" stroke=\"var(--accent-flow)\"\/>\r\n <text x=\"230\" y=\"194\" text-anchor=\"middle\" class=\"flow-node-label\">WordPress Build<\/text>\r\n\r\n <rect x=\"305\" y=\"120\" width=\"130\" height=\"30\" rx=\"8\" fill=\"var(--bg-panel-2)\" stroke=\"var(--border)\"\/>\r\n <text x=\"370\" y=\"139\" text-anchor=\"middle\" class=\"flow-node-label\">AI + n8n Automation<\/text>\r\n\r\n <rect x=\"315\" y=\"20\" width=\"110\" height=\"30\" rx=\"8\" fill=\"var(--bg-panel-2)\" stroke=\"var(--border)\"\/>\r\n <text x=\"370\" y=\"39\" text-anchor=\"middle\" class=\"flow-node-label\">GHL \/ CRM<\/text>\r\n\r\n <rect x=\"310\" y=\"245\" width=\"120\" height=\"30\" rx=\"8\" fill=\"var(--node-signal-bg)\" stroke=\"var(--accent-signal)\"\/>\r\n <text x=\"370\" y=\"264\" text-anchor=\"middle\" class=\"flow-node-label\">Live & Launched<\/text>\r\n\r\n <circle class=\"flow-dot pulse\" cx=\"230\" cy=\"260\" r=\"4\"\/>\r\n <circle class=\"flow-dot pulse\" cx=\"90\" cy=\"150\" r=\"4\" style=\"animation-delay:0.6s\"\/>\r\n <circle class=\"flow-dot pulse\" cx=\"370\" cy=\"150\" r=\"4\" style=\"animation-delay:1.2s\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ABOUT -->\r\n <section id=\"about\" class=\"section-shell alt\" data-tag=\"Sheet 02 \u00b7 About\">\r\n <div class=\"wrap about-grid\">\r\n <div class=\"reveal\">\r\n <div class=\"about-card\">\r\n <div class=\"about-id\">\r\n <div class=\"avatar-ring\">ZS<\/div>\r\n <div>\r\n <div class=\"name\">Zeeshan Saqib<\/div>\r\n <div class=\"role\">@muzmalgrafic \u00b7 Pakistan<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rating-line\">\r\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span>\r\n <b>4.7<\/b> from 113 reviews \u00b7 Level 2 Seller\r\n <\/div>\r\n <div class=\"about-tags\">\r\n <span class=\"tag\">WordPress<\/span>\r\n <span class=\"tag\">WooCommerce<\/span>\r\n <span class=\"tag\">n8n<\/span>\r\n <span class=\"tag\">GoHighLevel<\/span>\r\n <span class=\"tag\">AI Chatbots<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mini-stats\">\r\n <div class=\"mini-stat\"><b>9+ yrs<\/b><span>ON FIVERR<\/span><\/div>\r\n <div class=\"mini-stat\"><b>$20\/hr<\/b><span>STARTING RATE<\/span><\/div>\r\n <div class=\"mini-stat\"><b>1 hr<\/b><span>AVG. RESPONSE<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-copy reveal\">\r\n <div class=\"eyebrow\">About<\/div>\r\n <h2 style=\"margin-bottom:20px;\">The Developer Behind The Build.<\/h2>\r\n <p><strong>I'm Zeeshan<\/strong> \u2014 a WordPress developer and automation builder who spends most days moving between two worlds: hand-built WordPress sites and the AI-and-workflow tools that keep them running without constant upkeep.<\/p>\r\n <p>I specialize in <strong>booking systems, business websites, and AI-powered solutions<\/strong> that help businesses grow online \u2014 built with clean design, fast performance, and user-friendly functionality for every client.<\/p>\r\n <p>My core services on Fiverr: <strong>WordPress website development, AI chatbots & AI agents, and n8n \/ GoHighLevel automation<\/strong> \u2014 the kind of infrastructure that quietly does the work after a site goes live.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SERVICES -->\r\n <section id=\"services\" class=\"section-shell\" data-tag=\"Sheet 03 \u00b7 Services\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"eyebrow\">Services<\/div>\r\n <h2>What I build.<\/h2>\r\n <p>Three connected modules \u2014 pick one, or let them run as a full pipeline from design to automation.<\/p>\r\n <\/div>\r\n <div class=\"services-pipe reveal\">\r\n <div class=\"service-card\">\r\n <span class=\"service-num\">01<\/span>\r\n <h3>WordPress Websites<\/h3>\r\n <p>Booking systems, e-commerce stores, and business sites built with WooCommerce and Elementor \u2014 clean, fast, and easy for you to manage.<\/p>\r\n <div class=\"service-chip-row\">\r\n <span class=\"tag\">WooCommerce<\/span>\r\n <span class=\"tag\">Elementor<\/span>\r\n <span class=\"tag\">SEO-ready<\/span>\r\n <\/div>\r\n <div class=\"service-connector\"><\/div>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <span class=\"service-num\">02<\/span>\r\n <h3>AI Chatbots & Agents<\/h3>\r\n <p>Conversational AI and custom agents that answer questions, qualify leads, and book appointments \u2014 trained on your business, not a generic script.<\/p>\r\n <div class=\"service-chip-row\">\r\n <span class=\"tag\">AI Agents<\/span>\r\n <span class=\"tag\">Lead Qualification<\/span>\r\n <span class=\"tag\">Live Chat<\/span>\r\n <\/div>\r\n <div class=\"service-connector\"><\/div>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <span class=\"service-num\">03<\/span>\r\n <h3>Workflow Automation<\/h3>\r\n <p>n8n and GoHighLevel workflows that connect your CRM, calendar, and inbox \u2014 automated follow-ups, bookings, and campaigns that run on their own.<\/p>\r\n <div class=\"service-chip-row\">\r\n <span class=\"tag\">n8n<\/span>\r\n <span class=\"tag\">GHL<\/span>\r\n <span class=\"tag\">API Integrations<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SKILLS -->\r\n <section id=\"skills\" class=\"section-shell alt\" data-tag=\"Sheet 04 \u00b7 Stack\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"eyebrow\">Stack<\/div>\r\n <h2>Tools I reach for.<\/h2>\r\n <\/div>\r\n <div class=\"skills-grid reveal\">\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>WordPress<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>WooCommerce<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>Elementor<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>HTML5<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>CSS3<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>JavaScript<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>n8n<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>GoHighLevel<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>REST APIs<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>AI Chatbots<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>CRM Automation<\/div>\r\n <div class=\"skill-chip\"><span class=\"skill-dot\"><\/span>Payment Gateways<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- WORK: GIGS + PORTFOLIO -->\r\n <section id=\"work\" class=\"section-shell\" data-tag=\"Sheet 05 \u00b7 Work\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"eyebrow\">Selected work<\/div>\r\n <h2>What clients hire me for.<\/h2>\r\n <p>Two core Fiverr gigs, refined across 100+ delivered projects.<\/p>\r\n <\/div>\r\n\r\n <div class=\"subhead reveal\">\r\n <h3>Gigs<\/h3>\r\n <a href=\"https:\/\/www.fiverr.com\/muzmalgrafic\" target=\"_blank\" rel=\"noopener\" class=\"link-out\">View full profile on Fiverr \u2192<\/a>\r\n <\/div>\r\n <div class=\"work-grid reveal\">\r\n <div class=\"work-card\">\r\n <div class=\"work-top\">\r\n <span class=\"work-badge\">WordPress<\/span>\r\n <span class=\"work-rating\">\u2605 5.0 <span style=\"color:var(--text-faint)\">(45)<\/span><\/span>\r\n <\/div>\r\n <h3>Booking, E-commerce & Business Sites<\/h3>\r\n <p>Full WordPress builds for restaurants, schools, labs, clinics, and general businesses \u2014 booking flows, product catalogs, and clean checkout, all baked into the CMS.<\/p>\r\n <div class=\"work-foot\">\r\n <div class=\"work-price\"><b>From $80<\/b> <span>\/ project<\/span><\/div>\r\n <a href=\"https:\/\/www.fiverr.com\/muzmalgrafic\/create-restaurant-school-lms-lab-clinic-and-business-website\" target=\"_blank\" rel=\"noopener\" class=\"work-link\">View gig \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"work-card\">\r\n <div class=\"work-top\">\r\n <span class=\"work-badge\">AI & Automation<\/span>\r\n <span class=\"work-rating\">\u2605 4.8 <span style=\"color:var(--text-faint)\">(26)<\/span><\/span>\r\n <\/div>\r\n <h3>AI Websites, Chatbots & Agents<\/h3>\r\n <p>AI-powered websites and custom agents \u2014 from car-dealership lead bots to full conversational assistants that plug straight into your existing stack.<\/p>\r\n <div class=\"work-foot\">\r\n <div class=\"work-price\"><b>From $150<\/b> <span>\/ project<\/span><\/div>\r\n <a href=\"https:\/\/www.fiverr.com\/muzmalgrafic\/make-responsive-online-car-dealership-website\" target=\"_blank\" rel=\"noopener\" class=\"work-link\">View gig \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"subhead reveal\">\r\n <h3>Portfolio<\/h3>\r\n <span class=\"link-out\" style=\"color:var(--text-faint); font-weight:400;\">31 previous website builds<\/span>\r\n <\/div>\r\n\r\n <div class=\"filter-tabs reveal\">\r\n <button class=\"filter-tab active\" data-filter=\"all\">All Projects<\/button>\r\n <button class=\"filter-tab\" data-filter=\"travel\">Travel & Tours<\/button>\r\n <button class=\"filter-tab\" data-filter=\"property\">Property & Rentals<\/button>\r\n <button class=\"filter-tab\" data-filter=\"transport\">Transport & Taxi<\/button>\r\n <\/div>\r\n\r\n <div class=\"portfolio-grid\" id=\"portfolioGrid\"><\/div>\r\n <div class=\"load-more-wrap\">\r\n <button class=\"load-more-btn\" id=\"loadMoreBtn\">Load more projects<\/button>\r\n <\/div>\r\n <p class=\"portfolio-note\">Card descriptions are written from each site's public scope, not the original client brief.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- EXPERIENCE -->\r\n <section id=\"experience\" class=\"section-shell alt\" data-tag=\"Sheet 06 \u00b7 Experience\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"eyebrow\">Experience<\/div>\r\n <h2>How I got here.<\/h2>\r\n <\/div>\r\n <div class=\"timeline reveal\">\r\n <div class=\"tl-item\">\r\n <div class=\"tl-dot\"><\/div>\r\n <span class=\"tl-period\">DEC 2022 \u2014 PRESENT<\/span>\r\n <h3>AI Automation Developer<\/h3>\r\n <div class=\"tl-org\">Heapware Technologies<\/div>\r\n <p>Built and managed business automation systems on n8n and GoHighLevel \u2014 CRM automation, lead-generation pipelines, AI chatbot integrations, appointment booking flows, and email\/SMS campaigns connected through custom API integrations.<\/p>\r\n <div class=\"tl-tags\">\r\n <span class=\"tag\">n8n<\/span><span class=\"tag\">GHL<\/span><span class=\"tag\">Webhooks<\/span><span class=\"tag\">Funnel Automation<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"tl-item\">\r\n <div class=\"tl-dot\"><\/div>\r\n <span class=\"tl-period\">MAR 2021 \u2014 PRESENT<\/span>\r\n <h3>WordPress Developer<\/h3>\r\n <div class=\"tl-org\">ZEEverse Technologies<\/div>\r\n <p>Designed and shipped conversion-focused WordPress sites across taxi booking, travel, real estate, LMS, healthcare, restaurant, and directory clients \u2014 custom development, WooCommerce, Elementor UI, booking integrations, and full performance and security hardening. 50+ sites delivered.<\/p>\r\n <div class=\"tl-tags\">\r\n <span class=\"tag\">WooCommerce<\/span><span class=\"tag\">Elementor<\/span><span class=\"tag\">Hosting & Security<\/span><span class=\"tag\">Speed Optimization<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TESTIMONIALS -->\r\n <section id=\"testimonials\" class=\"section-shell\" data-tag=\"Sheet 07 \u00b7 Reviews\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"eyebrow\">Client feedback<\/div>\r\n <h2>What it's like to work together.<\/h2>\r\n <p>4.7 average across 113 Fiverr reviews. A few real ones, on a loop \u2014 hover to pause.<\/p>\r\n <\/div>\r\n <div class=\"marquee-wrap reveal\">\r\n <div class=\"marquee-track\" id=\"marqueeTrack\">\r\n <div class=\"test-card\">\r\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span>\r\n <p>\"Delivered everything faster than expected, even on a tight deadline \u2014 the work exceeded expectations from start to finish.\"<\/p>\r\n <div class=\"test-who\">\r\n <div class=\"test-avatar\">A<\/div>\r\n <div><div class=\"n\">Audrey M.<\/div><div class=\"c\">Italy \u00b7 Fiverr<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"test-card\">\r\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span>\r\n <p>Praised as a great communicator with a fast, efficient process from brief to delivery \u2014 a client who'd happily hire again.<\/p>\r\n <div class=\"test-who\">\r\n <div class=\"test-avatar\">J<\/div>\r\n <div><div class=\"n\">Jim H.<\/div><div class=\"c\">United Kingdom \u00b7 Fiverr<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"test-card\">\r\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span>\r\n <p>An ongoing collaborator who returns project after project \u2014 steady quality clients keep coming back for.<\/p>\r\n <div class=\"test-who\">\r\n <div class=\"test-avatar\">F<\/div>\r\n <div><div class=\"n\">Frederick S.<\/div><div class=\"c\">United States \u00b7 Fiverr<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"test-card\">\r\n <span class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/span>\r\n <p>Called out for thorough delivery details and strong after-sale support \u2014 a client happy to recommend the work.<\/p>\r\n <div class=\"test-who\">\r\n <div class=\"test-avatar\">T<\/div>\r\n <div><div class=\"n\">Trevor S.<\/div><div class=\"c\">United Arab Emirates \u00b7 Fiverr<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"test-note reveal\">\r\n <span>These 4 are real reviews pulled from Zeeshan's Fiverr history \u2014 the rest of the 113 live on Fiverr itself.<\/span>\r\n <a href=\"https:\/\/www.fiverr.com\/muzmalgrafic#reviews\" target=\"_blank\" rel=\"noopener\">See all 113 reviews on Fiverr \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CONTACT -->\r\n <section id=\"contact\" class=\"section-shell alt\" data-tag=\"Sheet 08 \u00b7 Contact\">\r\n <div class=\"wrap\">\r\n <div class=\"contact-panel reveal\">\r\n <div class=\"eyebrow\" style=\"justify-content:center;\">Let's build something<\/div>\r\n <h2>Got a site or workflow to build?<\/h2>\r\n <p>Whether it's a WordPress rebuild, a booking system, or an AI agent that never sleeps \u2014 message me on Fiverr and tell me what you're working on.<\/p>\r\n <div class=\"contact-ctas\">\r\n <a href=\"https:\/\/www.fiverr.com\/conversations\/muzmalgrafic\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-primary\">Message on Fiverr<\/a>\r\n <a href=\"https:\/\/www.fiverr.com\/muzmalgrafic\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-ghost\">View Fiverr Profile<\/a>\r\n <\/div>\r\n <div class=\"contact-links\">\r\n <span>@muzmalgrafic<\/span>\r\n <span>Pakistan \u00b7 GMT+5<\/span>\r\n <span>Avg. response: 1 hour<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/main>\r\n\r\n<footer>\r\n <div class=\"wrap\">\u00a9 2026 Zeeshan Saqib. All rights reserved.<\/div>\r\n<\/footer>\r\n\r\n<script>\r\n \/\/ Mobile nav toggle\r\n const navToggle = document.getElementById('navToggle');\r\n const navLinks = document.getElementById('navLinks');\r\n navToggle.addEventListener('click', () => navLinks.classList.toggle('open'));\r\n navLinks.querySelectorAll('a').forEach(a => a.addEventListener('click', () => navLinks.classList.remove('open')));\r\n\r\n \/\/ Theme toggle\r\n const html = document.documentElement;\r\n const themeToggle = document.getElementById('themeToggle');\r\n const themeKnob = document.getElementById('themeKnob');\r\n function applyTheme(theme){\r\n html.setAttribute('data-theme', theme);\r\n themeKnob.textContent = theme === 'light' ? '\u2600' : '\u263e';\r\n themeToggle.setAttribute('aria-pressed', theme === 'light');\r\n try{ localStorage.setItem('zs-theme', theme); }catch(e){}\r\n }\r\n let savedTheme = 'dark';\r\n try{ savedTheme = localStorage.getItem('zs-theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); }catch(e){}\r\n applyTheme(savedTheme);\r\n themeToggle.addEventListener('click', () => {\r\n applyTheme(html.getAttribute('data-theme') === 'light' ? 'dark' : 'light');\r\n });\r\n\r\n \/\/ Scroll progress bar\r\n const progressBar = document.getElementById('progressBar');\r\n function updateProgress(){\r\n const scrollTop = window.scrollY;\r\n const docHeight = document.documentElement.scrollHeight - window.innerHeight;\r\n const pct = docHeight > 0 ? (scrollTop \/ docHeight) * 100 : 0;\r\n progressBar.style.width = pct + '%';\r\n }\r\n window.addEventListener('scroll', updateProgress, { passive:true });\r\n updateProgress();\r\n\r\n \/\/ Custom cursor\r\n const isFinePointer = window.matchMedia('(pointer: fine)').matches;\r\n let cursorRingEl = null;\r\n if (isFinePointer){\r\n html.classList.add('has-custom-cursor');\r\n const dot = document.getElementById('cursorDot');\r\n const ring = document.getElementById('cursorRing');\r\n cursorRingEl = ring;\r\n let mouseX = window.innerWidth\/2, mouseY = window.innerHeight\/2;\r\n let ringX = mouseX, ringY = mouseY;\r\n window.addEventListener('mousemove', e => {\r\n mouseX = e.clientX; mouseY = e.clientY;\r\n dot.style.left = mouseX + 'px';\r\n dot.style.top = mouseY + 'px';\r\n });\r\n function animateRing(){\r\n ringX += (mouseX - ringX) * 0.18;\r\n ringY += (mouseY - ringY) * 0.18;\r\n ring.style.left = ringX + 'px';\r\n ring.style.top = ringY + 'px';\r\n requestAnimationFrame(animateRing);\r\n }\r\n animateRing();\r\n document.querySelectorAll('a, button, .skill-chip, .portfolio-card, .work-card').forEach(el => {\r\n el.addEventListener('mouseenter', () => ring.classList.add('hover'));\r\n el.addEventListener('mouseleave', () => ring.classList.remove('hover'));\r\n });\r\n }\r\n\r\n \/\/ ---------- Portfolio data (real project sites) ----------\r\n const PROJECTS = [\r\n { name:\"Ava Travel Agency\", domain:\"avastravelagency.com\", url:\"https:\/\/avastravelagency.com\/\", category:\"travel\", icon:\"\u2708\ufe0f\", desc:\"Full-service travel agency site with destination pages and a trip-inquiry flow.\" },\r\n { name:\"Nomadic Suriname\", domain:\"nomadicsuriname.com\", url:\"https:\/\/nomadicsuriname.com\/\", category:\"travel\", icon:\"\ud83c\udf34\", desc:\"Tourism site for Suriname adventure tours, built around trip packages and galleries.\" },\r\n { name:\"Tours Lanka with Manoj\", domain:\"tours-lankawithmanoj.com\", url:\"https:\/\/tours-lankawithmanoj.com\/\", category:\"travel\", icon:\"\ud83d\uddfa\ufe0f\", desc:\"Sri Lanka private-guide site with itinerary pages and a direct booking form.\" },\r\n { name:\"Hide Agency\", domain:\"hideagency.com\", url:\"https:\/\/hideagency.com\/\", category:\"travel\", icon:\"\ud83e\uddf3\", desc:\"Boutique travel agency site with curated getaway listings.\" },\r\n { name:\"Orange Wine Tours\", domain:\"orangewinetours.com.au\", url:\"https:\/\/orangewinetours.com.au\/\", category:\"travel\", icon:\"\ud83c\udf77\", desc:\"Australian wine-region tour operator site with tasting-tour bookings.\" },\r\n { name:\"Zixpy Tours\", domain:\"zixpytours.com\", url:\"https:\/\/zixpytours.com\/\", category:\"travel\", icon:\"\u2708\ufe0f\", desc:\"Tour operator site with a destination catalog and quote requests.\" },\r\n { name:\"Brussels Private Tours\", domain:\"brussels-private-tours.com\", url:\"https:\/\/brussels-private-tours.com\/\", category:\"travel\", icon:\"\ud83c\udfdb\ufe0f\", desc:\"Private city-tour site for Brussels with guide profiles and a booking form.\" },\r\n { name:\"Purace Travel Colombia\", domain:\"puracetravelcolombia.com\", url:\"https:\/\/puracetravelcolombia.com\/\", category:\"travel\", icon:\"\u26f0\ufe0f\", desc:\"Colombia adventure-travel site with trek and expedition packages.\" },\r\n { name:\"Ciao Cycling\", domain:\"ciaocycling.cc\", url:\"https:\/\/ciaocycling.cc\/\", category:\"travel\", icon:\"\ud83d\udeb4\", desc:\"Cycling tour operator site with route maps and multi-day tour listings.\" },\r\n { name:\"Sahara Cruiser\", domain:\"saharacruiser.com\", url:\"https:\/\/www.saharacruiser.com\/\", category:\"travel\", icon:\"\ud83d\udc2a\", desc:\"Desert tour operator site with expedition packages and inquiry forms.\" },\r\n { name:\"TQM Tours\", domain:\"tqmtours.com\", url:\"https:\/\/tqmtours.com\/\", category:\"travel\", icon:\"\ud83d\uddfa\ufe0f\", desc:\"Tour operator site with a destination catalog and booking inquiries.\" },\r\n { name:\"Purple Royal Tourism\", domain:\"purpleroyaltourism.com\", url:\"https:\/\/purpleroyaltourism.com\/\", category:\"travel\", icon:\"\ud83d\udc51\", desc:\"Tourism agency site with luxury package listings.\" },\r\n { name:\"Triptikum\", domain:\"triptikum.com\", url:\"https:\/\/triptikum.com\/\", category:\"travel\", icon:\"\ud83e\udded\", desc:\"Travel-planning site built around curated trip itineraries.\" },\r\n { name:\"TravelPact\", domain:\"travelpact.co.in\", url:\"https:\/\/travelpact.co.in\/\", category:\"travel\", icon:\"\u2708\ufe0f\", desc:\"Indian travel agency site covering domestic and international packages.\" },\r\n { name:\"Melting Voyages\", domain:\"melting-voyages.com\", url:\"https:\/\/melting-voyages.com\/\", category:\"travel\", icon:\"\ud83c\udf0d\", desc:\"Travel agency site focused on immersive, story-led voyage experiences.\" },\r\n { name:\"World Unzipped Tours\", domain:\"worldunzippedtours.com\", url:\"https:\/\/worldunzippedtours.com\/\", category:\"travel\", icon:\"\ud83c\udf0f\", desc:\"Global tour operator site with destination guides and packages.\" },\r\n { name:\"STRNVM\", domain:\"strnvm.com\", url:\"https:\/\/strnvm.com\/\", category:\"property\", icon:\"\ud83c\udfe2\", desc:\"Short-term rental management company site with a property portfolio.\" },\r\n { name:\"Restiva Properties\", domain:\"restivaproperties.com\", url:\"https:\/\/restivaproperties.com\/\", category:\"property\", icon:\"\ud83c\udfd8\ufe0f\", desc:\"Property management site with listings and owner-facing information.\" },\r\n { name:\"Pinkish Hideaway\", domain:\"pinkishhideaway.com\", url:\"https:\/\/pinkishhideaway.com\/\", category:\"property\", icon:\"\ud83c\udfe1\", desc:\"Vacation rental property site with a booking calendar.\" },\r\n { name:\"Zencaza\", domain:\"zencaza.com\", url:\"https:\/\/zencaza.com\/\", category:\"property\", icon:\"\ud83c\udfe0\", desc:\"Vacation rental brand site built around a curated stay collection.\" },\r\n { name:\"Choose Gulf Coast\", domain:\"choosegulfcoast.com\", url:\"https:\/\/www.choosegulfcoast.com\/\", category:\"property\", icon:\"\ud83c\udf0a\", desc:\"Gulf Coast vacation rental site with property search.\" },\r\n { name:\"GC Vacation Rentals\", domain:\"gcvacationrentals.com\", url:\"https:\/\/www.gcvacationrentals.com\/\", category:\"property\", icon:\"\ud83c\udfd6\ufe0f\", desc:\"Vacation rental listings site with booking inquiries.\" },\r\n { name:\"Sureguard Property Services\", domain:\"sureguardpropertyservices.com\", url:\"https:\/\/sureguardpropertyservices.com\/\", category:\"property\", icon:\"\ud83d\udee1\ufe0f\", desc:\"Property management company site with a service overview and contact form.\" },\r\n { name:\"Salt & Pine Management\", domain:\"saltandpinemanagement.com\", url:\"https:\/\/saltandpinemanagement.com\/\", category:\"property\", icon:\"\ud83c\udf32\", desc:\"Property management site with a portfolio section and contact forms.\" },\r\n { name:\"Kingdom Executive Travels\", domain:\"kingdomexecutivetravels.com\", url:\"https:\/\/kingdomexecutivetravels.com\/\", category:\"transport\", icon:\"\ud83d\ude98\", desc:\"Executive chauffeur service site with fleet details and booking.\" },\r\n { name:\"Unison Transfers\", domain:\"unisontransfers.com.au\", url:\"https:\/\/unisontransfers.com.au\/\", category:\"transport\", icon:\"\ud83d\ude90\", desc:\"Australian airport-transfer service site with an instant quote form.\" },\r\n { name:\"EindGo\", domain:\"eindgo.nl\", url:\"https:\/\/eindgo.nl\/\", category:\"transport\", icon:\"\ud83d\ude95\", desc:\"Netherlands transfer service site with online booking.\" },\r\n { name:\"SKR Travels & Logistics\", domain:\"skrtravelslogistics.co.uk\", url:\"https:\/\/skrtravelslogistics.co.uk\/\", category:\"transport\", icon:\"\ud83d\ude9a\", desc:\"UK transport and logistics company site.\" },\r\n { name:\"Sech Taxi\", domain:\"sechtaxi.com\", url:\"https:\/\/sechtaxi.com\/\", category:\"transport\", icon:\"\ud83d\ude96\", desc:\"Local taxi service site with a straightforward booking form.\" },\r\n { name:\"Q-Taxi\", domain:\"q-taxi.co.uk\", url:\"https:\/\/q-taxi.co.uk\/\", category:\"transport\", icon:\"\ud83d\ude96\", desc:\"UK taxi service site with a fare estimator.\" },\r\n { name:\"Brighton Cabs Co\", domain:\"brightoncabsco.com\", url:\"https:\/\/brightoncabsco.com\/\", category:\"transport\", icon:\"\ud83d\ude95\", desc:\"Brighton-based taxi company site with online booking.\" }\r\n ];\r\n const CATEGORY_META = {\r\n travel: { label:\"Travel & Tours\", thumbClass:\"thumb-travel\", scope:[\"WordPress\",\"Tour Listings\",\"Booking Inquiry\"] },\r\n property: { label:\"Property & Rentals\", thumbClass:\"thumb-property\", scope:[\"WordPress\",\"Property Listings\",\"Booking Calendar\"] },\r\n transport: { label:\"Transport & Taxi\", thumbClass:\"thumb-transport\", scope:[\"WordPress\",\"Fare \/ Quote Form\",\"Online Booking\"] }\r\n };\r\n\r\n const portfolioGrid = document.getElementById('portfolioGrid');\r\n const loadMoreBtn = document.getElementById('loadMoreBtn');\r\n const BATCH_SIZE = 9;\r\n let currentFilter = 'all';\r\n let visibleCount = BATCH_SIZE;\r\n\r\n function projectCardHTML(p){\r\n const meta = CATEGORY_META[p.category];\r\n const scopeChips = meta.scope.map(s => `<span class=\"tag\">${s}<\/span>`).join('');\r\n return `\r\n <div class=\"portfolio-card reveal in-view\" data-category=\"${p.category}\">\r\n <div class=\"project-thumb ${meta.thumbClass}\">\r\n <div class=\"browser-bar\"><span><\/span><span><\/span><span><\/span><span class=\"addr\">${p.domain}<\/span><\/div>\r\n <span class=\"thumb-icon\">${p.icon}<\/span>\r\n <\/div>\r\n <div class=\"portfolio-body\">\r\n <h4>${p.name}<\/h4>\r\n <p>${p.desc}<\/p>\r\n <div class=\"portfolio-scope\">${scopeChips}<\/div>\r\n <div class=\"portfolio-foot\">\r\n <span class=\"portfolio-domain\">${p.domain}<\/span>\r\n <a class=\"visit-link\" href=\"${p.url}\" target=\"_blank\" rel=\"noopener\">Visit site \u2197<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n }\r\n\r\n function renderPortfolio(){\r\n const filtered = currentFilter === 'all' ? PROJECTS : PROJECTS.filter(p => p.category === currentFilter);\r\n const slice = filtered.slice(0, visibleCount);\r\n portfolioGrid.innerHTML = slice.map(projectCardHTML).join('');\r\n loadMoreBtn.classList.toggle('done', visibleCount >= filtered.length);\r\n \/\/ (Re)bind hover cursor behavior on freshly rendered cards\r\n if (isFinePointer){\r\n portfolioGrid.querySelectorAll('a, .portfolio-card').forEach(el => {\r\n el.addEventListener('mouseenter', () => cursorRingEl.classList.add('hover'));\r\n el.addEventListener('mouseleave', () => cursorRingEl.classList.remove('hover'));\r\n });\r\n }\r\n }\r\n\r\n document.querySelectorAll('.filter-tab').forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));\r\n tab.classList.add('active');\r\n currentFilter = tab.dataset.filter;\r\n visibleCount = BATCH_SIZE;\r\n renderPortfolio();\r\n });\r\n });\r\n loadMoreBtn.addEventListener('click', () => {\r\n visibleCount += BATCH_SIZE;\r\n renderPortfolio();\r\n });\r\n\r\n renderPortfolio();\r\n\r\n \/\/ ---------- Testimonial marquee: duplicate content once for a seamless loop ----------\r\n const marqueeTrack = document.getElementById('marqueeTrack');\r\n if (marqueeTrack){\r\n marqueeTrack.innerHTML += marqueeTrack.innerHTML;\r\n }\r\n\r\n \/\/ Scroll reveal\r\n const revealEls = document.querySelectorAll('.reveal');\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting){\r\n entry.target.classList.add('in-view');\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n revealEls.forEach(el => io.observe(el));\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Zeeshan Saqib \u2014 WordPress & Automation Developer ZS Zeeshan Saqib About Services Work Experience Reviews Contact \u263e Start a project Available for new projects on Fiverr I Build Websites That Run Themselves. WordPress developer and automation builder on Fiverr, based in Pakistan. I ship business websites, booking systems, and AI-powered workflows that keep working long […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":11,"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/zeeshansaqib.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}