This HTML and JavaScript code implements dark and light mode functionality for a portfolio website.
- The HTML file starts with the
<!DOCTYPE html>declaration, indicating that this is an HTML5 document. - Inside the
<head>section, there are meta tags for defining the character set, viewport settings, and title for the webpage. - External CSS libraries, including custom CSS and Boxicons, are linked using
<link>tags. - The
<body>section contains the main content of the webpage, including header, sections for home, about, services, portfolio, testimonial, and contact, and a footer.
- The JavaScript code handles the dark and light mode functionality, toggling between the two modes when the respective icon is clicked.
- The menu icon for the navbar and the dark mode icon are selected using
document.querySelector(). - Event listeners are added to these icons to toggle classes and apply styles for dark mode.
- The scroll section active link functionality highlights the active link in the navbar based on the section currently in view.
- The sticky navbar feature adds a class to the header when the user scrolls beyond a certain point.
- The Swiper library is used to create a testimonial carousel with pagination and navigation buttons.
- Scroll reveal animations are implemented to animate elements on scroll, providing a smooth user experience.
- Clicking the dark mode icon toggles the appearance of the website between dark and light themes.
- This functionality is achieved by toggling classes on the body element, which apply different CSS styles for dark and light mode.
- The dark mode icon also changes its appearance to indicate the current mode (sun icon for light mode and moon icon for dark mode).
- The dark and light mode functionality is controlled by JavaScript, which dynamically adds or removes CSS classes based on user interaction.
- The
classList.toggle()method is used to toggle the 'dark-mode' class on the body element, which triggers the CSS styles for dark mode. - Event listeners are added to the dark mode icon to detect clicks and toggle the dark mode class accordingly.
- Scroll reveal animations are implemented to add visual interest and enhance the user experience by animating elements on scroll.
Inspiration from the [Codehal YouTube channel](https://www.youtube.com/@codehal) 🫶
