Added stuffs (not final lmao)

lnminh1411 · Jun 20, 2024 · 8b13026 · 8b13026
1 parent 24e5c50
commit 8b13026
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 18 deletions.
diff --git a/facts.json b/facts.json
diff --git a/hehe~.mp3 b/hehe~.mp3
diff --git a/index.html b/index.html
@@ -54,7 +54,35 @@ <h3 style="font-weight:400;">Other stuffs I use:</h3>
           <img src="https://img.shields.io/badge/Firefox_Developer-0078D7?style=for-the-badge&logo=Firefox-Browser&logoColor=white" alt="Firefox Developer">
           <img src="https://img.shields.io/badge/Visual_Studio_Code-0078D4?style=for-the-badge&logo=visual%20studio%20code&logoColor=white" alt="VSCode">
           <img src="https://img.shields.io/badge/Visual_Studio-5C2D91?style=for-the-badge&logo=visual%20studio&logoColor=white" alt="Visual Studio">
+          <h3>Some stats (It's not good ngl):</h3>
         </a>
+          <something style="text-decoration:none;">
+            <div class="desktop-display">
+            <a href="https://github.com/lnminh1411">
+              <img style="width: 68vw;" src="https://github-profile-trophy.vercel.app/?username=lnminh1411&theme=onedark&title=Joined2020,Experience,Commits,Issues,PullRequest,Repositories,Followers,Stars" />
+            </a>
+            </div>
+            <div class="mobile-display">
+              <a href="https://github.com/lnminh1411">
+                <img style="padding-left:3vw;width: 170vw;" src="https://github-profile-trophy.vercel.app/?username=lnminh1411&theme=onedark&title=Joined2020,Experience,Commits,Issues" />
+                <img style="padding-left:3vw;width: 170vw;" src="https://github-profile-trophy.vercel.app/?username=lnminh1411&theme=onedark&title=PullRequest,Repositories,Followers,Stars" />
+              </a>
+            </div>
+          <a href="https://github.com/lnminh1411">
+            <img class="stats" src="https://github-readme-stats.vercel.app/api?username=lnminh1411&theme=transparent&include_all_commits=true" />
+          </a>
+          <a href="https://github.com/lnminh1411">
+            <img class="lang" src="https://github-readme-stats.vercel.app/api/top-langs?username=lnminh1411&layout=compact&langs_count=8&card_width=320&theme=transparent" />
+          </a>
+          <a href="https://github.com/lnminh1411">
+            <img class="streak" src="https://github-readme-streak-stats.herokuapp.com/?user=lnminh1411&theme=transparent">
+          </a>
+          <div class="desktop-display">
+          <a href="https://github.com/lnminh1411">
+            <img src="https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=lnminh1411&theme=transparent">
+          </a>
+          </div>
+          </something>
       </div>
       </div>
     </main>

diff --git a/index.js b/index.js
@@ -37,24 +37,22 @@ $(window)
             .css('height', `${percent}%`);
         $('.factcontainer')
             .css('opacity', `${factopac}`);
-        console.log(scroll)
     });
 
 $(document)
     .ready(function () {
-        let url = "https://uselessfacts.jsph.pl/api/v2/facts/random";
-        $.getJSON(url, {
-                format: "json"
-            })
-            .done(function (data) {
-                $("#fact")
-                    .text(data.text);
-            });
+        async function loadfacts() {
+            const res = await fetch('./facts.json');
+            const names = await res.json();
+            const random = Math.floor(Math.random() * names.facts.length);
+            $("#fact").text(names.facts[random].fact);
+          }
+        loadfacts()
     });
 
 setInterval(function () {
     const d = spacetime.now('asia/saigon')
-    const diff = spacetime.now()
+    const client = spacetime.now()
     if (d.d.getHours() <= 9) {
         var hrs = '0' + d.d.getHours() + ':'
     } else {
@@ -70,10 +68,10 @@ setInterval(function () {
     } else {
         var sec = d.d.getSeconds()
     }
-    if (diff.tz == 'asia/saigon') {
+    if ((d.d.getMinutes() - client.d.getMinutes()) === 0) {
         var difftime = '(Same time)'
     } else {
-        var difftime = `(Offset by ${diff.d.getHours() - d.d.getHours()} hours)`
+        var difftime = `(Offset by ${client.d.getHours() - d.d.getHours()} hours)`
     }
     $("#time")
         .text(hrs + min + sec + ' ' + difftime);

diff --git a/style.css b/style.css
@@ -112,7 +112,7 @@
 html {
     font-size: 155.5%;
     -ms-overflow-style: none;
-    scrollbar-width: none
+    scrollbar-width: none;
 }
 
 html::-webkit-scrollbar {
@@ -253,7 +253,7 @@ header section pre {
 
 main {
     display: block;
-    margin-top: 29vh
+    margin-top: 29vh;
 }
 
 .aboutmesection {
@@ -266,8 +266,9 @@ main {
     height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
-    margin-bottom: 10vh;
-    margin-top: 8vh
+    margin-bottom: 8vh;
+    margin-top: 8vh;
+    overflow-x: hidden;
 }
 
 .clock {
@@ -284,6 +285,10 @@ main {
     font-size: 2vw
 }
 
+.trophy {
+    width: 68vw;
+}
+
 @media screen and (max-width:768px) {
     .aboutmesection {
         width: 90vw
@@ -304,11 +309,31 @@ main {
     .footer {
         font-size: large
     }
+
+    .trophy {
+        width: 85vw;
+    }
+
+    .stats {
+        width: 85vw;
+    }
+
+    .lang {
+        width: 85vw;
+    }
+
+    .streak {
+        width: 85vw;
+    }
+
+    h3 {
+        font-size: 5vw;
+    }
+
 }
 
 h3 {
     text-decoration: underline;
-    font-weight: 700;
     opacity: .7
 }
 
@@ -317,10 +342,16 @@ h3 {
     opacity: .35;
     position: absolute;
     bottom: 10px;
-    padding-right: 280px;
     text-align: left;
     -webkit-animation: 2s headerAnimate;
     -moz-animation: 2s headerAnimate;
     -o-animation: 2s headerAnimate;
     animation: 2s headerAnimate
+}
+
+.mobile-display{display:none}
+.desktop-display{display:block}
+@media (max-width:800px){
+ .desktop-display {display:none}
+ .mobile-display {display:block}
 }