Brolytics Lab

ENT/ET

<!-- ====================================================================

BROLYTICS LAB.IT - প্রফেশনাল এমপ্লয়ী পোর্টফোলিও সিস্টেম

প্ল্যাটফর্ম: Blogger / Blogspot (Pages > HTML View)

==================================================================== -->

<div class="blp-signature" id="blp-signature">Rahid Hasan</div>

</div>

<span id="blp-badge-role">Full Stack Developer</span>

</div>

<span id="blp-first-name">Rahid</span> <span class="blp-blue-text" id="blp-last-name">Hasan</span>

</h1>

<p class="blp-hero-designation" id="blp-hero-desig">Full Stack Developer</p>

<span id="blp-meta-exp">5+ Years Experience</span>

</div>

<span id="blp-meta-loc">Dinajpur, Bangladesh</span>

</div>

Download Profile

</button>

Hire Me

</button>

</div>

</header>

ABOUT ME

</div>

<h2 class="blp-card-title">Let's Build Something Great Together</h2>

<span class="blp-about-col-val" id="blp-detail-name">Rahid Hasan</span>

</div>

<span class="blp-about-col-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg> Affiliation :</span>

<span class="blp-about-col-val" id="blp-detail-company">Brolytics Lab.IT</span>

</div>

<span class="blp-about-col-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg> Experience :</span>

<span class="blp-about-col-val" id="blp-detail-exp">5+ Years</span>

</div>

<span class="blp-about-col-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> Location :</span>

<span class="blp-about-col-val" id="blp-detail-location">Dinajpur, Bangladesh</span>

</div>

QUICK FACTS

</div>

</div>

<div>

<div class="blp-fact-lbl">Years Experience</div>

</div>

</div>

<div>

<div class="blp-fact-lbl">Projects Completed</div>

</div>

</div>

<div>

<div class="blp-fact-lbl">Client Satisfaction</div>

</div>

</div>

<div>

<div class="blp-fact-digit" id="blp-qf-avail">Available</div>

<div class="blp-fact-lbl">For New Projects</div>

</div>

CORE SKILLS

</div>

TOOLS & TECHNOLOGIES

</div>

</div>

</section>

WORK HISTORY & EXPERIENCE

</div>

</div>

EDUCATION

</div>

</div>

CERTIFICATIONS

</div>

</div>

</section>

<h2 class="blp-sec-title">Services I Provide</h2>

</div>

</section>

<div>

<span class="blp-sec-sub">FEATURED PROJECTS</span>

<h2 class="blp-sec-title">Some of My Recent Work</h2>

</div>

View All Projects

</a>

</div>

</section>

</div>

<div>

<h3 class="blp-cta-title">Interested in working together?</h3>

<p class="blp-cta-subtitle">Feel free to reach out if you have a project in mind or just want to say hello!</p>

</div>

Hire Me

</button>

</section>

Official Employee Portfolio •

<strong><a href="https://brolyticslab.blogspot.com/" target="_blank" rel="noopener noreferrer">Brolytics Lab.IT</a></strong>

</p>

Official Hiring: <a href="mailto:brolyticsit@gmail.com">brolyticsit@gmail.com</a> • WhatsApp: <a href="https://wa.me/8801845428433" target="_blank" rel="noopener noreferrer">+880 1845-428433</a>

</p>

</footer>

</main>

<div>

<h3 class="blp-modal-title" id="blp-modal-heading">Hire Rahid Hasan</h3>

<p class="blp-modal-desc">Interested in working with this professional? Tell us about your requirement and our team will contact you.</p>

</div>

<span class="blp-input-err">Name is required</span>

</div>

<label>Phone Number <span class="blp-red">*</span></label>

<span class="blp-input-err">Valid phone number required</span>

</div>

<label>Email Address <span class="blp-red">*</span></label>

<span class="blp-input-err">Valid email is required</span>

</div>

<label>Company Name <span class="blp-red">*</span></label>

<span class="blp-input-err">Company name is required</span>

</div>

<label>Project / Business Name</label>

</div>

<label>Service Required <span class="blp-red">*</span></label>

<option value="" disabled selected>Select service</option>

</select>

<span class="blp-input-err">Please select a service</span>

</div>

<label>Website URL <span class="blp-gray">(Optional)</span></label>

</div>

<label>Project Details / Message <span class="blp-red">*</span></label>

<span class="blp-input-err">Please write your project requirement (minimum 10 characters)</span>

</div>

<span>Send Hiring Request</span>

</button>

<p class="blp-safe-note">Your request will be sent securely to Brolytics Lab.IT.</p>

</div>

</form>

</div>

</div>

<h3 class="blp-success-heading">Thank you for your request!</h3>

<p class="blp-success-paragraph">Our team has received your hiring inquiry. Brolytics Lab.IT will contact you shortly.</p>

<button type="button" class="blp-btn blp-btn-close-final" id="blp-final-close">Close</button>

</div>

<!-- ====================================================================

সিএসএস স্টাইল (সম্পূর্ণ স্কোপড: ব্লগারে কোনও কনফ্লিক্ট তৈরি করবে না)

==================================================================== -->

<style>

#brolytics-employee-portfolio {

--blp-navy-dark: #07152b;

--blp-navy-deep: #050e1d;

--blp-blue: #2563eb;

--blp-blue-light: #38bdf8;

--blp-blue-hover: #1d4ed8;

--blp-bg-subtle: #f1f6fd;

--blp-card-bg: #ffffff;

--blp-text-dark: #0f172a;

--blp-text-gray: #64748b;

--blp-border: #e2e8f0;

--blp-border-light: #edf2f7;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

color: var(--blp-text-dark);

background-color: var(--blp-bg-subtle);

line-height: 1.5;

width: 100%;

margin: 0 auto;

box-sizing: border-box;

overflow-x: hidden;

}

#brolytics-employee-portfolio *,

#brolytics-employee-portfolio *::before,

#brolytics-employee-portfolio *::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

/* BUTTONS */

#brolytics-employee-portfolio .blp-btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

padding: 10px 22px;

font-size: 0.9rem;

font-weight: 600;

border-radius: 8px;

cursor: pointer;

border: none;

outline: none;

transition: all 0.2s ease;

text-decoration: none;

}

#brolytics-employee-portfolio .blp-btn-download {

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.22);

color: #ffffff;

}

#brolytics-employee-portfolio .blp-btn-download:hover {

background: rgba(255, 255, 255, 0.18);

transform: translateY(-1px);

}

#brolytics-employee-portfolio .blp-btn-hire-hero {

background: var(--blp-blue);

color: #ffffff;

box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);

}

#brolytics-employee-portfolio .blp-btn-hire-hero:hover {

background: var(--blp-blue-hover);

transform: translateY(-1px);

}

/* HERO BANNER */

#brolytics-employee-portfolio .blp-hero {

position: relative;

background: linear-gradient(135deg, #050e1d 0%, #081a38 55%, #0b2654 100%);

color: #ffffff;

padding: 46px 24px;

border-radius: 0 0 16px 16px;

overflow: hidden;

}

#brolytics-employee-portfolio .blp-hero-glow {

position: absolute;

top: 0;

right: 0;

width: 60%;

height: 100%;

background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.15), transparent 60%);

pointer-events: none;

}

#brolytics-employee-portfolio .blp-hero-container {

max-width: 1160px;

margin: 0 auto;

display: flex;

align-items: center;

gap: 36px;

position: relative;

z-index: 2;

}

#brolytics-employee-portfolio .blp-avatar-frame {

position: relative;

width: 195px;

height: 195px;

border-radius: 12px;

padding: 3px;

background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(37, 99, 235, 0.5));

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);

flex-shrink: 0;

}

#brolytics-employee-portfolio #blp-hero-img {

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 9px;

display: block;

background: #1e293b;

}

#brolytics-employee-portfolio .blp-signature {

position: absolute;

bottom: -10px;

left: 50%;

transform: translateX(-50%);

font-family: cursive, "Brush Script MT", sans-serif;

font-size: 1.15rem;

color: #ffffff;

text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);

white-space: nowrap;

pointer-events: none;

}

#brolytics-employee-portfolio .blp-hero-info-col {

flex: 1;

}

#brolytics-employee-portfolio .blp-role-pill {

display: inline-flex;

align-items: center;

gap: 6px;

background: rgba(37, 99, 235, 0.25);

border: 1px solid rgba(56, 189, 248, 0.35);

color: #7dd3fc;

font-size: 0.76rem;

font-weight: 700;

padding: 4px 12px;

border-radius: 9999px;

margin-bottom: 10px;

}

#brolytics-employee-portfolio .blp-hero-name {

font-size: 2.35rem;

font-weight: 800;

line-height: 1.15;

letter-spacing: -0.02em;

margin-bottom: 4px;

color: #ffffff;

}

#brolytics-employee-portfolio .blp-blue-text {

color: #38bdf8;

}

#brolytics-employee-portfolio .blp-hero-designation {

font-size: 1.1rem;

color: #cbd5e1;

margin-bottom: 12px;

font-weight: 500;

}

#brolytics-employee-portfolio .blp-hero-meta-row {

display: flex;

flex-wrap: wrap;

gap: 20px;

margin-bottom: 14px;

}

#brolytics-employee-portfolio .blp-meta-item {

display: inline-flex;

align-items: center;

gap: 6px;

font-size: 0.86rem;

color: #cbd5e1;

}

#brolytics-employee-portfolio .blp-meta-item svg {

color: #38bdf8;

}

#brolytics-employee-portfolio .blp-hero-summary {

font-size: 0.93rem;

color: #cbd5e1;

line-height: 1.6;

max-width: 680px;

margin-bottom: 22px;

}

#brolytics-employee-portfolio .blp-hero-btns {

display: flex;

flex-wrap: wrap;

gap: 14px;

}

/* MAIN BODY CONTAINER */

#brolytics-employee-portfolio .blp-body {

max-width: 1160px;

margin: 0 auto;

padding: 30px 18px 48px;

display: flex;

flex-direction: column;

gap: 30px;

}

/* CARDS BASE */

#brolytics-employee-portfolio .blp-card {

background: var(--blp-card-bg);

border: 1px solid var(--blp-border);

border-radius: 12px;

padding: 22px;

box-shadow: 0 1px 3px rgba(0,0,0,0.05);

transition: transform 0.2s, box-shadow 0.2s;

}

#brolytics-employee-portfolio .blp-card:hover {

box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);

}

#brolytics-employee-portfolio .blp-badge-header {

display: inline-flex;

align-items: center;

gap: 6px;

font-size: 0.72rem;

font-weight: 800;

color: var(--blp-blue);

letter-spacing: 0.05em;

margin-bottom: 10px;

}

#brolytics-employee-portfolio .blp-card-title {

font-size: 1.25rem;

font-weight: 800;

color: var(--blp-text-dark);

margin-bottom: 12px;

line-height: 1.3;

}

#brolytics-employee-portfolio .blp-divider {

height: 1px;

background: var(--blp-border-light);

margin: 18px 0;

}

/* TOP ROW: 3 COLUMNS */

#brolytics-employee-portfolio .blp-grid-top {

display: grid;

grid-template-columns: 1.3fr 0.85fr 1fr;

gap: 18px;

}

#brolytics-employee-portfolio .blp-about-desc {

font-size: 0.88rem;

color: var(--blp-text-gray);

line-height: 1.6;

margin-bottom: 18px;

}

#brolytics-employee-portfolio .blp-about-details-list {

display: flex;

flex-direction: column;

gap: 8px;

border-top: 1px dashed var(--blp-border);

padding-top: 14px;

}

#brolytics-employee-portfolio .blp-about-row {

display: flex;

justify-content: space-between;

font-size: 0.84rem;

}

#brolytics-employee-portfolio .blp-about-col-label {

display: inline-flex;

align-items: center;

gap: 5px;

color: var(--blp-text-gray);

}

#brolytics-employee-portfolio .blp-about-col-val {

font-weight: 600;

color: var(--blp-text-dark);

}

/* QUICK FACTS */

#brolytics-employee-portfolio .blp-facts-container {

display: flex;

flex-direction: column;

gap: 14px;

}

#brolytics-employee-portfolio .blp-fact-box {

display: flex;

align-items: center;

gap: 14px;

padding: 8px 12px;

border-radius: 8px;

background: #f8fafc;

border: 1px solid var(--blp-border-light);

}

#brolytics-employee-portfolio .blp-fact-ico {

width: 38px;

height: 38px;

border-radius: 8px;

background: #eff6ff;

color: var(--blp-blue);

display: flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

}

#brolytics-employee-portfolio .blp-fact-digit {

font-size: 1.25rem;

font-weight: 800;

color: var(--blp-text-dark);

line-height: 1.1;

}

#brolytics-employee-portfolio .blp-fact-lbl {

font-size: 0.76rem;

color: var(--blp-text-gray);

font-weight: 500;

}

/* CORE SKILLS & TOOLS */

#brolytics-employee-portfolio .blp-skills-pills-wrap {

display: flex;

flex-wrap: wrap;

gap: 6px;

}

#brolytics-employee-portfolio .blp-pill-item {

font-size: 0.74rem;

font-weight: 600;

padding: 4px 10px;

border-radius: 9999px;

background: #eff6ff;

color: #1d4ed8;

border: 1px solid #dbeafe;

}

#brolytics-employee-portfolio .blp-tools-list {

display: flex;

flex-wrap: wrap;

gap: 6px;

}

#brolytics-employee-portfolio .blp-tool-chip {

display: inline-flex;

align-items: center;

gap: 5px;

padding: 4px 10px;

background: #f1f5f9;

border-radius: 6px;

font-size: 0.75rem;

font-weight: 600;

color: #475569;

}

/* MIDDLE ROW: TIMELINE + SIDE */

#brolytics-employee-portfolio .blp-grid-middle {

display: grid;

grid-template-columns: 1.7fr 1.3fr;

gap: 18px;

}

#brolytics-employee-portfolio .blp-side-group {

display: flex;

flex-direction: column;

gap: 18px;

}

#brolytics-employee-portfolio .blp-timeline {

position: relative;

padding-left: 22px;

margin-top: 14px;

}

#brolytics-employee-portfolio .blp-timeline::before {

content: '';

position: absolute;

left: 6px;

top: 6px;

bottom: 0;

width: 2px;

background: #cbd5e1;

}

#brolytics-employee-portfolio .blp-tl-item {

position: relative;

margin-bottom: 24px;

}

#brolytics-employee-portfolio .blp-tl-item:last-child {

margin-bottom: 0;

}

#brolytics-employee-portfolio .blp-tl-dot {

position: absolute;

left: -22px;

top: 5px;

width: 14px;

height: 14px;

border-radius: 50%;

background: #ffffff;

border: 3px solid var(--blp-blue);

}

#brolytics-employee-portfolio .blp-tl-period {

font-size: 0.76rem;

font-weight: 700;

color: var(--blp-blue);

text-transform: uppercase;

}

#brolytics-employee-portfolio .blp-tl-role {

font-size: 1.05rem;

font-weight: 700;

color: var(--blp-text-dark);

}

#brolytics-employee-portfolio .blp-tl-comp {

font-size: 0.85rem;

font-weight: 600;

color: var(--blp-text-gray);

margin-bottom: 8px;

}

#brolytics-employee-portfolio .blp-tl-bullets {

list-style: disc inside;

font-size: 0.84rem;

color: var(--blp-text-gray);

line-height: 1.55;

}

/* EDUCATION & CERTIFICATIONS */

#brolytics-employee-portfolio .blp-mini-item {

padding: 10px 0;

border-bottom: 1px solid var(--blp-border-light);

}

#brolytics-employee-portfolio .blp-mini-item:last-child {

border-bottom: none;

padding-bottom: 0;

}

#brolytics-employee-portfolio .blp-mini-title {

font-size: 0.92rem;

font-weight: 700;

color: var(--blp-text-dark);

}

#brolytics-employee-portfolio .blp-mini-sub {

font-size: 0.83rem;

color: var(--blp-text-gray);

}

#brolytics-employee-portfolio .blp-mini-meta {

font-size: 0.77rem;

color: #94a3b8;

}

#brolytics-employee-portfolio .blp-cert-btn {

display: inline-flex;

align-items: center;

gap: 4px;

font-size: 0.77rem;

font-weight: 600;

color: var(--blp-blue);

text-decoration: none;

margin-top: 4px;

}

#brolytics-employee-portfolio .blp-cert-btn:hover {

text-decoration: underline;

}

/* SERVICES SECTION */

#brolytics-employee-portfolio .blp-section-wrapper {

display: flex;

flex-direction: column;

gap: 18px;

}

#brolytics-employee-portfolio .blp-sec-sub {

font-size: 0.74rem;

font-weight: 800;

color: var(--blp-blue);

letter-spacing: 0.05em;

}

#brolytics-employee-portfolio .blp-sec-title {

font-size: 1.45rem;

font-weight: 800;

color: var(--blp-text-dark);

}

#brolytics-employee-portfolio .blp-header-flex {

display: flex;

justify-content: space-between;

align-items: flex-end;

}

#brolytics-employee-portfolio .blp-link-all {

display: inline-flex;

align-items: center;

gap: 5px;

font-size: 0.86rem;

font-weight: 700;

color: var(--blp-blue);

text-decoration: none;

}

#brolytics-employee-portfolio .blp-services-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 16px;

}

#brolytics-employee-portfolio .blp-service-box {

background: #ffffff;

border: 1px solid var(--blp-border);

border-radius: 12px;

padding: 20px 16px;

display: flex;

flex-direction: column;

gap: 10px;

box-shadow: 0 1px 3px rgba(0,0,0,0.04);

}

#brolytics-employee-portfolio .blp-service-ico-wrap {

width: 36px;

height: 36px;

border-radius: 8px;

background: #eff6ff;

color: var(--blp-blue);

display: flex;

align-items: center;

justify-content: center;

}

#brolytics-employee-portfolio .blp-service-name {

font-size: 0.94rem;

font-weight: 700;

color: var(--blp-text-dark);

}

#brolytics-employee-portfolio .blp-service-text {

font-size: 0.81rem;

color: var(--blp-text-gray);

line-height: 1.45;

}

/* PROJECTS GRID */

#brolytics-employee-portfolio .blp-projects-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 16px;

}

#brolytics-employee-portfolio .blp-project-item {

background: #ffffff;

border: 1px solid var(--blp-border);

border-radius: 12px;

overflow: hidden;

display: flex;

flex-direction: column;

box-shadow: 0 1px 3px rgba(0,0,0,0.04);

}

#brolytics-employee-portfolio .blp-project-preview {

position: relative;

width: 100%;

aspect-ratio: 16 / 9;

background: #0f172a;

overflow: hidden;

}

#brolytics-employee-portfolio .blp-project-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.3s ease;

}

#brolytics-employee-portfolio .blp-project-item:hover .blp-project-img {

transform: scale(1.04);

}

#brolytics-employee-portfolio .blp-project-content {

padding: 16px;

display: flex;

flex-direction: column;

flex: 1;

}

#brolytics-employee-portfolio .blp-project-head {

font-size: 0.98rem;

font-weight: 700;

color: var(--blp-text-dark);

margin-bottom: 6px;

}

#brolytics-employee-portfolio .blp-project-summary {

font-size: 0.81rem;

color: var(--blp-text-gray);

line-height: 1.45;

margin-bottom: 12px;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

}

#brolytics-employee-portfolio .blp-project-tags {

display: flex;

flex-wrap: wrap;

gap: 4px;

margin-bottom: 14px;

}

#brolytics-employee-portfolio .blp-ptag {

font-size: 0.7rem;

font-weight: 600;

padding: 2px 8px;

border-radius: 4px;

background: #f1f5f9;

color: #475569;

}

#brolytics-employee-portfolio .blp-btn-view-web {

margin-top: auto;

width: 100%;

padding: 8px 12px;

font-size: 0.84rem;

font-weight: 600;

border-radius: 6px;

background: var(--blp-blue);

color: #ffffff;

text-align: center;

text-decoration: none;

display: inline-block;

}

#brolytics-employee-portfolio .blp-btn-view-web:hover {

background: var(--blp-blue-hover);

}

/* BOTTOM CTA BANNER */

#brolytics-employee-portfolio .blp-bottom-cta {

background: linear-gradient(135deg, #050e1d 0%, #081a38 100%);

border-radius: 12px;

padding: 26px 32px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

color: #ffffff;

}

#brolytics-employee-portfolio .blp-cta-content {

display: flex;

align-items: center;

gap: 16px;

}

#brolytics-employee-portfolio .blp-cta-icon {

width: 48px;

height: 48px;

border-radius: 10px;

background: rgba(255, 255, 255, 0.08);

display: flex;

align-items: center;

justify-content: center;

color: #38bdf8;

flex-shrink: 0;

}

#brolytics-employee-portfolio .blp-cta-title {

font-size: 1.2rem;

font-weight: 800;

color: #ffffff;

}

#brolytics-employee-portfolio .blp-cta-subtitle {

font-size: 0.86rem;

color: #cbd5e1;

}

#brolytics-employee-portfolio .blp-btn-cta {

background: var(--blp-blue);

color: #ffffff;

padding: 12px 28px;

flex-shrink: 0;

}

#brolytics-employee-portfolio .blp-btn-cta:hover {

background: var(--blp-blue-hover);

}

/* FOOTER */

#brolytics-employee-portfolio .blp-footer {

text-align: center;

font-size: 0.82rem;

color: var(--blp-text-gray);

border-top: 1px solid var(--blp-border);

padding-top: 22px;

display: flex;

flex-direction: column;

gap: 4px;

}

#brolytics-employee-portfolio .blp-footer a {

color: var(--blp-blue);

text-decoration: none;

font-weight: 600;

}

/* MODAL */

#brolytics-employee-portfolio .blp-modal-overlay {

position: fixed;

inset: 0;

background: rgba(4, 11, 22, 0.72);

backdrop-filter: blur(4px);

z-index: 999999;

display: flex;

align-items: center;

justify-content: center;

padding: 16px;

opacity: 0;

pointer-events: none;

transition: opacity 0.2s ease;

}

#brolytics-employee-portfolio .blp-modal-overlay.blp-active {

opacity: 1;

pointer-events: auto;

}

#brolytics-employee-portfolio .blp-modal-card {

background: #ffffff;

border-radius: 16px;

width: 100%;

max-width: 580px;

max-height: 90vh;

overflow-y: auto;

position: relative;

padding: 26px;

box-shadow: 0 20px 30px rgba(0,0,0,0.3);

}

#brolytics-employee-portfolio .blp-modal-close {

position: absolute;

top: 16px;

right: 18px;

background: none;

border: none;

font-size: 1.6rem;

color: #94a3b8;

cursor: pointer;

line-height: 1;

}

#brolytics-employee-portfolio .blp-modal-top {

display: flex;

align-items: center;

gap: 12px;

margin-bottom: 18px;

padding-right: 28px;

}

#brolytics-employee-portfolio .blp-modal-avatar {

width: 46px;

height: 46px;

border-radius: 50%;

object-fit: cover;

border: 2px solid var(--blp-blue);

flex-shrink: 0;

}

#brolytics-employee-portfolio .blp-modal-title {

font-size: 1.15rem;

font-weight: 800;

}

#brolytics-employee-portfolio .blp-modal-desc {

font-size: 0.78rem;

color: var(--blp-text-gray);

}

#brolytics-employee-portfolio .blp-form-fields-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

}

#brolytics-employee-portfolio .blp-span-full {

grid-column: span 2;

}

#brolytics-employee-portfolio .blp-input-box {

display: flex;

flex-direction: column;

gap: 4px;

}

#brolytics-employee-portfolio .blp-input-box label {

font-size: 0.76rem;

font-weight: 600;

color: #334155;

}

#brolytics-employee-portfolio .blp-red { color: #ef4444; }

#brolytics-employee-portfolio .blp-gray { color: #94a3b8; }

#brolytics-employee-portfolio .blp-input-box input,

#brolytics-employee-portfolio .blp-input-box select,

#brolytics-employee-portfolio .blp-input-box textarea {

width: 100%;

padding: 8px 11px;

font-size: 0.85rem;

border: 1px solid var(--blp-border);

border-radius: 6px;

background: #ffffff;

outline: none;

font-family: inherit;

}

#brolytics-employee-portfolio .blp-input-box input:focus,

#brolytics-employee-portfolio .blp-input-box select:focus,

#brolytics-employee-portfolio .blp-input-box textarea:focus {

border-color: var(--blp-blue);

box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);

}

#brolytics-employee-portfolio .blp-input-err {

font-size: 0.7rem;

color: #ef4444;

display: none;

}

#brolytics-employee-portfolio .blp-input-box.blp-error input,

#brolytics-employee-portfolio .blp-input-box.blp-error select,

#brolytics-employee-portfolio .blp-input-box.blp-error textarea {

border-color: #ef4444;

}

#brolytics-employee-portfolio .blp-input-box.blp-error .blp-input-err {

display: block;

}

#brolytics-employee-portfolio .blp-modal-btn-row {

margin-top: 16px;

display: flex;

flex-direction: column;

gap: 8px;

}

#brolytics-employee-portfolio .blp-btn-submit {

width: 100%;

background: var(--blp-blue);

color: #ffffff;

padding: 11px;

font-size: 0.95rem;

}

#brolytics-employee-portfolio .blp-safe-note {

font-size: 0.72rem;

color: #94a3b8;

text-align: center;

}

/* MODAL SUCCESS STATE */

#brolytics-employee-portfolio .blp-success-wrap {

text-align: center;

padding: 24px 8px;

display: flex;

flex-direction: column;

align-items: center;

gap: 12px;

}

#brolytics-employee-portfolio .blp-green-check {

width: 58px;

height: 58px;

border-radius: 50%;

background: #ecfdf5;

display: flex;

align-items: center;

justify-content: center;

}

#brolytics-employee-portfolio .blp-success-heading {

font-size: 1.25rem;

font-weight: 800;

color: #064e3b;

}

#brolytics-employee-portfolio .blp-success-paragraph {

font-size: 0.88rem;

color: #047857;

max-width: 360px;

line-height: 1.45;

}

#brolytics-employee-portfolio .blp-btn-close-final {

background: var(--blp-blue);

color: #ffffff;

}

/* RESPONSIVE */

@media (max-width: 1024px) {

#brolytics-employee-portfolio .blp-grid-top {

grid-template-columns: 1fr 1fr;

}

#brolytics-employee-portfolio .blp-card-skills {

grid-column: span 2;

}

#brolytics-employee-portfolio .blp-services-grid {

grid-template-columns: repeat(3, 1fr);

}

#brolytics-employee-portfolio .blp-projects-grid {

grid-template-columns: repeat(2, 1fr);

}

@media (max-width: 768px) {

#brolytics-employee-portfolio .blp-hero-container {

flex-direction: column;

text-align: center;

gap: 18px;

}

#brolytics-employee-portfolio .blp-avatar-frame {

margin: 0 auto;

}

#brolytics-employee-portfolio .blp-hero-meta-row,

#brolytics-employee-portfolio .blp-hero-btns {

justify-content: center;

}

#brolytics-employee-portfolio .blp-grid-top,

#brolytics-employee-portfolio .blp-grid-middle {

grid-template-columns: 1fr;

}

#brolytics-employee-portfolio .blp-card-skills {

grid-column: span 1;

}

#brolytics-employee-portfolio .blp-services-grid {

grid-template-columns: repeat(2, 1fr);

}

#brolytics-employee-portfolio .blp-bottom-cta {

flex-direction: column;

text-align: center;

}

#brolytics-employee-portfolio .blp-cta-content {

flex-direction: column;

}

#brolytics-employee-portfolio .blp-form-fields-grid {

grid-template-columns: 1fr;

}

#brolytics-employee-portfolio .blp-span-full {

grid-column: span 1;

}

@media (max-width: 520px) {

#brolytics-employee-portfolio .blp-services-grid,

#brolytics-employee-portfolio .blp-projects-grid {

grid-template-columns: 1fr;

}

#brolytics-employee-portfolio .blp-hero-name {

font-size: 1.85rem;

}

/* PRINT VIEW (FOR SAVE AS PDF) */

@media print {

#brolytics-employee-portfolio .blp-hero-btns,

#brolytics-employee-portfolio .blp-bottom-cta,

#brolytics-employee-portfolio .blp-modal-overlay,

#brolytics-employee-portfolio .blp-link-all,

#brolytics-employee-portfolio .blp-btn-view-web {

display: none !important;

}

#brolytics-employee-portfolio .blp-hero {

background: #07152b !important;

color: #ffffff !important;

-webkit-print-color-adjust: exact;

print-color-adjust: exact;

}

#brolytics-employee-portfolio .blp-card {

box-shadow: none !important;

border: 1px solid #ccc !important;

break-inside: avoid;

margin-bottom: 12px;

}

</style>

<!-- ====================================================================

জাভাস্ক্রিপ্ট ইঞ্জিন (এখান থেকেই পুরো পোর্টফোলিও সহজে এডিট করবেন)

==================================================================== -->

(function() {

"use strict";

// ====================================================================

// [১] কোম্পানির অফিশিয়াল সেটিংস (দরকার হলে পরিবর্তন করুন)

// ====================================================================

const CONFIG = {

companyName: "Brolytics Lab.IT",

companyWebsite: "https://brolyticslab.blogspot.com/",

hiringEmail: "brolyticsit@gmail.com",

companyWhatsApp: "+880 1845-428433",

// FormSubmit Endpoint (AJAX এর মাধ্যমে পেজ রিলোড ছাড়া মেসেজ যাবে)

formEndpoint: "https://formsubmit.co/ajax/brolyticsit@gmail.com"

};

// ====================================================================

// [২] এমপ্লয়ীর ব্যক্তিগত তথ্য (এখানে পরিবর্তন করলেই পুরো পেজ বদলে যাবে)

// ====================================================================

const employee = {

// এমপ্লয়ীর নাম (FirstName এবং LastName আলাদা রাখতে পারেন সুন্দর কালারের জন্য)

firstName: "Rahid",

lastName: "Hasan",

// ডেজিগনেশন ও পদবি

role: "Full Stack Developer",

// অভিজ্ঞতা ও কাজের লোকেশন

experience: "5+ Years Experience",

location: "Dinajpur, Bangladesh",

// প্রোফাইল ছবির লিংক (সরাসরি ইমেজ লিংক দিন)

profileImage: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80",

// হিরো সেকশনের ছোট ইন্ট্রো

heroSummary: "I'm a passionate Full Stack Developer with 5+ years of experience in building modern, scalable and user-friendly web applications. I love turning ideas into real products using the latest technologies.",

// About সেকশনের বিস্তারিত বিবরণ

aboutText: "Rahid Hasan is a professional Full Stack Developer with 5+ years of experience in developing high-performance web applications, APIs, dashboards and scalable digital products. Focused on clean code and reliable architecture.",

// কুইক ফ্যাক্টস (Quick Facts)

facts: {

experienceYears: "5+",

completedProjects: "20+",

clientSatisfaction: "100%",

availability: "Available"

// স্কিলস লিস্ট (Core Skills)

skills: [

"React", "Next.js", "JavaScript", "TypeScript", "Node.js",

"Express.js", "MongoDB", "MySQL", "Firebase", "REST API",

"Git & GitHub", "Docker", "AWS", "Tailwind CSS", "HTML", "CSS"

// টুলস ও সফটওয়্যার (Tools & Technologies)

tools: [

"VS Code", "Figma", "Postman", "Git", "Docker", "Firebase", "AWS"

// কাজের অভিজ্ঞতা (Work History & Experience)

experienceHistory: [

{

period: "2020 – Present",

position: "Senior Full Stack Developer",

company: "Brolytics Lab.IT",

responsibilities: [

"Developed modern web applications using MERN stack.",

"Built REST APIs and integrated third-party services.",

"Optimized performance and security across products.",

"Collaborated with cross-functional teams."

]

{

period: "2018 – 2020",

position: "Web Developer",

company: "Creative IT Solutions",

responsibilities: [

"Developed responsive websites using HTML, CSS, JavaScript.",

"Worked on client projects and delivered on time.",

"Maintained and updated existing systems."

]

}

// শিক্ষাগত যোগ্যতা (Education)

education: [

{

degree: "B.Sc. in Computer Science",

institution: "University of Dinajpur",

year: "2016 – 2022",

description: "Focused on software development, databases and networking."

}

// সার্টিফিকেট (Certifications) - লিংক না থাকলে খালি রাখতে পারেন ""

certifications: [

{

name: "Full Stack Web Development",

organization: "Udemy",

year: "2023",

url: "https://example.com/certificate"

}

// সার্ভিসসমূহ (Services I Provide)

services: [

{

title: "Web Development",

description: "Modern, responsive and fast websites using latest technologies."

{

title: "Mobile App Development",

description: "Cross-platform mobile apps for Android & iOS using Flutter."

{

title: "API Development",

description: "Secure and scalable REST APIs for your applications."

{

title: "UI/UX Design",

description: "Clean, modern and user-friendly designs for better user experience."

{

title: "Website Maintenance",

description: "Keep your website updated, secure and running smoothly."

}

// প্রজেক্ট লিস্ট (Featured Projects) - শুধু লাইভ প্রজেক্টের লিংক দিন

projects: [

{

title: "E-Commerce Website",

image: "https://images.unsplash.com/photo-1557821552-17105176677c?auto=format&fit=crop&w=600&q=80",

description: "Modern e-commerce platform built for online businesses.",

technologies: ["React", "Node.js", "MongoDB"],

websiteUrl: "https://example.com"

{

title: "Task Management App",

image: "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?auto=format&fit=crop&w=600&q=80",

description: "Organized task manager with board views and notifications.",

technologies: ["Flutter", "Firebase"],

websiteUrl: "https://example.com"

{

title: "Portfolio Website",

image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=600&q=80",

description: "Clean modern design showing agency work and capabilities.",

technologies: ["Next.js", "Tailwind CSS"],

websiteUrl: "https://example.com"

{

title: "Business Dashboard",

image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80",

description: "Interactive analytics dashboard tracking core business metrics.",

technologies: ["React", "Chart.js", "Firebase"],

websiteUrl: "https://example.com"

}

]

};

// ====================================================================

// [৩] রেন্ডারিং ইঞ্জিন (এখানে কোনো কিছু পরিবর্তনের প্রয়োজন নেই)

// ====================================================================

function sanitize(txt) {

if (!txt) return "";

return String(txt).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);

}

function initPortfolio() {

const fullName = employee.firstName + " " + employee.lastName;

// ১. হিরো সেকশন বসানো

const heroImg = document.getElementById("blp-hero-img");

heroImg.src = employee.profileImage;

heroImg.alt = fullName;

heroImg.onerror = function() {

this.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E";

};

document.getElementById("blp-signature").textContent = fullName;

document.getElementById("blp-badge-role").textContent = employee.role;

document.getElementById("blp-first-name").textContent = employee.firstName;

document.getElementById("blp-last-name").textContent = employee.lastName;

document.getElementById("blp-hero-desig").textContent = employee.role;

document.getElementById("blp-meta-exp").textContent = employee.experience;

document.getElementById("blp-meta-loc").textContent = employee.location;

document.getElementById("blp-hero-bio").textContent = employee.heroSummary;

// ২. About Me সেকশন

document.getElementById("blp-about-bio").textContent = employee.aboutText;

document.getElementById("blp-detail-name").textContent = fullName;

document.getElementById("blp-detail-company").textContent = CONFIG.companyName;

document.getElementById("blp-detail-exp").textContent = employee.experience;

document.getElementById("blp-detail-location").textContent = employee.location;

// ৩. Quick Facts

document.getElementById("blp-qf-exp").textContent = employee.facts.experienceYears;

document.getElementById("blp-qf-projects").textContent = employee.facts.completedProjects;

document.getElementById("blp-qf-satisfaction").textContent = employee.facts.clientSatisfaction;

document.getElementById("blp-qf-avail").textContent = employee.facts.availability;

// ৪. Core Skills

const skillsList = document.getElementById("blp-skills-list");

skillsList.innerHTML = "";

employee.skills.forEach(function(s) {

const sp = document.createElement("span");

sp.className = "blp-pill-item";

sp.textContent = s;

skillsList.appendChild(sp);

});

// ৫. Tools & Technologies

const toolsList = document.getElementById("blp-tools-list");

toolsList.innerHTML = "";

employee.tools.forEach(function(t) {

const sp = document.createElement("span");

sp.className = "blp-tool-chip";

sp.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ' + sanitize(t);

toolsList.appendChild(sp);

});

// ৬. Work Experience

const tlList = document.getElementById("blp-timeline-list");

tlList.innerHTML = "";

employee.experienceHistory.forEach(function(exp) {

const box = document.createElement("div");

box.className = "blp-tl-item";

let bulletsHtml = "";

if (exp.responsibilities && exp.responsibilities.length) {

bulletsHtml = '<ul class="blp-tl-bullets">' + exp.responsibilities.map(function(b) { return '<li>' + sanitize(b) + '</li>'; }).join('') + '</ul>';

}

box.innerHTML =

'<div class="blp-tl-dot"></div>' +

'<div class="blp-tl-period">' + sanitize(exp.period) + '</div>' +

'<div class="blp-tl-role">' + sanitize(exp.position) + '</div>' +

'<div class="blp-tl-comp">' + sanitize(exp.company) + '</div>' +

bulletsHtml;

tlList.appendChild(box);

});

// ৭. Education

const eduCard = document.getElementById("blp-edu-card");

const eduList = document.getElementById("blp-edu-list");

if (!employee.education || !employee.education.length) {

eduCard.style.display = "none";

} else {

eduCard.style.display = "block";

eduList.innerHTML = "";

employee.education.forEach(function(ed) {

const d = document.createElement("div");

d.className = "blp-mini-item";

d.innerHTML =

'<div class="blp-mini-title">' + sanitize(ed.degree) + '</div>' +

'<div class="blp-mini-sub">' + sanitize(ed.institution) + '</div>' +

'<div class="blp-mini-meta">' + sanitize(ed.year) + (ed.description ? ' • ' + sanitize(ed.description) : '') + '</div>';

eduList.appendChild(d);

});

}

// ৮. Certifications

const certCard = document.getElementById("blp-cert-card");

const certList = document.getElementById("blp-cert-list");

if (!employee.certifications || !employee.certifications.length) {

certCard.style.display = "none";

} else {

certCard.style.display = "block";

certList.innerHTML = "";

employee.certifications.forEach(function(c) {

const d = document.createElement("div");

d.className = "blp-mini-item";

let linkHtml = "";

if (c.url && c.url.trim()) {

linkHtml = '<a href="' + sanitize(c.url) + '" target="_blank" rel="noopener noreferrer" class="blp-cert-btn">View Certificate →</a>';

}

d.innerHTML =

'<div class="blp-mini-title">' + sanitize(c.name) + '</div>' +

'<div class="blp-mini-sub">' + sanitize(c.organization) + ' (' + sanitize(c.year) + ')</div>' +

linkHtml;

certList.appendChild(d);

});

}

// ৯. Services

const srvSec = document.getElementById("blp-services-sec");

const srvGrid = document.getElementById("blp-services-grid");

const srvSelect = document.getElementById("blp-f-service");

if (!employee.services || !employee.services.length) {

srvSec.style.display = "none";

} else {

srvSec.style.display = "flex";

srvGrid.innerHTML = "";

srvSelect.innerHTML = '<option value="" disabled selected>Select service</option>';

employee.services.forEach(function(s) {

const sb = document.createElement("div");

sb.className = "blp-service-box";

sb.innerHTML =

'<div class="blp-service-ico-wrap"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></div>' +

'<div class="blp-service-name">' + sanitize(s.title) + '</div>' +

'<p class="blp-service-text">' + sanitize(s.description) + '</p>';

srvGrid.appendChild(sb);

const opt = document.createElement("option");

opt.value = s.title;

opt.textContent = s.title;

srvSelect.appendChild(opt);

});

}

// ১০. Projects

const prjSec = document.getElementById("blp-projects-sec");

const prjGrid = document.getElementById("blp-projects-grid");

if (!employee.projects || !employee.projects.length) {

prjSec.style.display = "none";

} else {

prjSec.style.display = "flex";

prjGrid.innerHTML = "";

employee.projects.forEach(function(p) {

const item = document.createElement("div");

item.className = "blp-project-item";

const tags = (p.technologies || []).map(function(t) { return '<span class="blp-ptag">' + sanitize(t) + '</span>'; }).join('');

let btnHtml = "";

if (p.websiteUrl && p.websiteUrl.trim()) {

btnHtml = '<a href="' + sanitize(p.websiteUrl) + '" target="_blank" rel="noopener noreferrer" class="blp-btn-view-web">View Website</a>';

}

item.innerHTML =

'<div class="blp-project-preview">' +

'<img src="' + sanitize(p.image) + '" alt="' + sanitize(p.title) + '" class="blp-project-img" loading="lazy" decoding="async" />' +

'</div>' +

'<div class="blp-project-content">' +

'<div class="blp-project-head">' + sanitize(p.title) + '</div>' +

'<p class="blp-project-summary">' + sanitize(p.description) + '</p>' +

'<div class="blp-project-tags">' + tags + '</div>' +

btnHtml +

'</div>';

const img = item.querySelector(".blp-project-img");

img.onerror = function() {

this.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225' viewBox='0 0 24 24' fill='%23334155'%3E%3Crect width='24' height='24' fill='%230f172a'/%3E%3Cpath fill='%2364748b' d='M4 5h16v14H4z'/%3E%3C/svg%3E";

};

prjGrid.appendChild(item);

});

}

// ১১. মডাল ফর্ম সেটআপ

document.getElementById("blp-modal-heading").textContent = "Hire " + fullName;

const modalAvatar = document.getElementById("blp-modal-thumb");

modalAvatar.src = employee.profileImage;

modalAvatar.alt = fullName;

modalAvatar.onerror = function() { heroImg.onerror.call(this); };

document.getElementById("blp-input-emp-name").value = fullName;

document.getElementById("blp-input-emp-role").value = employee.role;

document.getElementById("blp-input-page-url").value = window.location.href;

document.getElementById("blp-input-email-sub").value = "New Hiring Request – " + fullName;

}

// ====================================================================

// [৪] ইভেন্ট ও ইন্টারঅ্যাকশন

// ====================================================================

const modal = document.getElementById("blp-modal");

const modalClose = document.getElementById("blp-modal-close-btn");

const finalClose = document.getElementById("blp-final-close");

const formStage = document.getElementById("blp-form-stage");

const successStage = document.getElementById("blp-success-stage");

const ajaxForm = document.getElementById("blp-ajax-form");

const submitBtn = document.getElementById("blp-submit-button");

function showModal() {

modal.classList.add("blp-active");

modal.setAttribute("aria-hidden", "false");

document.body.style.overflow = "hidden";

}

function hideModal() {

modal.classList.remove("blp-active");

modal.setAttribute("aria-hidden", "true");

document.body.style.overflow = "";

setTimeout(function() {

formStage.style.display = "block";

successStage.style.display = "none";

ajaxForm.reset();

const errBoxes = ajaxForm.querySelectorAll(".blp-error");

errBoxes.forEach(function(b) { b.classList.remove("blp-error"); });

}, 250);

}

document.querySelectorAll(".blp-open-modal").forEach(function(btn) {

btn.addEventListener("click", showModal);

});

modalClose.addEventListener("click", hideModal);

finalClose.addEventListener("click", hideModal);

modal.addEventListener("click", function(e) { if (e.target === modal) hideModal(); });

document.addEventListener("keydown", function(e) { if (e.key === "Escape" && modal.classList.contains("blp-active")) hideModal(); });

// প্রোফাইল প্রিন্ট / Save as PDF

document.getElementById("blp-download-trigger").addEventListener("click", function() {

window.print();

});

// AJAX ফর্ম সাবমিট

ajaxForm.addEventListener("submit", function(e) {

e.preventDefault();

// ভ্যালিডেশন

const nameF = document.getElementById("blp-f-name");

const phoneF = document.getElementById("blp-f-phone");

const emailF = document.getElementById("blp-f-email");

const compF = document.getElementById("blp-f-company");

const srvF = document.getElementById("blp-f-service");

const msgF = document.getElementById("blp-f-msg");

let hasErr = false;

function checkField(el, condition) {

const box = el.closest(".blp-input-box");

if (condition) {

box.classList.add("blp-error");

hasErr = true;

} else {

box.classList.remove("blp-error");

}

checkField(nameF, !nameF.value.trim());

checkField(phoneF, !phoneF.value.trim() || phoneF.value.trim().length < 6);

checkField(emailF, !emailF.value.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailF.value.trim()));

checkField(compF, !compF.value.trim());

checkField(srvF, !srvF.value);

checkField(msgF, !msgF.value.trim() || msgF.value.trim().length < 10);

if (hasErr) return;

// সাবমিশন লোডিং স্টেট

const oldBtnText = submitBtn.innerHTML;

submitBtn.disabled = true;

submitBtn.innerHTML = "Sending Inquiry...";

const fData = new FormData(ajaxForm);

fetch(CONFIG.formEndpoint, {

method: "POST",

headers: { "Accept": "application/json" },

body: fData

})

.then(function(res) {

if (res.ok) {

formStage.style.display = "none";

successStage.style.display = "flex";

} else {

alert("Submission failed. Please try emailing directly to " + CONFIG.hiringEmail);

}

})

.catch(function() {

alert("Submission error. Please email directly to " + CONFIG.hiringEmail);

})

.finally(function() {

submitBtn.disabled = false;

submitBtn.innerHTML = oldBtnText;

});

// পেজ লোড হলে চালু হবে

if (document.readyState === "loading") {

document.addEventListener("DOMContentLoaded", initPortfolio);

} else {

initPortfolio();

}

})();

</script>

Sign In Required