Merge pull request #1 from techdiwas/copilot/improve-website-efficiency

techdiwas · web-flow · commit 41b8a8986809 · 2025-12-16T22:35:00.000+05:45
Optimize website performance with throttled scroll handlers and async font loading
diff --git a/index.html b/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diwas | Portfolio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css" />
 </head>
 <body>
@@ -74,6 +77,6 @@ <h2>Contact</h2>
         <p>&copy; 2025 Diwas. All rights reserved.</p>
     </footer>
 
-    <script src="script.js"></script>
+    <script src="script.js" defer></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,9 +1,28 @@
-// Simple scroll fade-in
-window.addEventListener('scroll', () => {
-    document.querySelectorAll('section').forEach(section => {
+// Throttle function for better performance
+function throttle(func, delay) {
+    let lastCall = 0;
+    return function(...args) {
+        const now = Date.now();
+        if (now - lastCall >= delay) {
+            lastCall = now;
+            func.apply(this, args);
+        }
+    };
+}
+
+// Simple scroll fade-in with throttling
+const handleScroll = throttle(() => {
+    const sections = document.querySelectorAll('section');
+    const windowHeight = window.innerHeight;
+    
+    sections.forEach(section => {
         const rect = section.getBoundingClientRect();
-        if(rect.top < window.innerHeight - 50) {
+        if(rect.top < windowHeight - 50) {
             section.classList.add('visible');
         }
     });
-});
+}, 100);
+
+window.addEventListener('scroll', handleScroll, { passive: true });
+// Trigger on load to handle initial viewport
+handleScroll();
diff --git a/style.css b/style.css
@@ -128,6 +128,14 @@ nav.scroll-header ul li a:hover {
 section {
     padding: 100px 20px;
     text-align: center;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+section.visible {
+    opacity: 1;
+    transform: translateY(0);
 }
 
 #projects .project-list {
@@ -182,11 +190,11 @@ footer {
   padding: 10px;
   background-color: #111;
   border-bottom: 1px solid #333;
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
 }
 
 .scrollable-top::-webkit-scrollbar {
-  display: none; /* Chrome, Safari */
+  display: none;
 }
 
 .scroll-item {
