From 0c9b3b9d81d5649b2aecdb9a7bcc2753a9975e81 Mon Sep 17 00:00:00 2001
From: Andreas Fehlner <fehlner@arcor.de>
Date: Sun, 8 Mar 2026 17:42:26 +0100
Subject: [PATCH] update

Signed-off-by: Andreas Fehlner <fehlner@arcor.de>
---
 404.html                 |   5 +-
 about.html               |   5 +-
 codeofconduct.html       |   5 +-
 get-started.html         |   5 +-
 index.html               |  28 ++-
 js/custom.js             | 380 +++++++++++++++------------------------
 mailinglists.html        |   5 +-
 meetups/june2022.html    |   5 +-
 news.html                |  21 +--
 partials/footer.html     |  14 +-
 partials/navigation.html |  18 +-
 supported-tools.html     |   5 +-
 12 files changed, 199 insertions(+), 297 deletions(-)

diff --git a/404.html b/404.html
index 8b9f93e9..acd2cf6d 100644
--- a/404.html
+++ b/404.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="./images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
@@ -69,8 +69,7 @@ <h1 class="text-uppercase">Oops!</h1>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
 </body>
 
diff --git a/about.html b/about.html
index fded6f27..c18833fe 100644
--- a/about.html
+++ b/about.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="./images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
@@ -127,8 +127,7 @@ <h2>Technical Design</h2>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
 </body>
 
diff --git a/codeofconduct.html b/codeofconduct.html
index 7c1527a5..5350e94a 100644
--- a/codeofconduct.html
+++ b/codeofconduct.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="./images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
@@ -110,8 +110,7 @@ <h2>Reporting Code of Conduct Issues</h2>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
 </body>
 
diff --git a/get-started.html b/get-started.html
index 143a4396..6bf177e8 100644
--- a/get-started.html
+++ b/get-started.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="./images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
@@ -190,8 +190,7 @@ <h2 class="subheading-2 blue-text">Export to Another Framework</h2>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
 </body>
 
diff --git a/index.html b/index.html
index 1945d885..b070daa9 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="./images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
@@ -90,7 +90,7 @@ <h2 class="blue-text subheading-4">Hardware Access</h2>
                     <div class="container-fluid">
                         <h2 class="subheading-1 text-center mb-2 mb-lg-4 pb-2">COMMUNITY</h2>
                         <div class="row">
-                            <div class="col-12 col-lg-3 pr-lg-4">
+                            <div class="col-12 col-lg-3 pe-lg-4">
                                 <p class="community-intro mb-0"><span class="blue-text bold-text mb-0">ONNX is a
                                         community
                                         project.</span> </p>
@@ -167,14 +167,14 @@ <h2 class="subheading-1 text-center mb-4 pb-2">NEWS AND ANNOUNCEMENTS</h2>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
     <script>
-        $(document).ready(function() {
-            $.get("js/news.json", function(data, status) {
+        fetch("js/news.json")
+            .then(r => r.json())
+            .then(data => {
                 var newsData = '';
-                $.each(data["newsContent"], function(index, value) {
+                data["newsContent"].forEach(function(value, index) {
                     if (index < 3) {
                         newsData += '<div class="col-12 col-md-4 mb-4 mb-md-0">';
                         newsData += '<div class="col-news py-4 px-4 py-lg-5 px-lg-5">';
@@ -192,18 +192,16 @@ <h2 class="subheading-1 text-center mb-4 pb-2">NEWS AND ANNOUNCEMENTS</h2>
                         newsData += '</div>';
                     }
                 });
-                $('#homeNewsWrapper').append(newsData);
+                document.getElementById('homeNewsWrapper').insertAdjacentHTML('beforeend', newsData);
             });
 
-        });
-
-        $(function() {
-            $(".news-text").each(function() {
-                var len = $(this).text().length;
-                var str = $(this).text().substr(0, 80);
+        document.addEventListener('DOMContentLoaded', function() {
+            document.querySelectorAll('.news-text').forEach(function(el) {
+                var len = el.textContent.length;
+                var str = el.textContent.substr(0, 80);
                 var lastIndexOf = str.lastIndexOf(" ");
                 if (len > 80) {
-                    $(this).text(str.substr(0, lastIndexOf) + '…');
+                    el.textContent = str.substr(0, lastIndexOf) + '…';
                 }
             });
         });
diff --git a/js/custom.js b/js/custom.js
index 74d268ff..566ec551 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -1,284 +1,194 @@
-$.get("js/news.json", function(data, status){
-    var newsSlide = '';
-    newsSlide+='<p class="mb-0 my-2"><span class="bold-text">NEWS: </span>'+data["newsContent"][0].newsTitle;
-    newsSlide+='<a aria-label="Read more about news" class="text-white ml-1 bold-text link p-2" href="./news.html#'+data["newsContent"][0].newsId+'"><span class="link-content">Read more</span><span class="link-arrow fa fa-angle-right"></span></a></p>';    
-    $('#newsSlider').html(newsSlide);
-});
-$(window).scroll(function () {
-    $('header').toggleClass('scrolled', $(this).scrollTop() > 50);
-    $('.top-toast').toggleClass('scrolled', $(this).scrollTop() > 50);
+fetch("js/news.json")
+    .then(r => r.json())
+    .then(data => {
+        const item = data["newsContent"][0];
+        const slider = document.getElementById('newsSlider');
+        if (slider) {
+            slider.innerHTML =
+                '<p class="mb-0 my-2"><span class="bold-text">NEWS: </span>' + item.newsTitle +
+                '<a aria-label="Read more about news" class="text-white ms-1 bold-text link p-2" href="./news.html#' + item.newsId +
+                '"><span class="link-content">Read more</span><span class="link-arrow fa fa-angle-right"></span></a></p>';
+        }
+    });
+
+window.addEventListener('scroll', function () {
+    const scrolled = window.scrollY > 50;
+    document.querySelector('header').classList.toggle('scrolled', scrolled);
+    const toast = document.querySelector('.top-toast');
+    if (toast) toast.classList.toggle('scrolled', scrolled);
     backTop();
 });
 
-$(document).ready(function () {
+document.addEventListener('DOMContentLoaded', function () {
     equalHeight();
     backTop();
     shadowBoxHeight();
     newsTopScroll();
 
-    setTimeout(function(){
+    setTimeout(function () {
         homeEqualHeight();
         topNewsInnerHeight();
         topNewsHeight();
-    },700);
+    }, 700);
+
+    const navItem = window.location.pathname.split('/').pop().split('.')[0];
+    setTimeout(function () {
+        document.querySelectorAll('.navbar-custom .active').forEach(el => el.classList.remove('active'));
+        const activeEl = document.querySelector('.navbar-custom .' + navItem);
+        if (activeEl) activeEl.classList.add('active');
+    }, 300);
+
+    const toggler = document.querySelector('button.navbar-toggler');
+    if (toggler) {
+        toggler.addEventListener('click', function () {
+            document.querySelector('header').classList.toggle('header-collapse');
+        });
+    }
 
-    let navItem = window.location.pathname.split('/').pop().split('.')[0];
-    setTimeout(function(){
-        $('.navbar-custom').find('.active').removeClass('active');  
-        $('.navbar-custom').find('.'+navItem).addClass('active');
-    },300);
+    document.querySelector('header').classList.toggle('scrolled', window.scrollY > 50);
 
-    $(document).on('click','button.navbar-toggler',function (event) {
-        $('header').toggleClass('header-collapse');
-    });
-    $('header').toggleClass('scrolled', $(this).scrollTop() > 50);
-    
-    // scroll body to 0px on click
-    $('#back-to-top').click(function () {
-        $('body,html').animate({
-            scrollTop: 0
-        }, 400);
-        $('#ONNXLogo').focus();
-        return false;
-    });
+    const backToTopBtn = document.getElementById('back-to-top');
+    if (backToTopBtn) {
+        backToTopBtn.addEventListener('click', function (e) {
+            e.preventDefault();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+            document.getElementById('ONNXLogo').focus();
+        });
+    }
 
-    $(document).click(function (event) {
-        var clickover = $(event.target);
-        var _opened = $(".navbar-collapse").hasClass("show");
-        if (_opened === true && !clickover.hasClass("navbar-toggler")) {
-            $(".navbar-toggler").click();
+    document.addEventListener('click', function (event) {
+        const navbarCollapse = document.querySelector('.navbar-collapse');
+        const isOpen = navbarCollapse && navbarCollapse.classList.contains('show');
+        if (isOpen && !event.target.closest('.navbar-toggler')) {
+            document.querySelector('.navbar-toggler').click();
         }
     });
 
-    $('#listbox-5').focus(function(){
-        var top =  $('.get-started-section').offset().top
-        $(window).scrollTop(top);
-    });
-      
-      $(document).keyup(function(e) {
-        if($('#navbarNav').hasClass('show')){
-            if (e.keyCode === 27) $('button.navbar-toggler').click();   // esc
-        }
-      });
+    const listbox = document.getElementById('listbox-5');
+    if (listbox) {
+        listbox.addEventListener('focus', function () {
+            const section = document.querySelector('.get-started-section');
+            if (section) window.scrollTo({ top: section.offsetTop, behavior: 'smooth' });
+        });
+    }
 
-      $('.btn-getStarted').click(function(){
-        var tableTop= $('#getStartedTable').offset().top;
-        $('body,html').animate({
-            scrollTop: tableTop-100
-        }, 600);
-      });
+    document.addEventListener('keyup', function (e) {
+        const navbarNav = document.getElementById('navbarNav');
+        if (navbarNav && navbarNav.classList.contains('show') && e.key === 'Escape') {
+            document.querySelector('button.navbar-toggler').click();
+        }
+    });
 
-      $('.top-toast p > a').click(function(){
-        var newTop= $(this).attr('href').splite('#');
-        $('body,html').animate({
-            scrollTop: newTop-100
-        }, 600);
-      });
+    document.querySelectorAll('.btn-getStarted').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            const table = document.getElementById('getStartedTable');
+            if (table) window.scrollTo({ top: table.offsetTop - 100, behavior: 'smooth' });
+        });
+    });
 
-      $(document).on("click",".top-toast p > a",function() {
-         var firstEle= $(this).attr('href').split('#');
-         var newTop = $('#'+firstEle[1]).offset();
-        $('body,html').animate({
-            scrollTop: newTop.top-120
-        }, 400);
+    document.addEventListener('click', function (e) {
+        const link = e.target.closest('.top-toast p > a');
+        if (link) {
+            e.preventDefault();
+            const id = link.getAttribute('href').split('#')[1];
+            const target = document.getElementById(id);
+            if (target) window.scrollTo({ top: target.offsetTop - 120, behavior: 'smooth' });
+        }
     });
 
-      $(document).on('focus',function(e) {
-        var docTop = $(this).offset().top;
-        $(window).scrollTop(docTop);
-      });
-    
-    if (window.innerWidth < 768){
-        setTimeout(function(){
-            var newsHeight = $('#newsSlider').height();
-            $('.content-wrapper').css('padding-top',newsHeight+16);
-        },100);
+    const lastNavLink = document.querySelector('ul.navbar-nav li:last-child a');
+    if (lastNavLink) {
+        lastNavLink.addEventListener('focusout', function () {
+            if (window.innerWidth < 992) {
+                document.querySelector('button.navbar-toggler').click();
+            }
+        });
     }
- 
-    $("ul.navbar-nav li:last-child a").focusout(function(){
-        if(window.innerWidth < 992){
-            $('button.navbar-toggler').click();            
-        } 
-      });
-
-}); 
 
+    if (window.innerWidth < 768) {
+        setTimeout(function () {
+            const slider = document.getElementById('newsSlider');
+            const wrapper = document.querySelector('.content-wrapper');
+            if (slider && wrapper) wrapper.style.paddingTop = (slider.offsetHeight + 16) + 'px';
+        }, 100);
+    }
+});
 
-$(window).resize(function(){
+window.addEventListener('resize', function () {
     equalHeight();
     shadowBoxHeight();
     homeEqualHeight();
     topNewsHeight();
-    topNewsInnerHeight()
+    topNewsInnerHeight();
 });
 
-function backTop(){
-    if ($(this).scrollTop() > 50) {
-        $('#back-to-top').fadeIn();
-    } else {
-        $('#back-to-top').fadeOut();
-    }
+function backTop() {
+    const btn = document.getElementById('back-to-top');
+    if (!btn) return;
+    btn.style.display = window.scrollY > 50 ? 'block' : 'none';
 }
 
 function newsTopScroll() {
-    if(location.hash){
-        setTimeout(function(){
-            var windowsHash = location.hash;     
-            if (windowsHash.length) {
-                var tableTop= $(windowsHash).offset().top;
-                $(windowsHash).attr('tabindex','-1').focus();
-            }
-            $('body,html').animate({
-                scrollTop: tableTop-150
-            }, 800);
-        },500);
-    }
+    if (!location.hash) return;
+    setTimeout(function () {
+        const target = document.querySelector(location.hash);
+        if (target) {
+            target.setAttribute('tabindex', '-1');
+            target.focus();
+            window.scrollTo({ top: target.offsetTop - 150, behavior: 'smooth' });
+        }
+    }, 500);
 }
 
-function equalHeight() {
+function setMaxHeight(selector) {
+    const els = document.querySelectorAll(selector);
+    els.forEach(el => el.style.height = 'auto');
     if (window.innerWidth > 767) {
-        var maxHeight = 0;
-        $(".equalHeight .bg-lightblue").height('auto');
-        $(".equalHeight .bg-lightblue").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".equalHeight .bg-lightblue").height(maxHeight);
-
-        var maxHeight = 0;
-        $(".content-equalHeight .bg-lightblue p").height('auto');
-        $(".content-equalHeight .bg-lightblue p").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".content-equalHeight .bg-lightblue p").height(maxHeight);
-
-        var maxHeight = 0;
-        $(".content-equalHeight .bg-lightblue h3").height('auto');
-        $(".content-equalHeight .bg-lightblue h3").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".content-equalHeight .bg-lightblue h3").height(maxHeight);
-        
-        var maxHeight = 0;
-        $(".equalHeight-1 .bg-lightblue").height('auto');
-        $(".equalHeight-1 .bg-lightblue").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".equalHeight-1 .bg-lightblue").height(maxHeight);
-
-        var maxHeight = 0;
-        $(".equalHeight-1 .onnx-model-content p").height('auto');
-        $(".equalHeight-1 .onnx-model-content p").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".equalHeight-1 .onnx-model-content p").height(maxHeight);
-
-        
-        var maxHeight = 0;
-        $(".equalHeight .build-model").height('auto');
-        $(".equalHeight .build-model").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".equalHeight .build-model").height(maxHeight);
-
-        var maxHeight = 0;
-        $(".equalHeight-1 .additional-tools").height('auto');
-        $(".equalHeight-1 .additional-tools").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".equalHeight-1 .additional-tools").height(maxHeight);
-
-        var maxHeight = 0;
-        $(".equalHeight-1 .additional-tools p").height('auto');
-        $(".equalHeight-1 .additional-tools p").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".equalHeight-1 .additional-tools p").height(maxHeight);
-
-        var maxHeight = 0;
-        $(".equalHeight .build-model p").height('auto');
-        $(".equalHeight .build-model p").each(function () {
-            if ($(this).height() > maxHeight) {
-                maxHeight = $(this).height();
-            }
-        });
-        $(".equalHeight .build-model p").height(maxHeight);
-      
-    } else {
-        $(".equalHeight .bg-lightblue").height('auto');
-        $(".equalHeight-1 .bg-lightblue").height('auto');
-        $(".equalHeight-1 .onnx-model-content p").height('auto');
-        $(".equalHeight .build-model").height('auto');
-        $(".equalHeight-1 .additional-tools").height('auto');
-        $(".equalHeight-1 .additional-tools p").height('auto');
-        $(".equalHeight .build-model p").height('auto');
-        $(".content-equalHeight .bg-lightblue p").height('auto');
-        $(".content-equalHeight .bg-lightblue h3").height('auto');
+        let max = 0;
+        els.forEach(el => { if (el.offsetHeight > max) max = el.offsetHeight; });
+        els.forEach(el => el.style.height = max + 'px');
     }
 }
 
-function homeEqualHeight(){
-    if (window.innerWidth > 767) {
-        var maxHeight1 = 0;
-        $(".equalHeight-2 .col-news h3").height('auto');
-        $(".equalHeight-2 .col-news h3").each(function () {
-            if ($(this).height() > maxHeight1) {
-                maxHeight1 = $(this).height();
-            }
-        });
-        $(".equalHeight-2 .col-news h3").height(maxHeight1);
+function equalHeight() {
+    setMaxHeight('.equalHeight .bg-lightblue');
+    setMaxHeight('.content-equalHeight .bg-lightblue p');
+    setMaxHeight('.content-equalHeight .bg-lightblue h3');
+    setMaxHeight('.equalHeight-1 .bg-lightblue');
+    setMaxHeight('.equalHeight-1 .onnx-model-content p');
+    setMaxHeight('.equalHeight .build-model');
+    setMaxHeight('.equalHeight-1 .additional-tools');
+    setMaxHeight('.equalHeight-1 .additional-tools p');
+    setMaxHeight('.equalHeight .build-model p');
+}
 
-        var maxHeight2 = 0;
-        $(".equalHeight-2 .col-news p").height('auto');
-        $(".equalHeight-2 .col-news p").each(function () {
-            if ($(this).height() > maxHeight2) {
-                maxHeight2 = $(this).height();
-            }
-        });
-        $(".equalHeight-2 .col-news p").height(maxHeight2);  
-      
-    }else {
-        $(".equalHeight-2 .col-news h3").height('auto');
-        $(".equalHeight-2 .col-news p").height('auto');
-    }
-    
+function homeEqualHeight() {
+    setMaxHeight('.equalHeight-2 .col-news h3');
+    setMaxHeight('.equalHeight-2 .col-news p');
 }
 
-function shadowBoxHeight(){
-    if (window.innerWidth < 767){
-        let boxHeight=$('.shadow-box .shadow').height();
-        $('.page-content .key-benefits-wrapper').css('padding-top',boxHeight-65);
-    }else{
-        $('.page-content .key-benefits-wrapper').css('padding-top','initial');
+function shadowBoxHeight() {
+    const wrapper = document.querySelector('.page-content .key-benefits-wrapper');
+    if (!wrapper) return;
+    if (window.innerWidth < 767) {
+        const box = document.querySelector('.shadow-box .shadow');
+        if (box) wrapper.style.paddingTop = (box.offsetHeight - 65) + 'px';
+    } else {
+        wrapper.style.paddingTop = 'initial';
     }
 }
 
-function topNewsHeight(){
-    var newsHeight = $('#newsSlider').height();
-    $('.content-wrapper').css('padding-top',newsHeight+16);
+function topNewsHeight() {
+    const slider = document.getElementById('newsSlider');
+    const wrapper = document.querySelector('.content-wrapper');
+    if (slider && wrapper) wrapper.style.paddingTop = (slider.offsetHeight + 16) + 'px';
 }
 
-function topNewsInnerHeight(){
-    var newsHeight = $('#newsSlider').outerHeight();
-    // var navheight = $('.innerpage-main-wrapper header .bg-overlay').height();
-    if(window.innerWidth < 991){
-        $('.innerpage-main-wrapper .main-wrapper .top-banner-bg').css('padding-top',newsHeight+128);
-    }else{
-        $('.innerpage-main-wrapper .main-wrapper .top-banner-bg').css('padding-top',newsHeight+172);
+function topNewsInnerHeight() {
+    const slider = document.getElementById('newsSlider');
+    const banner = document.querySelector('.innerpage-main-wrapper .main-wrapper .top-banner-bg');
+    if (slider && banner) {
+        const padding = window.innerWidth < 991 ? slider.offsetHeight + 128 : slider.offsetHeight + 172;
+        banner.style.paddingTop = padding + 'px';
     }
-}
\ No newline at end of file
+}
diff --git a/mailinglists.html b/mailinglists.html
index 0e9d89a9..d99256b9 100644
--- a/mailinglists.html
+++ b/mailinglists.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="./images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
 </head>
@@ -69,8 +69,7 @@ <h1 class="text-uppercase">ONNX Mailing Lists</h1>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/meetups/june2022.html b/meetups/june2022.html
index 50a58efc..6afb61cc 100644
--- a/meetups/june2022.html
+++ b/meetups/june2022.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="../images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="../css/custom.css">
     <link rel="stylesheet" href="../css/responsive.css">
@@ -599,8 +599,7 @@ <h2 class="text-center">Schedule</h2>
     </div>
     <script src="https://www.w3schools.com/lib/w3.js"></script>
     <script>w3.includeHTML();</script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../js/custom.js"></script>
 
 </body>
diff --git a/news.html b/news.html
index cee6115d..eb1908e3 100644
--- a/news.html
+++ b/news.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
@@ -62,14 +62,14 @@ <h1 id="latestNews" class="text-uppercase">News</h1>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
     <script>
-        $(document).ready(function() {
-            $.get("js/news.json", function(data, status) {
+        fetch("js/news.json")
+            .then(r => r.json())
+            .then(data => {
                 var newsData = '';
-                $.each(data["newsContent"], function(index, value) {
+                data["newsContent"].forEach(function(value, index) {
                     if (index != 0) {
                         newsData += '<hr class="border-top my-0 mx-15 w-100"/>'
                     }
@@ -83,12 +83,13 @@ <h1 id="latestNews" class="text-uppercase">News</h1>
                     newsData += '<p class="text-break">' + value.newsDescription + '</p>';
                     newsData += '<a target="_blank" aria-label="' + value.newsLinkText + ' - ' + value.newsShortTitle + '" class="link subheading-6" href="' + value.newsLinkURL + '"><span class="link-content">' + value.newsLinkText + '</span><span class="link-arrow fa fa-angle-right"></span></a>';
                     newsData += '</div>';
-
                 });
-                $('#newsWrapper').append(newsData).fadeIn(200);
+                const wrapper = document.getElementById('newsWrapper');
+                wrapper.insertAdjacentHTML('beforeend', newsData);
+                wrapper.style.opacity = '0';
+                wrapper.style.transition = 'opacity 0.2s';
+                requestAnimationFrame(() => wrapper.style.opacity = '1');
             });
-
-        });
     </script>
 </body>
 
diff --git a/partials/footer.html b/partials/footer.html
index 717b2866..e0f2f323 100644
--- a/partials/footer.html
+++ b/partials/footer.html
@@ -7,29 +7,29 @@ <h2 class="text-center pb-4 mb-2">Get Involved</h2>
                 </div>
             </div>
             <div class="row pb-md-4 pb-0">
-                <div class="col col-sm-5-1 col-md-5-1 pr-xl-4 mb-md-5 mb-lg-0 mb-4">
+                <div class="col col-sm-5-1 col-md-5-1 pe-xl-4 mb-md-5 mb-lg-0 mb-4">
                     <h3 class="footer-heading">Use ONNX</h3>
                     <p class="mb-2">Transform or accelerate your model today.</p>
                     <a href="/get-started.html">
                         <span class="link-content">Get Started</span><span class="link-arrow fa fa-angle-right"></span></a>
                 </div>
-                <div class="col col-sm-5-1 col-md-5-1 pr-xl-4 mb-md-5 mb-lg-0 mb-4">
+                <div class="col col-sm-5-1 col-md-5-1 pe-xl-4 mb-md-5 mb-lg-0 mb-4">
                     <h3 class="footer-heading">Contribute</h3>
                     <p class="mb-2">ONNX is a community project. We encourage you to join the effort and contribute feedback, ideas and code.</p>
                     <a class="" target="_blank" href="https://github.com/onnx">
                         <span class="link-content">Join us on GitHub</span><span class="link-arrow fa fa-angle-right"></span></a>
                 </div>
-                <div class="col col-5-1 pr-xl-4 mb-md-0 mb-4">
+                <div class="col col-5-1 pe-xl-4 mb-md-0 mb-4">
                     <h3 class="footer-heading">Follow Us</h3>
                     <p class="mb-2">Stay up to date with the latest ONNX news.</p>
-                    <a href="https://twitter.com/onnxai" target="_blank" title="Twitter" class="twitter-icon mr-2" aria-label="Social Icon Twitter">
+                    <a href="https://twitter.com/onnxai" target="_blank" title="Twitter" class="twitter-icon me-2" aria-label="Social Icon Twitter">
                         <span class="fa fa-twitter" aria-hidden="true"></span></a>
                     <a href="https://www.facebook.com/onnxai/" target="_blank" title="Facebook" class="facebook-icon" aria-label="Social Icon Facebook">
                         <span class="fa fa-facebook" aria-hidden="true"></span></a>
                     <a href="https://www.youtube.com/onnxai" target="_blank" title="Youtube" class="youtube-icon" aria-label="Social Icon Youtube">
                         <span class="fa fa-youtube" aria-hidden="true"></span></a>
                 </div>
-                <div class="col col-5-1 pr-xl-4 mb-md-0 mb-4">
+                <div class="col col-5-1 pe-xl-4 mb-md-0 mb-4">
                     <h3 class="footer-heading">ONNX</h3>
                     <ul class="list-unstyled text-small mb-0">
                         <li class="mb-2">
@@ -72,8 +72,8 @@ <h3 class="footer-heading">Resources</h3>
                 <div class="col-md-3 col-lg-3 col-xl-2">
                     <a href="/index.html"><img class="mb-0 onnx-footer-logo" src="/images/ONNX-Logo.svg" alt="ONNX Home"></a>
                 </div>
-                <div class="col-md-9 col-lg-9 col-xl-10 pl-md-5 pl-lg-3">
-                    <p class="text-copyright py-3 ml-xl-5 ml-0 mb-0">
+                <div class="col-md-9 col-lg-9 col-xl-10 ps-md-5 ps-lg-3">
+                    <p class="text-copyright py-3 ms-xl-5 ms-0 mb-0">
                         Copyright &copy; 2019 The Linux Foundation&reg;. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a target="_blank" class="link" href="https://www.linuxfoundation.org/trademark-usage/">Trademark Usage</a> page. Linux is a registered trademark of Linus Torvalds. <a target="_blank" class="link" href="https://www.linuxfoundation.org/privacy/">Privacy Policy</a> and <a target="_blank" class="link" href="https://www.linuxfoundation.org/terms/">Terms of Use</a>.
                     </p>
                 </div>
diff --git a/partials/navigation.html b/partials/navigation.html
index aa67537b..af53d239 100644
--- a/partials/navigation.html
+++ b/partials/navigation.html
@@ -5,15 +5,15 @@
             <a id="ONNXLogo" class="navbar-brand" href="/index.html">
                 <img src="/images/ONNX-Logo.svg" class="d-inline-block align-top onnx-logo" alt="ONNX Home" />
             </a>
-            <button class="navbar-toggler p-0" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse border-md-top mt-md-0 mt-2" id="navbarNav">
-                <div class="mr-auto"></div>
-                <div class="my-md-2 mb-0 mt-2 my-lg-0 pl-3 pl-lg-0">
-                    <ul class="navbar-nav navbar-nav mr-auto text-uppercase" id="navigation">
+                <div class="me-auto"></div>
+                <div class="my-md-2 mb-0 mt-2 my-lg-0 ps-3 ps-lg-0">
+                    <ul class="navbar-nav navbar-nav me-auto text-uppercase" id="navigation">
                         <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle pr-3" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Docs</a>
+                            <a class="nav-link dropdown-toggle pe-3" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Docs</a>
                             <div class="dropdown-menu">
                                 <a class="dropdown-item" href="https://onnx.ai/onnx/intro/">Introduction and Concepts</a>
                                 <a class="dropdown-item" href="https://onnx.ai/onnx/operators/">Operators</a>
@@ -26,14 +26,14 @@
                             </div>
                         </li>
                         <li class="nav-item news">
-                            <a class="nav-link pr-3" href="/news.html">NEWS</a>
+                            <a class="nav-link pe-3" href="/news.html">NEWS</a>
                         </li>
                         <li class="nav-item about">
-                            <a class="nav-link pr-3" href="/about.html">ABOUT</a>
+                            <a class="nav-link pe-3" href="/about.html">ABOUT</a>
                         </li>
                         <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle pr-3" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Community</a>
-                            <div class="dropdown-menu dropdown-menu-right">
+                            <a class="nav-link dropdown-toggle pe-3" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Community</a>
+                            <div class="dropdown-menu dropdown-menu-end">
                                 <a class="dropdown-item" href="/slack.html" target="_blank">Slack</a>
                                 <a class="dropdown-item" href="/mailinglists.html">Mailing Lists</a>
                                 <a class="dropdown-item" href="https://x.com/onnxai">Twitter/X</a>
diff --git a/supported-tools.html b/supported-tools.html
index a0005ac9..5f9f40eb 100644
--- a/supported-tools.html
+++ b/supported-tools.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="./images/onnx-favicon.png" type="image/gif" sizes="16x16">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/custom.css">
     <link rel="stylesheet" href="css/responsive.css">
@@ -366,8 +366,7 @@ <h3 class="subheading-4 blue-text">Visualize</h3>
     <script>
         w3.includeHTML();
     </script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./js/custom.js"></script>
 </body>