{"id":8,"date":"2026-10-23T10:00:49","date_gmt":"2026-10-23T10:00:49","guid":{"rendered":"https:\/\/admin.qrioustechbd.com\/?page_id=8"},"modified":"2026-10-23T10:10:21","modified_gmt":"2026-10-23T10:10:21","slug":"siam-hossain","status":"publish","type":"page","link":"https:\/\/admin.qrioustechbd.com\/?page_id=8","title":{"rendered":"<!-- wp:html --> <!-- REENI DARK PORTFOLIO TEMPLATE FOR WORDPRESS --> <div id=\"reeni-portfolio-root\"> <style> @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&#038;family=Montserrat:wght@400;600;700;800;900&#038;display=swap'); \/* Global Reset &#038; Page Overrides for Full-Width Immersive Experience *\/ .entry-content, .wp-block-post-content, #page, .site-content, .wp-site-blocks {     padding: 0 !important;     margin: 0 !important;     max-width: 100% !important;     width: 100% !important; } #reeni-portfolio-root {     font-family: 'Poppins', sans-serif;     background-color: #0b0c10;     color: #c4cfde;     line-height: 1.6;     margin: 0;     padding: 0;     width: 100%;     overflow-x: hidden;     box-sizing: border-box;     position: relative; } #reeni-portfolio-root * {     box-sizing: border-box; } \/* Color Variables *\/ :root {     --reeni-primary: #ff014f;     --reeni-primary-glow: rgba(255, 1, 79, 0.35);     --reeni-bg-dark: #0e1013;     --reeni-card-bg: #14161b;     --reeni-card-border: rgba(255, 255, 255, 0.07);     --reeni-text-light: #ffffff;     --reeni-text-muted: #878e99;     --reeni-radius: 14px; } \/* Container *\/ .reeni-container {     max-width: 1240px;     margin: 0 auto;     padding: 0 24px;     position: relative;     z-index: 2; } \/* Top Navigation Bar *\/ .reeni-navbar {     display: flex;     align-items: center;     justify-content: space-between;     padding: 24px 0;     border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .reeni-logo {     display: flex;     align-items: center;     gap: 12px;     text-decoration: none;     color: #ffffff;     font-size: 26px;     font-weight: 800;     letter-spacing: -0.5px; } .reeni-logo-icon {     width: 36px;     height: 36px;     background: linear-gradient(135deg, #ff014f 0%, #d8003f 100%);     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     box-shadow: 0 4px 15px rgba(255, 1, 79, 0.4); } .reeni-nav-links {     display: flex;     align-items: center;     gap: 32px;     list-style: none;     margin: 0;     padding: 0; } .reeni-nav-links a {     color: #c4cfde;     text-decoration: none;     font-size: 14px;     font-weight: 600;     transition: color 0.3s;     display: flex;     align-items: center;     gap: 4px; } .reeni-nav-links a:hover, .reeni-nav-links a.active {     color: var(--reeni-primary); } .reeni-nav-socials {     display: flex;     align-items: center;     gap: 12px; } .reeni-social-btn {     width: 40px;     height: 40px;     border-radius: 50%;     background: #191b22;     display: flex;     align-items: center;     justify-content: center;     color: #c4cfde;     text-decoration: none;     transition: all 0.3s ease;     border: 1px solid rgba(255, 255, 255, 0.08); } .reeni-social-btn:hover {     background: var(--reeni-primary);     color: #ffffff;     box-shadow: 0 4px 15px var(--reeni-primary-glow);     transform: translateY(-2px); } .reeni-hamburger-btn {     width: 42px;     height: 42px;     border-radius: 50%;     background: var(--reeni-primary);     display: flex;     align-items: center;     justify-content: center;     cursor: pointer;     box-shadow: 0 4px 15px var(--reeni-primary-glow);     border: none; } \/* Hero Section *\/ .reeni-hero {     position: relative;     padding: 80px 0 100px;     min-height: 650px;     display: flex;     align-items: center;     overflow: hidden; } .reeni-hero-bg-text {     position: absolute;     top: 45%;     left: 45%;     transform: translate(-30%, -50%);     font-size: clamp(60px, 11vw, 150px);     font-weight: 900;     color: transparent;     -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);     text-transform: uppercase;     white-space: nowrap;     user-select: none;     pointer-events: none;     z-index: 1;     letter-spacing: 4px; } .reeni-hero-grid {     display: grid;     grid-template-columns: 1.15fr 0.85fr;     gap: 40px;     align-items: center;     position: relative;     z-index: 3; } .reeni-hero-content {     max-width: 580px; } .reeni-badge {     display: inline-block;     color: #878e99;     font-size: 13px;     font-weight: 700;     letter-spacing: 3px;     text-transform: uppercase;     margin-bottom: 20px; } .reeni-hero-title {     font-size: clamp(38px, 5vw, 62px);     font-weight: 800;     line-height: 1.15;     color: #ffffff;     margin: 0 0 24px 0;     font-family: 'Montserrat', sans-serif; } .reeni-highlight {     color: var(--reeni-primary);     position: relative; } .reeni-cursor {     display: inline-block;     width: 3px;     height: 1em;     background-color: var(--reeni-primary);     margin-left: 4px;     vertical-align: -0.1em;     animation: reeni-blink 1s infinite; } @keyframes reeni-blink {     0%, 100% { opacity: 1; }     50% { opacity: 0; } } .reeni-hero-desc {     color: #878e99;     font-size: 16px;     line-height: 1.7;     margin-bottom: 35px; } .reeni-hero-img-wrap {     position: relative;     display: flex;     justify-content: center;     align-items: flex-end; } .reeni-hero-img-backdrop {     position: absolute;     width: 100%;     height: 90%;     bottom: 0;     background: linear-gradient(180deg, rgba(255, 1, 79, 0.08) 0%, rgba(20, 22, 27, 0.95) 100%);     border-radius: 20px;     z-index: 1;     border: 1px solid rgba(255, 1, 79, 0.15); } .reeni-hero-img {     width: 100%;     max-width: 440px;     height: auto;     object-fit: cover;     border-radius: 20px;     position: relative;     z-index: 2;     display: block;     filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8)); } \/* Service Cards Section *\/ .reeni-services-grid {     display: grid;     grid-template-columns: repeat(4, 1fr);     gap: 24px;     margin-bottom: 80px; } .reeni-card {     background: var(--reeni-card-bg);     border: 1px solid var(--reeni-card-border);     border-radius: var(--reeni-radius);     padding: 36px 28px;     transition: all 0.4s ease;     text-align: center;     position: relative;     overflow: hidden; } .reeni-card::before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 3px;     background: linear-gradient(90deg, transparent, var(--reeni-primary), transparent);     opacity: 0;     transition: opacity 0.4s ease; } .reeni-card:hover {     transform: translateY(-8px);     border-color: rgba(255, 1, 79, 0.4);     box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 1, 79, 0.12); } .reeni-card:hover::before {     opacity: 1; } .reeni-card-icon {     width: 60px;     height: 60px;     margin: 0 auto 20px;     display: flex;     align-items: center;     justify-content: center;     color: var(--reeni-primary); } .reeni-card-title {     color: #ffffff;     font-size: 20px;     font-weight: 700;     margin: 0 0 10px 0; } .reeni-card-subtitle {     color: #878e99;     font-size: 14px;     margin: 0; } \/* Experience &#038; Counter Stats *\/ .reeni-stats-section {     display: grid;     grid-template-columns: 1fr 1.6fr;     gap: 28px;     margin-bottom: 110px; } .reeni-big-exp-card {     background: var(--reeni-card-bg);     border: 1px solid var(--reeni-card-border);     border-radius: var(--reeni-radius);     padding: 48px 36px;     display: flex;     align-items: center;     gap: 28px;     position: relative; } .reeni-big-number {     font-size: clamp(64px, 8vw, 96px);     font-weight: 900;     color: var(--reeni-primary);     line-height: 1;     font-family: 'Montserrat', sans-serif;     letter-spacing: -2px; } .reeni-exp-text {     font-size: 26px;     font-weight: 800;     color: #ffffff;     line-height: 1.25; } .reeni-stat-boxes {     display: grid;     grid-template-columns: repeat(2, 1fr);     gap: 24px; } .reeni-stat-box {     background: var(--reeni-card-bg);     border: 1px solid var(--reeni-card-border);     border-radius: var(--reeni-radius);     padding: 36px 30px;     transition: all 0.3s ease; } .reeni-stat-box:hover {     border-color: rgba(255, 1, 79, 0.4);     transform: translateY(-4px); } .reeni-stat-num {     font-size: 34px;     font-weight: 800;     color: #ffffff;     margin: 0 0 8px 0;     font-family: 'Montserrat', sans-serif; } .reeni-stat-label {     color: #878e99;     font-size: 14px;     margin: 0; } \/* Skills Section *\/ .reeni-skills-section {     padding: 60px 0 100px; } .reeni-skills-grid {     display: grid;     grid-template-columns: 1fr 1fr;     gap: 60px; } .reeni-skill-col-header {     display: flex;     align-items: center;     gap: 16px;     margin-bottom: 36px; } .reeni-skill-col-title {     font-size: 28px;     font-weight: 800;     color: #ffffff;     margin: 0; } .reeni-line-accent {     flex: 1;     height: 1px;     background: rgba(255, 255, 255, 0.1);     position: relative; } .reeni-line-accent::after {     content: '';     position: absolute;     width: 6px;     height: 6px;     background: var(--reeni-primary);     border-radius: 50%;     top: -2.5px;     left: 0; } .reeni-skill-item {     margin-bottom: 28px; } .reeni-skill-info {     display: flex;     justify-content: space-between;     align-items: center;     margin-bottom: 10px; } .reeni-skill-name {     font-size: 13px;     font-weight: 700;     letter-spacing: 1.5px;     text-transform: uppercase;     color: #ffffff; } .reeni-skill-pct {     font-size: 13px;     font-weight: 700;     color: #878e99; } .reeni-progress-track {     width: 100%;     height: 6px;     background: #1e2128;     border-radius: 10px;     overflow: hidden;     position: relative; } .reeni-progress-fill {     height: 100%;     background: linear-gradient(90deg, #ff014f, #ff3366);     border-radius: 10px;     position: relative;     box-shadow: 0 0 12px rgba(255, 1, 79, 0.5);     transition: width 1.2s cubic-bezier(0.1, 0.5, 0.1, 1); } \/* Latest Service Section *\/ .reeni-section-head {     text-align: center;     max-width: 720px;     margin: 0 auto 60px; } .reeni-section-tag {     color: var(--reeni-primary);     font-size: 13px;     font-weight: 800;     letter-spacing: 2px;     text-transform: uppercase;     margin-bottom: 12px;     display: inline-block; } .reeni-section-title {     font-size: clamp(30px, 4vw, 44px);     font-weight: 800;     color: #ffffff;     line-height: 1.2;     margin: 0 0 16px 0;     font-family: 'Montserrat', sans-serif; } .reeni-section-desc {     color: #878e99;     font-size: 15px;     line-height: 1.7;     margin: 0; } .reeni-latest-service-grid {     display: grid;     grid-template-columns: 1.1fr 0.9fr;     gap: 50px;     align-items: center;     margin-bottom: 110px; } .reeni-accordion {     display: flex;     flex-direction: column;     gap: 20px; } .reeni-accordion-item {     background: var(--reeni-card-bg);     border: 1px solid var(--reeni-card-border);     border-radius: var(--reeni-radius);     padding: 24px 28px;     cursor: pointer;     transition: all 0.3s ease; } .reeni-accordion-item.active {     border-color: rgba(255, 1, 79, 0.4);     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .reeni-acc-header {     display: flex;     justify-content: space-between;     align-items: center; } .reeni-acc-title {     color: #ffffff;     font-size: 20px;     font-weight: 700;     margin: 0; } .reeni-acc-body {     max-height: 0;     overflow: hidden;     transition: max-height 0.4s ease, margin-top 0.3s ease;     color: #878e99;     font-size: 14px;     line-height: 1.7; } .reeni-accordion-item.active .reeni-acc-body {     max-height: 200px;     margin-top: 14px; } .reeni-circle-avatar-wrap {     position: relative;     display: flex;     justify-content: center;     align-items: center; } .reeni-circle-ring {     position: absolute;     width: 360px;     height: 360px;     border-radius: 50%;     border: 2px dashed rgba(255, 1, 79, 0.4);     animation: reeni-spin 25s linear infinite; } @keyframes reeni-spin {     100% { transform: rotate(360deg); } } .reeni-circle-img {     width: 320px;     height: 320px;     border-radius: 50%;     object-fit: cover;     position: relative;     z-index: 2;     border: 6px solid #14161b;     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 1, 79, 0.2); } \/* Education &#038; Experience Section *\/ .reeni-education-section {     padding: 40px 0 100px; } .reeni-edu-header {     display: flex;     align-items: center;     gap: 16px;     margin-bottom: 32px; } .reeni-edu-title {     font-size: 26px;     font-weight: 800;     color: #ffffff;     margin: 0; } .reeni-edu-grid {     display: grid;     grid-template-columns: 1fr 1fr;     gap: 28px; } .reeni-edu-card {     background: var(--reeni-card-bg);     border: 1px solid var(--reeni-card-border);     border-radius: var(--reeni-radius);     padding: 36px 32px;     transition: all 0.3s ease; } .reeni-edu-card:hover {     border-color: rgba(255, 1, 79, 0.4);     transform: translateY(-4px);     box-shadow: 0 14px 30px rgba(0,0,0,0.5); } .reeni-edu-role {     font-size: 20px;     font-weight: 700;     color: #ffffff;     margin: 0 0 8px 0; } .reeni-edu-period {     font-size: 14px;     font-weight: 600;     color: var(--reeni-primary);     margin: 0 0 16px 0; } .reeni-edu-desc {     color: #878e99;     font-size: 14px;     line-height: 1.7;     margin: 0; } \/* Floating Widgets *\/ .reeni-chat-bubble {     position: fixed;     bottom: 30px;     right: 30px;     width: 54px;     height: 54px;     background: var(--reeni-primary);     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     color: #ffffff;     box-shadow: 0 8px 24px rgba(255, 1, 79, 0.45);     z-index: 999;     cursor: pointer;     transition: transform 0.3s; } .reeni-chat-bubble:hover {     transform: scale(1.1); } .reeni-back-to-top {     position: fixed;     bottom: 96px;     right: 34px;     width: 44px;     height: 44px;     background: #171920;     border: 1px solid rgba(255, 255, 255, 0.1);     border-radius: 50%;     display: flex;     align-items: center;     justify-content: center;     color: #ffffff;     z-index: 998;     cursor: pointer;     transition: all 0.3s; } .reeni-back-to-top:hover {     background: var(--reeni-primary);     border-color: var(--reeni-primary);     transform: translateY(-3px); } \/* Responsive Breakpoints *\/ @media (max-width: 992px) {     .reeni-hero-grid { grid-template-columns: 1fr; text-align: center; }     .reeni-hero-content { margin: 0 auto; }     .reeni-services-grid { grid-template-columns: repeat(2, 1fr); }     .reeni-stats-section { grid-template-columns: 1fr; }     .reeni-skills-grid { grid-template-columns: 1fr; gap: 40px; }     .reeni-latest-service-grid { grid-template-columns: 1fr; }     .reeni-circle-avatar-wrap { order: -1; }     .reeni-edu-grid { grid-template-columns: 1fr; }     .reeni-nav-links { display: none; } } @media (max-width: 600px) {     .reeni-services-grid { grid-template-columns: 1fr; }     .reeni-stat-boxes { grid-template-columns: 1fr; }     .reeni-big-exp-card { flex-direction: column; text-align: center; } } <\/style> <!-- Top Navbar --> <header class=\"reeni-container\">     <nav class=\"reeni-navbar\">         <a href=\"#\" class=\"reeni-logo\">             <span class=\"reeni-logo-icon\">                 <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">                     <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>                     <path d=\"M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83M16.62 12l-5.74 9.94\"><\/path>                 <\/svg>             <\/span>             <span>Reeni<\/span>         <\/a>         <ul class=\"reeni-nav-links\">             <li><a href=\"#home\" class=\"active\">Home<\/a><\/li>             <li><a href=\"#about\">About<\/a><\/li>             <li><a href=\"#services\">Services <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/a><\/li>             <li><a href=\"#blog\">Blog <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/a><\/li>             <li><a href=\"#project\">Project <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg><\/a><\/li>             <li><a href=\"#contact\">Contact<\/a><\/li>         <\/ul>         <div class=\"reeni-nav-socials\">             <a href=\"#\" class=\"reeni-social-btn\" title=\"Instagram\">                 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg>             <\/a>             <a href=\"#\" class=\"reeni-social-btn\" title=\"LinkedIn\">                 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\"><\/path><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"><\/rect><circle cx=\"4\" cy=\"4\" r=\"2\"><\/circle><\/svg>             <\/a>             <a href=\"#\" class=\"reeni-social-btn\" title=\"Twitter\">                 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"><\/path><\/svg>             <\/a>             <a href=\"#\" class=\"reeni-social-btn\" title=\"Facebook\">                 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"><\/path><\/svg>             <\/a>             <button class=\"reeni-hamburger-btn\" title=\"Menu\">                 <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line><\/svg>             <\/button>         <\/div>     <\/nav> <\/header> <!-- Hero Section --> <section id=\"home\" class=\"reeni-hero\">     <div class=\"reeni-hero-bg-text\">WEB DESIGNER<\/div>     <div class=\"reeni-container\">         <div class=\"reeni-hero-grid\">             <div class=\"reeni-hero-content\">                 <span class=\"reeni-badge\">HELLO<\/span>                 <h1 class=\"reeni-hero-title\">                     i&#8217;m Jane Cooper a<br>                     <span class=\"reeni-highlight\" id=\"reeni-typing-text\">Web Developer.<\/span><span class=\"reeni-cursor\"><\/span>                 <\/h1>                 <p class=\"reeni-hero-desc\">                     A personal portfolio is a collection of your work, achievements, and skills that highlights your abilities and professional growth. It serves as a showcase of modern digital craftsmanship.                 <\/p>             <\/div>             <div class=\"reeni-hero-img-wrap\">                 <div class=\"reeni-hero-img-backdrop\"><\/div>                 <img src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"Jane Cooper\" class=\"reeni-hero-img\">             <\/div>         <\/div>     <\/div> <\/section> <!-- Services Grid --> <section id=\"services\" class=\"reeni-container\">     <div class=\"reeni-services-grid\">         <!-- Service 1 -->         <div class=\"reeni-card\">             <div class=\"reeni-card-icon\">                 <svg width=\"38\" height=\"38\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"><\/path><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"><\/path><path d=\"M2 2l7.586 7.586\"><\/path><circle cx=\"11\" cy=\"11\" r=\"2\"><\/circle><\/svg>             <\/div>             <h3 class=\"reeni-card-title\">Web Design<\/h3>             <p class=\"reeni-card-subtitle\">120 Projects<\/p>         <\/div>         <!-- Service 2 -->         <div class=\"reeni-card\">             <div class=\"reeni-card-icon\">                 <svg width=\"38\" height=\"38\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"><\/rect><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"><\/rect><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"><\/rect><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"><\/rect><\/svg>             <\/div>             <h3 class=\"reeni-card-title\">UI\/Ux Design<\/h3>             <p class=\"reeni-card-subtitle\">241 Projects<\/p>         <\/div>         <!-- Service 3 -->         <div class=\"reeni-card\">             <div class=\"reeni-card-icon\">                 <svg width=\"38\" height=\"38\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18h6\"><\/path><path d=\"M10 22h4\"><\/path><path d=\"M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14\"><\/path><\/svg>             <\/div>             <h3 class=\"reeni-card-title\">Web Research<\/h3>             <p class=\"reeni-card-subtitle\">240 Projects<\/p>         <\/div>         <!-- Service 4 -->         <div class=\"reeni-card\">             <div class=\"reeni-card-icon\">                 <svg width=\"38\" height=\"38\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>             <\/div>             <h3 class=\"reeni-card-title\">Marketing<\/h3>             <p class=\"reeni-card-subtitle\">331 Projects<\/p>         <\/div>     <\/div> <\/section> <!-- Stats &#038; Experience --> <section class=\"reeni-container\">     <div class=\"reeni-stats-section\">         <div class=\"reeni-big-exp-card\">             <div class=\"reeni-big-number\">25<\/div>             <div class=\"reeni-exp-text\">Years Of<br>Experience<\/div>         <\/div>         <div class=\"reeni-stat-boxes\">             <div class=\"reeni-stat-box\">                 <div class=\"reeni-stat-num\">20K+<\/div>                 <div class=\"reeni-stat-label\">Our Project Complete<\/div>             <\/div>             <div class=\"reeni-stat-box\">                 <div class=\"reeni-stat-num\">10K+<\/div>                 <div class=\"reeni-stat-label\">Our Natural Products<\/div>             <\/div>             <div class=\"reeni-stat-box\">                 <div class=\"reeni-stat-num\">200+<\/div>                 <div class=\"reeni-stat-label\">Worldwide Clients<\/div>             <\/div>             <div class=\"reeni-stat-box\">                 <div class=\"reeni-stat-num\">1,000+<\/div>                 <div class=\"reeni-stat-label\">Positive Reviews<\/div>             <\/div>         <\/div>     <\/div> <\/section> <!-- Skills Section --> <section id=\"about\" class=\"reeni-container reeni-skills-section\">     <div class=\"reeni-skills-grid\">         <!-- Design Skills -->         <div>             <div class=\"reeni-skill-col-header\">                 <h3 class=\"reeni-skill-col-title\">Design Skill<\/h3>                 <div class=\"reeni-line-accent\"><\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">PHOTOSHOP<\/span>                     <span class=\"reeni-skill-pct\">100%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 100%;\"><\/div>                 <\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">FIGMA<\/span>                     <span class=\"reeni-skill-pct\">95%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 95%;\"><\/div>                 <\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">ADOBE XD<\/span>                     <span class=\"reeni-skill-pct\">60%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 60%;\"><\/div>                 <\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">ADOBE ILLUSTRATOR<\/span>                     <span class=\"reeni-skill-pct\">70%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 70%;\"><\/div>                 <\/div>             <\/div>         <\/div>         <!-- Development Skills -->         <div>             <div class=\"reeni-skill-col-header\">                 <h3 class=\"reeni-skill-col-title\">Development Skill<\/h3>                 <div class=\"reeni-line-accent\"><\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">HTML &#038; CSS<\/span>                     <span class=\"reeni-skill-pct\">100%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 100%;\"><\/div>                 <\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">JAVASCRIPT<\/span>                     <span class=\"reeni-skill-pct\">95%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 95%;\"><\/div>                 <\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">WORDPRESS<\/span>                     <span class=\"reeni-skill-pct\">90%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 90%;\"><\/div>                 <\/div>             <\/div>             <div class=\"reeni-skill-item\">                 <div class=\"reeni-skill-info\">                     <span class=\"reeni-skill-name\">REACT \/ PHP<\/span>                     <span class=\"reeni-skill-pct\">85%<\/span>                 <\/div>                 <div class=\"reeni-progress-track\">                     <div class=\"reeni-progress-fill\" style=\"width: 85%;\"><\/div>                 <\/div>             <\/div>         <\/div>     <\/div> <\/section> <!-- Latest Service \/ Accordion Showcase --> <section class=\"reeni-container\">     <div class=\"reeni-section-head\">         <span class=\"reeni-section-tag\">LATEST SERVICE<\/span>         <h2 class=\"reeni-section-title\">Inspiring The World One Project<\/h2>         <p class=\"reeni-section-desc\">Business consulting consultants provide expert advice and guide businesses to help them improve their performance, efficiency, and organizational excellence.<\/p>     <\/div>     <div class=\"reeni-latest-service-grid\">         <div class=\"reeni-accordion\">             <div class=\"reeni-accordion-item active\" onclick=\"this.classList.toggle('active')\">                 <div class=\"reeni-acc-header\">                     <h4 class=\"reeni-acc-title\">01. A Portfolio of Creativity<\/h4>                     <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>                 <\/div>                 <div class=\"reeni-acc-body\">                     Business consulting consultants provide expert advice and guide businesses to help them elevate their brand presence, maximize design potential, and optimize user engagement.                 <\/div>             <\/div>             <div class=\"reeni-accordion-item\" onclick=\"this.classList.toggle('active')\">                 <div class=\"reeni-acc-header\">                     <h4 class=\"reeni-acc-title\">02. My Portfolio of Innovation<\/h4>                     <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>                 <\/div>                 <div class=\"reeni-acc-body\">                     Delivering cutting-edge web architecture, clean code, responsive layouts, and seamless user experiences across all devices and platforms.                 <\/div>             <\/div>             <div class=\"reeni-accordion-item\" onclick=\"this.classList.toggle('active')\">                 <div class=\"reeni-acc-header\">                     <h4 class=\"reeni-acc-title\">03. Digital Strategy &#038; Impact<\/h4>                     <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>                 <\/div>                 <div class=\"reeni-acc-body\">                     Strategic consultation aimed at scaling digital products, enhancing SEO visibility, and driving business growth with measurable metrics.                 <\/div>             <\/div>         <\/div>         <div class=\"reeni-circle-avatar-wrap\">             <div class=\"reeni-circle-ring\"><\/div>             <img src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?auto=format&#038;fit=crop&#038;w=600&#038;q=80\" alt=\"Creative Showcase\" class=\"reeni-circle-img\">         <\/div>     <\/div> <\/section> <!-- Education &#038; Experience --> <section class=\"reeni-container reeni-education-section\">     <div class=\"reeni-section-head\">         <span class=\"reeni-section-tag\">EDUCATION &#038; EXPERIENCE<\/span>         <h2 class=\"reeni-section-title\">Empowering Creativity through<\/h2>         <p class=\"reeni-section-desc\">Business consulting consultants provide expert advice and guide businesses to help them improve their performance, efficiency, and organizational<\/p>     <\/div>     <div class=\"reeni-edu-header\">         <h3 class=\"reeni-edu-title\">Education<\/h3>         <div class=\"reeni-line-accent\"><\/div>     <\/div>     <div class=\"reeni-edu-grid\">         <div class=\"reeni-edu-card\">             <h4 class=\"reeni-edu-role\">Trainer Marketing<\/h4>             <div class=\"reeni-edu-period\">2005 &#8211; 2009<\/div>             <p class=\"reeni-edu-desc\">A personal portfolio is a curated collection of an individual&#8217;s professional work, showcasing their skills, experience and dedication to excellence.<\/p>         <\/div>         <div class=\"reeni-edu-card\">             <h4 class=\"reeni-edu-role\">Assistant Director<\/h4>             <div class=\"reeni-edu-period\">2010 &#8211; 2014<\/div>             <p class=\"reeni-edu-desc\">Each project here showcases my commitment to excellence and adaptability, tailored to meet each client&#8217;s unique needs and deliver impactful results.<\/p>         <\/div>     <\/div> <\/section> <!-- Floating Messenger \/ Chat Bubble --> <a href=\"#contact\" class=\"reeni-chat-bubble\" title=\"Message Us\">     <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">         <path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"><\/path>     <\/svg> <\/a> <!-- Back to top button --> <a href=\"#home\" class=\"reeni-back-to-top\" title=\"Back to top\" onclick=\"window.scrollTo({top: 0, behavior: 'smooth'}); return false;\">     <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">         <polyline points=\"18 15 12 9 6 15\"><\/polyline>     <\/svg> <\/a> <script> \/\/ Typewriter rotation effect (function() {     const roles = [\"Web Developer.\", \"UI\/UX Designer.\", \"Creative Strategist.\"];     let roleIdx = 0;     let charIdx = 0;     let isDeleting = false;     const target = document.getElementById(\"reeni-typing-text\");     if (!target) return;     function type() {         const currentRole = roles[roleIdx];         if (isDeleting) {             target.textContent = currentRole.substring(0, charIdx - 1);             charIdx--;         } else {             target.textContent = currentRole.substring(0, charIdx + 1);             charIdx++;         }         let speed = isDeleting ? 40 : 90;         if (!isDeleting &#038;& charIdx === currentRole.length) {             speed = 2000;             isDeleting = true;         } else if (isDeleting &#038;& charIdx === 0) {             isDeleting = false;             roleIdx = (roleIdx + 1) % roles.length;             speed = 500;         }         setTimeout(type, speed);     }     setTimeout(type, 1000); })(); <\/script> <\/div> <!-- END REENI DARK PORTFOLIO TEMPLATE --> <!-- \/wp:html -->"},"content":{"rendered":"\n<div style=\"background-color: #0d0f12; color: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; box-sizing: border-box;\">\n  <style>\n    .reeni-container { max-width: 1200px; margin: 0 auto; background: #0d0f12; color: #fff; }\n    .reeni-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .reeni-logo { font-size: 24px; font-weight: bold; color: #fff; text-decoration: none; }\n    .reeni-nav a { color: #aaa; margin: 0 15px; text-decoration: none; }\n    .reeni-nav a:hover, .reeni-nav a.active { color: #ff2a5f; }\n    .reeni-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 60px 0; }\n    .reeni-hero-content { flex: 1; min-width: 300px; }\n    .reeni-tag { color: #ff2a5f; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; display: block; }\n    .reeni-title { font-size: 48px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }\n    .reeni-title span { color: #ff2a5f; }\n    .reeni-desc { color: #aaa; font-size: 16px; line-height: 1.6; margin-bottom: 30px; max-width: 500px; }\n    .reeni-hero-img { flex: 1; min-width: 300px; text-align: center; }\n    .reeni-hero-img img { max-width: 100%; border-radius: 20px; }\n    .reeni-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 40px 0; }\n    .reeni-service-card { background: #15181e; border: 1px solid rgba(255,255,255,0.05); padding: 30px; border-radius: 16px; }\n    .reeni-service-card h3 { font-size: 20px; margin-bottom: 10px; }\n    .reeni-service-card p { color: #888; font-size: 14px; }\n  <\/style>\n  <div class=\"reeni-container\">\n    <header class=\"reeni-header\">\n      <a href=\"#\" class=\"reeni-logo\">Reeni.<\/a>\n      <nav class=\"reeni-nav\">\n        <a href=\"#home\" class=\"active\">Home<\/a>\n        <a href=\"#about\">About<\/a>\n        <a href=\"#services\">Services<\/a>\n        <a href=\"#blog\">Blog<\/a>\n        <a href=\"#project\">Project<\/a>\n        <a href=\"#contact\">Contact<\/a>\n      <\/nav>\n    <\/header>\n    <section class=\"reeni-hero\" id=\"home\">\n      <div class=\"reeni-hero-content\">\n        <span class=\"reeni-tag\">Hello<\/span>\n        <h1 class=\"reeni-title\">i&#8217;m Jane Cooper a <span>Web Developer.<\/span><\/h1>\n        <p class=\"reeni-desc\">A personal portfolio is a collection of your work, achievements, and skills that highlights your abilities and professional growth.<\/p>\n      <\/div>\n      <div class=\"reeni-hero-img\">\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"Jane Cooper\">\n      <\/div>\n    <\/section>\n    <div class=\"reeni-services-grid\" id=\"services\">\n      <div class=\"reeni-service-card\"><h3>Web Design<\/h3><p>120 Projects<\/p><\/div>\n      <div class=\"reeni-service-card\"><h3>UI\/UX Design<\/h3><p>241 Projects<\/p><\/div>\n      <div class=\"reeni-service-card\"><h3>Web Research<\/h3><p>240 Projects<\/p><\/div>\n      <div class=\"reeni-service-card\"><h3>Marketing<\/h3><p>331 Projects<\/p><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Reeni. Home About Services Blog Project Contact Hello i&#8217;m Jane Cooper a Web Developer. A personal portfolio is a collection of your work, achievements, and skills that highlights your abilities and professional growth. Web Design 120 Projects UI\/UX Design 241 Projects Web Research 240 Projects Marketing 331 Projects<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":2,"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/admin.qrioustechbd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}