→ Ad Apon7
→ portfolio

portfolio

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

Tags: Hero

Author Ad Apon7

791

v.5.3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Resume — Alex Rahman</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"/>
  <style>
    body { background: #f4f6f9; font-family: 'Segoe UI', sans-serif; font-size: 14px; color: #333; }

/* Sidebar */
    .sidebar { background: #1e3a5f; color: #fff; min-height: 100vh; padding: 28px 18px; }
    .sidebar .name { font-size: 1.15rem; font-weight: 700; margin-bottom: 2px; }
    .sidebar .designation { font-size: .78rem; color: #aec6e8; margin-bottom: 16px; }
    .sidebar hr { border-color: rgba(255,255,255,.15); }
    .sidebar .sec-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #aec6e8; font-weight: 600; margin: 12px 0 6px; }
    .sidebar .contact-item { font-size: .77rem; color: rgba(255,255,255,.85); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
    .sidebar .contact-item i { font-size: .82rem; color: #7eb3e8; min-width: 14px; }

/* Skill bars */
    .skill-wrap { margin-bottom: 8px; }
    .skill-label { display: flex; justify-content: space-between; font-size: .73rem; color: rgba(255,255,255,.8); margin-bottom: 3px; }
    .skill-track { background: rgba(255,255,255,.15); height: 5px; border-radius: 4px; }
    .skill-fill  { background: #7eb3e8; height: 5px; border-radius: 4px; }

/* Sidebar tags */
    .tag { display: inline-block; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); border-radius: 4px; font-size: .71rem; padding: 2px 8px; margin: 2px 2px; }

/* Main area */
    .main { padding: 26px 26px 40px; }

/* Section heading */
    .sec-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #1e3a5f; border-bottom: 2px solid #1e3a5f; padding-bottom: 5px; margin-bottom: 14px; }

/* Personal info table */
    .info-table { width: 100%; border-collapse: collapse; }
    .info-table td { padding: 5px 8px; font-size: .83rem; vertical-align: top; border-bottom: 1px solid #eee; }
    .info-table td:first-child { color: #666; width: 42%; font-weight: 500; white-space: nowrap; }
    .info-table td:last-child { color: #222; font-weight: 500; }

/* Education */
    .edu-row { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
    .edu-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .edu-degree { font-weight: 600; color: #1e3a5f; font-size: .88rem; }
    .edu-inst   { color: #555; font-size: .8rem; }
    .edu-meta   { color: #888; font-size: .75rem; }

/* Special Skills badges */
    .skill-badge { display: inline-block; background: #e8f0fb; color: #1e3a5f; border: 1px solid #c5d8f5; border-radius: 4px; font-size: .74rem; padding: 3px 9px; margin: 2px 3px; }
    .skill-group-label { font-size: .8rem; font-weight: 600; color: #444; margin-bottom: 5px; margin-top: 10px; }

/* Cert rows — simple, click = modal */
    .cert-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 9px 12px; border: 1px solid #dee2e6; border-radius: 6px;
      margin-bottom: 7px; cursor: pointer; background: #fff; transition: background .15s;
    }
    .cert-row:hover { background: #f0f5ff; }
    .cert-title { font-weight: 600; font-size: .85rem; color: #1e3a5f; }
    .cert-sub   { font-size: .74rem; color: #666; }
    .cert-year  { font-size: .74rem; color: #888; white-space: nowrap; }

/* Work experience */
    .work-row { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
    .work-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .work-title   { font-weight: 700; font-size: .9rem; color: #1e3a5f; }
    .work-company { font-size: .8rem; color: #555; }
    .work-period  { font-size: .74rem; color: #888; }
    .work-row ul  { padding-left: 17px; margin: 6px 0 0; }
    .work-row li  { font-size: .81rem; color: #444; margin-bottom: 3px; }

/* Modal */
    .modal-header { background: #1e3a5f; color: #fff; }
    .modal-header .btn-close { filter: invert(1); }
    .modal-title { font-size: .95rem; font-weight: 600; }
    .modal-body { font-size: .84rem; }
    .modal-body ul { padding-left: 18px; }
    .modal-body li { margin-bottom: 4px; }

@media (max-width: 767px) {
      .sidebar { min-height: auto; }
      .main { padding: 16px 12px; }
    }
  </style>
</head>
<body>

<div class="col-lg-3 col-md-4 sidebar">
    <div class="text-center mb-3">
      <div style="width:78px;height:78px;border-radius:50%;background:#3a6fa8;display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;color:#fff;">AR</div>
    </div>
    <div class="text-center">
      <div class="name">Alex Rahman</div>
      <div class="designation">Senior Software Engineer</div>
    </div>
    <hr/>

<div class="sec-label">Contact</div>
    <div class="contact-item"><i class="bi bi-envelope"></i> alex.rahman@email.com</div>
    <div class="contact-item"><i class="bi bi-telephone"></i> +880 1712-345678</div>
    <div class="contact-item"><i class="bi bi-geo-alt"></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>
    <hr/>

<div class="sec-label">Technical Skills</div>
    <div class="skill-wrap"><div class="skill-label"><span>Python</span><span>92%</span></div><div class="skill-track"><div class="skill-fill" style="width:92%"></div></div></div>
    <div class="skill-wrap"><div class="skill-label"><span>JavaScript</span><span>88%</span></div><div class="skill-track"><div class="skill-fill" style="width:88%"></div></div></div>
    <div class="skill-wrap"><div class="skill-label"><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-wrap"><div class="skill-label"><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-wrap"><div class="skill-label"><span>PostgreSQL</span><span>78%</span></div><div class="skill-track"><div class="skill-fill" style="width:78%"></div></div></div>
    <div class="skill-wrap"><div class="skill-label"><span>Docker / AWS</span><span>72%</span></div><div class="skill-track"><div class="skill-fill" style="width:72%"></div></div></div>
    <hr/>

<div class="sec-label">Languages</div>
    <span class="tag">Bangla — Native</span>
    <span class="tag">English — Fluent</span>
    <span class="tag">Hindi — Basic</span>
    <hr/>

<div class="sec-label">Interests</div>
    <span class="tag">Open Source</span>
    <span class="tag">UI/UX Design</span>
    <span class="tag">Data Science</span>
    <span class="tag">Blogging</span>
  </div>

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

<div class="mb-4">
      <div class="sec-title">Profile Summary</div>
      <p style="font-size:.85rem;color:#444;line-height:1.75;margin:0;">
        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. Proven track record of leading cross-functional teams and shipping high-impact features on time.
      </p>
    </div>

<div class="mb-4">
      <div class="sec-title">Personal Information</div>
      <table class="info-table">
        <tr><td>Full Name</td><td>Alex Rahman</td></tr>
        <tr><td>Date of Birth</td><td>15 March 1992</td></tr>
        <tr><td>Gender</td><td>Male</td></tr>
        <tr><td>Marital Status</td><td>Married</td></tr>
        <tr><td>Nationality</td><td>Bangladeshi</td></tr>
        <tr><td>NID Number</td><td>1234567890123</td></tr>
        <tr><td>Passport No.</td><td>AA1234567</td></tr>
        <tr><td>Blood Group</td><td>B+</td></tr>
        <tr><td>Father's Name</td><td>Md. Karim Rahman</td></tr>
        <tr><td>Mother's Name</td><td>Mrs. Fatema Begum</td></tr>
        <tr><td>Permanent Address</td><td>123 Mirpur Road, Dhaka-1216, Bangladesh</td></tr>
      </table>
    </div>

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

<div class="edu-row">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
          <div>
            <div class="edu-degree">B.Sc. in Computer Science &amp; Engineering</div>
            <div class="edu-inst">Bangladesh University of Engineering &amp; Technology (BUET)</div>
          </div>
          <span class="edu-meta">2010 – 2014</span>
        </div>
        <div class="edu-meta mt-1">CGPA: 3.72 / 4.00 &nbsp;|&nbsp; Major: Software Engineering</div>
      </div>

<div class="edu-row">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
          <div>
            <div class="edu-degree">Higher Secondary Certificate (HSC)</div>
            <div class="edu-inst">Dhaka College, Dhaka Board</div>
          </div>
          <span class="edu-meta">2008 – 2010</span>
        </div>
        <div class="edu-meta mt-1">GPA: 5.00 / 5.00 &nbsp;|&nbsp; Science Group</div>
      </div>

<div class="edu-row">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
          <div>
            <div class="edu-degree">Secondary School Certificate (SSC)</div>
            <div class="edu-inst">Motijheel Model High School, Dhaka Board</div>
          </div>
          <span class="edu-meta">2006 – 2008</span>
        </div>
        <div class="edu-meta mt-1">GPA: 5.00 / 5.00 &nbsp;|&nbsp; Science Group</div>
      </div>
    </div>

<div class="mb-4">
      <div class="sec-title">Special Skills</div>

<div class="skill-group-label">Programming &amp; Frameworks</div>
      <span class="skill-badge">Python</span><span class="skill-badge">JavaScript</span><span class="skill-badge">TypeScript</span>
      <span class="skill-badge">React</span><span class="skill-badge">Next.js</span><span class="skill-badge">Django</span>
      <span class="skill-badge">FastAPI</span><span class="skill-badge">Laravel</span>

<div class="skill-group-label">Cloud &amp; DevOps</div>
      <span class="skill-badge">AWS (EC2, S3, Lambda)</span><span class="skill-badge">Docker</span>
      <span class="skill-badge">GitHub Actions</span><span class="skill-badge">Nginx</span><span class="skill-badge">Linux</span>

<div class="skill-group-label">Database &amp; Tools</div>
      <span class="skill-badge">PostgreSQL</span><span class="skill-badge">MySQL</span><span class="skill-badge">Redis</span>
      <span class="skill-badge">MongoDB</span><span class="skill-badge">Git</span><span class="skill-badge">Postman</span>

<div class="skill-group-label">Soft Skills</div>
      <span class="skill-badge">Team Leadership</span><span class="skill-badge">Agile / Scrum</span>
      <span class="skill-badge">Problem Solving</span><span class="skill-badge">Technical Writing</span>
      <span class="skill-badge">Mentoring</span><span class="skill-badge">Client Communication</span>
    </div>

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

<div class="cert-row" data-bs-toggle="modal" data-bs-target="#certModal1">
        <div>
          <div class="cert-title">AWS Certified Solutions Architect – Associate</div>
          <div class="cert-sub">Amazon Web Services &nbsp;·&nbsp; <span class="text-success fw-semibold">Active</span></div>
        </div>
        <span class="cert-year">Mar 2023 &nbsp;<i class="bi bi-chevron-right text-muted"></i></span>
      </div>

<div class="cert-row" data-bs-toggle="modal" data-bs-target="#certModal2">
        <div>
          <div class="cert-title">Professional Scrum Master I (PSM I)</div>
          <div class="cert-sub">Scrum.org &nbsp;·&nbsp; <span class="text-success fw-semibold">Active</span></div>
        </div>
        <span class="cert-year">Sep 2022 &nbsp;<i class="bi bi-chevron-right text-muted"></i></span>
      </div>

<div class="cert-row" data-bs-toggle="modal" data-bs-target="#certModal3">
        <div>
          <div class="cert-title">Full-Stack Web Development Bootcamp</div>
          <div class="cert-sub">BASIS Institute of Technology &amp; Management (BITM) &nbsp;·&nbsp; 3 months</div>
        </div>
        <span class="cert-year">2015 &nbsp;<i class="bi bi-chevron-right text-muted"></i></span>
      </div>

<div class="cert-row" data-bs-toggle="modal" data-bs-target="#certModal4">
        <div>
          <div class="cert-title">Machine Learning Specialization</div>
          <div class="cert-sub">Coursera — Stanford University &nbsp;·&nbsp; Online</div>
        </div>
        <span class="cert-year">2021 &nbsp;<i class="bi bi-chevron-right text-muted"></i></span>
      </div>
    </div>

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

<div class="work-row">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
          <div>
            <div class="work-title">Senior Software Engineer</div>
            <div class="work-company">TechVenture Bangladesh Ltd., Dhaka</div>
          </div>
          <span class="work-period">Jan 2021 – Present</span>
        </div>
        <ul>
          <li>Led a 6-member team to build a multi-tenant SaaS platform for 50,000+ users</li>
          <li>Reduced API response time by 40% through caching and query optimization</li>
          <li>Implemented CI/CD pipeline reducing deployment time from 2 hours to 15 minutes</li>
          <li>Mentored 3 junior engineers with weekly code review and knowledge sessions</li>
        </ul>
      </div>

<div class="work-row">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
          <div>
            <div class="work-title">Software Engineer</div>
            <div class="work-company">DataSoft Systems Bangladesh Ltd., Dhaka</div>
          </div>
          <span class="work-period">Jun 2018 – Dec 2020</span>
        </div>
        <ul>
          <li>Developed government e-service portals used by millions of citizens</li>
          <li>Built a document verification microservice integrated with NID database</li>
          <li>Containerized legacy applications using Docker, reducing infrastructure cost by 30%</li>
        </ul>
      </div>

<div class="work-row">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-1">
          <div>
            <div class="work-title">Junior Developer</div>
            <div class="work-company">Brain Station 23, Dhaka</div>
          </div>
          <span class="work-period">Aug 2015 – May 2018</span>
        </div>
        <ul>
          <li>Built REST APIs for fintech mobile apps with 10,000+ daily active users</li>
          <li>Developed interactive front-end modules using Vue.js</li>
          <li>Maintained and optimized MySQL databases for transactional workloads</li>
        </ul>
      </div>
    </div>

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

<div class="modal fade" id="certModal1" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-patch-check-fill me-2"></i>AWS Certified Solutions Architect</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <table class="info-table">
          <tr><td>Certification</td><td>AWS Certified Solutions Architect – Associate (SAA-C03)</td></tr>
          <tr><td>Issuing Body</td><td>Amazon Web Services (AWS)</td></tr>
          <tr><td>Issue Date</td><td>March 2023</td></tr>
          <tr><td>Expiry Date</td><td>March 2026</td></tr>
          <tr><td>Status</td><td><span class="text-success fw-semibold">Active</span></td></tr>
          <tr><td>Credential ID</td><td>AWS-SAA-2023-XXXXXX</td></tr>
        </table>
        <p class="mt-3 text-muted mb-0" style="font-size:.82rem;">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-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">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-patch-check-fill me-2"></i>Professional Scrum Master I</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <table class="info-table">
          <tr><td>Certification</td><td>Professional Scrum Master I (PSM I)</td></tr>
          <tr><td>Issuing Body</td><td>Scrum.org</td></tr>
          <tr><td>Issue Date</td><td>September 2022</td></tr>
          <tr><td>Validity</td><td>Lifetime (No expiry)</td></tr>
          <tr><td>Status</td><td><span class="text-success fw-semibold">Active</span></td></tr>
        </table>
        <p class="mt-3 text-muted mb-0" style="font-size:.82rem;">Demonstrates in-depth understanding of the Scrum framework, servant leadership, and facilitating sprint ceremonies for agile development teams.</p>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-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">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-patch-check-fill me-2"></i>Full-Stack Web Development Bootcamp</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <table class="info-table">
          <tr><td>Institution</td><td>BASIS Institute of Technology &amp; Management (BITM)</td></tr>
          <tr><td>Duration</td><td>3 months intensive</td></tr>
          <tr><td>Year</td><td>2015</td></tr>
        </table>
        <div class="mt-3" style="font-size:.82rem;">
          <strong>Topics Covered:</strong>
          <ul class="mt-1">
            <li>HTML5, CSS3, JavaScript ES6+</li>
            <li>PHP &amp; Laravel Framework</li>
            <li>MySQL Database Design</li>
            <li>RESTful API Development</li>
            <li>Git &amp; Version Control</li>
          </ul>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<div class="modal fade" id="certModal4" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-patch-check-fill me-2"></i>Machine Learning Specialization</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <table class="info-table">
          <tr><td>Course</td><td>Machine Learning Specialization</td></tr>
          <tr><td>Platform</td><td>Coursera</td></tr>
          <tr><td>Offered By</td><td>Stanford University (Andrew Ng)</td></tr>
          <tr><td>Year</td><td>2021</td></tr>
          <tr><td>Format</td><td>Online (Self-paced)</td></tr>
        </table>
        <div class="mt-3" style="font-size:.82rem;">
          <strong>Topics Covered:</strong>
          <ul class="mt-1">
            <li>Supervised &amp; Unsupervised Learning</li>
            <li>Neural Networks &amp; Deep Learning (Intro)</li>
            <li>Regression, Classification, Clustering</li>
            <li>Model Evaluation &amp; Best Practices</li>
          </ul>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

More Examples

Simple hero
Hero section with a linear gradient

Author:
Moana silva

1 year ago

3.2k

v.4.6
Clean hero section with image
tugas

Author:
Anonymous

11 months ago

1.4k

v.5.3
aboutContwnt

Author:
Sahin Miah

1 month ago

742

v.4.6
Hero Parallaxx

Author:
java stories story

9 months ago

2.8k

v.5.3
Hero section with an image

Author:
Ankit khedkar

1 year ago

14.3k

v.5.3
portfoilo page

Author:
Ad Apon7

1 month ago

312

v.5.3
Animated hero section

Author:
Anonymous

2 years ago

7.6k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

3.6k

v.4.6
Clean hero section with image

Author:
Prajwal Hallale

2 years ago

3.7k

v.5.3
slider

Author:
Ad Apon7

2 months ago

775

v.5.3
Skills Information section

Author:
Ad Apon7

1 month ago

484

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

9 months ago

1.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent