update...

Author: pradipchaudhary

assets/css/index.css

@@ -137,43 +137,13 @@ h2.cat-title {
     background: #faf9f9;
     border-radius: 5px;
 }
-.project-item img {
-    width: 100%;
-    object-fit: cover;
-}
-.project-info {
-    padding: 14px;
-}
-.project-info .lang {
-    font-weight: 400;
-    font-size: 0.7rem;
-    word-spacing: 8px;
-    color: #2200ff;
-}
-.project-info h3.project-name {
-    font-weight: 500;
-    font-size: 1.4rem;
-    padding: 5px 0;
-}
-.project-info p.description {
-    font-weight: 300;
-    font-size: 0.9rem;
-    color: #131212;
-    line-height: 22px;
-    margin-bottom: 10px;
-}
-.project-info .project-features {
-    margin-top: 10px;
-}
-.project-info .project-features .features-title {
-    margin-bottom: 5px;
-    font-weight: 400;
+.projects-list {
+    list-style: none;
 }
-.project-info .project-features ul li {
-    font-weight: 300;
-    font-size: 0.9rem;
-    line-height: 22px;
-    margin-left: 20px;
+.projects-list li {
+    padding: 5px;
+    display: flex;
+    gap: 40px;
 }
 /* hover */
 ul.list li .project-name:hover,

assets/js/index.js

@@ -1,6 +1,6 @@
 "use strict";
-// const projectsItems = document.querySelector(".projects-items");
-const projectsItems = document.getElementById("projects-items");
+const list = document.querySelector(".projects-list");
+// const projectsItems = document.getElementById("projects-items");
 const canvas = document.getElementById("pradip-canvas"),
     context = canvas.getContext("2d");
 const ancherEl = document.querySelectorAll("a");
@@ -10,63 +10,29 @@ window.onload = function () {
     console.log("Loaded");
 };
 
-fetch("./api.json")
+fetch("./projects.json")
     .then((res) => res.json())
     .then((data) => updateUI(data));
 
 //  UpdateUI
-// const updateUI = (projects) => {
-//     projects.map(({ name, code, index }) => {
-//         const itemList = document.createElement("li");
-//         itemList.innerHTML = `
-// 		<span class="project-number">${index}</span>
-// 		<span class="project-name">
-//         <a href="/${index}-${name}/index.html" target="_blank" >
-// 		    ${projectNameFormatter(name)}
-// 		</a>
-//         </span>
-// 		<a href="${code}" target="_blank" class="code-link">
-// 		    ${"{"} code ${"}"}
-// 		</a>
-// 		`;
-//         list.appendChild(itemList);
-//     });
-// };
-
 const updateUI = (projects) => {
-    projects.map(
-        ({
-            id,
-            name,
-            category,
-            features,
-            problem_solve,
-            description,
-            tag,
-            language,
-            cover_img,
-            code_link,
-        }) => {
-            const projectItem = document.createElement("div");
-            projectItem.className = "project-item";
-            console.log(projectItem);
-            projectItem.innerHTML = `
-                            <img src="./assets/screen/thumbnail.png" alt="" />
-                            <div class="project-info">
-                                <div class="lang">${language}</div>
-                               <a href=${code_link} > 
-                               <h3 class="project-name">${name}</h3>
-                               </a>
-                                <p class="description">
-                                    ${description}
-                                </p>
-                                
-                            </div>
-        `;
-            projectsItems.appendChild(projectItem);
-        }
-    );
+    projects.map(({ name, code, index }) => {
+        const itemList = document.createElement("li");
+        itemList.innerHTML = `
+		<span class="project-number">${index}</span>
+		<span class="project-name">
+        <a href="/${index}-${name}/index.html" target="_blank" >
+		    ${projectNameFormatter(name)}
+		</a>
+        </span>
+		<a href="${code}" target="_blank" class="code-link">
+		    ${"{"} code ${"}"}
+		</a>
+		`;
+        list.appendChild(itemList);
+    });
 };
+
 // Project Name Formatter
 const projectNameFormatter = (name) => {
     return name

index.html

@@ -30,12 +30,7 @@
                 </nav>
             </header>
             <!-- Project Lists -->
-            <main id="container">
-                <section class="webdev">
-                    <h2 class="cat-title">Web Development</h2>
-                    <div class="projects-items" id="projects-items"></div>
-                </section>
-            </main>
+            <main id="container" class="projects-list"></main>
             <!-- Footer  -->
             <footer>
                 <object