CodeShikhi
Back to Full Page Component
Resume/CV Page

Resume/CV Page

Resume/CV Page:  i. Breadcrumb Section.  ii. Education Timeline Section.  iii. Work Experience Timeline Section.  iv. Certifications List.  v. Skills Showcase Slider (using owl carousel)

#Resume/CV Page#Cv Page#Education Timeline Section#Certifications List#Work Experience Timeline Section

Live preview

Source code

html
<!-- i. Breadcrumb Section -->
<section class="py-3 bg-light border-bottom">
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="index.html" class="text-decoration-none">Home</a></li>
        <li class="breadcrumb-item active fw-bold text-primary" aria-current="page">Resume</li>
      </ol>
    </nav>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row g-5">
      <!-- ii. Education Timeline Section -->
      <div class="col-lg-6">
        <h3 class="fw-bold mb-4 d-flex align-items-center">
          <i class="bi bi-mortarboard-fill text-primary me-3"></i> Education
        </h3>
        <div class="timeline position-relative ps-4 border-start border-primary border-2">
          <div class="timeline-item mb-4 position-relative px-3">
            <div class="dot position-absolute start-0 translate-middle-x bg-primary border border-3 border-white rounded-circle shadow-sm" style="width: 16px; height: 16px; margin-left: -17px; margin-top: 8px;"></div>
            <h5 class="fw-bold text-dark">Master of Computer Science</h5>
            <p class="text-primary small fw-bold">2016 - 2018 | Stanford University</p>
            <p class="text-muted small">Specialized in Artificial Intelligence and Cloud Computing. Graduated with top-tier honors (GPA 3.9/4.0).</p>
          </div>
          <div class="timeline-item mb-4 position-relative px-3">
            <div class="dot position-absolute start-0 translate-middle-x bg-primary border border-3 border-white rounded-circle shadow-sm" style="width: 16px; height: 16px; margin-left: -17px; margin-top: 8px;"></div>
            <h5 class="fw-bold text-dark">Bachelor of Software Engineering</h5>
            <p class="text-primary small fw-bold">2012 - 2016 | MIT Institute</p>
            <p class="text-muted small">Fundamental study of algorithms, data structures, and web technologies across various platforms.</p>
          </div>
        </div>
      </div>

      <!-- iii. Work Experience Timeline Section -->
      <div class="col-lg-6">
        <h3 class="fw-bold mb-4 d-flex align-items-center">
          <i class="bi bi-briefcase-fill text-primary me-3"></i> Experience
        </h3>
        <div class="timeline position-relative ps-4 border-start border-primary border-2">
          <div class="timeline-item mb-4 position-relative px-3">
            <div class="dot position-absolute start-0 translate-middle-x bg-primary border border-3 border-white rounded-circle shadow-sm" style="width: 16px; height: 16px; margin-left: -17px; margin-top: 8px;"></div>
            <h5 class="fw-bold text-dark">Senior Full-Stack Developer</h5>
            <p class="text-primary small fw-bold">2020 - Present | Google Inc.</p>
            <p class="text-muted small">Leading a development team of 12 for the NextGen cloud infrastructure projects using React and Node.js.</p>
          </div>
          <div class="timeline-item mb-4 position-relative px-3">
            <div class="dot position-absolute start-0 translate-middle-x bg-primary border border-3 border-white rounded-circle shadow-sm" style="width: 16px; height: 16px; margin-left: -17px; margin-top: 8px;"></div>
            <h5 class="fw-bold text-dark">Frontend Developer</h5>
            <p class="text-primary small fw-bold">2018 - 2020 | WebSolutions Studio</p>
            <p class="text-muted small">Developed responsive user interfaces for over 50+ clients globally with a focus on UX efficiency.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- iv. Certifications List -->
<section class="py-5 bg-light">
  <div class="container">
    <h3 class="fw-bold mb-5 text-center">Badges & Certifications</h3>
    <div class="row g-4 justify-content-center">
      <div class="col-md-3">
        <div class="card h-100 border-0 shadow-sm text-center p-3 rounded-4">
          <i class="bi bi-patch-check fs-1 text-success mb-2"></i>
          <h6 class="fw-bold text-dark mb-1">AWS Certified Developer</h6>
          <p class="small text-muted mb-0">Amazon Web Services</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card h-100 border-0 shadow-sm text-center p-3 rounded-4">
          <i class="bi bi-patch-check fs-1 text-success mb-2"></i>
          <h6 class="fw-bold text-dark mb-1">Google UX Design Professional</h6>
          <p class="small text-muted mb-0">Coursera Specialization</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card h-100 border-0 shadow-sm text-center p-3 rounded-4">
          <i class="bi bi-patch-check fs-1 text-success mb-2"></i>
          <h6 class="fw-bold text-dark mb-1">Meta Front-End Developer</h6>
          <p class="small text-muted mb-0">Meta Professional Certificate</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- v. Skills Showcase Slider (Owl Carousel) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<section class="py-5">
  <div class="container">
    <h3 class="fw-bold mb-5 text-center">Technical Skills</h3>
    <div class="owl-carousel skills-slider">
      <div class="skill-item text-center">
        <div class="card border-0 shadow-sm p-4 rounded-circle mx-auto mb-3" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
          <i class="bi bi-code-slash text-primary fs-2"></i>
        </div>
        <h6 class="fw-bold">HTML/CSS</h6>
      </div>
      <div class="skill-item text-center">
        <div class="card border-0 shadow-sm p-4 rounded-circle mx-auto mb-3" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
          <i class="bi bi-braces text-warning fs-2"></i>
        </div>
        <h6 class="fw-bold">JavaScript</h6>
      </div>
      <div class="skill-item text-center">
        <div class="card border-0 shadow-sm p-4 rounded-circle mx-auto mb-3" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
          <i class="bi bi-bootstrap-fill text-info fs-2"></i>
        </div>
        <h6 class="fw-bold">Bootstrap</h6>
      </div>
      <div class="skill-item text-center">
        <div class="card border-0 shadow-sm p-4 rounded-circle mx-auto mb-3" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
          <i class="bi bi-database text-danger fs-2"></i>
        </div>
        <h6 class="fw-bold">MongoDB</h6>
      </div>
      <div class="skill-item text-center">
        <div class="card border-0 shadow-sm p-4 rounded-circle mx-auto mb-3" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
          <i class="bi bi-git text-dark fs-2"></i>
        </div>
        <h6 class="fw-bold">Git/GitHub</h6>
      </div>
      <div class="skill-item text-center">
        <div class="card border-0 shadow-sm p-4 rounded-circle mx-auto mb-3" style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
          <i class="bi bi-server text-success fs-2"></i>
        </div>
        <h6 class="fw-bold">Node.js</h6>
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
  $(document).ready(function() {
    $(".skills-slider").owlCarousel({
      loop: true,
      margin: 20,
      nav: false,
      dots: true,
      autoplay: true,
      autoplayTimeout: 3000,
      responsive: {
        0: {
          items: 2
        },
        600: {
          items: 3
        },
        1000: {
          items: 5
        }
      }
    });
  });

</script>

<style>
  .timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
  }

  .skill-item .card {
    transition: transform 0.3s ease;
  }

  .skill-item:hover .card {
    transform: rotate(5deg) scale(1.1);
    border: 1px solid #0d6efd !important;
  }

  .owl-dots {
    margin-top: 20px;
  }

</style>
How to use this resume/cv page

Add it to your project in three steps

  1. Copy the HTML from the Source code tab above and paste it inside your <div class="container"> wrapper.
  2. Make sure the Bootstrap 5 CDN CSS and JS are linked in your <head> and before </body>. Any CodeShikhi component assumes Bootstrap 5.3+ is already loaded.
  3. Swap the placeholder text, links, and images for your own content — the layout, spacing, and responsive behaviour stay intact.

The Resume/CV Page block is fully responsive and works on every screen from 320 px phones to 1440 px+ desktops without additional CSS.

Accessibility checklist

Ship it accessible by default

  • Use semantic HTML landmarks — <header>, <nav>, <main>, <footer> — so screen readers can navigate your page.
  • Give every image an alt attribute (empty alt="" if it's decorative).
  • Label icon-only buttons with aria-label and keep focus outlines visible.
  • Maintain a contrast ratio of at least 4.5:1 for body text against its background.
  • Test the resume/cv page with Tab / Shift+Tab and Enter — every interactive element should be reachable.
Step-by-step customisation

Make it match your brand

  1. Change the colour palette by overriding Bootstrap CSS variables: --bs-primary, --bs-body-bg.
  2. Adjust spacing with utility classes such as py-5, gap-4, and mt-lg-5 — no custom CSS required.
  3. Swap the typography by loading a Google Font in your <head> and setting --bs-body-font-family.
  4. Replace stock images with brand assets. Keep dimensions similar to avoid layout shift.
  5. Preview at multiple breakpoints (mobile, tablet, desktop) and tweak column spans if content wraps awkwardly.

Need the full theory? Read our Bootstrap 5 Technical Introduction Guide for grid, breakpoints, and Sass customisation in depth.

About the Resume/CV Page resume/cv page

This resume/cv page is part of the free CodeShikhi (কোড শিখি) Bootstrap 5 library — a growing collection of copy-paste website building blocks curated for learners and freelance developers. Every block is written in clean, semantic HTML with Bootstrap utility classes, keeps custom CSS to the minimum needed, and works without any build step. Use it as a starting point and adapt the markup, colours, and content to fit your project's brand and audience.

If you spot a bug, want a new variation, or would like to contribute an improvement, reach us via the contact page — we ship updates weekly based on community feedback.

Detailed Technical Breakdown

Detailed Technical Breakdown: Resume/CV Page

Browser compatibility & standards

The Resume/CV Page resume/cv page is authored against Bootstrap 5.3, which drops legacy Internet Explorer support and targets modern evergreen engines — Chrome, Edge, Firefox, Safari, and all Chromium-based mobile browsers. Because the markup relies exclusively on the standard CSS features that ship with Bootstrap (Flexbox, CSS Grid, CSS custom properties, and the responsive breakpoint system), you can safely deploy this resume/cv page to any browser released in the last five years without polyfills. If you need to support very old WebKit or Samsung Internet builds, load the standard Bootstrap 5 CSS from the official jsDelivr CDN — the bundled autoprefixer output already covers those vendor prefixes.

Performance impact

Performance-wise this block is intentionally light. The HTML payload for a typical Bootstrap resume/cv page is under 4 KB gzipped, and it shares the same Bootstrap CSS/JS bundle you are already loading — meaning the marginal cost of adding it to a page is effectively zero KB on repeat visits. There is no JavaScript framework runtime, no hydration cost, and no client-side data fetching. The only images referenced are placeholders you will replace with your own assets; when you do, serve them as WebP or AVIF, add explicit width and height attributes to prevent layout shift (CLS), and lazy-load anything below the fold with loading="lazy". These small changes typically move Lighthouse Performance scores from the mid-80s into the 95+ range on both mobile and desktop.

Utility classes used

The resume/cv page leans on Bootstrap's utility-first classes to stay declarative: spacing utilities (p-*, m-*, gap-*), the flex helpers (d-flex, align-items-*, justify-content-*), the grid system (container, row, col-lg-*), typography helpers (display-*, lead, text-*), and colour utilities that resolve to Bootstrap CSS variables such as --bs-primary, --bs-body-bg, and --bs-border-color. Because everything is expressed as utilities you can re-theme the entire resume/cv page by overriding a handful of CSS variables at the :root level — no Sass recompile required.

Exact customisation steps

  1. Copy the source HTML from the tab above and paste it inside your <body>. The outer <div class="container"> wrapper is already included so the resume/cv page sits on the Bootstrap grid.
  2. Replace the placeholder headings and paragraphs with your own copy. Keep heading levels in order (h1 → h2 → h3) so screen readers and search engines can parse the document outline.
  3. Swap any <img> tags for your brand assets. Match the original aspect ratio to avoid layout shift, and always fill in a meaningful alt attribute.
  4. Retune the palette by overriding CSS variables::root { --bs-primary: #4f46e5; --bs-body-bg: #ffffff; }. All utility colour classes update automatically.
  5. Test at each Bootstrap breakpoint — sm (576 px), md (768 px),lg (992 px), xl (1200 px), xxl (1400 px) — using your browser's device toolbar, and tweak column spans if long content wraps.
  6. Ship it with the standard Bootstrap 5 CDN in the <head> and the JS bundle before the closing </body>. No build step required.
Technical & Performance Integration Guide

Technical & Performance Integration Guide — Resume/CV Page (component)

When and why to use this component

This block is written as a self-contained Bootstrap 5 section: a single outer container, a predictable grid inside it, and no dependencies beyond the standard Bootstrap CSS and JS bundle. That makes it safe to paste into an existing page without worrying about class-name collisions or cascade conflicts.

Accessibility & ARIA attributes

Keep the heading hierarchy in order, label any icon-only control with aria-label, and give every image either a descriptive alt attribute or an empty alt="" when it is decorative. Interactive elements must be real <button> or <a> tags so they are reachable with Tab and activatable with Enter. If the block includes a collapsible or dismissible element, preserve Bootstrap's data-bs-* attributes — they generate the aria-expanded and aria-controls wiring for you.

Performance notes for this pattern

The markup is under a few kilobytes gzipped and reuses the Bootstrap bundle already on the page, so the marginal cost of adding it is close to zero. Replace placeholder images with optimised WebP or AVIF files, declare width and height to keep Cumulative Layout Shift at zero, and add loading="lazy" to anything that renders below the fold.

Three customisation tricks

  • Override --bs-primary and --bs-body-font-family at :root to rebrand the block without touching its markup.
  • Adjust rhythm with spacing utilities (py-5, gap-4, mt-lg-5) instead of writing custom CSS.
  • Test at every Bootstrap breakpoint and change only the column spans when long copy wraps awkwardly.

Mistakes to avoid

  • Removing the .container wrapper, which makes the content run to the viewport edges.
  • Pasting the block twice on one page when it is meant to appear once.

More designs in this section

Agency Full Home Page
E-commerce Login Page
E-commerce login Page
About Agency Full Page
Technical Training Center (TTC) Home Page