→ Ad Apon7
→ portfolio

portfolio

This bootstrap css example is contributed by Ad Apon7, on 09-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Hero

Author Ad Apon7

347

v.4.6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Professional Resume</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
  <style>
    :root {
      --navy: #0f1f3d;
      --gold: #c9a84c;
      --gold-light: #e8c97a;
      --slate: #2d3f5e;
      --muted: #6b7a99;
      --bg: #f5f6fa;
      --card-bg: #ffffff;
      --border: #e2e6f0;
    }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: #1a2340;
      min-height: 100vh;
    }

/* ── SIDEBAR ── */
    .sidebar {
      background: linear-gradient(160deg, var(--navy) 0%, var(--slate) 100%);
      min-height: 100vh;
      position: sticky;
      top: 0;
      padding: 2.5rem 1.8rem;
      color: #fff;
    }

.avatar-ring {
      width: 110px; height: 110px;
      border-radius: 50%;
      background: var(--gold);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1rem;
      font-size: 2.8rem;
      color: var(--navy);
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      box-shadow: 0 0 0 5px rgba(201,168,76,.25), 0 0 0 10px rgba(201,168,76,.08);
    }

.sidebar h2 {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      text-align: center;
      color: #fff;
    }

.sidebar .designation {
      text-align: center;
      font-size: .78rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 1.8rem;
    }

.divider-gold {
      border: none;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      margin: 1.2rem 0;
      opacity: .6;
    }

.sidebar-label {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 600;
      margin-bottom: .6rem;
      margin-top: 1.4rem;
    }

.contact-item {
      display: flex; align-items: center; gap: .6rem;
      font-size: .82rem;
      color: rgba(255,255,255,.82);
      margin-bottom: .5rem;
    }
    .contact-item i { color: var(--gold); font-size: .95rem; min-width: 16px; }

/* skill bars */
    .skill-bar-wrap { margin-bottom: .75rem; }
    .skill-name { font-size: .78rem; color: rgba(255,255,255,.85); margin-bottom: .28rem; display: flex; justify-content: space-between; }
    .skill-track { height: 5px; background: rgba(255,255,255,.12); border-radius: 99px; }
    .skill-fill  { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

.lang-badge {
      display: inline-block;
      background: rgba(201,168,76,.18);
      border: 1px solid rgba(201,168,76,.4);
      color: var(--gold-light);
      border-radius: 99px;
      font-size: .72rem;
      padding: .18rem .7rem;
      margin: .2rem .15rem;
    }

/* ── MAIN ── */
    .main-area { padding: 2.5rem 2rem 3rem; }

.section-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.18rem;
      color: var(--navy);
      font-weight: 700;
      position: relative;
      padding-left: 1rem;
      margin-bottom: 1.2rem;
    }
    .section-title::before {
      content: '';
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%);
      width: 4px; height: 70%;
      background: var(--gold);
      border-radius: 2px;
    }

.card-modern {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.4rem 1.6rem;
      margin-bottom: 1rem;
      transition: box-shadow .2s, transform .2s;
      cursor: pointer;
    }
    .card-modern:hover {
      box-shadow: 0 8px 30px rgba(15,31,61,.1);
      transform: translateY(-2px);
    }

.job-title {
      font-weight: 600;
      font-size: 1rem;
      color: var(--navy);
    }
    .job-company {
      color: var(--gold);
      font-size: .85rem;
      font-weight: 600;
    }
    .job-period {
      font-size: .75rem;
      color: var(--muted);
      background: var(--bg);
      border-radius: 99px;
      padding: .15rem .65rem;
      border: 1px solid var(--border);
      display: inline-block;
      margin-top: .25rem;
    }

.badge-skill {
      background: #eef1f9;
      color: var(--slate);
      border-radius: 6px;
      font-size: .73rem;
      padding: .22rem .65rem;
      margin: .2rem .15rem;
      font-weight: 500;
      border: 1px solid var(--border);
    }

.cert-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-left: 4px solid var(--gold);
      border-radius: 10px;
      padding: 1rem 1.2rem;
      margin-bottom: .8rem;
      transition: box-shadow .2s;
      cursor: pointer;
    }
    .cert-card:hover { box-shadow: 0 6px 24px rgba(15,31,61,.09); }

.edu-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.2rem 1.5rem;
      margin-bottom: .9rem;
      cursor: pointer;
      transition: box-shadow .2s, transform .2s;
    }
    .edu-card:hover { box-shadow: 0 6px 24px rgba(15,31,61,.09); transform: translateY(-2px); }

.edu-degree { font-weight: 600; font-size: .98rem; color: var(--navy); }
    .edu-inst   { color: var(--gold); font-size: .84rem; font-weight: 600; }
    .edu-year   { font-size: .75rem; color: var(--muted); }

/* open-to-work chip */
    .open-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      background: #e8f5e9; color: #2e7d32;
      border: 1px solid #a5d6a7;
      border-radius: 99px;
      font-size: .72rem; font-weight: 600;
      padding: .2rem .8rem;
      margin-bottom: 1rem;
    }
    .open-chip .dot { width: 7px; height: 7px; background: #43a047; border-radius: 50%; animation: pulse 1.5s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── MODAL tweaks ── */
    .modal-header { background: var(--navy); color: #fff; border-radius: 12px 12px 0 0; }
    .modal-header .btn-close { filter: invert(1); }
    .modal-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; }
    .modal-body  { font-size: .88rem; color: #2d3f5e; line-height: 1.7; }
    .modal-body ul { padding-left: 1.2rem; }
    .modal-body li { margin-bottom: .4rem; }
    .modal-footer { border-top: 1px solid var(--border); }

.info-row { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
    .info-row i { color: var(--gold); margin-top: .15rem; min-width: 16px; }

@media (max-width: 767px) {
      .sidebar { min-height: auto; position: relative; }
      .main-area { padding: 1.5rem 1rem; }
    }
  </style>
</head>
<body>

<div class="col-lg-3 col-md-4 sidebar">

<div class="avatar-ring">AR</div>
    <h2>Alex Rahman</h2>
    <p class="designation">Senior Software Engineer</p>
    <div class="open-chip"><span class="dot"></span> Open to Work</div>

<div class="sidebar-label"><i class="bi bi-person-lines-fill me-1"></i>Contact</div>
    <div class="contact-item"><i class="bi bi-envelope-fill"></i> alex.rahman@email.com</div>
    <div class="contact-item"><i class="bi bi-telephone-fill"></i> +880 1712-345678</div>
    <div class="contact-item"><i class="bi bi-geo-alt-fill"></i> Dhaka, Bangladesh</div>
    <div class="contact-item"><i class="bi bi-linkedin"></i> linkedin.com/in/alexrahman</div>
    <div class="contact-item"><i class="bi bi-github"></i> github.com/alexrahman</div>

<div class="sidebar-label"><i class="bi bi-bar-chart-fill me-1"></i>Technical Skills</div>
    <div class="skill-bar-wrap"><div class="skill-name"><span>Python</span><span>92%</span></div><div class="skill-track"><div class="skill-fill" style="width:92%"></div></div></div>
    <div class="skill-bar-wrap"><div class="skill-name"><span>JavaScript</span><span>88%</span></div><div class="skill-track"><div class="skill-fill" style="width:88%"></div></div></div>
    <div class="skill-bar-wrap"><div class="skill-name"><span>React / Next.js</span><span>85%</span></div><div class="skill-track"><div class="skill-fill" style="width:85%"></div></div></div>
    <div class="skill-bar-wrap"><div class="skill-name"><span>Django / FastAPI</span><span>80%</span></div><div class="skill-track"><div class="skill-fill" style="width:80%"></div></div></div>
    <div class="skill-bar-wrap"><div class="skill-name"><span>PostgreSQL</span><span>78%</span></div><div class="skill-track"><div class="skill-fill" style="width:78%"></div></div></div>
    <div class="skill-bar-wrap"><div class="skill-name"><span>Docker / AWS</span><span>72%</span></div><div class="skill-track"><div class="skill-fill" style="width:72%"></div></div></div>

<div class="sidebar-label"><i class="bi bi-translate me-1"></i>Languages</div>
    <span class="lang-badge">Bangla — Native</span>
    <span class="lang-badge">English — Fluent</span>
    <span class="lang-badge">Hindi — Basic</span>

<div class="sidebar-label"><i class="bi bi-heart-fill me-1"></i>Interests</div>
    <span class="lang-badge">Open Source</span>
    <span class="lang-badge">UI/UX Design</span>
    <span class="lang-badge">Data Science</span>
    <span class="lang-badge">Blogging</span>
  </div>

<div class="col-lg-9 col-md-8 main-area">

<div class="mb-4">
      <div class="section-title">Profile Summary</div>
      <p style="font-size:.88rem;color:#3d4f70;line-height:1.8;">
        Results-driven Software Engineer with <strong>7+ years</strong> of experience building scalable web applications and cloud-native solutions. Passionate about clean code, agile practices, and delivering user-centric products that make a difference. Proven track record of leading cross-functional teams and shipping high-impact features.
      </p>
    </div>

<div class="mb-4">
      <div class="section-title">Personal Information</div>
      <div class="card-modern" data-bs-toggle="modal" data-bs-target="#personalModal" title="Click for details">
        <div class="row g-3">
          <div class="col-sm-6">
            <div class="info-row"><i class="bi bi-calendar3"></i><div><small class="text-muted d-block" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;">Date of Birth</small><span style="font-size:.88rem;font-weight:500;">15 March 1992</span></div></div>
          </div>
          <div class="col-sm-6">
            <div class="info-row"><i class="bi bi-gender-ambiguous"></i><div><small class="text-muted d-block" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;">Gender</small><span style="font-size:.88rem;font-weight:500;">Male</span></div></div>
          </div>
          <div class="col-sm-6">
            <div class="info-row"><i class="bi bi-house-door"></i><div><small class="text-muted d-block" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;">Marital Status</small><span style="font-size:.88rem;font-weight:500;">Married</span></div></div>
          </div>
          <div class="col-sm-6">
            <div class="info-row"><i class="bi bi-flag"></i><div><small class="text-muted d-block" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;">Nationality</small><span style="font-size:.88rem;font-weight:500;">Bangladeshi</span></div></div>
          </div>
          <div class="col-sm-6">
            <div class="info-row"><i class="bi bi-card-text"></i><div><small class="text-muted d-block" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;">NID No.</small><span style="font-size:.88rem;font-weight:500;">1234567890123</span></div></div>
          </div>
          <div class="col-sm-6">
            <div class="info-row"><i class="bi bi-blood-drop"></i><div><small class="text-muted d-block" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;">Blood Group</small><span style="font-size:.88rem;font-weight:500;">B+</span></div></div>
          </div>
        </div>
        <div class="mt-2 text-end"><small style="color:var(--gold);font-size:.72rem;"><i class="bi bi-cursor"></i> Click for full details</small></div>
      </div>
    </div>

<div class="mb-4">
      <div class="section-title">Education</div>

<div class="edu-card" data-bs-toggle="modal" data-bs-target="#eduModal1">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <div class="edu-degree">B.Sc. in Computer Science & Engineering</div>
            <div class="edu-inst"><i class="bi bi-building me-1"></i>BUET — Bangladesh University of Engineering & Technology</div>
          </div>
          <span class="job-period">2010 – 2014</span>
        </div>
        <div class="mt-1" style="font-size:.78rem;color:var(--muted);">CGPA: 3.72 / 4.00 &nbsp;|&nbsp; Major: Software Engineering</div>
      </div>

<div class="edu-card" data-bs-toggle="modal" data-bs-target="#eduModal2">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <div class="edu-degree">Higher Secondary Certificate (HSC)</div>
            <div class="edu-inst"><i class="bi bi-building me-1"></i>Dhaka College, Dhaka Board</div>
          </div>
          <span class="job-period">2008 – 2010</span>
        </div>
        <div class="mt-1" style="font-size:.78rem;color:var(--muted);">GPA: 5.00 / 5.00 &nbsp;|&nbsp; Science Group</div>
      </div>
    </div>

<div class="mb-4">
      <div class="section-title">Special Skills</div>
      <div class="card-modern" data-bs-toggle="modal" data-bs-target="#skillsModal">
        <div class="row g-3">
          <div class="col-md-4">
            <div style="background:#f0f4ff;border-radius:10px;padding:1rem;text-align:center;">
              <i class="bi bi-code-slash" style="font-size:1.6rem;color:var(--navy);"></i>
              <div style="font-weight:600;font-size:.85rem;margin-top:.5rem;">Full-Stack Dev</div>
              <div style="font-size:.75rem;color:var(--muted);">React, Django, REST APIs</div>
            </div>
          </div>
          <div class="col-md-4">
            <div style="background:#fff8ee;border-radius:10px;padding:1rem;text-align:center;">
              <i class="bi bi-cloud-arrow-up" style="font-size:1.6rem;color:#c9a84c;"></i>
              <div style="font-weight:600;font-size:.85rem;margin-top:.5rem;">Cloud & DevOps</div>
              <div style="font-size:.75rem;color:var(--muted);">AWS, Docker, CI/CD</div>
            </div>
          </div>
          <div class="col-md-4">
            <div style="background:#f0fff4;border-radius:10px;padding:1rem;text-align:center;">
              <i class="bi bi-people" style="font-size:1.6rem;color:#2e7d32;"></i>
              <div style="font-weight:600;font-size:.85rem;margin-top:.5rem;">Team Leadership</div>
              <div style="font-size:.75rem;color:var(--muted);">Agile, Scrum, Mentoring</div>
            </div>
          </div>
        </div>
        <div class="mt-3">
          <span class="badge-skill">Problem Solving</span>
          <span class="badge-skill">System Design</span>
          <span class="badge-skill">Database Optimization</span>
          <span class="badge-skill">API Architecture</span>
          <span class="badge-skill">Code Review</span>
          <span class="badge-skill">Technical Writing</span>
          <span class="badge-skill">Machine Learning (Basic)</span>
          <span class="badge-skill">UI/UX Prototyping</span>
        </div>
        <div class="mt-2 text-end"><small style="color:var(--gold);font-size:.72rem;"><i class="bi bi-cursor"></i> Click for full details</small></div>
      </div>
    </div>

<div class="mb-4">
      <div class="section-title">Training &amp; Certifications</div>

<div class="cert-card" data-bs-toggle="modal" data-bs-target="#certModal1">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
          <div>
            <div style="font-weight:600;font-size:.92rem;color:var(--navy);">AWS Certified Solutions Architect – Associate</div>
            <div style="font-size:.78rem;color:var(--muted);">Amazon Web Services &nbsp;·&nbsp; <span style="color:#2e7d32;font-weight:600;">Active</span></div>
          </div>
          <span class="job-period">Mar 2023</span>
        </div>
      </div>

<div class="cert-card" data-bs-toggle="modal" data-bs-target="#certModal2">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
          <div>
            <div style="font-weight:600;font-size:.92rem;color:var(--navy);">Professional Scrum Master I (PSM I)</div>
            <div style="font-size:.78rem;color:var(--muted);">Scrum.org &nbsp;·&nbsp; <span style="color:#2e7d32;font-weight:600;">Active</span></div>
          </div>
          <span class="job-period">Sep 2022</span>
        </div>
      </div>

<div class="cert-card" data-bs-toggle="modal" data-bs-target="#certModal3">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
          <div>
            <div style="font-weight:600;font-size:.92rem;color:var(--navy);">Full-Stack Web Development Bootcamp</div>
            <div style="font-size:.78rem;color:var(--muted);">BASIS Institute of Technology &amp; Management &nbsp;·&nbsp; 3 months</div>
          </div>
          <span class="job-period">2015</span>
        </div>
      </div>
    </div>

<div class="mb-4">
      <div class="section-title">Work Experience</div>

<div class="card-modern" data-bs-toggle="modal" data-bs-target="#workModal1">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <div class="job-title">Senior Software Engineer</div>
            <div class="job-company"><i class="bi bi-building-fill me-1"></i>TechVenture Bangladesh Ltd.</div>
          </div>
          <span class="job-period"><i class="bi bi-calendar3 me-1"></i>Jan 2021 – Present</span>
        </div>
        <p class="mt-2 mb-1" style="font-size:.81rem;color:var(--muted);">Led a 6-member engineering team delivering SaaS products for 50k+ users.</p>
        <span class="badge-skill">Python</span><span class="badge-skill">React</span><span class="badge-skill">AWS</span><span class="badge-skill">PostgreSQL</span>
        <div class="mt-2 text-end"><small style="color:var(--gold);font-size:.72rem;"><i class="bi bi-cursor"></i> Click for full details</small></div>
      </div>

<div class="card-modern" data-bs-toggle="modal" data-bs-target="#workModal2">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <div class="job-title">Software Engineer</div>
            <div class="job-company"><i class="bi bi-building-fill me-1"></i>DataSoft Systems Bangladesh Ltd.</div>
          </div>
          <span class="job-period"><i class="bi bi-calendar3 me-1"></i>Jun 2018 – Dec 2020</span>
        </div>
        <p class="mt-2 mb-1" style="font-size:.81rem;color:var(--muted);">Developed government digital service portals serving millions of citizens.</p>
        <span class="badge-skill">Django</span><span class="badge-skill">JavaScript</span><span class="badge-skill">Docker</span><span class="badge-skill">Redis</span>
        <div class="mt-2 text-end"><small style="color:var(--gold);font-size:.72rem;"><i class="bi bi-cursor"></i> Click for full details</small></div>
      </div>

<div class="card-modern" data-bs-toggle="modal" data-bs-target="#workModal3">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <div class="job-title">Junior Developer</div>
            <div class="job-company"><i class="bi bi-building-fill me-1"></i>Brain Station 23</div>
          </div>
          <span class="job-period"><i class="bi bi-calendar3 me-1"></i>Aug 2015 – May 2018</span>
        </div>
        <p class="mt-2 mb-1" style="font-size:.81rem;color:var(--muted);">Built REST APIs and front-end modules for fintech startup clients.</p>
        <span class="badge-skill">PHP</span><span class="badge-skill">Laravel</span><span class="badge-skill">Vue.js</span><span class="badge-skill">MySQL</span>
        <div class="mt-2 text-end"><small style="color:var(--gold);font-size:.72rem;"><i class="bi bi-cursor"></i> Click for full details</small></div>
      </div>
    </div>

</div>
</div>
</div>

<div class="modal fade" id="personalModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-person-badge me-2"></i>Personal Information</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="row g-3">
          <div class="col-6"><div class="info-row"><i class="bi bi-person-fill"></i><div><small class="text-muted">Full Name</small><div class="fw-600">Alex Rahman</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-calendar3"></i><div><small class="text-muted">Date of Birth</small><div>15 March 1992</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-gender-ambiguous"></i><div><small class="text-muted">Gender</small><div>Male</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-house-door"></i><div><small class="text-muted">Marital Status</small><div>Married</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-flag"></i><div><small class="text-muted">Nationality</small><div>Bangladeshi</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-blood-drop"></i><div><small class="text-muted">Blood Group</small><div>B+</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-card-text"></i><div><small class="text-muted">NID Number</small><div>1234567890123</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-passport"></i><div><small class="text-muted">Passport</small><div>AA1234567</div></div></div></div>
          <div class="col-12"><div class="info-row"><i class="bi bi-house"></i><div><small class="text-muted">Permanent Address</small><div>123 Mirpur Road, Dhaka-1216, Bangladesh</div></div></div></div>
          <div class="col-12"><div class="info-row"><i class="bi bi-people-fill"></i><div><small class="text-muted">Father's Name</small><div>Md. Karim Rahman</div></div></div></div>
          <div class="col-12"><div class="info-row"><i class="bi bi-people-fill"></i><div><small class="text-muted">Mother's Name</small><div>Mrs. Fatema Begum</div></div></div></div>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="eduModal1" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-mortarboard me-2"></i>B.Sc. in CSE — BUET</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Institution</small><div>Bangladesh University of Engineering & Technology (BUET)</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-award"></i><div><small class="text-muted">Degree</small><div>Bachelor of Science in Computer Science & Engineering</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-calendar3"></i><div><small class="text-muted">Duration</small><div>2010 – 2014</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-star"></i><div><small class="text-muted">CGPA</small><div>3.72 / 4.00</div></div></div>
        <hr/>
        <strong>Notable Achievements</strong>
        <ul class="mt-2">
          <li>Dean's List – 3 consecutive semesters</li>
          <li>Thesis: "Distributed Load Balancing in Cloud Environments"</li>
          <li>ACM ICPC Regional Participant 2013</li>
          <li>Technical Secretary, CSE Society 2013–14</li>
        </ul>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="eduModal2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-mortarboard me-2"></i>HSC — Dhaka College</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Institution</small><div>Dhaka College, Dhaka Board</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-book"></i><div><small class="text-muted">Group</small><div>Science</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-calendar3"></i><div><small class="text-muted">Year</small><div>2010 (Session: 2008–2010)</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-star"></i><div><small class="text-muted">GPA</small><div>5.00 / 5.00 (Golden A+)</div></div></div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="skillsModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-lightning-charge me-2"></i>Special Skills — Full Breakdown</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="row g-3">
          <div class="col-md-6">
            <strong>Programming Languages</strong>
            <ul class="mt-1"><li>Python (Expert)</li><li>JavaScript / TypeScript (Advanced)</li><li>PHP (Intermediate)</li><li>SQL (Advanced)</li></ul>
          </div>
          <div class="col-md-6">
            <strong>Frameworks & Libraries</strong>
            <ul class="mt-1"><li>React, Next.js, Vue.js</li><li>Django, FastAPI, Laravel</li><li>Bootstrap, Tailwind CSS</li><li>Pandas, NumPy, Scikit-learn</li></ul>
          </div>
          <div class="col-md-6">
            <strong>Cloud & Infrastructure</strong>
            <ul class="mt-1"><li>AWS (EC2, S3, Lambda, RDS)</li><li>Docker & Kubernetes</li><li>CI/CD: GitHub Actions, Jenkins</li><li>Nginx, Linux Server Admin</li></ul>
          </div>
          <div class="col-md-6">
            <strong>Soft Skills</strong>
            <ul class="mt-1"><li>Team Leadership & Mentoring</li><li>Technical Documentation</li><li>Agile / Scrum Project Management</li><li>Client Communication & Requirement Gathering</li></ul>
          </div>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="certModal1" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-patch-check me-2"></i>AWS Solutions Architect</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Issuing Body</small><div>Amazon Web Services (AWS)</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-award"></i><div><small class="text-muted">Certification</small><div>AWS Certified Solutions Architect – Associate (SAA-C03)</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-calendar3"></i><div><small class="text-muted">Issue Date</small><div>March 2023</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-clock-history"></i><div><small class="text-muted">Expiry</small><div>March 2026</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-upc-scan"></i><div><small class="text-muted">Credential ID</small><div>AWS-SAA-2023-XXXXXX</div></div></div>
        <hr/>
        <p>Validates expertise in designing distributed systems on AWS, including high-availability architectures, cost optimization, and security best practices.</p>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="certModal2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-patch-check me-2"></i>PSM I — Scrum Master</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Issuing Body</small><div>Scrum.org</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-award"></i><div><small class="text-muted">Certification</small><div>Professional Scrum Master I (PSM I)</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-calendar3"></i><div><small class="text-muted">Issue Date</small><div>September 2022</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-infinity"></i><div><small class="text-muted">Validity</small><div>Lifetime (No expiry)</div></div></div>
        <hr/>
        <p>Demonstrates deep understanding of Scrum framework, servant leadership, and facilitating sprint ceremonies for high-performing development teams.</p>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="certModal3" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-patch-check me-2"></i>Full-Stack Bootcamp</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Institution</small><div>BASIS Institute of Technology & Management (BITM)</div></div></div>
        <div class="info-row mt-2"><i class="bi bi-calendar3"></i><div><small class="text-muted">Year</small><div>2015 (3-month intensive)</div></div></div>
        <hr/>
        <strong>Topics Covered</strong>
        <ul class="mt-1">
          <li>HTML5, CSS3, JavaScript ES6+</li>
          <li>PHP & Laravel Framework</li>
          <li>MySQL Database Design</li>
          <li>RESTful API Development</li>
          <li>Git & Version Control</li>
        </ul>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="workModal1" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-briefcase me-2"></i>Senior Software Engineer — TechVenture</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="row g-2 mb-3">
          <div class="col-6"><div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Company</small><div>TechVenture Bangladesh Ltd.</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-calendar3"></i><div><small class="text-muted">Period</small><div>Jan 2021 – Present</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-geo-alt"></i><div><small class="text-muted">Location</small><div>Dhaka, Bangladesh</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-people"></i><div><small class="text-muted">Team Size</small><div>6 Engineers</div></div></div></div>
        </div>
        <strong>Key Responsibilities</strong>
        <ul class="mt-1">
          <li>Architected and led development of multi-tenant SaaS platform serving 50,000+ users</li>
          <li>Reduced API response time by 40% through caching and query optimization</li>
          <li>Established code review culture, improving code quality scores by 35%</li>
          <li>Mentored 3 junior engineers and conducted weekly technical knowledge sessions</li>
          <li>Coordinated with product and design teams to deliver features on 2-week sprint cycles</li>
          <li>Implemented automated CI/CD pipeline reducing deployment time from 2 hours to 15 minutes</li>
        </ul>
        <div class="mt-2">
          <span class="badge-skill">Python</span><span class="badge-skill">React</span><span class="badge-skill">Django</span>
          <span class="badge-skill">AWS</span><span class="badge-skill">PostgreSQL</span><span class="badge-skill">Redis</span><span class="badge-skill">Docker</span>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="workModal2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-briefcase me-2"></i>Software Engineer — DataSoft Systems</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="row g-2 mb-3">
          <div class="col-6"><div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Company</small><div>DataSoft Systems Bangladesh Ltd.</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-calendar3"></i><div><small class="text-muted">Period</small><div>Jun 2018 – Dec 2020</div></div></div></div>
        </div>
        <strong>Key Responsibilities</strong>
        <ul class="mt-1">
          <li>Developed government e-service portals used by millions of citizens nationwide</li>
          <li>Built a document verification microservice integrated with NID database</li>
          <li>Containerized legacy applications using Docker, cutting infra cost by 30%</li>
          <li>Collaborated with government stakeholders to gather and refine requirements</li>
          <li>Wrote comprehensive API documentation for third-party integrations</li>
        </ul>
        <div class="mt-2">
          <span class="badge-skill">Django</span><span class="badge-skill">JavaScript</span>
          <span class="badge-skill">Docker</span><span class="badge-skill">Redis</span><span class="badge-skill">Celery</span>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="workModal3" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-briefcase me-2"></i>Junior Developer — Brain Station 23</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="row g-2 mb-3">
          <div class="col-6"><div class="info-row"><i class="bi bi-building"></i><div><small class="text-muted">Company</small><div>Brain Station 23</div></div></div></div>
          <div class="col-6"><div class="info-row"><i class="bi bi-calendar3"></i><div><small class="text-muted">Period</small><div>Aug 2015 – May 2018</div></div></div></div>
        </div>
        <strong>Key Responsibilities</strong>
        <ul class="mt-1">
          <li>Built REST APIs for fintech mobile apps serving 10,000+ daily active users</li>
          <li>Developed interactive front-end modules using Vue.js and vanilla JS</li>
          <li>Maintained and optimized MySQL databases for transactional workloads</li>
          <li>Participated in daily standups, sprint planning, and retrospectives</li>
          <li>Contributed to internal UI component library used across 5+ projects</li>
        </ul>
        <div class="mt-2">
          <span class="badge-skill">PHP</span><span class="badge-skill">Laravel</span>
          <span class="badge-skill">Vue.js</span><span class="badge-skill">MySQL</span><span class="badge-skill">jQuery</span>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

More Examples

Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

2 years ago

5.9k

v.5.3
Personal Biography section
idem

Author:
Anonymous

3 months ago

343

v.5.3
Personal Biography section

Author:
Ad Apon7

3 months ago

637

v.5.3
Section Title

Author:
istiakahmedchowdhury10

1 month ago

119

v.4.6
Basic hero
Hero section with background image

Author:
Prajwal Hallale

2 years ago

5.1k

v.4.6
marquee track

Author:
Juan Antonio González Hernández

5 months ago

927

v.4.6
Simple hero section

Author:
Mateo Rojas

1 year ago

7.7k

v.5.3
Skills Information section

Author:
Ad Apon7

3 months ago

743

v.5.3
client feedback

Author:
Huryra

1 month ago

112

v.4.6
portfoilo page

Author:
Ad Apon7

4 months ago

824

v.5.3
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

1 year ago

7.7k

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

2 months ago

311

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent