feat: add githu api

Author: schmelto

index.html

@@ -87,6 +87,10 @@ <h2 class="text-primary">Our Vision</h2>
     </div>
   </header>
   <main>
+
+    <div class="flex-col-2" id="githubprojects">
+			<!-- GitHub Projects from scripts.js goes here -->
+		</div>
     <section id="projects" class="projects">
       <h2>Projects</h2>
       <div class="flex-items">

src/assets/javascript/script.js

@@ -1,23 +1,71 @@
 //Navbar toggle
 const navToggle = () => {
-    const burger = document.querySelector('.burger');
-    const navList = document.querySelector('.nav-list');
-    const navLinks = document.querySelectorAll('.nav-list li');
-
-    burger.addEventListener('click', () => {
-        // Toggle Navbar
-        navList.classList.toggle('active');
-        burger.classList.toggle('toggle');
-
-        // Animate Links
-        navLinks.forEach((link, index) => {
-            if(link.style.animation) {
-                link.style.animation = '';
-            } else {
-                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.2}s`;
-            }
-        });
+  const burger = document.querySelector('.burger');
+  const navList = document.querySelector('.nav-list');
+  const navLinks = document.querySelectorAll('.nav-list li');
+
+  burger.addEventListener('click', () => {
+    // Toggle Navbar
+    navList.classList.toggle('active');
+    burger.classList.toggle('toggle');
+
+    // Animate Links
+    navLinks.forEach((link, index) => {
+      if (link.style.animation) {
+        link.style.animation = '';
+      } else {
+        link.style.animation = `navLinkFade 0.5s ease forwards ${
+          index / 7 + 0.2
+        }s`;
+      }
+    });
+  });
+};
+
+navToggle();
+
+// GitHub Projects
+// ##############################################
+
+var githubprojectsdomelement = document.getElementById('githubprojects');
+
+let githubprojects = [
+  {
+    name: 'chryz-hub/chryz-hub.github.io',
+    icon: 'description',
+  },
+  {
+    name: 'chryz-hub/chryz-hub.github.io',
+    icon: 'article',
+  },
+  {
+    name: 'chryz-hub/chryz-hub.github.io',
+    icon: 'person',
+  },
+  // Here can be added some more projets if needed
+];
+
+githubprojects.forEach((project) => {
+  getproject(project.name, project.icon);
+});
+
+function getproject(project, icon) {
+  fetch(`https://api.github.com/repos/${project}`)
+    .then((response) => {
+      return response.json();
+    })
+    .then((project) => {
+        // we add the project card directly to the html dom
+      githubprojectsdomelement.innerHTML += createprojectcard(project, icon);
     });
 }
 
-navToggle();
+function createprojectcard(project, icon) {
+    // removing github emojis cause they are not usable in html
+    project.description = project.description.replace(/:[^}]*:/, '');
+
+    // TODO: add Project Card
+    let projectcard = ``;
+    return projectcard;
+  }
+