Updated my Website

- other (better) Theme
- added more Features
- changed Text
- added more animations

js/dynamic.js

@@ -10,8 +10,8 @@ bioBtn.onclick = function () {
         leftArrow.classList.add("fa-arrow-down");
         rightArrow.classList.remove("fa-arrow-left");
         rightArrow.classList.add("fa-arrow-down");
-        leftArrow.style.position = "initial";
-        rightArrow.style.position = "initial";
+        leftArrow.style.position = "relative";
+        rightArrow.style.position = "relative";
         unfade(bioModel);
     } else {
         bioModel.classList.add("hidden");
@@ -34,7 +34,7 @@ bioModel.onclick = function (evt) {
 };
 
 function fade(element) {
-    var op = 1;  // initial opacity
+    var op = 1; 
     var timer = setInterval(function () {
         if (op <= 0.1) {
             clearInterval(timer);
@@ -47,7 +47,7 @@ function fade(element) {
 }
 
 function unfade(element) {
-    var op = 0.1;  // initial opacity
+    var op = 0.1; 
     element.style.display = 'block';
     var timer = setInterval(function () {
         if (op >= 1) {
@@ -57,4 +57,47 @@ function unfade(element) {
         element.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
     }, 5);
-}
+}
+
+const coords = { x: 0, y: 0 };
+const circles = document.querySelectorAll(".circle");
+
+const colors = [
+    "#b0b8ce"
+  ];
+
+circles.forEach(function (circle, index) {
+  circle.x = 1;
+  circle.y = 1;
+  circle.style.backgroundColor = colors[index % colors.length];
+});
+
+window.addEventListener("mousemove", function(e){
+  coords.x = e.clientX;
+  coords.y = e.clientY;
+  
+});
+
+function animateCircles() {
+  
+  let x = coords.x;
+  let y = coords.y;
+  
+  circles.forEach(function (circle, index) {
+    circle.style.left = x - 10 + "px";
+    circle.style.top = y - 10 + "px";
+    
+    circle.style.scale = (circles.length - index) / circles.length;
+    
+    circle.x = x;
+    circle.y = y;
+
+    const nextCircle = circles[index + 1] || circles[0];
+    x += (nextCircle.x - x) * 0.08;
+    y += (nextCircle.y - y) * 0.08;
+  });
+ 
+  requestAnimationFrame(animateCircles);
+}
+
+animateCircles();

js/events.js

@@ -1,9 +1,7 @@
 fetch("https://api.github.com/users/fraujulian/events")
     .then(response => response.json())
     .then(events => {
-        // inserting
         let updates = document.getElementById("commits");
-        // empty div
         updates.innerHTML = "";
         for (let i = 0; i < 10; i++) {
             let singleCommit = document.createElement("div");

js/github.js

@@ -1,6 +1,6 @@
   window.onload = function () {
       let script = document.createElement("script");
-      script.src = "https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js";
+      script.src = "https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js";
       document.body.appendChild(script);
 
       const sortOnKey = (key, desc) => {
@@ -14,7 +14,7 @@
       String.prototype.replaceAt = function (index, replacement) {
           return this.substr(0, index) + replacement + this.substr(index + replacement.length);
       }
-      fetch("https://api.github.com/users/fraujulian/repos?per_page=100")
+      fetch("https://api.github.com/users/fraujulian/repos?per_page=999")
           .then(response => response.json())
           .then(projects => {
               projects = projects.sort(sortOnKey("stargazers_count", true));
@@ -27,7 +27,9 @@
                   let project = projects[i];
                   if (project != undefined) {
                       if (project.description == null)
-                          project.description = "No description.";
+                          project.description = "This project has no description";
+                      if (project.language == null)
+                          project.language = "No language stored!";
                       project.name = project.name.replaceAll('_', ' ').replaceAll('-', ' ');
                       projectDiv.innerHTML = `
                     <div class="media">
@@ -36,8 +38,8 @@
                                 <strong class="d-block text-gray-dark">${project.name}</strong>
                             </a>
                             <div class="stars" style="float:right;">
-                                    📕 ${project.language}
-                                <i class="far fa-star stargazers"></i>⭐ ${project.stargazers_count}
+                                    📕 ${project.language} <br>
+                                    ⭐ ${project.stargazers_count}
                             </div>
                         </div>
                         <p>${project.description}</p>
@@ -46,7 +48,6 @@
                       fetch(`https://raw.githubusercontent.com/${project.full_name}/master/README.md`)
                           .then(response => response.text())
                           .then(text => {
-                              // Convert markdown to html
                               let converter = new showdown.Converter();
                               let html = converter.makeHtml(text);
                               let projectModal = document.createElement("div");
@@ -62,8 +63,8 @@
 
                               projectDiv.onclick = function () {
                                   projectModal.classList.remove("hidden");
-                                  document.body.scrollTop = 0; // For Safari
-                                  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+                                  document.body.scrollTop = 0; // Safari
+                                  document.documentElement.scrollTop = 0; // Chrome Firefox IE Opera
                                   document.body.style.opacity = 0.2;
                               };