refactor: enhance layout and styling with CSS variables, improved navbar, and updated project cards

Author: usmonovshohruxmirzo

index.html

@@ -30,7 +30,6 @@
         <div class="navbar-container">
             <a href="#" class="logo">Webbro</a>
             <a href="https://github.com/webbro-software" target="_blank" rel="noopener noreferrer" class="github-btn">
-                <span class="icon-github"></span>
                 <span>GitHub</span>
             </a>
         </div>
@@ -48,12 +47,12 @@ <h2>Software</h2>
                 "We don't just code for work. We code for soul."
             </p>
         </div>
-        <div class="scroll-indicator">
+        <a href="#featured" class="scroll-indicator">
             <span class="icon-arrow-down"></span>
-        </div>
+        </a>
     </section>
 
-    <section class="section">
+    <section class="section" id="featured">
         <div class="section-title">
             <h2>Featured Projects</h2>
         </div>
@@ -66,33 +65,36 @@ <h2>Developer Utilities</h2>
         </div>
         <div class="grid grid-3">
             <div class="card">
-                <h3>styled_print</h3>
-                <p class="card-detail">Terminal text styling for Python</p>
+                <div class="info">
+                    <h3>styled_print</h3>
+                    <p class="card-detail">Terminal text styling for Python</p>
+                </div>
                 <a href="https://github.com/webbro-software/styled_print" target="_blank" rel="noopener noreferrer"
                     class="card-link">
-                    <span class="icon-github"></span>
                     <span>View on GitHub</span>
                     <span class="icon-external"></span>
                 </a>
             </div>
 
             <div class="card">
-                <h3>styled-console</h3>
-                <p class="card-detail">Styled console logger for JavaScript</p>
+                <div class="info">
+                    <h3>styled-console</h3>
+                    <p class="card-detail">Styled console logger for JavaScript</p>
+                </div>
                 <a href="https://github.com/webbro-software/styled-console" target="_blank" rel="noopener noreferrer"
                     class="card-link">
-                    <span class="icon-github"></span>
                     <span>View on GitHub</span>
                     <span class="icon-external"></span>
                 </a>
             </div>
 
             <div class="card">
-                <h3>gcd-calculator</h3>
-                <p class="card-detail">Simple GCD calculator in Python</p>
+                <div class="info">
+                    <h3>gcd-calculator</h3>
+                    <p class="card-detail">Simple GCD calculator in Python</p>
+                </div>
                 <a href="https://github.com/webbro-software/gcd-calculator" target="_blank" rel="noopener noreferrer"
                     class="card-link">
-                    <span class="icon-github"></span>
                     <span>View on GitHub</span>
                     <span class="icon-external"></span>
                 </a>
@@ -104,46 +106,50 @@ <h3>gcd-calculator</h3>
         <div class="section-title">
             <h2>Experiments & Research</h2>
         </div>
-        <div class="grid grid-4">
+        <div class="grid grid-3">
             <div class="card">
-                <h3>nitrovim</h3>
-                <p class="card-detail">VIM setup in Lua for fast dev</p>
+                <div class="info">
+                    <h3>nitrovim</h3>
+                    <p class="card-detail">VIM setup in Lua for fast dev</p>
+                </div>
                 <a href="https://github.com/webbro-software/nitrovim" target="_blank" rel="noopener noreferrer"
                     class="card-link">
-                    <span class="icon-github"></span>
                     <span>Explore</span>
                     <span class="icon-external"></span>
                 </a>
             </div>
 
             <div class="card">
-                <h3>simple-translate</h3>
-                <p class="card-detail">Multilingual translator for Python</p>
+                <div class="info">
+                    <h3>simple-translate</h3>
+                    <p class="card-detail">Multilingual translator for Python</p>
+                </div>
                 <a href="https://github.com/webbro-software/simple-translate" target="_blank" rel="noopener noreferrer"
                     class="card-link">
-                    <span class="icon-github"></span>
                     <span>Explore</span>
                     <span class="icon-external"></span>
                 </a>
             </div>
 
             <div class="card">
-                <h3>voice-js</h3>
-                <p class="card-detail">Web Speech API abstraction</p>
+                <div class="info">
+                    <h3>voice-js</h3>
+                    <p class="card-detail">Web Speech API abstraction</p>
+                </div>
                 <a href="https://github.com/webbro-software/voice-js" target="_blank" rel="noopener noreferrer"
                     class="card-link">
-                    <span class="icon-github"></span>
                     <span>Explore</span>
                     <span class="icon-external"></span>
                 </a>
             </div>
 
             <div class="card">
-                <h3>pencil_art</h3>
-                <p class="card-detail">Convert images to sketch</p>
+                <div class="info">
+                    <h3>pencil_art</h3>
+                    <p class="card-detail">Convert images to sketch</p>
+                </div>
                 <a href="https://github.com/webbro-software/pencil_art" target="_blank" rel="noopener noreferrer"
                     class="card-link">
-                    <span class="icon-github"></span>
                     <span>Explore</span>
                     <span class="icon-external"></span>
                 </a>
@@ -160,7 +166,6 @@ <h3>uzcss-syntax</h3>
             <p class="card-detail">Syntax highlighting for uzcss - bringing Uzbek CSS to VS Code</p>
             <a href="https://github.com/webbro-software/uzcss-syntax" target="_blank" rel="noopener noreferrer"
                 class="card-link">
-                <span class="icon-github"></span>
                 <span>View Extension</span>
                 <span class="icon-external"></span>
             </a>
@@ -203,7 +208,6 @@ <h2>Our Philosophy</h2>
     <footer class="footer">
         <h3>Connect with WebBro</h3>
         <a href="https://github.com/webbro-software" target="_blank" rel="noopener noreferrer" class="footer-github">
-            <span class="icon-github"></span>
             <span>github.com/webbro-software</span>
         </a>
 

script.js

@@ -97,9 +97,10 @@ async function loadFeaturedProjects() {
       .map(
         (repo) => `
       <div class="card">
-        <span class="card-icon">${getProjectEmoji(repo)}</span>
+      <div class="info">
         <h3>${repo.name}</h3>
         <p class="card-description">${repo.description || "No description"}</p>
+      </div>
         <a href="${
           repo.html_url
         }" target="_blank" rel="noopener noreferrer" class="card-link">