update deploy

Renstrio24p · Jul 2, 2023 · 394f16d · 394f16d
1 parent 7f92929
commit 394f16d
Show file tree

Hide file tree

Showing 15 changed files with 324 additions and 154 deletions.
diff --git a/dist/src/components/Home/Hire-me.js b/dist/src/components/Home/Hire-me.js
@@ -0,0 +1,11 @@
+import { style_main } from "../../start";
+
+export default function HireMeContent(Hire){
+
+    Hire.innerHTML = (
+        `
+            <button class=${style_main('hire-me-btn')}>Browse</button>
+        `
+    )
+
+}
diff --git a/dist/src/components/Home/Repo.js b/dist/src/components/Home/Repo.js
@@ -1,30 +1,37 @@
 import { style_main } from "../../start";
+import Count from "./functions/count";
 
 export default function RepoList(Repo){
 
     Repo.innerHTML = (
         `
-            <div class=${style_main('repo-container')}>
-                <ul class=${style_main('repo-list')}>
-                    <li> 
-                        <h2>59</h2>
-                        <span>Github Repositories</span>
-                    </li>
-                    <li> 
-                        <h2>9</h2>
-                        <span>React Projects</span>
-                    </li>
-                    <li> 
-                        <h2>7</h2>
-                        <span>Javascript Projects</span>
-                    </li>
-                    <li> 
-                        <h2>2</h2>
-                        <span>Collaboration Projects</span>
-                    </li>
-                </ul>
-            </div>
+        <div class=${style_main('repo-container')}>
+            <ul class=${style_main('repo-list')}>
+                <li> 
+                    <h2 id="repo-count">59</h2>
+                    <span>Github Repositories</span>
+                </li>
+                <li> 
+                    <h2 id="react-count">9</h2>
+                    <span>React Projects</span>
+                </li>
+                <li> 
+                    <h2 id="js-count">7</h2>
+                    <span>Javascript Projects</span>
+                </li>
+                <li> 
+                    <h2 id="ts-count">7</h2>
+                    <span>Typescript Projects</span>
+                </li>
+                <li> 
+                    <h2 id="collab-count">2</h2>
+                    <span>Collab Projects</span>
+                </li>
+            </ul>
+        </div>
         `
     )
 
+    Count();
+
 }
diff --git a/dist/src/components/Home/functions/count.js b/dist/src/components/Home/functions/count.js
@@ -0,0 +1,26 @@
+
+export default function Count(){
+
+    const counts = {
+        'repo-count': 61,
+        'react-count': 9,
+        'js-count': 7,
+        'ts-count': 3,
+        'collab-count': 2
+    };
+
+    Object.keys(counts).forEach(key => {
+        const element = document.getElementById(key);
+        const maxCount = counts[key];
+        const interval = Math.floor(1500 / maxCount); // Adjust the interval based on the desired animation speed
+
+        let count = 0;
+        const timer = setInterval(() => {
+            element.innerText = count;
+            count++;
+            if (count > maxCount) {
+                clearInterval(timer);
+            }
+        }, interval);
+    });
+}
diff --git a/dist/src/components/Sidebar.js b/dist/src/components/Sidebar.js
@@ -40,27 +40,7 @@ export default function SidebarContent(Side){
                     </ul>
                 </div>
                 <div class=${style_side('divider')}></div>
-                    <div class=${style_side('d-flex-between')}>
-                        <div class=${style_side('donut-progress-bar')}>
-                            <svg class="${style_side('donut')} viewBox="0 0 100 100">
-                                <circle class=${style_side('donut-hole')} cx="50" cy="50" r="45"></circle>
-                                <circle class=${style_side('donut-ring')} cx="50" cy="50" r="45"></circle>
-                                <circle id='donut-segment2' class=${style_side('donut-segment')} cx="50" cy="50" r="45"></circle>
-                                <text id='donut-text2' class=${style_side('donut-text')} x="50" y="50" text-anchor="middle" dy="7"></text>
-                            </svg>
-                            <h2 class=${style_side('lang')}>Tagalog</h2>
-
-                        </div>
-                        <div class=${style_side('donut-progress-bar')}>
-                            <svg class="${style_side('donut')} viewBox="0 0 100 100">
-                                <circle class=${style_side('donut-hole')} cx="50" cy="50" r="45"></circle>
-                                <circle class=${style_side('donut-ring')} cx="50" cy="50" r="45"></circle>
-                                <circle id='donut-segment' class=${style_side('donut-segment')} cx="50" cy="50" r="45"></circle>
-                                <text id='donut-text' class=${style_side('donut-text')} x="50" y="50" text-anchor="middle" dy="7"></text>
-                            </svg>
-                            <h2 class=${style_side('lang')}>English</h2>
-                        </div>
-                    </div>
+                    <div  class=${style_side('d-flex-between')} id='donuts'></div>
                     <div class=${style_side('divider')}></div>
                     <div id='stacks'></div>
                     <div class=${style_side('divider')}></div>
@@ -76,7 +56,6 @@ export default function SidebarContent(Side){
         `
     )
 
-    Donut();
 
     Sidebar_Render();
 }
diff --git a/dist/src/components/sidebar/donuts.js b/dist/src/components/sidebar/donuts.js
@@ -0,0 +1,29 @@
+import { style_side } from "../../start";
+import DonutFunctions from "./functions/donut"
+
+export default function Donuts(donut){
+
+    donut.innerHTML = (
+        `
+        <div class=${style_side('donut-progress-bar')}>
+        <svg class="${style_side('donut')} viewBox="0 0 100 100">
+            <circle class=${style_side('donut-hole')} cx="50" cy="50" r="45"></circle>
+            <circle class=${style_side('donut-ring')} cx="50" cy="50" r="45"></circle>
+            <circle id='donut-segment2' class=${style_side('donut-segment')} cx="50" cy="50" r="45"></circle>
+            <text id='donut-text2' class=${style_side('donut-text')} x="50" y="57" text-anchor="middle" transform="rotate(90, 50, 50)"></text>
+        </svg>
+        <h2 class=${style_side('lang')}>Tagalog</h2>
+    </div>
+    <div class=${style_side('donut-progress-bar')}>
+        <svg class="${style_side('donut')} viewBox="0 0 100 100">
+            <circle class=${style_side('donut-hole')} cx="50" cy="50" r="45"></circle>
+            <circle class=${style_side('donut-ring')} cx="50" cy="50" r="45"></circle>
+            <circle id='donut-segment' class=${style_side('donut-segment')} cx="50" cy="50" r="45"></circle>
+            <text id='donut-text' class=${style_side('donut-text')} x="50" y="57" text-anchor="middle" transform="rotate(90, 50, 50)"></text>
+        </svg>
+        <h2 class=${style_side('lang')}>English</h2>
+    </div>
+        `
+    )
+    DonutFunctions();
+}
diff --git a/dist/src/components/sidebar/functions/donut.js b/dist/src/components/sidebar/functions/donut.js
@@ -1,34 +1,25 @@
 
-export default function Donut(){
+export default function DonutFunctions(){
 
-    function setDonutProgress(progress) {
-        const donutSegment = document.getElementById('donut-segment');
-        const donutText = document.getElementById('donut-text');
-
-        const circumference = 2 * Math.PI * 45;
-        const offset = circumference - (progress / 100) * circumference;
-
-        donutSegment.style.strokeDasharray = `${circumference} ${circumference}`;
-        donutSegment.style.strokeDashoffset = offset;
-
-        donutText.textContent = `${progress}%`;
+    function animateDonutChart(segmentId, textId, maxPercent) {
+        const segment = document.getElementById(segmentId);
+        const text = document.getElementById(textId);
+
+        let percent = 0;
+        const interval = Math.floor(2000 / maxPercent); 
+
+        const timer = setInterval(() => {
+            segment.style.strokeDasharray = `${percent}, 100`;
+            text.textContent = `${percent}%`;
+            percent++;
+
+            if (percent > maxPercent) {
+                clearInterval(timer);
+            }
+        }, interval);
     }
-
-    setDonutProgress(75);
-
-    function setDonutProgress2(progress) {
-        const donutSegment = document.getElementById('donut-segment2');
-        const donutText = document.getElementById('donut-text2');
-
-        const circumference = 2 * Math.PI * 45;
-        const offset = circumference - (progress / 100) * circumference;
-
-        donutSegment.style.strokeDasharray = `${circumference} ${circumference}`;
-        donutSegment.style.strokeDashoffset = offset;
-
-        donutText.textContent = `${progress}%`;
-    }
-
-    setDonutProgress2(85);
+
+    animateDonutChart('donut-segment', 'donut-text', 75); 
+    animateDonutChart('donut-segment2', 'donut-text2', 60); 
 
 }
diff --git a/dist/src/components/sidebar/functions/progressbars.js b/dist/src/components/sidebar/functions/progressbars.js
@@ -0,0 +1,15 @@
+
+export default function ProgressBarFunction(progressBarId, maxPercentage) {
+    var element = document.getElementById(progressBarId);
+    var width = 0;
+    var identity = setInterval(scene, 10);
+
+    function scene() {
+      if (width >= maxPercentage) {
+        clearInterval(identity);
+      } else {
+        width++;
+        element.style.width = width + '%';
+      }
+    }
+  }