HTML/CSS - in process Online Editor and JavaScript Compiler

html

<!DOCTYPE html> 
<html lang="en"> 
<head> <!-- Meta Data --> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content="This is the knowledge timeline of Barotov Hojiakbar's in the future. I hope I will succeed in it."> 
<meta name="keywords" content="Knowledge Timeline, Barotov Hojiakbar"> 
<meta name="author" content="Barotov Hojiakbar"> 
<!-- Links --> 
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="./css/style.css"> 
<!-- Title --> 
<title>Knowledge Timeline</title> 
</head> 
<body> 
<header id="main-header"> 
<div class="container"> 
<h1><i class="fas fa-brain"></i> Knowledge Resume</h1> 
<h3><i class="fas fa-user"></i> John Doe</h3> 
</div> 
</header> 
<main> 
<section id="timeline"> 
<ul> 
<li> 

css

/* Variables */ 
:root { --primary-color:  #425b84; --secondary-color:  #5b7bb4; --max-width: 1100px; --animation-speed: 0.7s; } 
/* Selection */ 
*::selection { background: var(--primary-color); } 
/* Resetting */ 
* { margin: 0; 
    padding: 0; 
    box-sizing: border-box; } 
/* Core Styling */ 
body { font-family: "Open Sans", sans-serif; 
    line-height: 1.4; 
    background: var(--primary-color); 
    color:  #fff; 
    overflow-x: hidden !important; 
    padding-bottom: 50px; } 
ul { list-style: none; } 
h1, h3 { font-weight: 100;
         line-height: 1.2;
         margin-bottom: 1rem; } 
         
/* Main Header */ 
#main-header { background: var(--secondary-color);
               padding: 4rem 0; } 

const items = document.querySelectorAll('#timeline li');
 
const isInViewport = el => { 
    const rect = el.getBoundingClientRect();
     return ( 
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= 
     (window.innerHeight || document.documentElement.clientHeight) && 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
     ); 
}; 
const run = () =>
    items.forEach(item => { 
        if (isInViewport(item))
{ item.classList.add('show'); 
} 
}); 
// Events
window.addEventListener('load', run);
window.addEventListener('resize', run);
window.addEventListener('scroll', run);

BROWSER

Console