https://github.com/um-xair/html-css-js-personal-portfolio-dark-light-mode

🧬 Responsive Personal Portfolio Website using HTML CSS Javascript | Dark/Light Mode by UM-XAIR
https://github.com/um-xair/html-css-js-personal-portfolio-dark-light-mode

css dark-mode dark-theme developer front-end html javascript portfolio portfolio-design portfolio-site portfolio-website responsive responsive-design responsive-web-design website website-design

Last synced: 3 days ago
JSON representation

🧬 Responsive Personal Portfolio Website using HTML CSS Javascript | Dark/Light Mode by UM-XAIR

• Host: GitHub
• URL: https://github.com/um-xair/html-css-js-personal-portfolio-dark-light-mode
• Owner: um-xair
• Created: 2023-12-05T08:32:26.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-29T11:06:36.000Z (4 months ago)
• Last Synced: 2024-11-12T15:37:21.808Z (2 months ago)
• Topics: css, dark-mode, dark-theme, developer, front-end, html, javascript, portfolio, portfolio-design, portfolio-site, portfolio-website, responsive, responsive-design, responsive-web-design, website, website-design
• Language: CSS
• Homepage: https://portfolio-dark-light-mode-by-um-xair.netlify.app/
• Size: 8.86 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### 🧬 Responsive Personal Portfolio Website using HTML CSS Javascript | Dark/Light Mode by UM-XAIR










  

  




This HTML and JavaScript code implements dark and light mode functionality for a portfolio website.

## HTML Structure:

- The HTML file starts with the `` declaration, indicating that this is an HTML5 document.

- Inside the `` 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 `` tags.

- The `` section contains the main content of the webpage, including header, sections for home, about, services, portfolio, testimonial, and contact, and a footer.

## JavaScript (scripts.js):

- 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.

### Dark and Light Mode Functionality:

- 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).

## Explanation of Specific Parts:

- 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) 🫶




## Connect with Me 🌐