Add files via upload

color-1.css

@@ -0,0 +1,6 @@
+:root{
+
+--skin-color:#ec1839;
+
+
+}

color-2.css

@@ -0,0 +1,6 @@
+:root{
+
+    --skin-color:#fa5b0f;
+
+
+    }

color-3.css

@@ -0,0 +1,6 @@
+:root{
+
+    --skin-color:#34b182;
+
+
+    }

color-4.css

@@ -0,0 +1,6 @@
+:root{
+
+    --skin-color:#1854b4;
+
+
+    }

color-5.css

@@ -0,0 +1,6 @@
+:root{
+
+    --skin-color:#f021b2;
+
+
+    }

script.js

@@ -0,0 +1,92 @@
+
+  var typed = new Typed(".typing", {
+    strings: ["Web Designer", "Web Developer", "Graphic Designer", "YouTuber"],
+    typeSpeed: 100,
+    backSpeed: 60,
+    loop: true
+  });
+
+
+
+const nav = document.querySelector(".nav"),
+navList = nav.querySelectorAll("li"),
+totalNavList = navList.length,
+allSection = document.querySelector(".section"),
+totalSection = allSection.length;
+for(let i=0; i<totalNavList; i++){
+
+    const a = navList[i].querySelector("a");
+    a.addEventListener("click", function(){
+
+      removeBackSection();
+        for(let j=0; j<totalNavList; j++){
+            if(navList[j].querySelector("a").classList.contains("active")){
+                //allSection[j].classList.add("back-section")
+                addBackSection(j);
+            }
+            navList[j].this.querySelector("a").classList.remove("active");
+        }
+this.classList.add("active")
+showSection(this);
+if(window.innerWidth < 100){
+    asideSectionTogglerBtn();
+}
+    })
+}
+
+
+function removeBackSection(){
+    for(let i=0; i<totalSection; i++){
+        allSection[i].classList.remove("back-section");
+    }
+}
+
+function addBackSection(num){
+    allSection[num].classList.add("back-section");
+}
+function showSection(element){
+    for(let i=0; i<totalSection; i++){
+        allSection[i].classList.remove("active");
+    }
+    const target = element.getAttribute("href").split("#")[1];
+    document.querySelector("#" + target).classList.add("active");
+
+
+}
+
+function updateNav(element){
+    for(let i=0; i<totalNavList; i++){
+        navList[i].querySelector("a").classList.remove("active");
+        const target = element.getAttribute("href").split("#")[1];
+        if(target === navList[i].querySelector("a").getAnimations("href").split("#")[1]){
+            navList[i].querySelector("a").classList.add("active");
+        }
+        }
+}
+
+document.querySelector(".hire-me").addEventListener("click", function(){
+
+    const sectionIndex = this.getAttribute("data-section-index");
+    //console.lof(sectionIndex);
+
+    showSection(this);
+    updateNav(this);
+    removeBackSection();
+    addBackSection(sectionIndex);
+})
+
+
+
+const navToggler = document.querySelector(".nav-toggler"),
+aside = document.querySelector(".aside")
+navTogglerBtn.addEventListener("click", () =>{
+    asideSectionTogglerBtn();
+})
+
+function asideSectionTogglerBtn(){
+    aside.classList.toggle("open");
+    navTogglerBtn.classList.toggle("open");
+    for(let i=0; i<totalSection; i++){
+        allSection[i].classList.toggle("open");
+    }
+}

style-switcher.css

@@ -0,0 +1,84 @@
+/* Style Switcher Container */
+.style-switcher {
+    position: fixed;
+    right: 0;
+    top: 60px;
+    padding: 15px;
+    width: 200px;
+    border: 1px solid gray;
+    background: var(--bg-black-100);
+    z-index: 101;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+    transform: translateX(100%);
+}
+
+/* Open Style Switcher */
+.style-switcher.open {
+    transform: translateX(0);
+}
+
+/* Style Switcher Icon */
+.style-switcher .s-icon {
+    position: absolute;
+    height: 40px;
+    width: 40px;
+    text-align: center;
+    font-size: 20px;
+    background: var(--bg-black-100);
+    color: black;
+    right: 100%;
+    border: 1px solid gray;
+    margin-right: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-radius: 50%;
+}
+
+/* Icon Line Height */
+.style-switcher .s-icon i {
+    line-height: 40px;
+}
+
+/* Style Switcher Toggler Position */
+.style-switcher .style-switcher-toggler {
+    top: 0;
+}
+
+/* Day-Night Toggle Position */
+.style-switcher .day-night {
+    top: 55px;
+}
+
+/* Style Switcher Header */
+.style-switcher h4 {
+    margin: 0 0 10px;
+    color: var(--text-black-700);
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+/* Color Options Container */
+.style-switcher .colors {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+/* Color Option Style */
+.style-switcher .colors span {
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    border: 1px solid transparent;
+    cursor: pointer;
+}
+
+/* Color Options */
+.style-switcher .color-1 { background: #ec1839; }
+.style-switcher .color-2 { background: #fa5b0f; }
+.style-switcher .color-3 { background: #34b182; }
+.style-switcher .color-4 { background: #1854b4; }
+.style-switcher .color-5 { background: #f021b2; }

style-switcher.js

@@ -0,0 +1,57 @@
+// Toggle Style Switcher Visibility
+const styleSwitcherToggle = document.querySelector(".style-switcher-toggler");
+styleSwitcherToggle.addEventListener("click", () => {
+    document.querySelector(".style-switcher").classList.toggle("open");
+});
+
+// Hide Style Switcher on Scroll
+window.addEventListener("scroll", () => {
+    if (document.querySelector(".style-switcher").classList.contains("open")) {
+        document.querySelector(".style-switcher").classList.remove("open");
+    }
+});
+
+// Set Active Style
+const alternateStyles = document.querySelectorAll(".alternate-style");
+
+function setActiveStyle(color) {
+    alternateStyles.forEach((style) => {
+        if (color === style.getAttribute("title")) {
+            style.removeAttribute("disabled");
+        } else {
+            style.setAttribute("disabled", "true");
+        }
+    });
+}
+
+// Toggle Day/Night Mode
+const dayNight = document.querySelector(".day-night");
+
+dayNight.addEventListener("click", () => {
+    const icon = dayNight.querySelector("i");
+    document.body.classList.toggle("dark");
+
+    // Toggle icon based on the dark mode status
+    if (document.body.classList.contains("dark")) {
+        icon.classList.remove("fa-moon");
+        icon.classList.add("fa-sun");
+        localStorage.setItem('theme', 'dark'); // Save the theme preference
+    } else {
+        icon.classList.remove("fa-sun");
+        icon.classList.add("fa-moon");
+        localStorage.setItem('theme', 'light'); // Save the theme preference
+    }
+});
+
+// Set Initial Day/Night Icon Based on LocalStorage
+window.addEventListener("load", () => {
+    const icon = dayNight.querySelector("i");
+    const theme = localStorage.getItem('theme');
+    if (theme === 'dark') {
+        document.body.classList.add("dark");
+        icon.classList.add("fa-sun");
+    } else {
+        document.body.classList.remove("dark");
+        icon.classList.add("fa-moon");
+    }
+});