start dark-mode css

assets/css/style.css

@@ -153,9 +153,8 @@ input, textarea {
 
 html { font-family: var(--ff-poppins); }
 
-body { background: var(--smoky-black); }
-
-
+body { background: var(--smoky-black); } **/
+/** .dark-mode { background: var(--smoky-black); } **/
 
 
 

assets/js/script.js

@@ -31,7 +31,7 @@ notifyMe();
 
 // element toggle function
 const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
-
+const darkMode = document.body.element.classList.toggle("dark-mode");
 
 
 // sidebar variables

index.html

@@ -54,6 +54,9 @@
           <span>Show Contacts</span>
           <ion-icon name="chevron-down"></ion-icon>
         </button>
+        <button class="info_more-btn" onclick="darkMode()">
+          <span>zcxv</span>
+        </button>
       </div>
 
       <div class="sidebar-info_more">
@@ -777,6 +780,26 @@
 
           <ul class="project-list">
 
+            <li class="project-item  active" data-filter-item data-category="web development">
+              <a href="#">
+
+                <figure class="project-img">
+                  <div class="project-item-icon-box">
+                    <ion-icon name="eye-outline"></ion-icon>
+                  </div>
+
+                  <img src="./assets/images/architect.png" alt="finance" loading="lazy">
+                </figure>
+
+                <h3 class="project-title">Digital Credentials</h3>
+
+		<p class="project-category">Leading the team providing badging support and development of pathways for the university</p>
+
+		<p class="project-category">Cal Poly Pomona</p>
+
+              </a>
+            </li>
+
             <li class="project-item  active" data-filter-item data-category="web development">
               <a href="#">