Responsive Portfolio Website Using HTML, CSS & JavaScript

  • By null
  • Last update: Jan 3, 2023
  • Comments: 5

Comments(5)

  • 1

    This repo covers all the codes shown in video.

    I think this might be helpful for those who are doing mistakes watching the video. If there is any problem or any issue with code sharing please feel free to knock me [email protected]

  • 2

    tabs content won't click

    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.

  • 3

    My icons are not lining up like yours is

    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 Screen Shot 2022-11-29 at 9 52 31 AM Screen Shot 2022-11-29 at 9 52 56 AM

  • 4

    Thumpnail photo

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

    image

  • 5

    The menu doesn't expand I don't know if it's my code. Could you look and give me a hint?

    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') }) }