Shehryar \u2014 WordPress Web Developer<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\n\n <style type=\"text\/tailwindcss\">\n @theme {\n --font-display: 'Space Grotesk', sans-serif;\n --font-body: 'Inter', sans-serif;\n --font-serif: 'Cormorant Garamond', serif;\n --color-cream: #f8f6f3;\n --color-parchment: #f0efe9;\n --color-ink: #1a1816;\n --color-ink-soft: #3d3a37;\n --color-ink-muted: #6e6a65;\n --color-stone: #c4bfb8;\n --color-stone-warm: #a8a399;\n --color-terracotta: #b5654e;\n --color-terracotta-deep: #8c4d3a;\n --color-sand: #d8d4cb;\n }\n <\/style>\n\n <style>\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8f6f3;\n color: #1a1816;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n ::selection { background: #b5654e; color: #fff; }\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: #c4bfb8; border-radius: 3px; }\n ::-webkit-scrollbar-thumb:hover { background: #a8a399; }\n\n .reveal {\n opacity: 0;\n transform: translateY(28px);\n animation: revealUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n }\n .reveal-delay-1 { animation-delay: 0.1s; }\n .reveal-delay-2 { animation-delay: 0.2s; }\n .reveal-delay-3 { animation-delay: 0.3s; }\n .reveal-delay-4 { animation-delay: 0.4s; }\n @keyframes revealUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n .hero-gradient {\n background: linear-gradient(135deg, #1a1816 0%, #2e2a26 40%, #3d352f 100%);\n }\n\n .text-balance { text-wrap: balance; }\n\n .card-hover {\n transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;\n }\n .card-hover:hover {\n transform: translateY(-6px);\n box-shadow: 0 24px 48px -12px rgba(26,24,22,0.14);\n }\n\n input:focus, textarea:focus {\n box-shadow: 0 0 0 3px rgba(181,101,78,0.15);\n }\n <\/style>\n<\/head>\n\n<body class=\"font-body text-ink bg-cream\">\n\n \n <nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-cream\/70 backdrop-blur-xl border-b border-stone\/20\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 h-20 flex items-center justify-between\">\n <a href=\"#\" class=\"font-display text-xl font-bold tracking-tight text-ink hover:text-terracotta transition-colors duration-300\">Shehryar.<\/a>\n <div class=\"hidden md:flex items-center gap-10 text-[13px] font-medium tracking-wide uppercase text-ink-muted\">\n <a href=\"#about\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">About<\/a>\n <a href=\"#services\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Services<\/a>\n <a href=\"#skills\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Skills<\/a>\n <a href=\"#projects\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Projects<\/a>\n <a href=\"#contact\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Contact<\/a>\n <\/div>\n <a href=\"#contact\" class=\"hidden md:inline-flex items-center gap-2.5 bg-ink text-cream px-5 py-2.5 text-[13px] font-semibold tracking-wide rounded-full hover:bg-terracotta transition-colors duration-400 shadow-lg shadow-ink\/10 hover:shadow-terracotta\/20\">\n Let's Talk <i class=\"ph-bold ph-arrow-right\"><\/i>\n <\/a>\n <button onclick=\"document.getElementById('mobile-menu').classList.toggle('hidden')\" class=\"md:hidden text-ink text-2xl\">\n <i class=\"ph-bold ph-list\"><\/i>\n <\/button>\n <\/div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-cream\/95 backdrop-blur-2xl border-t border-stone\/20 px-6 py-8 space-y-5 shadow-xl shadow-ink\/5\">\n <a href=\"#about\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">About<\/a>\n <a href=\"#services\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Services<\/a>\n <a href=\"#skills\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Skills<\/a>\n <a href=\"#projects\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Projects<\/a>\n <a href=\"#contact\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Contact<\/a>\n <\/div>\n <\/nav>\n\n <main>\n \n <section id=\"hero\" class=\"hero-gradient min-h-[92vh] flex items-center relative overflow-hidden\">\n <div class=\"absolute inset-0 opacity-[0.03]\" style=\"background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 48px 48px;\"><\/div>\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 pt-28 pb-20 relative z-10 w-full\">\n <div class=\"max-w-4xl\">\n <div class=\"reveal reveal-delay-1 inline-flex items-center gap-2.5 bg-cream\/8 backdrop-blur-sm border border-cream\/10 px-4 py-1.5 rounded-full text-cream\/80 text-xs font-medium tracking-widest uppercase mb-8\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-terracotta animate-pulse\"><\/span>\n Available for Projects\n <\/div>\n <h1 class=\"reveal reveal-delay-2 font-display text-[clamp(3rem,8vw,7.5rem)] font-bold leading-[0.92] text-cream tracking-tight text-balance\">\n Hi, I'm <span class=\"italic font-serif font-light text-terracotta\">Shehryar<\/span>\n <br>\n <span class=\"text-cream\/70 font-light text-[0.75em] tracking-tight\">WordPress Web Developer<\/span>\n <\/h1>\n <p class=\"reveal reveal-delay-3 mt-8 text-cream\/55 text-lg md:text-xl max-w-xl leading-relaxed font-light\">\n I craft fast, elegant, and conversion-focused WordPress experiences. Clean code, thoughtful design, and a focus on results that matter to your business.\n <\/p>\n <div class=\"reveal reveal-delay-4 mt-10 flex items-center gap-5\">\n <a href=\"#contact\" class=\"inline-flex items-center gap-2.5 bg-cream text-ink px-8 py-4 text-sm font-semibold tracking-wide rounded-full hover:bg-parchment transition-all duration-300 shadow-xl shadow-black\/20 hover:shadow-2xl hover:-translate-y-0.5\">\n Start a Project <i class=\"ph-bold ph-arrow-right\"><\/i>\n <\/a>\n <a href=\"#projects\" class=\"inline-flex items-center gap-2.5 border border-cream\/15 text-cream\/80 px-8 py-4 text-sm font-medium tracking-wide rounded-full hover:bg-cream\/5 hover:border-cream\/30 transition-all duration-300\">\n View Portfolio\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-cream to-transparent\"><\/div>\n <\/section>\n\n \n <section id=\"about\" class=\"py-28 md:py-36 bg-cream\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"grid lg:grid-cols-12 gap-16 lg:gap-24 items-start\">\n <div class=\"lg:col-span-5\">\n <div class=\"sticky top-28\">\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">About Me<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl lg:text-[3.2rem] font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Building better web experiences with WordPress.<\/h2>\n <div class=\"w-16 h-0.5 bg-terracotta\/40 mt-8 rounded-full\"><\/div>\n <\/div>\n <\/div>\n <div class=\"lg:col-span-7 space-y-6 text-ink-muted text-[15px] leading-[1.85]\">\n <p class=\"text-lg text-ink-soft font-light leading-[1.75]\">\n With over 5 years of experience in WordPress development, I specialize in creating custom themes, optimized plugins, and high-performance websites that don't just look great \u2014 they convert visitors into customers.\n <\/p>\n <p>\n My approach combines clean, semantic HTML5 with modern design systems. I believe every pixel and every line of code should serve a purpose. Whether you're launching a new brand or scaling an existing business, I bring technical expertise and strategic thinking to every project.\n <\/p>\n <p>\n I'm based in Pakistan and work with clients worldwide. From small startups to established enterprises, I help businesses establish a strong digital presence through tailored WordPress solutions that grow with you.\n <\/p>\n <div class=\"flex flex-wrap gap-8 pt-6\">\n <div>\n <span class=\"font-display text-3xl font-bold text-ink\">120+<\/span>\n <p class=\"text-xs text-ink-muted mt-1 tracking-wide\">Projects Delivered<\/p>\n <\/div>\n <div>\n <span class=\"font-display text-3xl font-bold text-ink\">5+<\/span>\n <p class=\"text-xs text-ink-muted mt-1 tracking-wide\">Years Experience<\/p>\n <\/div>\n <div>\n <span class=\"font-display text-3xl font-bold text-ink\">100%<\/span>\n <p class=\"text-xs text-ink-muted mt-1 tracking-wide\">Client Satisfaction<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"services\" class=\"py-28 md:py-36 bg-parchment\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"max-w-2xl mb-20\">\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Services<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">What I Can Build For You<\/h2>\n <p class=\"text-ink-muted mt-5 text-[15px] leading-relaxed\">From custom themes to full-scale e-commerce platforms, here are the services I offer to help your business thrive online.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink flex items-center justify-center text-cream text-xl mb-7 shadow-lg shadow-ink\/10\">\n <i class=\"ph-fill ph-monitor\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">Custom Theme Development<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Hand-coded, responsive themes tailored to your brand identity and optimized for speed and SEO.<\/p>\n <\/article>\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-terracotta flex items-center justify-center text-white text-xl mb-7 shadow-lg shadow-terracotta\/20\">\n <i class=\"ph-fill ph-plug\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">Plugin Development<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Custom plugins that extend functionality without bloat. Clean, secure, and well-documented code.<\/p>\n <\/article>\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink-soft flex items-center justify-center text-cream text-xl mb-7 shadow-lg shadow-ink-soft\/10\">\n <i class=\"ph-fill ph-shopping-cart\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">E-Commerce Solutions<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">WooCommerce stores with custom checkout flows, product configurations, and seamless payment integrations.<\/p>\n <\/article>\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-stone-warm\/40 flex items-center justify-center text-ink-soft text-xl mb-7 shadow-md shadow-stone-warm\/10\">\n <i class=\"ph-fill ph-wrench\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">Site Optimization<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Performance audits, speed optimization, accessibility improvements, and SEO-ready architecture.<\/p>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"skills\" class=\"py-28 md:py-36 bg-ink text-cream overflow-hidden relative\">\n <div class=\"absolute inset-0 opacity-[0.04]\" style=\"background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;\"><\/div>\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 relative z-10\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-24\">\n <div>\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">My Skills<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-cream leading-[1.1] mt-5 tracking-tight\">Technical Expertise<\/h2>\n <p class=\"text-cream\/50 mt-6 text-[15px] leading-relaxed\">I combine deep WordPress knowledge with modern web technologies to build sites that are fast, secure, scalable, and easy to manage.<\/p>\n <\/div>\n <div class=\"space-y-8\">\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">WordPress \/ PHP<\/span>\n <span class=\"text-[13px] text-cream\/30\">95%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 95%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">HTML5 \/ CSS3 \/ JavaScript<\/span>\n <span class=\"text-[13px] text-cream\/30\">92%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 92%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">Custom Theme Design<\/span>\n <span class=\"text-[13px] text-cream\/30\">90%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 90%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">WooCommerce \/ E-Commerce<\/span>\n <span class=\"text-[13px] text-cream\/30\">88%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 88%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">Performance & SEO<\/span>\n <span class=\"text-[13px] text-cream\/30\">87%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 87%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"projects\" class=\"py-28 md:py-36 bg-cream\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-20\">\n <div>\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Portfolio<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Selected Projects<\/h2>\n <\/div>\n <p class=\"text-ink-muted text-[15px] max-w-sm leading-relaxed\">A selection of recent work showcasing custom WordPress themes, e-commerce platforms, and optimized business websites.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8\">\n <a href=\"#\" class=\"group block relative overflow-hidden rounded-3xl shadow-[0_4px_24px_-8px_rgba(26,24,22,0.08)]\">\n <div class=\"aspect-[4\/5] bg-gradient-to-br from-parchment to-stone\/30 relative overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?w=800&q=80\" alt=\"Tech Company Website\" class=\"w-full h-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105 opacity-90 group-hover:opacity-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-ink\/60 via-ink\/10 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 right-0 p-7\">\n <span class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-terracotta\">Business Website<\/span>\n <h3 class=\"font-display text-xl font-bold text-cream mt-1\">Apex Digital<\/h3>\n <p class=\"text-cream\/70 text-sm mt-2\">Custom WordPress theme with CMS integration and SEO optimization.<\/p>\n <\/div>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"group block relative overflow-hidden rounded-3xl shadow-[0_4px_24px_-8px_rgba(26,24,22,0.08)] md:-mt-8\">\n <div class=\"aspect-[4\/5] bg-gradient-to-br from-parchment to-stone\/30 relative overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?w=800&q=80\" alt=\"E-Commerce Store\" class=\"w-full h-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105 opacity-90 group-hover:opacity-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-ink\/60 via-ink\/10 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 right-0 p-7\">\n <span class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-terracotta\">E-Commerce<\/span>\n <h3 class=\"font-display text-xl font-bold text-cream mt-1\">Lumi\u00e8re Boutique<\/h3>\n <p class=\"text-cream\/70 text-sm mt-2\">WooCommerce platform with custom checkout and inventory management.<\/p>\n <\/div>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"group block relative overflow-hidden rounded-3xl shadow-[0_4px_24px_-8px_rgba(26,24,22,0.08)]\">\n <div class=\"aspect-[4\/5] bg-gradient-to-br from-parchment to-stone\/30 relative overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504384308090-c894fdcc538d?w=800&q=80\" alt=\"Startup Landing Page\" class=\"w-full h-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105 opacity-90 group-hover:opacity-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-ink\/60 via-ink\/10 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 right-0 p-7\">\n <span class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-terracotta\">Landing Page<\/span>\n <h3 class=\"font-display text-xl font-bold text-cream mt-1\">Vanta Startup<\/h3>\n <p class=\"text-cream\/70 text-sm mt-2\">High-conversion landing page with interactive animations and tracking.<\/p>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-28 md:py-36 bg-parchment relative overflow-hidden\">\n <div class=\"absolute top-20 right-10 w-80 h-80 rounded-full bg-terracotta\/5 blur-3xl\"><\/div>\n <div class=\"absolute bottom-10 left-10 w-64 h-64 rounded-full bg-ink\/3 blur-3xl\"><\/div>\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 relative z-10\">\n <div class=\"max-w-2xl mb-16 md:mb-20\">\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Why Me<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Why Work With Me<\/h2>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink text-cream flex items-center justify-center text-xl mb-6 shadow-lg shadow-ink\/10\">\n <i class=\"ph-fill ph-lightbulb\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Strategic Thinking<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Every project starts with understanding your business goals, audience, and market position to build with purpose.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-terracotta text-white flex items-center justify-center text-xl mb-6 shadow-lg shadow-terracotta\/20\">\n <i class=\"ph-fill ph-rocket\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Performance Focused<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Sites built for speed. Optimized loading times, clean code, and lightweight themes that rank and convert.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink-soft text-cream flex items-center justify-center text-xl mb-6 shadow-lg shadow-ink-soft\/10\">\n <i class=\"ph-fill ph-handshake\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Transparent Process<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Clear timelines, regular updates, and open communication from the first call to the final handover.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-parchment text-ink-soft flex items-center justify-center text-xl mb-6 shadow-md shadow-parchment\/20\">\n <i class=\"ph-fill ph-code\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Clean Code<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Semantic HTML5, modular CSS, and well-structured PHP. Easy to maintain, extend, and hand over.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink text-cream flex items-center justify-center text-xl mb-6 shadow-lg shadow-ink\/10\">\n <i class=\"ph-fill ph-chat-circle-dots\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Ongoing Support<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">I don't disappear after launch. Post-launch support, updates, and maintenance to keep your site running smoothly.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-terracotta text-white flex items-center justify-center text-xl mb-6 shadow-lg shadow-terracotta\/20\">\n <i class=\"ph-fill ph-target\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Results-Driven<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">I measure success by the impact your site has \u2014 more leads, higher conversions, and stronger brand presence.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"contact\" class=\"py-28 md:py-36 bg-cream\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-24\">\n <div>\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Contact<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Let's Build Something Great<\/h2>\n <p class=\"text-ink-muted mt-6 text-[15px] leading-relaxed\">Have an idea or a project in mind? I'd love to hear about it. Reach out directly or fill out the form and I'll get back to you within 24 hours.<\/p>\n\n <div class=\"mt-12 space-y-6\">\n <a href=\"mailto:shehryarfazalrhaman@gmail.com\" class=\"flex items-center gap-4 p-5 rounded-2xl bg-parchment border border-stone\/10 hover:border-terracotta\/20 hover:shadow-[0_8px_30px_-12px_rgba(181,101,78,0.15)] transition-all duration-300 group\">\n <div class=\"w-11 h-11 rounded-xl bg-ink text-cream flex items-center justify-center text-lg shadow-lg shadow-ink\/10 shrink-0\">\n <i class=\"ph-fill ph-envelope-simple\"><\/i>\n <\/div>\n <div>\n <p class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted\">Email<\/p>\n <p class=\"text-ink font-medium group-hover:text-terracotta transition-colors\">shehryarfazalrhaman@gmail.com<\/p>\n <\/div>\n <\/a>\n <a href=\"tel:+923098818132\" class=\"flex items-center gap-4 p-5 rounded-2xl bg-parchment border border-stone\/10 hover:border-terracotta\/20 hover:shadow-[0_8px_30px_-12px_rgba(181,101,78,0.15)] transition-all duration-300 group\">\n <div class=\"w-11 h-11 rounded-xl bg-terracotta text-white flex items-center justify-center text-lg shadow-lg shadow-terracotta\/20 shrink-0\">\n <i class=\"ph-fill ph-phone\"><\/i>\n <\/div>\n <div>\n <p class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted\">Phone<\/p>\n <p class=\"text-ink font-medium group-hover:text-terracotta transition-colors\">0309 8818132<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n\n <form onsubmit=\"event.preventDefault(); this.innerHTML='<div class=\\'flex items-center gap-3 text-terracotta font-display text-xl font-semibold\\'><i class=\\'ph-fill ph-check-circle text-3xl\\'><\/i> Message Sent Successfully<\/div>';\" class=\"bg-parchment p-8 md:p-10 rounded-[2.5rem] border border-stone\/20 shadow-[0_8px_40px_-16px_rgba(26,24,22,0.08)] space-y-6\">\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div>\n <label for=\"name\" class=\"block text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted mb-2.5\">Name<\/label>\n <input id=\"name\" type=\"text\" placeholder=\"Your name\" class=\"w-full bg-cream border border-stone\/30 rounded-xl px-5 py-3.5 text-[15px] text-ink placeholder:text-ink-muted\/40 focus:outline-none focus:border-terracotta\/50 transition-colors\" required>\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted mb-2.5\">Email<\/label>\n <input id=\"email\" type=\"email\" placeholder=\"you@example.com\" class=\"w-full bg-cream border border-stone\/30 rounded-xl px-5 py-3.5 text-[15px] text-ink placeholder:text-ink-muted\/40 focus:outline-none focus:border-terracotta\/50 transition-colors\" required>\n <\/div>\n <\/div>\n <div>\n <label for=\"message\" class=\"block text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted mb-2.5\">Message<\/label>\n <textarea id=\"message\" rows=\"5\" placeholder=\"Tell me about your project...\" class=\"w-full bg-cream border border-stone\/30 rounded-2xl px-5 py-4 text-[15px] text-ink placeholder:text-ink-muted\/40 focus:outline-none focus:border-terracotta\/50 transition-colors resize-none\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"w-full bg-ink text-cream font-display font-semibold tracking-wide text-sm px-8 py-4 rounded-2xl hover:bg-terracotta transition-all duration-300 shadow-xl shadow-ink\/10 hover:shadow-terracotta\/20 hover:-translate-y-0.5 flex items-center justify-center gap-2.5\">\n Send Message <i class=\"ph-bold ph-paper-plane-right\"><\/i>\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-ink text-cream pt-20 pb-8 border-t border-cream\/5\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"grid md:grid-cols-3 gap-12 md:gap-8 mb-16\">\n <div>\n <a href=\"#\" class=\"font-display text-2xl font-bold tracking-tight text-cream\">Shehryar.<\/a>\n <p class=\"text-cream\/35 text-[14px] mt-4 leading-relaxed\">Professional WordPress developer creating elegant, high-performance websites that help businesses grow online.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-display text-sm font-bold tracking-[0.15em] uppercase text-cream\/50 mb-5\">Quick Links<\/h4>\n <div class=\"flex flex-col gap-3 text-[14px] text-cream\/40\">\n <a href=\"#about\" class=\"hover:text-cream transition-colors\">About Me<\/a>\n <a href=\"#services\" class=\"hover:text-cream transition-colors\">Services<\/a>\n <a href=\"#projects\" class=\"hover:text-cream transition-colors\">Portfolio<\/a>\n <a href=\"#contact\" class=\"hover:text-cream transition-colors\">Contact<\/a>\n <\/div>\n <\/div>\n <div>\n <h4 class=\"font-display text-sm font-bold tracking-[0.15em] uppercase text-cream\/50 mb-5\">Get In Touch<\/h4>\n <div class=\"flex flex-col gap-3 text-[14px] text-cream\/40\">\n <a href=\"mailto:shehryarfazalrhaman@gmail.com\" class=\"hover:text-cream transition-colors\">shehryarfazalrhaman@gmail.com<\/a>\n <a href=\"tel:+923098818132\" class=\"hover:text-cream transition-colors\">0309 8818132<\/a>\n <\/div>\n <div class=\"flex gap-3 mt-6\">\n <a href=\"#\" aria-label=\"LinkedIn\" class=\"w-10 h-10 rounded-full bg-cream\/5 flex items-center justify-center text-cream\/40 hover:bg-terracotta hover:text-white transition-all duration-300\"><i class=\"ph-fill ph-linkedin-logo text-lg\"><\/i><\/a>\n <a href=\"#\" aria-label=\"GitHub\" class=\"w-10 h-10 rounded-full bg-cream\/5 flex items-center justify-center text-cream\/40 hover:bg-terracotta hover:text-white transition-all duration-300\"><i class=\"ph-fill ph-github-logo text-lg\"><\/i><\/a>\n <a href=\"#\" aria-label=\"Dribbble\" class=\"w-10 h-10 rounded-full bg-cream\/5 flex items-center justify-center text-cream\/40 hover:bg-terracotta hover:text-white transition-all duration-300\"><i class=\"ph-fill ph-dribbble-logo text-lg\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"border-t border-cream\/5 pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-[13px] text-cream\/20\">\n <p>© 2026 Shehryar. All rights reserved.<\/p>\n <p>Built with HTML5, modern design, and clean code.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shehryar \u2014 WordPress Web Developer Shehryar. About Services Skills Projects Contact Let’s Talk About Services Skills Projects Contact Available for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/comments?post=632"}],"version-history":[{"count":7,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/632\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/632\/revisions\/640"}],"wp:attachment":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/media?parent=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\n\n\n \n \n Shehryar \u2014 WordPress Web Developer<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\n\n <style type=\"text\/tailwindcss\">\n @theme {\n --font-display: 'Space Grotesk', sans-serif;\n --font-body: 'Inter', sans-serif;\n --font-serif: 'Cormorant Garamond', serif;\n --color-cream: #f8f6f3;\n --color-parchment: #f0efe9;\n --color-ink: #1a1816;\n --color-ink-soft: #3d3a37;\n --color-ink-muted: #6e6a65;\n --color-stone: #c4bfb8;\n --color-stone-warm: #a8a399;\n --color-terracotta: #b5654e;\n --color-terracotta-deep: #8c4d3a;\n --color-sand: #d8d4cb;\n }\n <\/style>\n\n <style>\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8f6f3;\n color: #1a1816;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n ::selection { background: #b5654e; color: #fff; }\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: #c4bfb8; border-radius: 3px; }\n ::-webkit-scrollbar-thumb:hover { background: #a8a399; }\n\n .reveal {\n opacity: 0;\n transform: translateY(28px);\n animation: revealUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n }\n .reveal-delay-1 { animation-delay: 0.1s; }\n .reveal-delay-2 { animation-delay: 0.2s; }\n .reveal-delay-3 { animation-delay: 0.3s; }\n .reveal-delay-4 { animation-delay: 0.4s; }\n @keyframes revealUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n .hero-gradient {\n background: linear-gradient(135deg, #1a1816 0%, #2e2a26 40%, #3d352f 100%);\n }\n\n .text-balance { text-wrap: balance; }\n\n .card-hover {\n transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;\n }\n .card-hover:hover {\n transform: translateY(-6px);\n box-shadow: 0 24px 48px -12px rgba(26,24,22,0.14);\n }\n\n input:focus, textarea:focus {\n box-shadow: 0 0 0 3px rgba(181,101,78,0.15);\n }\n <\/style>\n<\/head>\n\n<body class=\"font-body text-ink bg-cream\">\n\n \n <nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-cream\/70 backdrop-blur-xl border-b border-stone\/20\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 h-20 flex items-center justify-between\">\n <a href=\"#\" class=\"font-display text-xl font-bold tracking-tight text-ink hover:text-terracotta transition-colors duration-300\">Shehryar.<\/a>\n <div class=\"hidden md:flex items-center gap-10 text-[13px] font-medium tracking-wide uppercase text-ink-muted\">\n <a href=\"#about\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">About<\/a>\n <a href=\"#services\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Services<\/a>\n <a href=\"#skills\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Skills<\/a>\n <a href=\"#projects\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Projects<\/a>\n <a href=\"#contact\" class=\"hover:text-ink hover:underline underline-offset-4 decoration-terracotta\/60 transition-all duration-300\">Contact<\/a>\n <\/div>\n <a href=\"#contact\" class=\"hidden md:inline-flex items-center gap-2.5 bg-ink text-cream px-5 py-2.5 text-[13px] font-semibold tracking-wide rounded-full hover:bg-terracotta transition-colors duration-400 shadow-lg shadow-ink\/10 hover:shadow-terracotta\/20\">\n Let's Talk <i class=\"ph-bold ph-arrow-right\"><\/i>\n <\/a>\n <button onclick=\"document.getElementById('mobile-menu').classList.toggle('hidden')\" class=\"md:hidden text-ink text-2xl\">\n <i class=\"ph-bold ph-list\"><\/i>\n <\/button>\n <\/div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-cream\/95 backdrop-blur-2xl border-t border-stone\/20 px-6 py-8 space-y-5 shadow-xl shadow-ink\/5\">\n <a href=\"#about\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">About<\/a>\n <a href=\"#services\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Services<\/a>\n <a href=\"#skills\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Skills<\/a>\n <a href=\"#projects\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Projects<\/a>\n <a href=\"#contact\" onclick=\"document.getElementById('mobile-menu').classList.add('hidden')\" class=\"block text-sm font-medium text-ink hover:text-terracotta transition-colors\">Contact<\/a>\n <\/div>\n <\/nav>\n\n <main>\n \n <section id=\"hero\" class=\"hero-gradient min-h-[92vh] flex items-center relative overflow-hidden\">\n <div class=\"absolute inset-0 opacity-[0.03]\" style=\"background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 48px 48px;\"><\/div>\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 pt-28 pb-20 relative z-10 w-full\">\n <div class=\"max-w-4xl\">\n <div class=\"reveal reveal-delay-1 inline-flex items-center gap-2.5 bg-cream\/8 backdrop-blur-sm border border-cream\/10 px-4 py-1.5 rounded-full text-cream\/80 text-xs font-medium tracking-widest uppercase mb-8\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-terracotta animate-pulse\"><\/span>\n Available for Projects\n <\/div>\n <h1 class=\"reveal reveal-delay-2 font-display text-[clamp(3rem,8vw,7.5rem)] font-bold leading-[0.92] text-cream tracking-tight text-balance\">\n Hi, I'm <span class=\"italic font-serif font-light text-terracotta\">Shehryar<\/span>\n <br>\n <span class=\"text-cream\/70 font-light text-[0.75em] tracking-tight\">WordPress Web Developer<\/span>\n <\/h1>\n <p class=\"reveal reveal-delay-3 mt-8 text-cream\/55 text-lg md:text-xl max-w-xl leading-relaxed font-light\">\n I craft fast, elegant, and conversion-focused WordPress experiences. Clean code, thoughtful design, and a focus on results that matter to your business.\n <\/p>\n <div class=\"reveal reveal-delay-4 mt-10 flex items-center gap-5\">\n <a href=\"#contact\" class=\"inline-flex items-center gap-2.5 bg-cream text-ink px-8 py-4 text-sm font-semibold tracking-wide rounded-full hover:bg-parchment transition-all duration-300 shadow-xl shadow-black\/20 hover:shadow-2xl hover:-translate-y-0.5\">\n Start a Project <i class=\"ph-bold ph-arrow-right\"><\/i>\n <\/a>\n <a href=\"#projects\" class=\"inline-flex items-center gap-2.5 border border-cream\/15 text-cream\/80 px-8 py-4 text-sm font-medium tracking-wide rounded-full hover:bg-cream\/5 hover:border-cream\/30 transition-all duration-300\">\n View Portfolio\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-cream to-transparent\"><\/div>\n <\/section>\n\n \n <section id=\"about\" class=\"py-28 md:py-36 bg-cream\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"grid lg:grid-cols-12 gap-16 lg:gap-24 items-start\">\n <div class=\"lg:col-span-5\">\n <div class=\"sticky top-28\">\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">About Me<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl lg:text-[3.2rem] font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Building better web experiences with WordPress.<\/h2>\n <div class=\"w-16 h-0.5 bg-terracotta\/40 mt-8 rounded-full\"><\/div>\n <\/div>\n <\/div>\n <div class=\"lg:col-span-7 space-y-6 text-ink-muted text-[15px] leading-[1.85]\">\n <p class=\"text-lg text-ink-soft font-light leading-[1.75]\">\n With over 5 years of experience in WordPress development, I specialize in creating custom themes, optimized plugins, and high-performance websites that don't just look great \u2014 they convert visitors into customers.\n <\/p>\n <p>\n My approach combines clean, semantic HTML5 with modern design systems. I believe every pixel and every line of code should serve a purpose. Whether you're launching a new brand or scaling an existing business, I bring technical expertise and strategic thinking to every project.\n <\/p>\n <p>\n I'm based in Pakistan and work with clients worldwide. From small startups to established enterprises, I help businesses establish a strong digital presence through tailored WordPress solutions that grow with you.\n <\/p>\n <div class=\"flex flex-wrap gap-8 pt-6\">\n <div>\n <span class=\"font-display text-3xl font-bold text-ink\">120+<\/span>\n <p class=\"text-xs text-ink-muted mt-1 tracking-wide\">Projects Delivered<\/p>\n <\/div>\n <div>\n <span class=\"font-display text-3xl font-bold text-ink\">5+<\/span>\n <p class=\"text-xs text-ink-muted mt-1 tracking-wide\">Years Experience<\/p>\n <\/div>\n <div>\n <span class=\"font-display text-3xl font-bold text-ink\">100%<\/span>\n <p class=\"text-xs text-ink-muted mt-1 tracking-wide\">Client Satisfaction<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"services\" class=\"py-28 md:py-36 bg-parchment\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"max-w-2xl mb-20\">\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Services<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">What I Can Build For You<\/h2>\n <p class=\"text-ink-muted mt-5 text-[15px] leading-relaxed\">From custom themes to full-scale e-commerce platforms, here are the services I offer to help your business thrive online.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink flex items-center justify-center text-cream text-xl mb-7 shadow-lg shadow-ink\/10\">\n <i class=\"ph-fill ph-monitor\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">Custom Theme Development<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Hand-coded, responsive themes tailored to your brand identity and optimized for speed and SEO.<\/p>\n <\/article>\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-terracotta flex items-center justify-center text-white text-xl mb-7 shadow-lg shadow-terracotta\/20\">\n <i class=\"ph-fill ph-plug\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">Plugin Development<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Custom plugins that extend functionality without bloat. Clean, secure, and well-documented code.<\/p>\n <\/article>\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink-soft flex items-center justify-center text-cream text-xl mb-7 shadow-lg shadow-ink-soft\/10\">\n <i class=\"ph-fill ph-shopping-cart\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">E-Commerce Solutions<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">WooCommerce stores with custom checkout flows, product configurations, and seamless payment integrations.<\/p>\n <\/article>\n <article class=\"card-hover bg-cream p-8 rounded-3xl border border-stone\/20 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.06)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-stone-warm\/40 flex items-center justify-center text-ink-soft text-xl mb-7 shadow-md shadow-stone-warm\/10\">\n <i class=\"ph-fill ph-wrench\"><\/i>\n <\/div>\n <h3 class=\"font-display text-xl font-bold text-ink mb-3\">Site Optimization<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Performance audits, speed optimization, accessibility improvements, and SEO-ready architecture.<\/p>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"skills\" class=\"py-28 md:py-36 bg-ink text-cream overflow-hidden relative\">\n <div class=\"absolute inset-0 opacity-[0.04]\" style=\"background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;\"><\/div>\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 relative z-10\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-24\">\n <div>\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">My Skills<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-cream leading-[1.1] mt-5 tracking-tight\">Technical Expertise<\/h2>\n <p class=\"text-cream\/50 mt-6 text-[15px] leading-relaxed\">I combine deep WordPress knowledge with modern web technologies to build sites that are fast, secure, scalable, and easy to manage.<\/p>\n <\/div>\n <div class=\"space-y-8\">\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">WordPress \/ PHP<\/span>\n <span class=\"text-[13px] text-cream\/30\">95%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 95%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">HTML5 \/ CSS3 \/ JavaScript<\/span>\n <span class=\"text-[13px] text-cream\/30\">92%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 92%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">Custom Theme Design<\/span>\n <span class=\"text-[13px] text-cream\/30\">90%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 90%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">WooCommerce \/ E-Commerce<\/span>\n <span class=\"text-[13px] text-cream\/30\">88%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 88%\"><\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"flex justify-between mb-3\">\n <span class=\"font-display text-sm font-semibold tracking-wide\">Performance & SEO<\/span>\n <span class=\"text-[13px] text-cream\/30\">87%<\/span>\n <\/div>\n <div class=\"h-1.5 bg-cream\/10 rounded-full overflow-hidden\">\n <div class=\"h-full bg-gradient-to-r from-terracotta to-terracotta-deep rounded-full\" style=\"width: 87%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"projects\" class=\"py-28 md:py-36 bg-cream\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-20\">\n <div>\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Portfolio<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Selected Projects<\/h2>\n <\/div>\n <p class=\"text-ink-muted text-[15px] max-w-sm leading-relaxed\">A selection of recent work showcasing custom WordPress themes, e-commerce platforms, and optimized business websites.<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8\">\n <a href=\"#\" class=\"group block relative overflow-hidden rounded-3xl shadow-[0_4px_24px_-8px_rgba(26,24,22,0.08)]\">\n <div class=\"aspect-[4\/5] bg-gradient-to-br from-parchment to-stone\/30 relative overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?w=800&q=80\" alt=\"Tech Company Website\" class=\"w-full h-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105 opacity-90 group-hover:opacity-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-ink\/60 via-ink\/10 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 right-0 p-7\">\n <span class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-terracotta\">Business Website<\/span>\n <h3 class=\"font-display text-xl font-bold text-cream mt-1\">Apex Digital<\/h3>\n <p class=\"text-cream\/70 text-sm mt-2\">Custom WordPress theme with CMS integration and SEO optimization.<\/p>\n <\/div>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"group block relative overflow-hidden rounded-3xl shadow-[0_4px_24px_-8px_rgba(26,24,22,0.08)] md:-mt-8\">\n <div class=\"aspect-[4\/5] bg-gradient-to-br from-parchment to-stone\/30 relative overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?w=800&q=80\" alt=\"E-Commerce Store\" class=\"w-full h-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105 opacity-90 group-hover:opacity-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-ink\/60 via-ink\/10 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 right-0 p-7\">\n <span class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-terracotta\">E-Commerce<\/span>\n <h3 class=\"font-display text-xl font-bold text-cream mt-1\">Lumi\u00e8re Boutique<\/h3>\n <p class=\"text-cream\/70 text-sm mt-2\">WooCommerce platform with custom checkout and inventory management.<\/p>\n <\/div>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"group block relative overflow-hidden rounded-3xl shadow-[0_4px_24px_-8px_rgba(26,24,22,0.08)]\">\n <div class=\"aspect-[4\/5] bg-gradient-to-br from-parchment to-stone\/30 relative overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504384308090-c894fdcc538d?w=800&q=80\" alt=\"Startup Landing Page\" class=\"w-full h-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-105 opacity-90 group-hover:opacity-100\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-ink\/60 via-ink\/10 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 right-0 p-7\">\n <span class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-terracotta\">Landing Page<\/span>\n <h3 class=\"font-display text-xl font-bold text-cream mt-1\">Vanta Startup<\/h3>\n <p class=\"text-cream\/70 text-sm mt-2\">High-conversion landing page with interactive animations and tracking.<\/p>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-28 md:py-36 bg-parchment relative overflow-hidden\">\n <div class=\"absolute top-20 right-10 w-80 h-80 rounded-full bg-terracotta\/5 blur-3xl\"><\/div>\n <div class=\"absolute bottom-10 left-10 w-64 h-64 rounded-full bg-ink\/3 blur-3xl\"><\/div>\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12 relative z-10\">\n <div class=\"max-w-2xl mb-16 md:mb-20\">\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Why Me<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Why Work With Me<\/h2>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink text-cream flex items-center justify-center text-xl mb-6 shadow-lg shadow-ink\/10\">\n <i class=\"ph-fill ph-lightbulb\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Strategic Thinking<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Every project starts with understanding your business goals, audience, and market position to build with purpose.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-terracotta text-white flex items-center justify-center text-xl mb-6 shadow-lg shadow-terracotta\/20\">\n <i class=\"ph-fill ph-rocket\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Performance Focused<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Sites built for speed. Optimized loading times, clean code, and lightweight themes that rank and convert.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink-soft text-cream flex items-center justify-center text-xl mb-6 shadow-lg shadow-ink-soft\/10\">\n <i class=\"ph-fill ph-handshake\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Transparent Process<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Clear timelines, regular updates, and open communication from the first call to the final handover.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-parchment text-ink-soft flex items-center justify-center text-xl mb-6 shadow-md shadow-parchment\/20\">\n <i class=\"ph-fill ph-code\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Clean Code<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">Semantic HTML5, modular CSS, and well-structured PHP. Easy to maintain, extend, and hand over.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-ink text-cream flex items-center justify-center text-xl mb-6 shadow-lg shadow-ink\/10\">\n <i class=\"ph-fill ph-chat-circle-dots\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Ongoing Support<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">I don't disappear after launch. Post-launch support, updates, and maintenance to keep your site running smoothly.<\/p>\n <\/div>\n <div class=\"bg-cream\/60 backdrop-blur-sm p-8 rounded-3xl border border-stone\/10 shadow-[0_4px_24px_-8px_rgba(26,24,22,0.05)]\">\n <div class=\"w-12 h-12 rounded-2xl bg-terracotta text-white flex items-center justify-center text-xl mb-6 shadow-lg shadow-terracotta\/20\">\n <i class=\"ph-fill ph-target\"><\/i>\n <\/div>\n <h3 class=\"font-display text-lg font-bold text-ink mb-3\">Results-Driven<\/h3>\n <p class=\"text-ink-muted text-[14px] leading-relaxed\">I measure success by the impact your site has \u2014 more leads, higher conversions, and stronger brand presence.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"contact\" class=\"py-28 md:py-36 bg-cream\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"grid lg:grid-cols-2 gap-16 lg:gap-24\">\n <div>\n <span class=\"text-terracotta font-display text-sm font-semibold tracking-[0.2em] uppercase\">Contact<\/span>\n <h2 class=\"font-display text-4xl md:text-5xl font-bold text-ink leading-[1.1] mt-5 tracking-tight\">Let's Build Something Great<\/h2>\n <p class=\"text-ink-muted mt-6 text-[15px] leading-relaxed\">Have an idea or a project in mind? I'd love to hear about it. Reach out directly or fill out the form and I'll get back to you within 24 hours.<\/p>\n\n <div class=\"mt-12 space-y-6\">\n <a href=\"mailto:shehryarfazalrhaman@gmail.com\" class=\"flex items-center gap-4 p-5 rounded-2xl bg-parchment border border-stone\/10 hover:border-terracotta\/20 hover:shadow-[0_8px_30px_-12px_rgba(181,101,78,0.15)] transition-all duration-300 group\">\n <div class=\"w-11 h-11 rounded-xl bg-ink text-cream flex items-center justify-center text-lg shadow-lg shadow-ink\/10 shrink-0\">\n <i class=\"ph-fill ph-envelope-simple\"><\/i>\n <\/div>\n <div>\n <p class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted\">Email<\/p>\n <p class=\"text-ink font-medium group-hover:text-terracotta transition-colors\">shehryarfazalrhaman@gmail.com<\/p>\n <\/div>\n <\/a>\n <a href=\"tel:+923098818132\" class=\"flex items-center gap-4 p-5 rounded-2xl bg-parchment border border-stone\/10 hover:border-terracotta\/20 hover:shadow-[0_8px_30px_-12px_rgba(181,101,78,0.15)] transition-all duration-300 group\">\n <div class=\"w-11 h-11 rounded-xl bg-terracotta text-white flex items-center justify-center text-lg shadow-lg shadow-terracotta\/20 shrink-0\">\n <i class=\"ph-fill ph-phone\"><\/i>\n <\/div>\n <div>\n <p class=\"text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted\">Phone<\/p>\n <p class=\"text-ink font-medium group-hover:text-terracotta transition-colors\">0309 8818132<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n\n <form onsubmit=\"event.preventDefault(); this.innerHTML='<div class=\\'flex items-center gap-3 text-terracotta font-display text-xl font-semibold\\'><i class=\\'ph-fill ph-check-circle text-3xl\\'><\/i> Message Sent Successfully<\/div>';\" class=\"bg-parchment p-8 md:p-10 rounded-[2.5rem] border border-stone\/20 shadow-[0_8px_40px_-16px_rgba(26,24,22,0.08)] space-y-6\">\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div>\n <label for=\"name\" class=\"block text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted mb-2.5\">Name<\/label>\n <input id=\"name\" type=\"text\" placeholder=\"Your name\" class=\"w-full bg-cream border border-stone\/30 rounded-xl px-5 py-3.5 text-[15px] text-ink placeholder:text-ink-muted\/40 focus:outline-none focus:border-terracotta\/50 transition-colors\" required>\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted mb-2.5\">Email<\/label>\n <input id=\"email\" type=\"email\" placeholder=\"you@example.com\" class=\"w-full bg-cream border border-stone\/30 rounded-xl px-5 py-3.5 text-[15px] text-ink placeholder:text-ink-muted\/40 focus:outline-none focus:border-terracotta\/50 transition-colors\" required>\n <\/div>\n <\/div>\n <div>\n <label for=\"message\" class=\"block text-[11px] font-semibold tracking-[0.15em] uppercase text-ink-muted mb-2.5\">Message<\/label>\n <textarea id=\"message\" rows=\"5\" placeholder=\"Tell me about your project...\" class=\"w-full bg-cream border border-stone\/30 rounded-2xl px-5 py-4 text-[15px] text-ink placeholder:text-ink-muted\/40 focus:outline-none focus:border-terracotta\/50 transition-colors resize-none\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"w-full bg-ink text-cream font-display font-semibold tracking-wide text-sm px-8 py-4 rounded-2xl hover:bg-terracotta transition-all duration-300 shadow-xl shadow-ink\/10 hover:shadow-terracotta\/20 hover:-translate-y-0.5 flex items-center justify-center gap-2.5\">\n Send Message <i class=\"ph-bold ph-paper-plane-right\"><\/i>\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-ink text-cream pt-20 pb-8 border-t border-cream\/5\">\n <div class=\"max-w-6xl mx-auto px-6 lg:px-12\">\n <div class=\"grid md:grid-cols-3 gap-12 md:gap-8 mb-16\">\n <div>\n <a href=\"#\" class=\"font-display text-2xl font-bold tracking-tight text-cream\">Shehryar.<\/a>\n <p class=\"text-cream\/35 text-[14px] mt-4 leading-relaxed\">Professional WordPress developer creating elegant, high-performance websites that help businesses grow online.<\/p>\n <\/div>\n <div>\n <h4 class=\"font-display text-sm font-bold tracking-[0.15em] uppercase text-cream\/50 mb-5\">Quick Links<\/h4>\n <div class=\"flex flex-col gap-3 text-[14px] text-cream\/40\">\n <a href=\"#about\" class=\"hover:text-cream transition-colors\">About Me<\/a>\n <a href=\"#services\" class=\"hover:text-cream transition-colors\">Services<\/a>\n <a href=\"#projects\" class=\"hover:text-cream transition-colors\">Portfolio<\/a>\n <a href=\"#contact\" class=\"hover:text-cream transition-colors\">Contact<\/a>\n <\/div>\n <\/div>\n <div>\n <h4 class=\"font-display text-sm font-bold tracking-[0.15em] uppercase text-cream\/50 mb-5\">Get In Touch<\/h4>\n <div class=\"flex flex-col gap-3 text-[14px] text-cream\/40\">\n <a href=\"mailto:shehryarfazalrhaman@gmail.com\" class=\"hover:text-cream transition-colors\">shehryarfazalrhaman@gmail.com<\/a>\n <a href=\"tel:+923098818132\" class=\"hover:text-cream transition-colors\">0309 8818132<\/a>\n <\/div>\n <div class=\"flex gap-3 mt-6\">\n <a href=\"#\" aria-label=\"LinkedIn\" class=\"w-10 h-10 rounded-full bg-cream\/5 flex items-center justify-center text-cream\/40 hover:bg-terracotta hover:text-white transition-all duration-300\"><i class=\"ph-fill ph-linkedin-logo text-lg\"><\/i><\/a>\n <a href=\"#\" aria-label=\"GitHub\" class=\"w-10 h-10 rounded-full bg-cream\/5 flex items-center justify-center text-cream\/40 hover:bg-terracotta hover:text-white transition-all duration-300\"><i class=\"ph-fill ph-github-logo text-lg\"><\/i><\/a>\n <a href=\"#\" aria-label=\"Dribbble\" class=\"w-10 h-10 rounded-full bg-cream\/5 flex items-center justify-center text-cream\/40 hover:bg-terracotta hover:text-white transition-all duration-300\"><i class=\"ph-fill ph-dribbble-logo text-lg\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"border-t border-cream\/5 pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-[13px] text-cream\/20\">\n <p>© 2026 Shehryar. All rights reserved.<\/p>\n <p>Built with HTML5, modern design, and clean code.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shehryar \u2014 WordPress Web Developer Shehryar. About Services Skills Projects Contact Let’s Talk About Services Skills Projects Contact Available for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/comments?post=632"}],"version-history":[{"count":7,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/632\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/632\/revisions\/640"}],"wp:attachment":[{"href":"https:\/\/shehryar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/media?parent=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}