UI\/UX Designer & Web Developer | Portfolio<\/title>\r\n<meta name=\"description\" content=\"Professional UI\/UX designer and web developer portfolio \u2014 HTML, CSS, JavaScript, frontend & backend development, website and app design services.\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --blue:#303AA3;\r\n --navy:#11143D;\r\n --hero-bg:#ECF7FB;\r\n --lavender:#CFD1E6;\r\n --gold:#B9782B;\r\n --maroon:#B52E4A;\r\n --cyan:#20C7D9;\r\n --white:#FFFFFF;\r\n --black:#111111;\r\n --gray:#777777;\r\n --light-gray:#EEEEEE;\r\n --dark-gray:#666666;\r\n --shadow: 0 8px 25px rgba(0,0,0,0.08);\r\n --shadow-hover: 0 12px 30px rgba(0,0,0,0.12);\r\n --radius-card:12px;\r\n --radius-btn:28px;\r\n }\r\n *{margin:0;padding:0;box-sizing:border-box;}\r\n html{scroll-behavior:smooth;}\r\n body{font-family:'Poppins',sans-serif;color:var(--black);line-height:1.7;overflow-x:hidden;background:var(--white);}\r\n img{max-width:100%;display:block;}\r\n a{text-decoration:none;color:inherit;}\r\n ul{list-style:none;}\r\n .container{max-width:1200px;margin:0 auto;padding:0 50px;}\r\n section{padding:90px 0;}\r\n h1,h2,h3{font-weight:700;color:var(--black);}\r\n .section-heading{font-size:44px;text-align:center;margin-bottom:14px;}\r\n .section-sub{text-align:center;color:var(--gray);font-size:15px;max-width:560px;margin:0 auto 55px;}\r\n .btn{display:inline-block;padding:13px 28px;border-radius:var(--radius-btn);font-size:13px;font-weight:600;cursor:pointer;transition:.25s ease;border:none;}\r\n .btn-primary{background:var(--blue);color:var(--white);}\r\n .btn-primary:hover{background:var(--navy);transform:translateY(-2px);}\r\n .btn-outline{background:var(--white);border:1px solid var(--navy);color:var(--navy);}\r\n .btn-outline:hover{background:var(--navy);color:var(--white);transform:translateY(-2px);}\r\n :focus-visible{outline:2px solid var(--blue);outline-offset:3px;}\r\n\r\n \/* HEADER *\/\r\n header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);}\r\n .nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}\r\n .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--navy);}\r\n .logo-mark{width:38px;height:38px;flex-shrink:0;}\r\n nav ul{display:flex;gap:28px;}\r\n nav a{font-size:13px;font-weight:500;color:var(--navy);position:relative;padding:4px 0;}\r\n nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue);transition:.25s ease;}\r\n nav a:hover::after,nav a.active::after{width:100%;}\r\n .header-right{display:flex;align-items:center;gap:22px;}\r\n .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}\r\n .hamburger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.3s;}\r\n\r\n \/* HERO *\/\r\n .hero{background:var(--hero-bg);padding:70px 0 40px;position:relative;overflow:hidden;}\r\n .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;min-height:520px;}\r\n .hero-intro{font-size:15px;font-weight:600;color:var(--blue);margin-bottom:12px;letter-spacing:.3px;}\r\n .hero h1{font-size:64px;line-height:1.08;color:var(--blue);margin-bottom:22px;}\r\n .hero p{color:var(--gray);font-size:15px;max-width:480px;margin-bottom:32px;}\r\n .hero-btns{display:flex;gap:16px;flex-wrap:wrap;}\r\n .hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;height:520px;}\r\n .hero-circle{position:absolute;border-radius:50%;border:1px solid rgba(48,58,163,.14);}\r\n .hc1{width:420px;height:420px;top:10px;right:20px;}\r\n .hc2{width:320px;height:320px;bottom:10px;right:70px;}\r\n .hc3{width:230px;height:230px;top:90px;right:110px;}\r\n .avatar-wrap{position:relative;width:340px;height:420px;border-radius:170px 170px 0 0;overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--navy));display:flex;align-items:flex-end;justify-content:center;z-index:2;}\r\n .avatar-svg{width:100%;}\r\n .dash-pattern{position:absolute;top:20px;right:0;width:100px;height:80px;z-index:1;}\r\n .dash-pattern span{position:absolute;width:2px;height:16px;background:var(--cyan);border-radius:2px;}\r\n .review-card,.social-card,.fav-btn{position:absolute;background:var(--white);border-radius:12px;box-shadow:var(--shadow);z-index:3;}\r\n .review-card{top:35px;left:-10px;padding:14px 16px;width:150px;}\r\n .review-card .stars{color:var(--gold);font-size:14px;margin-bottom:4px;letter-spacing:2px;}\r\n .review-card p{font-size:11px;color:var(--navy);font-weight:600;margin:0;max-width:none;}\r\n .social-card{bottom:60px;left:-30px;padding:12px 14px;display:flex;gap:10px;}\r\n .social-card a{width:30px;height:30px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:13px;transition:.25s;}\r\n .social-card a:hover{transform:scale(1.12);background:var(--navy);}\r\n .fav-btn{bottom:130px;left:-45px;width:42px;height:42px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:17px;transition:.25s;}\r\n .fav-btn:hover{transform:scale(1.1);}\r\n\r\n \/* ABOUT *\/\r\n .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;}\r\n .about-visual{position:relative;width:100%;max-width:380px;justify-self:center;}\r\n .about-circle{position:absolute;border-radius:50%;z-index:0;}\r\n .ac1{width:280px;height:280px;background:var(--navy);top:-30px;left:-30px;opacity:.9;}\r\n .ac2{width:220px;height:220px;border:1px solid var(--blue);bottom:-20px;right:-30px;}\r\n .about-img{position:relative;z-index:1;width:100%;aspect-ratio:1\/1.1;border-radius:24px;background:linear-gradient(160deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;overflow:hidden;}\r\n .about-img svg{width:70%;}\r\n .about-content h2{font-size:42px;margin-bottom:18px;}\r\n .about-content > p{color:var(--gray);font-size:15px;margin-bottom:36px;max-width:520px;}\r\n .skill{margin-bottom:22px;}\r\n .skill-top{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:8px;}\r\n .skill-track{position:relative;height:8px;background:var(--light-gray);border-radius:6px;overflow:visible;}\r\n .skill-fill{height:100%;width:0;border-radius:6px;transition:width 1.4s ease-out;position:relative;}\r\n .skill-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--white);border:3px solid currentColor;}\r\n\r\n \/* SERVICES *\/\r\n .services{background:var(--lavender);}\r\n .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}\r\n .service-card{background:var(--white);border-radius:var(--radius-card);padding:32px 24px;min-height:210px;box-shadow:var(--shadow);transition:.3s ease;position:relative;overflow:hidden;}\r\n .service-card::before{content:'';position:absolute;left:0;top:0;width:4px;height:0%;background:linear-gradient(180deg,var(--blue),var(--cyan));transition:height .45s ease;}\r\n .service-card:hover::before{height:100%;}\r\n .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}\r\n .service-icon{width:44px;height:44px;color:var(--blue);margin-bottom:18px;}\r\n .service-card h3{font-size:18px;margin-bottom:10px;}\r\n .service-card p{font-size:13.5px;color:var(--gray);margin-bottom:12px;}\r\n .read-more{font-size:12.5px;font-weight:600;color:var(--blue);}\r\n\r\n \/* PORTFOLIO *\/\r\n .filters{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:45px;}\r\n .filter-btn{padding:9px 20px;border-radius:22px;border:1px solid var(--light-gray);background:var(--white);font-size:13px;font-weight:500;color:var(--black);cursor:pointer;transition:.25s ease;}\r\n .filter-btn.active,.filter-btn:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}\r\n .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}\r\n .portfolio-card{border-radius:10px;overflow:hidden;box-shadow:var(--shadow);transition:.3s ease;position:relative;}\r\n .portfolio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}\r\n .portfolio-thumb{aspect-ratio:16\/10;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:34px;overflow:hidden;transition:.3s ease;}\r\n .portfolio-card:hover .portfolio-thumb{transform:scale(1.03);}\r\n .portfolio-info{background:var(--dark-gray);padding:16px 18px;position:relative;overflow:hidden;}\r\n .portfolio-info::before{content:'';position:absolute;left:0;top:0;width:3px;height:0%;background:var(--gold);transition:height .45s ease;}\r\n .portfolio-card:hover .portfolio-info::before{height:100%;}\r\n .portfolio-cat{color:var(--gold);font-size:11.5px;font-weight:600;display:block;margin-bottom:4px;}\r\n .portfolio-title{color:var(--white);font-size:15px;font-weight:600;}\r\n .more-projects{text-align:center;margin-top:50px;}\r\n\r\n \/* TESTIMONIALS *\/\r\n .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}\r\n .t-card{background:var(--white);border:1px solid var(--light-gray);border-radius:14px;padding:28px;box-shadow:var(--shadow);}\r\n .t-top{display:flex;gap:14px;align-items:center;margin-bottom:14px;}\r\n .t-avatar{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;}\r\n .t-name{font-size:14.5px;font-weight:600;}\r\n .t-role{font-size:12px;color:var(--gray);}\r\n .t-stars{color:var(--gold);font-size:13px;margin-bottom:10px;letter-spacing:2px;}\r\n .t-card p{font-size:13.5px;color:var(--gray);}\r\n\r\n \/* CONTACT CTA *\/\r\n .contact{background:var(--navy);color:var(--white);text-align:center;position:relative;overflow:hidden;}\r\n .contact h2{color:var(--white);font-size:40px;margin-bottom:16px;}\r\n .contact p{color:#c9cbe0;max-width:560px;margin:0 auto 34px;font-size:15px;}\r\n .contact-circle{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;}\r\n .cc1{width:400px;height:400px;top:-150px;left:-100px;}\r\n .cc2{width:300px;height:300px;bottom:-140px;right:-80px;}\r\n .contact-details{position:relative;z-index:2;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:36px;font-size:14px;}\r\n .contact-details a{color:var(--white);font-weight:500;}\r\n .contact-details a:hover{color:var(--cyan);}\r\n .contact .container{position:relative;z-index:2;}\r\n\r\n \/* FOOTER *\/\r\n footer{background:var(--black);color:#bbb;padding:60px 0 24px;}\r\n .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}\r\n .footer-logo{color:var(--white);font-size:19px;font-weight:700;margin-bottom:14px;}\r\n .footer-col h4{color:var(--white);font-size:15px;margin-bottom:16px;}\r\n .footer-col li{margin-bottom:10px;font-size:13.5px;}\r\n .footer-col a:hover{color:var(--cyan);}\r\n .footer-desc{font-size:13.5px;max-width:320px;margin-bottom:18px;}\r\n .platforms{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;}\r\n .platform-tag{border:1px solid #333;border-radius:16px;padding:5px 13px;font-size:12px;}\r\n .social-icons{display:flex;gap:12px;}\r\n .social-icons a{width:34px;height:34px;border-radius:50%;background:#1c1c1c;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;transition:.25s;}\r\n .social-icons a:hover{background:var(--blue);transform:translateY(-3px);}\r\n .footer-bottom{border-top:1px solid #262626;padding-top:20px;text-align:center;font-size:12.5px;}\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width:1199px){\r\n .container{padding:0 30px;}\r\n .hero h1{font-size:52px;}\r\n .services-grid{grid-template-columns:repeat(2,1fr);}\r\n .portfolio-grid{grid-template-columns:repeat(2,1fr);}\r\n .testimonials-grid{grid-template-columns:repeat(2,1fr);}\r\n .footer-grid{grid-template-columns:1fr 1fr;}\r\n }\r\n @media (max-width:900px){\r\n .hero-grid{grid-template-columns:1fr;}\r\n .hero-visual{margin-top:20px;height:420px;}\r\n .about-grid{grid-template-columns:1fr;}\r\n .about-content{text-align:left;}\r\n }\r\n @media (max-width:768px){\r\n .container{padding:0 20px;}\r\n section{padding:60px 0;}\r\n nav{position:fixed;top:78px;left:0;right:0;background:var(--white);flex-direction:column;padding:20px;box-shadow:var(--shadow);transform:translateY(-150%);opacity:0;transition:.3s ease;}\r\n nav.open{transform:translateY(0);opacity:1;}\r\n nav ul{flex-direction:column;gap:0;width:100%;}\r\n nav ul li{border-bottom:1px solid var(--light-gray);}\r\n nav ul li a{display:block;padding:14px 4px;}\r\n .hamburger{display:flex;}\r\n .header-right .btn-primary{display:none;}\r\n .hero h1{font-size:42px;}\r\n .hero-visual{height:360px;}\r\n .avatar-wrap{width:250px;height:320px;}\r\n .hc1{width:320px;height:320px;}.hc2{width:240px;height:240px;}.hc3{width:170px;height:170px;}\r\n .services-grid,.portfolio-grid,.testimonials-grid{grid-template-columns:1fr;}\r\n .footer-grid{grid-template-columns:1fr;}\r\n .section-heading{font-size:32px;}\r\n .contact h2{font-size:28px;}\r\n .contact-details{flex-direction:column;gap:14px;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n <div class=\"container nav-wrap\">\r\n <div class=\"logo\">\r\n <svg class=\"logo-mark\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n <circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"#B9782B\"\/>\r\n <path d=\"M12 26L20 10L28 26\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <circle cx=\"20\" cy=\"20\" r=\"3.5\" fill=\"white\"\/>\r\n <\/svg>\r\n <span>DevFolio<\/span>\r\n <\/div>\r\n <nav id=\"mainNav\">\r\n <ul>\r\n <li><a href=\"#home\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"#about\">About Us<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#contact\">Contact Us<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <div class=\"header-right\">\r\n <a href=\"#contact\" class=\"btn btn-primary\">Let's Talk<\/a>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<section class=\"hero\" id=\"home\">\r\n <div class=\"container hero-grid\">\r\n <div>\r\n <div class=\"hero-intro\">Hi, I am<\/div>\r\n <h1>UI\/UX Designer<br>& Web Developer<\/h1>\r\n <p>With a passion for clean, intuitive and effective design, I build digital products that enhance user engagement \u2014 combining HTML, CSS, JavaScript, and full-stack development to deliver work that makes a lasting impact.<\/p>\r\n <div class=\"hero-btns\">\r\n <a href=\"#contact\" class=\"btn btn-primary\">Contact Us<\/a>\r\n <a href=\"#projects\" class=\"btn btn-outline\">Portfolio<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-visual\">\r\n <div class=\"hero-circle hc1\"><\/div>\r\n <div class=\"hero-circle hc2\"><\/div>\r\n <div class=\"hero-circle hc3\"><\/div>\r\n <div class=\"dash-pattern\" id=\"dashPattern\"><\/div>\r\n <div class=\"avatar-wrap\">\r\n <svg class=\"avatar-svg\" viewBox=\"0 0 340 420\" fill=\"none\">\r\n <circle cx=\"170\" cy=\"150\" r=\"70\" fill=\"rgba(255,255,255,.18)\"\/>\r\n <path d=\"M60 420C60 320 110 260 170 260C230 260 280 320 280 420Z\" fill=\"rgba(255,255,255,.18)\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"review-card\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>20k+ Customer Reviews<\/p>\r\n <\/div>\r\n <div class=\"fav-btn\">\u2665<\/div>\r\n <div class=\"social-card\">\r\n <a href=\"#\" aria-label=\"Facebook\">f<\/a>\r\n <a href=\"#\" aria-label=\"LinkedIn\">in<\/a>\r\n <a href=\"#\" aria-label=\"Telegram\">\u2708<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"about\">\r\n <div class=\"container about-grid\">\r\n <div class=\"about-visual\">\r\n <div class=\"about-circle ac1\"><\/div>\r\n <div class=\"about-circle ac2\"><\/div>\r\n <div class=\"about-img\">\r\n <svg viewBox=\"0 0 200 200\" fill=\"none\">\r\n <circle cx=\"100\" cy=\"80\" r=\"38\" fill=\"rgba(255,255,255,.25)\"\/>\r\n <path d=\"M35 200C35 140 65 110 100 110C135 110 165 140 165 200Z\" fill=\"rgba(255,255,255,.25)\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-content\">\r\n <h2>About Me<\/h2>\r\n <p>I'm a UI\/UX designer and web developer who crafts intuitive, engaging digital experiences \u2014 from concept and wireframes to fully coded, responsive websites and applications, delivered to clients on Fiverr, Upwork and LinkedIn worldwide.<\/p>\r\n\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>HTML<\/span><span>96%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"96\" style=\"background:var(--gold);color:var(--gold);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>CSS<\/span><span>94%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"94\" style=\"background:var(--maroon);color:var(--maroon);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>JavaScript<\/span><span>90%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"90\" style=\"background:var(--gray);color:var(--gray);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>Frontend Development<\/span><span>93%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"93\" style=\"background:var(--blue);color:var(--blue);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>Backend Development<\/span><span>85%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"85\" style=\"background:var(--navy);color:var(--navy);\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"services\" id=\"services\">\r\n <div class=\"container\">\r\n <h2 class=\"section-heading\">My Design Services<\/h2>\r\n <p class=\"section-sub\">A complete set of design & development services to take your product from idea to a polished, working product.<\/p>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"\/><path d=\"M3 9h18\"\/><circle cx=\"6.5\" cy=\"6.5\" r=\".6\" fill=\"currentColor\"\/><\/svg>\r\n <h3>UI\/UX Design<\/h3>\r\n <p>Wireframes, prototypes and interfaces built around real user needs.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M4 5l8-2 8 2v6c0 6-3.5 9-8 10-4.5-1-8-4-8-10V5z\"\/><path d=\"M9 12l2 2 4-4\"\/><\/svg>\r\n <h3>Web Design & Development<\/h3>\r\n <p>Responsive websites hand-coded in HTML, CSS and JavaScript.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"20\" rx=\"2\"\/><path d=\"M11 18h2\"\/><\/svg>\r\n <h3>App Design<\/h3>\r\n <p>Clean mobile app interfaces designed for engagement and clarity.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 3a9 9 0 010 18\"\/><\/svg>\r\n <h3>Graphic Design<\/h3>\r\n <p>Logos, brand identity and visual assets that stay consistent.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"projects\">\r\n <div class=\"container\">\r\n <h2 class=\"section-heading\">My Portfolio<\/h2>\r\n <p class=\"section-sub\">Explore a collection of my UI\/UX and development projects, each crafted to deliver seamless, user-centred experiences.<\/p>\r\n <div class=\"filters\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\r\n <button class=\"filter-btn\" data-filter=\"uiux\">UI\/UX<\/button>\r\n <button class=\"filter-btn\" data-filter=\"website\">Website Design<\/button>\r\n <button class=\"filter-btn\" data-filter=\"app\">App Design<\/button>\r\n <button class=\"filter-btn\" data-filter=\"graphic\">Graphic Design<\/button>\r\n <\/div>\r\n <div class=\"portfolio-grid\" id=\"portfolioGrid\">\r\n <div class=\"portfolio-card\" data-cat=\"website\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--blue),var(--navy));\">\ud83d\udda5\ufe0f<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">Design<\/span><span class=\"portfolio-title\">Website Landing Page Design & Development<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"website\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--gold),var(--maroon));\">\ud83d\uded2<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">Design<\/span><span class=\"portfolio-title\">E-Commerce Website<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"app\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--cyan),var(--blue));\">\ud83c\udfe6<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">App Design<\/span><span class=\"portfolio-title\">Mobile Banking App<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"uiux\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--navy),var(--maroon));\">\ud83d\udcca<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">UI\/UX<\/span><span class=\"portfolio-title\">SaaS Dashboard<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"graphic\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--gray),var(--navy));\">\ud83c\udfa8<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">Graphic Design<\/span><span class=\"portfolio-title\">Brand Identity Design<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"app\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--blue),var(--gold));\">\ud83d\udcf1<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">App Design<\/span><span class=\"portfolio-title\">Mobile App UI\/UX<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"more-projects\"><a href=\"#contact\" class=\"btn btn-primary\">Explore More Projects<\/a><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"testimonials\" style=\"background:var(--light-gray);\">\r\n <div class=\"container\">\r\n <h2 class=\"section-heading\">What Clients Say<\/h2>\r\n <p class=\"section-sub\">Feedback from clients I've worked with on Fiverr, Upwork and direct projects.<\/p>\r\n <div class=\"testimonials-grid\">\r\n <div class=\"t-card\">\r\n <div class=\"t-top\"><div class=\"t-avatar\">A<\/div><div><div class=\"t-name\">Ahmed R.<\/div><div class=\"t-role\">Startup Founder<\/div><\/div><\/div>\r\n <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>Delivered our landing page exactly to spec, clean code and fast turnaround.<\/p>\r\n <\/div>\r\n <div class=\"t-card\">\r\n <div class=\"t-top\"><div class=\"t-avatar\">S<\/div><div><div class=\"t-name\">Sarah K.<\/div><div class=\"t-role\">Product Manager<\/div><\/div><\/div>\r\n <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>Great communication and a strong eye for both design and usability.<\/p>\r\n <\/div>\r\n <div class=\"t-card\">\r\n <div class=\"t-top\"><div class=\"t-avatar\">M<\/div><div><div class=\"t-name\">Michael D.<\/div><div class=\"t-role\">E-commerce Owner<\/div><\/div><\/div>\r\n <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>Our new store looks premium and works flawlessly on mobile.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"contact\" id=\"contact\">\r\n <div class=\"contact-circle cc1\"><\/div>\r\n <div class=\"contact-circle cc2\"><\/div>\r\n <div class=\"container\">\r\n <h2>Let's Create Something Amazing Together<\/h2>\r\n <p>Have a project in mind? Let's turn your idea into a clean, engaging and memorable digital experience.<\/p>\r\n <a href=\"mailto:info@web.com\" class=\"btn btn-primary\">Let's Talk<\/a>\r\n <div class=\"contact-details\">\r\n <a href=\"tel:+923338544747\">\ud83d\udcde 0333 8544747<\/a>\r\n <a href=\"mailto:info@web.com\">\u2709 info@web.com<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div>\r\n <div class=\"footer-logo\">DevFolio<\/div>\r\n <p class=\"footer-desc\">UI\/UX designer & web developer building clean, responsive digital experiences for clients worldwide.<\/p>\r\n <div class=\"platforms\">\r\n <span class=\"platform-tag\">Fiverr<\/span>\r\n <span class=\"platform-tag\">Upwork<\/span>\r\n <span class=\"platform-tag\">LinkedIn<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Quick Links<\/h4>\r\n <ul>\r\n <li><a href=\"#home\">Home<\/a><\/li>\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Get in Touch<\/h4>\r\n <ul>\r\n <li>\ud83d\udcde 0333 8544747<\/li>\r\n <li>\u2709 info@web.com<\/li>\r\n <\/ul>\r\n <div class=\"social-icons\">\r\n <a href=\"#\" aria-label=\"Facebook\">f<\/a>\r\n <a href=\"#\" aria-label=\"LinkedIn\">in<\/a>\r\n <a href=\"#\" aria-label=\"Instagram\">ig<\/a>\r\n <a href=\"#\" aria-label=\"Behance\">be<\/a>\r\n <a href=\"#\" aria-label=\"Dribbble\">db<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\u00a9 2026 DevFolio. All Rights Reserved.<\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n \/\/ Mobile nav toggle\r\n const hamburger = document.getElementById('hamburger');\r\n const nav = document.getElementById('mainNav');\r\n hamburger.addEventListener('click', () => {\r\n nav.classList.toggle('open');\r\n const expanded = nav.classList.contains('open');\r\n hamburger.setAttribute('aria-expanded', expanded);\r\n });\r\n document.querySelectorAll('#mainNav a').forEach(link => {\r\n link.addEventListener('click', () => nav.classList.remove('open'));\r\n });\r\n\r\n \/\/ Portfolio filter\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n const cards = document.querySelectorAll('.portfolio-card');\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n filterBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n const filter = btn.dataset.filter;\r\n cards.forEach(card => {\r\n card.style.display = (filter === 'all' || card.dataset.cat === filter) ? '' : 'none';\r\n });\r\n });\r\n });\r\n\r\n \/\/ Skill bar animation on scroll into view\r\n const skillFills = document.querySelectorAll('.skill-fill');\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.width = entry.target.dataset.width + '%';\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.3 });\r\n skillFills.forEach(fill => observer.observe(fill));\r\n\r\n \/\/ Decorative diagonal dash pattern (cyan, top-right of hero)\r\n const dashHost = document.getElementById('dashPattern');\r\n let dashHtml = '';\r\n for (let i = 0; i < 24; i++) {\r\n const x = (i % 6) * 16;\r\n const y = Math.floor(i \/ 6) * 18;\r\n dashHtml += `<span style=\"top:${y}px;left:${x}px;transform:rotate(30deg);\"><\/span>`;\r\n }\r\n dashHost.innerHTML = dashHtml;\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UI\/UX Designer & Web Developer | Portfolio DevFolio Home About Us Services Projects Contact Us Let’s Talk Hi, I am […]<\/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":"disabled","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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nUI\/UX Designer & Web Developer | Portfolio<\/title>\r\n<meta name=\"description\" content=\"Professional UI\/UX designer and web developer portfolio \u2014 HTML, CSS, JavaScript, frontend & backend development, website and app design services.\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --blue:#303AA3;\r\n --navy:#11143D;\r\n --hero-bg:#ECF7FB;\r\n --lavender:#CFD1E6;\r\n --gold:#B9782B;\r\n --maroon:#B52E4A;\r\n --cyan:#20C7D9;\r\n --white:#FFFFFF;\r\n --black:#111111;\r\n --gray:#777777;\r\n --light-gray:#EEEEEE;\r\n --dark-gray:#666666;\r\n --shadow: 0 8px 25px rgba(0,0,0,0.08);\r\n --shadow-hover: 0 12px 30px rgba(0,0,0,0.12);\r\n --radius-card:12px;\r\n --radius-btn:28px;\r\n }\r\n *{margin:0;padding:0;box-sizing:border-box;}\r\n html{scroll-behavior:smooth;}\r\n body{font-family:'Poppins',sans-serif;color:var(--black);line-height:1.7;overflow-x:hidden;background:var(--white);}\r\n img{max-width:100%;display:block;}\r\n a{text-decoration:none;color:inherit;}\r\n ul{list-style:none;}\r\n .container{max-width:1200px;margin:0 auto;padding:0 50px;}\r\n section{padding:90px 0;}\r\n h1,h2,h3{font-weight:700;color:var(--black);}\r\n .section-heading{font-size:44px;text-align:center;margin-bottom:14px;}\r\n .section-sub{text-align:center;color:var(--gray);font-size:15px;max-width:560px;margin:0 auto 55px;}\r\n .btn{display:inline-block;padding:13px 28px;border-radius:var(--radius-btn);font-size:13px;font-weight:600;cursor:pointer;transition:.25s ease;border:none;}\r\n .btn-primary{background:var(--blue);color:var(--white);}\r\n .btn-primary:hover{background:var(--navy);transform:translateY(-2px);}\r\n .btn-outline{background:var(--white);border:1px solid var(--navy);color:var(--navy);}\r\n .btn-outline:hover{background:var(--navy);color:var(--white);transform:translateY(-2px);}\r\n :focus-visible{outline:2px solid var(--blue);outline-offset:3px;}\r\n\r\n \/* HEADER *\/\r\n header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);}\r\n .nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}\r\n .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--navy);}\r\n .logo-mark{width:38px;height:38px;flex-shrink:0;}\r\n nav ul{display:flex;gap:28px;}\r\n nav a{font-size:13px;font-weight:500;color:var(--navy);position:relative;padding:4px 0;}\r\n nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue);transition:.25s ease;}\r\n nav a:hover::after,nav a.active::after{width:100%;}\r\n .header-right{display:flex;align-items:center;gap:22px;}\r\n .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}\r\n .hamburger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.3s;}\r\n\r\n \/* HERO *\/\r\n .hero{background:var(--hero-bg);padding:70px 0 40px;position:relative;overflow:hidden;}\r\n .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;min-height:520px;}\r\n .hero-intro{font-size:15px;font-weight:600;color:var(--blue);margin-bottom:12px;letter-spacing:.3px;}\r\n .hero h1{font-size:64px;line-height:1.08;color:var(--blue);margin-bottom:22px;}\r\n .hero p{color:var(--gray);font-size:15px;max-width:480px;margin-bottom:32px;}\r\n .hero-btns{display:flex;gap:16px;flex-wrap:wrap;}\r\n .hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;height:520px;}\r\n .hero-circle{position:absolute;border-radius:50%;border:1px solid rgba(48,58,163,.14);}\r\n .hc1{width:420px;height:420px;top:10px;right:20px;}\r\n .hc2{width:320px;height:320px;bottom:10px;right:70px;}\r\n .hc3{width:230px;height:230px;top:90px;right:110px;}\r\n .avatar-wrap{position:relative;width:340px;height:420px;border-radius:170px 170px 0 0;overflow:hidden;background:linear-gradient(160deg,var(--blue),var(--navy));display:flex;align-items:flex-end;justify-content:center;z-index:2;}\r\n .avatar-svg{width:100%;}\r\n .dash-pattern{position:absolute;top:20px;right:0;width:100px;height:80px;z-index:1;}\r\n .dash-pattern span{position:absolute;width:2px;height:16px;background:var(--cyan);border-radius:2px;}\r\n .review-card,.social-card,.fav-btn{position:absolute;background:var(--white);border-radius:12px;box-shadow:var(--shadow);z-index:3;}\r\n .review-card{top:35px;left:-10px;padding:14px 16px;width:150px;}\r\n .review-card .stars{color:var(--gold);font-size:14px;margin-bottom:4px;letter-spacing:2px;}\r\n .review-card p{font-size:11px;color:var(--navy);font-weight:600;margin:0;max-width:none;}\r\n .social-card{bottom:60px;left:-30px;padding:12px 14px;display:flex;gap:10px;}\r\n .social-card a{width:30px;height:30px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:13px;transition:.25s;}\r\n .social-card a:hover{transform:scale(1.12);background:var(--navy);}\r\n .fav-btn{bottom:130px;left:-45px;width:42px;height:42px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:17px;transition:.25s;}\r\n .fav-btn:hover{transform:scale(1.1);}\r\n\r\n \/* ABOUT *\/\r\n .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;}\r\n .about-visual{position:relative;width:100%;max-width:380px;justify-self:center;}\r\n .about-circle{position:absolute;border-radius:50%;z-index:0;}\r\n .ac1{width:280px;height:280px;background:var(--navy);top:-30px;left:-30px;opacity:.9;}\r\n .ac2{width:220px;height:220px;border:1px solid var(--blue);bottom:-20px;right:-30px;}\r\n .about-img{position:relative;z-index:1;width:100%;aspect-ratio:1\/1.1;border-radius:24px;background:linear-gradient(160deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;overflow:hidden;}\r\n .about-img svg{width:70%;}\r\n .about-content h2{font-size:42px;margin-bottom:18px;}\r\n .about-content > p{color:var(--gray);font-size:15px;margin-bottom:36px;max-width:520px;}\r\n .skill{margin-bottom:22px;}\r\n .skill-top{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:8px;}\r\n .skill-track{position:relative;height:8px;background:var(--light-gray);border-radius:6px;overflow:visible;}\r\n .skill-fill{height:100%;width:0;border-radius:6px;transition:width 1.4s ease-out;position:relative;}\r\n .skill-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--white);border:3px solid currentColor;}\r\n\r\n \/* SERVICES *\/\r\n .services{background:var(--lavender);}\r\n .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}\r\n .service-card{background:var(--white);border-radius:var(--radius-card);padding:32px 24px;min-height:210px;box-shadow:var(--shadow);transition:.3s ease;position:relative;overflow:hidden;}\r\n .service-card::before{content:'';position:absolute;left:0;top:0;width:4px;height:0%;background:linear-gradient(180deg,var(--blue),var(--cyan));transition:height .45s ease;}\r\n .service-card:hover::before{height:100%;}\r\n .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}\r\n .service-icon{width:44px;height:44px;color:var(--blue);margin-bottom:18px;}\r\n .service-card h3{font-size:18px;margin-bottom:10px;}\r\n .service-card p{font-size:13.5px;color:var(--gray);margin-bottom:12px;}\r\n .read-more{font-size:12.5px;font-weight:600;color:var(--blue);}\r\n\r\n \/* PORTFOLIO *\/\r\n .filters{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:45px;}\r\n .filter-btn{padding:9px 20px;border-radius:22px;border:1px solid var(--light-gray);background:var(--white);font-size:13px;font-weight:500;color:var(--black);cursor:pointer;transition:.25s ease;}\r\n .filter-btn.active,.filter-btn:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}\r\n .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}\r\n .portfolio-card{border-radius:10px;overflow:hidden;box-shadow:var(--shadow);transition:.3s ease;position:relative;}\r\n .portfolio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}\r\n .portfolio-thumb{aspect-ratio:16\/10;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:34px;overflow:hidden;transition:.3s ease;}\r\n .portfolio-card:hover .portfolio-thumb{transform:scale(1.03);}\r\n .portfolio-info{background:var(--dark-gray);padding:16px 18px;position:relative;overflow:hidden;}\r\n .portfolio-info::before{content:'';position:absolute;left:0;top:0;width:3px;height:0%;background:var(--gold);transition:height .45s ease;}\r\n .portfolio-card:hover .portfolio-info::before{height:100%;}\r\n .portfolio-cat{color:var(--gold);font-size:11.5px;font-weight:600;display:block;margin-bottom:4px;}\r\n .portfolio-title{color:var(--white);font-size:15px;font-weight:600;}\r\n .more-projects{text-align:center;margin-top:50px;}\r\n\r\n \/* TESTIMONIALS *\/\r\n .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}\r\n .t-card{background:var(--white);border:1px solid var(--light-gray);border-radius:14px;padding:28px;box-shadow:var(--shadow);}\r\n .t-top{display:flex;gap:14px;align-items:center;margin-bottom:14px;}\r\n .t-avatar{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;}\r\n .t-name{font-size:14.5px;font-weight:600;}\r\n .t-role{font-size:12px;color:var(--gray);}\r\n .t-stars{color:var(--gold);font-size:13px;margin-bottom:10px;letter-spacing:2px;}\r\n .t-card p{font-size:13.5px;color:var(--gray);}\r\n\r\n \/* CONTACT CTA *\/\r\n .contact{background:var(--navy);color:var(--white);text-align:center;position:relative;overflow:hidden;}\r\n .contact h2{color:var(--white);font-size:40px;margin-bottom:16px;}\r\n .contact p{color:#c9cbe0;max-width:560px;margin:0 auto 34px;font-size:15px;}\r\n .contact-circle{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;}\r\n .cc1{width:400px;height:400px;top:-150px;left:-100px;}\r\n .cc2{width:300px;height:300px;bottom:-140px;right:-80px;}\r\n .contact-details{position:relative;z-index:2;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:36px;font-size:14px;}\r\n .contact-details a{color:var(--white);font-weight:500;}\r\n .contact-details a:hover{color:var(--cyan);}\r\n .contact .container{position:relative;z-index:2;}\r\n\r\n \/* FOOTER *\/\r\n footer{background:var(--black);color:#bbb;padding:60px 0 24px;}\r\n .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}\r\n .footer-logo{color:var(--white);font-size:19px;font-weight:700;margin-bottom:14px;}\r\n .footer-col h4{color:var(--white);font-size:15px;margin-bottom:16px;}\r\n .footer-col li{margin-bottom:10px;font-size:13.5px;}\r\n .footer-col a:hover{color:var(--cyan);}\r\n .footer-desc{font-size:13.5px;max-width:320px;margin-bottom:18px;}\r\n .platforms{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;}\r\n .platform-tag{border:1px solid #333;border-radius:16px;padding:5px 13px;font-size:12px;}\r\n .social-icons{display:flex;gap:12px;}\r\n .social-icons a{width:34px;height:34px;border-radius:50%;background:#1c1c1c;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;transition:.25s;}\r\n .social-icons a:hover{background:var(--blue);transform:translateY(-3px);}\r\n .footer-bottom{border-top:1px solid #262626;padding-top:20px;text-align:center;font-size:12.5px;}\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width:1199px){\r\n .container{padding:0 30px;}\r\n .hero h1{font-size:52px;}\r\n .services-grid{grid-template-columns:repeat(2,1fr);}\r\n .portfolio-grid{grid-template-columns:repeat(2,1fr);}\r\n .testimonials-grid{grid-template-columns:repeat(2,1fr);}\r\n .footer-grid{grid-template-columns:1fr 1fr;}\r\n }\r\n @media (max-width:900px){\r\n .hero-grid{grid-template-columns:1fr;}\r\n .hero-visual{margin-top:20px;height:420px;}\r\n .about-grid{grid-template-columns:1fr;}\r\n .about-content{text-align:left;}\r\n }\r\n @media (max-width:768px){\r\n .container{padding:0 20px;}\r\n section{padding:60px 0;}\r\n nav{position:fixed;top:78px;left:0;right:0;background:var(--white);flex-direction:column;padding:20px;box-shadow:var(--shadow);transform:translateY(-150%);opacity:0;transition:.3s ease;}\r\n nav.open{transform:translateY(0);opacity:1;}\r\n nav ul{flex-direction:column;gap:0;width:100%;}\r\n nav ul li{border-bottom:1px solid var(--light-gray);}\r\n nav ul li a{display:block;padding:14px 4px;}\r\n .hamburger{display:flex;}\r\n .header-right .btn-primary{display:none;}\r\n .hero h1{font-size:42px;}\r\n .hero-visual{height:360px;}\r\n .avatar-wrap{width:250px;height:320px;}\r\n .hc1{width:320px;height:320px;}.hc2{width:240px;height:240px;}.hc3{width:170px;height:170px;}\r\n .services-grid,.portfolio-grid,.testimonials-grid{grid-template-columns:1fr;}\r\n .footer-grid{grid-template-columns:1fr;}\r\n .section-heading{font-size:32px;}\r\n .contact h2{font-size:28px;}\r\n .contact-details{flex-direction:column;gap:14px;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n <div class=\"container nav-wrap\">\r\n <div class=\"logo\">\r\n <svg class=\"logo-mark\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n <circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"#B9782B\"\/>\r\n <path d=\"M12 26L20 10L28 26\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <circle cx=\"20\" cy=\"20\" r=\"3.5\" fill=\"white\"\/>\r\n <\/svg>\r\n <span>DevFolio<\/span>\r\n <\/div>\r\n <nav id=\"mainNav\">\r\n <ul>\r\n <li><a href=\"#home\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"#about\">About Us<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#contact\">Contact Us<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <div class=\"header-right\">\r\n <a href=\"#contact\" class=\"btn btn-primary\">Let's Talk<\/a>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<section class=\"hero\" id=\"home\">\r\n <div class=\"container hero-grid\">\r\n <div>\r\n <div class=\"hero-intro\">Hi, I am<\/div>\r\n <h1>UI\/UX Designer<br>& Web Developer<\/h1>\r\n <p>With a passion for clean, intuitive and effective design, I build digital products that enhance user engagement \u2014 combining HTML, CSS, JavaScript, and full-stack development to deliver work that makes a lasting impact.<\/p>\r\n <div class=\"hero-btns\">\r\n <a href=\"#contact\" class=\"btn btn-primary\">Contact Us<\/a>\r\n <a href=\"#projects\" class=\"btn btn-outline\">Portfolio<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-visual\">\r\n <div class=\"hero-circle hc1\"><\/div>\r\n <div class=\"hero-circle hc2\"><\/div>\r\n <div class=\"hero-circle hc3\"><\/div>\r\n <div class=\"dash-pattern\" id=\"dashPattern\"><\/div>\r\n <div class=\"avatar-wrap\">\r\n <svg class=\"avatar-svg\" viewBox=\"0 0 340 420\" fill=\"none\">\r\n <circle cx=\"170\" cy=\"150\" r=\"70\" fill=\"rgba(255,255,255,.18)\"\/>\r\n <path d=\"M60 420C60 320 110 260 170 260C230 260 280 320 280 420Z\" fill=\"rgba(255,255,255,.18)\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"review-card\">\r\n <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>20k+ Customer Reviews<\/p>\r\n <\/div>\r\n <div class=\"fav-btn\">\u2665<\/div>\r\n <div class=\"social-card\">\r\n <a href=\"#\" aria-label=\"Facebook\">f<\/a>\r\n <a href=\"#\" aria-label=\"LinkedIn\">in<\/a>\r\n <a href=\"#\" aria-label=\"Telegram\">\u2708<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"about\">\r\n <div class=\"container about-grid\">\r\n <div class=\"about-visual\">\r\n <div class=\"about-circle ac1\"><\/div>\r\n <div class=\"about-circle ac2\"><\/div>\r\n <div class=\"about-img\">\r\n <svg viewBox=\"0 0 200 200\" fill=\"none\">\r\n <circle cx=\"100\" cy=\"80\" r=\"38\" fill=\"rgba(255,255,255,.25)\"\/>\r\n <path d=\"M35 200C35 140 65 110 100 110C135 110 165 140 165 200Z\" fill=\"rgba(255,255,255,.25)\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-content\">\r\n <h2>About Me<\/h2>\r\n <p>I'm a UI\/UX designer and web developer who crafts intuitive, engaging digital experiences \u2014 from concept and wireframes to fully coded, responsive websites and applications, delivered to clients on Fiverr, Upwork and LinkedIn worldwide.<\/p>\r\n\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>HTML<\/span><span>96%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"96\" style=\"background:var(--gold);color:var(--gold);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>CSS<\/span><span>94%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"94\" style=\"background:var(--maroon);color:var(--maroon);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>JavaScript<\/span><span>90%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"90\" style=\"background:var(--gray);color:var(--gray);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>Frontend Development<\/span><span>93%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"93\" style=\"background:var(--blue);color:var(--blue);\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"skill\">\r\n <div class=\"skill-top\"><span>Backend Development<\/span><span>85%<\/span><\/div>\r\n <div class=\"skill-track\"><div class=\"skill-fill\" data-width=\"85\" style=\"background:var(--navy);color:var(--navy);\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"services\" id=\"services\">\r\n <div class=\"container\">\r\n <h2 class=\"section-heading\">My Design Services<\/h2>\r\n <p class=\"section-sub\">A complete set of design & development services to take your product from idea to a polished, working product.<\/p>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"\/><path d=\"M3 9h18\"\/><circle cx=\"6.5\" cy=\"6.5\" r=\".6\" fill=\"currentColor\"\/><\/svg>\r\n <h3>UI\/UX Design<\/h3>\r\n <p>Wireframes, prototypes and interfaces built around real user needs.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M4 5l8-2 8 2v6c0 6-3.5 9-8 10-4.5-1-8-4-8-10V5z\"\/><path d=\"M9 12l2 2 4-4\"\/><\/svg>\r\n <h3>Web Design & Development<\/h3>\r\n <p>Responsive websites hand-coded in HTML, CSS and JavaScript.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"20\" rx=\"2\"\/><path d=\"M11 18h2\"\/><\/svg>\r\n <h3>App Design<\/h3>\r\n <p>Clean mobile app interfaces designed for engagement and clarity.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <svg class=\"service-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 3a9 9 0 010 18\"\/><\/svg>\r\n <h3>Graphic Design<\/h3>\r\n <p>Logos, brand identity and visual assets that stay consistent.<\/p>\r\n <span class=\"read-more\">Read more...<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"projects\">\r\n <div class=\"container\">\r\n <h2 class=\"section-heading\">My Portfolio<\/h2>\r\n <p class=\"section-sub\">Explore a collection of my UI\/UX and development projects, each crafted to deliver seamless, user-centred experiences.<\/p>\r\n <div class=\"filters\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\r\n <button class=\"filter-btn\" data-filter=\"uiux\">UI\/UX<\/button>\r\n <button class=\"filter-btn\" data-filter=\"website\">Website Design<\/button>\r\n <button class=\"filter-btn\" data-filter=\"app\">App Design<\/button>\r\n <button class=\"filter-btn\" data-filter=\"graphic\">Graphic Design<\/button>\r\n <\/div>\r\n <div class=\"portfolio-grid\" id=\"portfolioGrid\">\r\n <div class=\"portfolio-card\" data-cat=\"website\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--blue),var(--navy));\">\ud83d\udda5\ufe0f<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">Design<\/span><span class=\"portfolio-title\">Website Landing Page Design & Development<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"website\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--gold),var(--maroon));\">\ud83d\uded2<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">Design<\/span><span class=\"portfolio-title\">E-Commerce Website<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"app\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--cyan),var(--blue));\">\ud83c\udfe6<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">App Design<\/span><span class=\"portfolio-title\">Mobile Banking App<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"uiux\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--navy),var(--maroon));\">\ud83d\udcca<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">UI\/UX<\/span><span class=\"portfolio-title\">SaaS Dashboard<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"graphic\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--gray),var(--navy));\">\ud83c\udfa8<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">Graphic Design<\/span><span class=\"portfolio-title\">Brand Identity Design<\/span><\/div>\r\n <\/div>\r\n <div class=\"portfolio-card\" data-cat=\"app\">\r\n <div class=\"portfolio-thumb\" style=\"background:linear-gradient(135deg,var(--blue),var(--gold));\">\ud83d\udcf1<\/div>\r\n <div class=\"portfolio-info\"><span class=\"portfolio-cat\">App Design<\/span><span class=\"portfolio-title\">Mobile App UI\/UX<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"more-projects\"><a href=\"#contact\" class=\"btn btn-primary\">Explore More Projects<\/a><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section id=\"testimonials\" style=\"background:var(--light-gray);\">\r\n <div class=\"container\">\r\n <h2 class=\"section-heading\">What Clients Say<\/h2>\r\n <p class=\"section-sub\">Feedback from clients I've worked with on Fiverr, Upwork and direct projects.<\/p>\r\n <div class=\"testimonials-grid\">\r\n <div class=\"t-card\">\r\n <div class=\"t-top\"><div class=\"t-avatar\">A<\/div><div><div class=\"t-name\">Ahmed R.<\/div><div class=\"t-role\">Startup Founder<\/div><\/div><\/div>\r\n <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>Delivered our landing page exactly to spec, clean code and fast turnaround.<\/p>\r\n <\/div>\r\n <div class=\"t-card\">\r\n <div class=\"t-top\"><div class=\"t-avatar\">S<\/div><div><div class=\"t-name\">Sarah K.<\/div><div class=\"t-role\">Product Manager<\/div><\/div><\/div>\r\n <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>Great communication and a strong eye for both design and usability.<\/p>\r\n <\/div>\r\n <div class=\"t-card\">\r\n <div class=\"t-top\"><div class=\"t-avatar\">M<\/div><div><div class=\"t-name\">Michael D.<\/div><div class=\"t-role\">E-commerce Owner<\/div><\/div><\/div>\r\n <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n <p>Our new store looks premium and works flawlessly on mobile.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"contact\" id=\"contact\">\r\n <div class=\"contact-circle cc1\"><\/div>\r\n <div class=\"contact-circle cc2\"><\/div>\r\n <div class=\"container\">\r\n <h2>Let's Create Something Amazing Together<\/h2>\r\n <p>Have a project in mind? Let's turn your idea into a clean, engaging and memorable digital experience.<\/p>\r\n <a href=\"mailto:info@web.com\" class=\"btn btn-primary\">Let's Talk<\/a>\r\n <div class=\"contact-details\">\r\n <a href=\"tel:+923338544747\">\ud83d\udcde 0333 8544747<\/a>\r\n <a href=\"mailto:info@web.com\">\u2709 info@web.com<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div>\r\n <div class=\"footer-logo\">DevFolio<\/div>\r\n <p class=\"footer-desc\">UI\/UX designer & web developer building clean, responsive digital experiences for clients worldwide.<\/p>\r\n <div class=\"platforms\">\r\n <span class=\"platform-tag\">Fiverr<\/span>\r\n <span class=\"platform-tag\">Upwork<\/span>\r\n <span class=\"platform-tag\">LinkedIn<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Quick Links<\/h4>\r\n <ul>\r\n <li><a href=\"#home\">Home<\/a><\/li>\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Get in Touch<\/h4>\r\n <ul>\r\n <li>\ud83d\udcde 0333 8544747<\/li>\r\n <li>\u2709 info@web.com<\/li>\r\n <\/ul>\r\n <div class=\"social-icons\">\r\n <a href=\"#\" aria-label=\"Facebook\">f<\/a>\r\n <a href=\"#\" aria-label=\"LinkedIn\">in<\/a>\r\n <a href=\"#\" aria-label=\"Instagram\">ig<\/a>\r\n <a href=\"#\" aria-label=\"Behance\">be<\/a>\r\n <a href=\"#\" aria-label=\"Dribbble\">db<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\u00a9 2026 DevFolio. All Rights Reserved.<\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n \/\/ Mobile nav toggle\r\n const hamburger = document.getElementById('hamburger');\r\n const nav = document.getElementById('mainNav');\r\n hamburger.addEventListener('click', () => {\r\n nav.classList.toggle('open');\r\n const expanded = nav.classList.contains('open');\r\n hamburger.setAttribute('aria-expanded', expanded);\r\n });\r\n document.querySelectorAll('#mainNav a').forEach(link => {\r\n link.addEventListener('click', () => nav.classList.remove('open'));\r\n });\r\n\r\n \/\/ Portfolio filter\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n const cards = document.querySelectorAll('.portfolio-card');\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n filterBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n const filter = btn.dataset.filter;\r\n cards.forEach(card => {\r\n card.style.display = (filter === 'all' || card.dataset.cat === filter) ? '' : 'none';\r\n });\r\n });\r\n });\r\n\r\n \/\/ Skill bar animation on scroll into view\r\n const skillFills = document.querySelectorAll('.skill-fill');\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.width = entry.target.dataset.width + '%';\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.3 });\r\n skillFills.forEach(fill => observer.observe(fill));\r\n\r\n \/\/ Decorative diagonal dash pattern (cyan, top-right of hero)\r\n const dashHost = document.getElementById('dashPattern');\r\n let dashHtml = '';\r\n for (let i = 0; i < 24; i++) {\r\n const x = (i % 6) * 16;\r\n const y = Math.floor(i \/ 6) * 18;\r\n dashHtml += `<span style=\"top:${y}px;left:${x}px;transform:rotate(30deg);\"><\/span>`;\r\n }\r\n dashHost.innerHTML = dashHtml;\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UI\/UX Designer & Web Developer | Portfolio DevFolio Home About Us Services Projects Contact Us Let’s Talk Hi, I am […]<\/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":"disabled","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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/beautnest.store\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}