styling and more info from API

Author: annaester

code/chart.js

@@ -13,22 +13,24 @@ const config = {
         labels: [
           'Projects done',
           'Projects left',
+          'Projects in total'
           //'Blue'
         ],
         datasets: [{
           label: 'My Projects',
-          data: [amount, 19-amount],
+          data: [amount, 19-amount, 19],
           backgroundColor: [
-            'rgb(255, 99, 132)',
-            'rgb(255, 205, 86)',
-            //'rgb(54, 162, 235)'
+            '#e3f7ba',
+            'rgb(252, 241, 175)',
+            '#FFECE9'
           ],
           hoverOffset: 4
         }]
       },
     };
 
 
+
 const repoChart = new Chart(ctx, config);
 }
 

code/script.js

@@ -31,11 +31,16 @@ const getRepos = () => {
         <div class="project-card"> 
         <h3 class="project-name">${repo.name}</h3> 
         <a class="project-links" href="${repo.html_url}" target="_blank">${repo.name}</a> <br><i>With default branch ${repo.default_branch}</i>
-        <p class="project-info">Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
-        <p class="project-info" id="commits-${repo.name}">Number of commits: </p>
+        <p class="project-info"><b>Created:</b> ${new Date(repo.created_at).toDateString()}</>
+        <p class="project-info"><b>Latest push:</b> ${new Date(repo.pushed_at).toDateString()}</p>
+        <p class="project-info" id="commits-${repo.name}"><b>Number of commits:</b> </p>
         </div>
         `)
 
+    
+
+        //forkedRepos.sort(function(a, b){return a.created_at - b.created_at});
+
         getPullRequests(forkedRepos)
         drawChart(forkedRepos.length)
     })

code/style.css

@@ -44,6 +44,12 @@ body {
 .profile-pic {
   width: 400px;
   border-radius: 50%;
+  opacity: 0.5;
+}
+
+.profile-pic:hover {
+  opacity: 1;
+  transition: 1s;
 }
 
 .chart-box {
@@ -73,7 +79,7 @@ body {
 .project-card {
   font-family: 'Quicksand', sans-serif;
   background-color: #f7faf1;
-  width: 350px;
+  width: 330px;
   height: 200px;
   padding: 15px;
   border-radius: 2%;
@@ -119,6 +125,11 @@ body {
   font-style: italic;
 }
 
+.linkedin-link:hover {
+  color: rgb(123, 122, 122);
+  font-size: 20px;
+  transition: 1s;
+}
 
  /* Tablet */
 @media (min-width:768px) {