feat: update project card adding script

Author: schmelto

index.html

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

src/assets/css/styles.css

@@ -241,6 +241,7 @@ nav ul li a:focus {
 
 .project {
   padding: 40px;
+  margin-bottom: 2rem;
   background: #fff url(../images/under-construction.png) no-repeat center
     center/cover;
 }

src/assets/javascript/script.js

@@ -30,42 +30,47 @@ navToggle();
 var githubprojectsdomelement = document.getElementById('githubprojects');
 
 let githubprojects = [
-  {
-    name: 'chryz-hub/chryz-hub.github.io',
-    icon: 'description',
-  },
+    {
+        name: 'chryz-hub/chryz-hub.github.io',
+      },  {
+        name: 'chryz-hub/opensource-4-everyone',
+      },  {
+        name: 'chryz-hub/top-languages-cheat',
+      },  {
+        name: 'chryz-hub/web-dev-resources',
+      },
   // Here can be added some more projets if needed
 ];
 
 githubprojects.forEach((project) => {
-  getproject(project.name, project.icon);
+  getproject(project.name);
 });
 
-function getproject(project, icon) {
+function getproject(project) {
   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);
+      githubprojectsdomelement.innerHTML += createprojectcard(project);
     });
 }
 
-function createprojectcard(project, icon) {
+function createprojectcard(project) {
   // removing github emojis cause they are not usable in html
   project.description = project.description.replace(/:[^}]*:/, '');
 
   // TODO: add Project Card
   let projectcard = `<a href="#">
     <div class="item project">
-      <h4 class="text-secondary">Chryz-Hub Website</h4>
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis
-        sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
+      <h4 class="text-secondary">${project.name}</h4>
+      <p>${project.description}</p>
       <div>
-        <span class="fab fa-html5"></span>
+      <!-- TODO add icons -->
+       <!-- <span class="fab fa-html5"></span>
         <span class="fab fa-css3-alt"></span>
-        <span class="fab fa-js"></span>
+        <span class="fab fa-js"></span> -->
       </div>
     </div>
   </a>`;