Dynamic data

data.js

@@ -0,0 +1,123 @@
+var data = {
+    my_name: "John Doe",
+    designation: "Frontend Developer",
+    experience: "3+ years",
+    education: "B.Sc. Bachelors Degree",
+    projects: "12 completed projects",
+    clients: "3 active clients",
+    linkedin: "https://www.linkedin.com/in/m-nadeem-asghar-82268478/",
+    github: "https://github.com/mnadeemasghar",
+    email: "m.nadeem.asghar@hotmail.com",
+    experienceData: [
+        {
+            title: "Frontend Development",
+            skills: [
+                { name: "HTML", level: "Experienced" },
+                { name: "CSS", level: "Experienced" },
+                { name: "SASS", level: "Intermediate" },
+                { name: "JavaScript", level: "Basic" },
+                { name: "TypeScript", level: "Basic" },
+                { name: "Material UI", level: "Intermediate" },
+            ],
+        },
+        {
+            title: "Backend Development",
+            skills: [
+                { name: "Node JS", level: "Intermediate" },
+                { name: "Express JS", level: "Intermediate" },
+                { name: "Git", level: "Intermediate" },
+                { name: "Laravel", level: "Experienced" },
+                { name: "Payment Gateways", level: "Intermediate" },
+                { name: "Firebase Notifications", level: "Experienced" },
+            ],
+        },
+    ],
+};
+
+function renderDataToClass(data) {
+    for (var key in data) {
+        if (data.hasOwnProperty(key)) {
+            var variable = data[key];
+            var class_name = key;
+
+            const elements = document.getElementsByClassName(class_name);
+
+            for (var i = 0; i < elements.length; i++) {
+                if (elements[i].tagName.toLowerCase() === "a") {
+                    // If the element is an anchor (a) tag, set the href attribute
+                    if (class_name === 'email') {
+                        elements[i].href = "mailto:" + variable;
+                        elements[i].innerHTML = variable;
+                    } else {
+                        elements[i].href = variable;
+                    }
+                } else {
+                    elements[i].innerHTML = variable;
+                }
+            }
+        }
+    }
+
+    // Additional logic for generating experience HTML
+    var section = document.getElementById("experience");
+
+    // Clear existing content
+    section.innerHTML = "";
+
+    // Add new content
+    var titleParagraph = document.createElement("p");
+    titleParagraph.className = "section__text__p1";
+    titleParagraph.textContent = "Explore My";
+    section.appendChild(titleParagraph);
+
+    var titleHeading = document.createElement("h1");
+    titleHeading.className = "title";
+    titleHeading.textContent = "Experience";
+    section.appendChild(titleHeading);
+
+    var detailsContainer = document.createElement("div");
+    detailsContainer.className = "experience-details-container";
+    section.appendChild(detailsContainer);
+
+    data.experienceData.forEach((category) => {
+        var categoryContainer = document.createElement("div");
+        categoryContainer.className = "about-containers";
+        detailsContainer.appendChild(categoryContainer);
+
+        var detailsContainerTitle = document.createElement("h2");
+        detailsContainerTitle.className = "experience-sub-title";
+        detailsContainerTitle.textContent = category.title;
+        categoryContainer.appendChild(detailsContainerTitle);
+
+        var articleContainer = document.createElement("div");
+        articleContainer.className = "article-container";
+        categoryContainer.appendChild(articleContainer);
+
+        category.skills.forEach((skill) => {
+            var article = document.createElement("article");
+
+            var icon = document.createElement("img");
+            icon.src = "./assets/checkmark.png";
+            icon.alt = "Experience icon";
+            icon.className = "icon";
+            article.appendChild(icon);
+
+            var skillDetails = document.createElement("div");
+
+            var skillName = document.createElement("h3");
+            skillName.textContent = skill.name;
+
+            var skillLevel = document.createElement("p");
+            skillLevel.textContent = skill.level;
+
+            skillDetails.appendChild(skillName);
+            skillDetails.appendChild(skillLevel);
+            article.appendChild(skillDetails);
+
+            articleContainer.appendChild(article);
+        });
+    });
+}
+
+// Call the function with your data
+renderDataToClass(data);

index.html

@@ -10,7 +10,7 @@
   </head>
   <body>
     <nav id="desktop-nav">
-      <div class="logo">John Doe</div>
+      <div class="logo my_name"></div>
       <div>
         <ul class="nav-links">
           <li><a href="#about">About</a></li>
@@ -21,7 +21,7 @@
       </div>
     </nav>
     <nav id="hamburger-nav">
-      <div class="logo">John Doe</div>
+      <div class="logo my_name"></div>
       <div class="hamburger-menu">
         <div class="hamburger-icon" onclick="toggleMenu()">
           <span></span>
@@ -42,8 +42,8 @@
       </div>
       <div class="section__text">
         <p class="section__text__p1">Hello, I'm</p>
-        <h1 class="title">John Doe</h1>
-        <p class="section__text__p2">Frontend Developer</p>
+        <h1 class="title my_name"></h1>
+        <p class="section__text__p2 designation"></p>
         <div class="btn-container">
           <button
             class="btn btn-color-2"
@@ -56,18 +56,21 @@ <h1 class="title">John Doe</h1>
           </button>
         </div>
         <div id="socials-container">
-          <img
-            src="./assets/linkedin.png"
-            alt="My LinkedIn profile"
-            class="icon"
-            onclick="location.href='https://linkedin.com/'"
-          />
-          <img
-            src="./assets/github.png"
-            alt="My Github profile"
-            class="icon"
-            onclick="location.href='https://github.com/'"
-          />
+          <a class="linkedin" href="">
+            <img
+              src="./assets/linkedin.png"
+              alt="My LinkedIn profile"
+              class="icon"
+            />
+          </a>
+
+          <a class="github" href="">
+            <img
+              src="./assets/github.png"
+              alt="My Github profile"
+              class="icon"
+            />
+          </a>
         </div>
       </div>
     </section>
@@ -91,7 +94,7 @@ <h1 class="title">About Me</h1>
                 class="icon"
               />
               <h3>Experience</h3>
-              <p>2+ years <br />Frontend Development</p>
+              <p class="experience"></p>
             </div>
             <div class="details-container">
               <img
@@ -100,7 +103,7 @@ <h3>Experience</h3>
                 class="icon"
               />
               <h3>Education</h3>
-              <p>B.Sc. Bachelors Degree<br />M.Sc. Masters Degree</p>
+              <p class="education"></p>
             </div>
           </div>
           <div class="text-container">