svg.txt

Hi! I was wondering how do you make this thumpnail for your github projects? I would love to know how you did it so I can do this in my future products! :)

My swiper class is not working as yours, it is not working properly. My dark light theme is also not working properly neither my scroll to top button is showing up. Please help me out here is my GitHub link for the code please help it's my portfolio website.
https://github.com/SauravBelwal/Saurravbelwal this my GitHub account.

Here is the icon code
<header class="header" id="header"> <nav class="nav container"> <a href="#" class="nav_logo"> Liza </a> <div class="nav_menu" id="nav_menu"> <ul class ="nav_list grid"> <li class ="nav_item"> <a href="#home" class="nav_link"> <i class="uil uil-estate"></i> Home </a> </li> <li class ="nav_item"> <a href="#about" class="nav_link"> <i class="uil uil-user"></i> About me </a> </li> <li class ="nav_item"> <a href="#Resume" class="nav_link"> <i class="uil uil-file-alt"></i> Resume and Skills </a> </li> <li class ="nav_item"> <a href="#portfolio" class="nav_link"> <i class="uil uil-scenery"></i> Portfolio </a> </li> <li class ="nav_item"> <a href="#works" class="nav_link"> <i class="uil uil-paint-tool"></i> Works </a> </li> <li class ="nav_item"> <a href="#contact" class="nav_link"> <i class="uil uil-message"></i> Contact Me </a> </li> </ul> </div> </nav> </header>
In the images it shows what yours looks like vs mine

it's not loading

Is this open source? Can I use this code to create my portfolio?

Code .js

/*==================== QUALIFICATION TABS ====================*/
const tabs = document.querySelectorAll(['data-target']),
      tabContents = document.querySelectorAll(['data-content'])

tabs.forEach(tab =>{
    tab.addEventListener('click', () =>{
        const target = document.querySelector(tab.dataset.target)
        
        tabContents.forEach(tabContent =>{
            tabContent.classList.remove('qualification__active')
        })
        target.classList.add('qualification__active')

        tabs.forEach(tab =>{
            tab.classList.remove('qualification__active')
        })
        tab.classList.add('qualification__active')
    })
})

this is the html

<div class="qualification__tabs">
                    <div class="qualification__button button--flex qualification__active" data-target="#education">
                        <i class="uil uil-graduation-cap qualification__icon"></i>
                        Education
                    </div>

                    <div class="qualification__button button--flex" data-target="#work">
                        <i class="uil uil-briefcase-alt qualification__icon"></i>
                        Work
                    </div>
                </div>

Same things as on video but when I try on browser doesn't click.

help me, why is my grid-template-columns value invalid?

Please add the fav icon to your own project.

 <link rel="shortcut icon" href=".`your_path`/logo.ico" type="image/x-icon"/>

const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close'),

/===== MENU SHOW =====/
/* Validate if constant exists */
if (navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}