changes from dell

README.md

@@ -1,3 +1,5 @@
 # My Portfolio.
 
-a simple website for my musings.
+## Basic representation for the site in html/css and Javascript.
+
+Needs lot of content and posts to fill in.

assets/js/script.js

@@ -1,6 +1,33 @@
 'use strict';
 
 
+/*
+function notifyMe() {
+  if (!("Notification" in window)) {
+    // Check if the browser supports notifications
+    alert("This browser does not support desktop notification");
+  } else if (Notification.permission === "granted") {
+    // Check whether notification permissions have already been granted;
+    // if so, create a notification
+    const notification = new Notification("Hi there!");
+    // …
+  } else if (Notification.permission !== "denied") {
+    // We need to ask the user for permission
+    Notification.requestPermission().then((permission) => {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        const notification = new Notification("Hi there!");
+        // …
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them anymore.
+}
+
+notifyMe();
+*/
 
 // element toggle function
 const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
@@ -15,7 +42,6 @@ const sidebarBtn = document.querySelector("[data-sidebar-btn]");
 sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
 
 
-
 // testimonials variables
 const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
 const modalContainer = document.querySelector("[data-modal-container]");

assets/js/script.sync-conflict-20240331-133157-2YBCZXX.js

@@ -0,0 +1,184 @@
+'use strict';
+
+
+function notifyMe() {
+  if (!("Notification" in window)) {
+    // Check if the browser supports notifications
+    alert("This browser does not support desktop notification");
+  } else if (Notification.permission === "granted") {
+    // Check whether notification permissions have already been granted;
+    // if so, create a notification
+    const notification = new Notification("Hi there!");
+    // …
+  } else if (Notification.permission !== "denied") {
+    // We need to ask the user for permission
+    Notification.requestPermission().then((permission) => {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        const notification = new Notification("Hi there!");
+        // …
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them anymore.
+}
+
+notifyMe();
+
+// element toggle function
+const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
+
+
+
+// sidebar variables
+const sidebar = document.querySelector("[data-sidebar]");
+const sidebarBtn = document.querySelector("[data-sidebar-btn]");
+
+// sidebar toggle functionality for mobile
+sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
+
+
+
+// testimonials variables
+const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
+const modalContainer = document.querySelector("[data-modal-container]");
+const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
+const overlay = document.querySelector("[data-overlay]");
+
+// modal variable
+const modalImg = document.querySelector("[data-modal-img]");
+const modalTitle = document.querySelector("[data-modal-title]");
+const modalText = document.querySelector("[data-modal-text]");
+
+// modal toggle function
+const testimonialsModalFunc = function () {
+  modalContainer.classList.toggle("active");
+  overlay.classList.toggle("active");
+}
+
+// add click event to all modal items
+for (let i = 0; i < testimonialsItem.length; i++) {
+
+  testimonialsItem[i].addEventListener("click", function () {
+
+    modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
+    modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
+    modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
+    modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
+
+    testimonialsModalFunc();
+
+  });
+
+}
+
+// add click event to modal close button
+modalCloseBtn.addEventListener("click", testimonialsModalFunc);
+overlay.addEventListener("click", testimonialsModalFunc);
+
+
+
+// custom select variables
+const select = document.querySelector("[data-select]");
+const selectItems = document.querySelectorAll("[data-select-item]");
+const selectValue = document.querySelector("[data-selecct-value]");
+const filterBtn = document.querySelectorAll("[data-filter-btn]");
+
+select.addEventListener("click", function () { elementToggleFunc(this); });
+
+// add event in all select items
+for (let i = 0; i < selectItems.length; i++) {
+  selectItems[i].addEventListener("click", function () {
+
+    let selectedValue = this.innerText.toLowerCase();
+    selectValue.innerText = this.innerText;
+    elementToggleFunc(select);
+    filterFunc(selectedValue);
+
+  });
+}
+
+// filter variables
+const filterItems = document.querySelectorAll("[data-filter-item]");
+
+const filterFunc = function (selectedValue) {
+
+  for (let i = 0; i < filterItems.length; i++) {
+
+    if (selectedValue === "all") {
+      filterItems[i].classList.add("active");
+    } else if (selectedValue === filterItems[i].dataset.category) {
+      filterItems[i].classList.add("active");
+    } else {
+      filterItems[i].classList.remove("active");
+    }
+
+  }
+
+}
+
+// add event in all filter button items for large screen
+let lastClickedBtn = filterBtn[0];
+
+for (let i = 0; i < filterBtn.length; i++) {
+
+  filterBtn[i].addEventListener("click", function () {
+
+    let selectedValue = this.innerText.toLowerCase();
+    selectValue.innerText = this.innerText;
+    filterFunc(selectedValue);
+
+    lastClickedBtn.classList.remove("active");
+    this.classList.add("active");
+    lastClickedBtn = this;
+
+  });
+
+}
+
+
+
+// contact form variables
+const form = document.querySelector("[data-form]");
+const formInputs = document.querySelectorAll("[data-form-input]");
+const formBtn = document.querySelector("[data-form-btn]");
+
+// add event to all form input field
+for (let i = 0; i < formInputs.length; i++) {
+  formInputs[i].addEventListener("input", function () {
+
+    // check form validation
+    if (form.checkValidity()) {
+      formBtn.removeAttribute("disabled");
+    } else {
+      formBtn.setAttribute("disabled", "");
+    }
+
+  });
+}
+
+
+
+// page navigation variables
+const navigationLinks = document.querySelectorAll("[data-nav-link]");
+const pages = document.querySelectorAll("[data-page]");
+
+// add event to all nav link
+for (let i = 0; i < navigationLinks.length; i++) {
+  navigationLinks[i].addEventListener("click", function () {
+
+    for (let i = 0; i < pages.length; i++) {
+      if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
+        pages[i].classList.add("active");
+        navigationLinks[i].classList.add("active");
+        window.scrollTo(0, 0);
+      } else {
+        pages[i].classList.remove("active");
+        navigationLinks[i].classList.remove("active");
+      }
+    }
+
+  });
+}

index.html

@@ -161,11 +161,10 @@
           <li class="navbar-item">
             <button class="navbar-link" data-nav-link>Projects</button>
           </li>
-<!---
+
           <li class="navbar-item">
             <button class="navbar-link" data-nav-link>Blog</button>
           </li>
-	  --->
 
           <li class="navbar-item">
             <button class="navbar-link" data-nav-link>Contact</button>
@@ -548,6 +547,44 @@
           </div>
 
           <ol class="timeline-list">
+            <li class="timeline-item">
+
+              <h4 class="h4 timeline-item-title">Digital Credential Specialist</h4>
+
+              <span>Aug 2022 — May 2024</span>
+
+              <p class="timeline-text">
+					Managing and integrating of applications, for platforms such as Badgr, Canvas and Parker Dewey, to issue over 10,00 badges over multiple departments.
+              </p>
+
+            </li>
+            <li class="timeline-item">
+
+              <h4 class="h4 timeline-item-title">Interface Lead</h4>
+
+              <span>Aug 2022 — April 2024</span>
+
+              <p class="timeline-text">
+        Leading team discussions and facilitated decision-making on key interface elements and functionalities to create a robust interface for mission-critical operations. Presented final interface design to project stakeholders and secured approval for implementation and integrate it
+with other vehicle teams.       </p>
+
+            </li>
+            <li class="timeline-item">
+
+              <h4 class="h4 timeline-item-title">Programmer Analyst Trainee</h4>
+
+              <span>Feb 2022 — Jul 2022</span>
+
+              <p class="timeline-text">
+ 			Finished 100% of training on Data Engineering and Cloud operations. Implemented various Data Engineering concepts of Apache Spark with various internal evaluations. Communicated various business solutions on cloud practices and services provided by Google Cloud Platform;
+			<ul>
+				<li>
+
+
+			</ul>
+              </p>
+
+            </li>
 
             <li class="timeline-item">
 
@@ -557,6 +594,11 @@
 
               <p class="timeline-text">
  			Finished 100% of training on Data Engineering and Cloud operations. Implemented various Data Engineering concepts of Apache Spark with various internal evaluations. Communicated various business solutions on cloud practices and services provided by Google Cloud Platform;
+			<ul>
+				<li>
+
+
+			</ul>
               </p>
 
             </li>
@@ -599,11 +641,11 @@
 
               <div class="title-wrapper">
                 <h5 class="h5">Full stack development</h5>
-                <data value="80">80%</data>
+                <data value="90"></data>
               </div>
 
               <div class="skill-progress-bg">
-                <div class="skill-progress-fill" style="width: 80%;"></div>
+                <div class="skill-progress-fill" style="width: 100%;"></div>
               </div>
 
             </li>
@@ -611,12 +653,12 @@
             <li class="skills-item">
 
               <div class="title-wrapper">
-                <h5 class="h5">Machine Learning</h5>
+                <h5 class="h5">Mobile Application Development</h5>
-                <data value="70">70%</data>
+                <data value="90"></data>
               </div>
 
               <div class="skill-progress-bg">
-                <div class="skill-progress-fill" style="width: 70%;"></div>
+                <div class="skill-progress-fill" style="width: 90%;"></div>
               </div>
 
             </li>
@@ -624,8 +666,8 @@
             <li class="skills-item">
 
               <div class="title-wrapper">
-                <h5 class="h5">Python Programming</h5>
+                <h5 class="h5">Data Privacy and Security</h5>
-                <data value="90">90%</data>
+                <data value="90"></data>
               </div>
 
               <div class="skill-progress-bg">
@@ -638,7 +680,7 @@
 
               <div class="title-wrapper">
                 <h5 class="h5">Cloud Services</h5>
-                <data value="50">70%</data>
+                <data value="50"></data>
               </div>
 
               <div class="skill-progress-bg">
@@ -899,7 +941,6 @@
         - #BLOG
       -->
 
-		<!--
       <article class="blog" data-page="blog">
 
         <header>
@@ -909,6 +950,7 @@
 
         <section class="blog-posts">
 
+		<!--
           <ul class="blog-posts-list">
 
             <li class="blog-post-item">
@@ -1080,10 +1122,11 @@
             </li>
 
           </ul>
+		-->
+
         </section>
 
       </article>
-    --->
 
       <!--
         - #CONTACT

rss.xml

@@ -1,39 +1,20 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+<rss version="2.0">
-  <channel>
+
-    <atom:link href="http://yoursite.com/feed.xml" rel="self" type="application/rss+xml" />
+<channel>
-    <title>YourSite</title>
+  <title>W3Schools Home Page</title>
-    <link>http://YourSite.com</link>
+  <link>https://www.w3schools.com</link>
-    <description>Something Describing Your Site</description>
+  <description>Free web building tutorials</description>
-    <language>en-us</language>    
-    <image>
-      <title>Picture Title</title>
-      <link>http://YourSite.com</link>
-      <url>http://yoursite.com/yourpicture.gif</url>
-      <width>70</width>
-      <height>55</height>
-    </image>
   <item>
-      <title>Web Page 1 Title</title>
+    <title>RSS Tutorial</title>
-      <pubDate>Mon, 6 Sep 2010 12:40:21 GMT</pubDate>
+    <link>https://www.w3schools.com/xml/xml_rss.asp</link>
-      <link>http://yoursite.com/webpage1.html</link>
+    <description>New RSS tutorial on W3Schools</description>
-      <guid>http://yoursite.com/item001</guid>
-      <description>Information about Web Page 1</description>
   </item>
   <item>
-      <title>Web Page 2 Title</title>
+    <title>XML Tutorial</title>
-      <pubDate>Mon, 6 Sep 2010 12:40:21 GMT</pubDate>
+    <link>https://www.w3schools.com/xml</link>
-      <link>http://yoursite.com/webpage2.html</link>
+    <description>New XML tutorial on W3Schools</description>
-      <guid>http://yoursite.com/item002</guid>
-      <description>Information about Web Page 2</description>
   </item>
-    <item>
+</channel>
-      <title>Web Page 3 Title</title>
+
-      <pubDate>Mon, 6 Sep 2010 12:40:21 GMT</pubDate>
-      <link>http://yoursite.com/webpage3.html</link>
-      <guid>http://yoursite.com/item003</guid>
-      <description>Information about Web Page 3</description>
-    </item>
-  </channel>
 </rss> 
->>>>>>> 3c90833 (comment blog section)