Resume/CV Page

<!-- 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>