Merge pull request #61 from PelleNybe/fix/spacing-11327475747864157782

fix: reduce empty space between modules

Author: PelleNybe

.jules/masterjournal.md

@@ -2,3 +2,4 @@
 - Updated index.html from a company/product landing page to Pelle Nyberg's personal Developer Portfolio.
 - Updated e2e tests to pass with the new page title.
 - Improved Frontend Performance and Accessibility (added requestAnimationFrame, event delegation, aria attributes, skip to content links, proper alt texts).
+- Fixed excessively long empty spaces between modules by removing explicit hardcoded inline padding and margin on section tags in index.html, and adjusted the global section padding in styles.css.

app.js

@@ -2733,6 +2733,22 @@ class GitHubActivityFeed {
 
 // Feature: Web3 Integration Demo
 class Web3Demo {
+  async doCheckConnection() {
+    try {
+      const accounts = await window.ethereum.request({ method: 'eth_accounts' });
+      if (accounts.length > 0) {
+        this.account = accounts[0];
+        this.statusText.textContent = `Connected: ${this.account.substring(0, 6)}...${this.account.substring(38)}`;
+        this.statusText.style.color = 'var(--success-color)';
+        this.connectBtn.style.display = 'none';
+        this.actionsDiv.style.display = 'flex';
+      } else {
+        localStorage.removeItem('corax_web3_account');
+      }
+    } catch (e) {
+      console.error("Silent reconnect failed", e);
+    }
+  }
   async doCheckConnection() {
     try {
       const accounts = await window.ethereum.request({ method: 'eth_accounts' });

dist/app.js

@@ -158,7 +158,7 @@ <h1 class="glitch" data-text="Pelle Nyberg">Pelle Nyberg</h1>
 
 
   <!-- Featured Project Section -->
-  <section id="featured-project" style="padding-top: 4rem; padding-bottom: 2rem;">
+  <section id="featured-project">
     <div class="featured-project-container">
 
         <div class="header-section">
@@ -290,7 +290,7 @@ <h3 style="color: var(--primary-color); border-bottom: 1px solid rgba(0,255,194,
     </style>
 
 
-    <div class="grid-2" style="margin-top: 3rem;">
+    <div class="grid-2">
         <div class="feature-card product-card tilt-card">
             <h3>GAP Platform (The Brain)</h3>
             <p>The industrial analysis and control center, developed to handle the most complex business logic and real-time data streams. A hybrid cloud/edge platform orchestrating fleets of robots.</p>
@@ -519,7 +519,7 @@ <h2 class="section-title">Open Source & Developer Tools</h2>
       <div id="error-message" class="error-message" style="display: none"></div>
     </section>
 
-    <section id="gallery" style="margin-top: 4rem; text-align: center;">
+    <section id="gallery" style="text-align: center;">
       <h3 style="color: var(--text-secondary); margin-bottom: 2rem;">Platform Dashboard Previews</h3>
       <div class="projects-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;">
         <div class="project-card"><img src="images/1773184753736.png" style="width: 100%; border-radius: var(--border-radius-small);" alt="Dashboard UI component demonstrating real-time data visualization" loading="lazy"></div>
@@ -536,7 +536,7 @@ <h3 style="color: var(--text-secondary); margin-bottom: 2rem;">Platform Dashboar
     <!-- About/Commitment Section -->
     <section id="domain-expertise">
       <h2 class="section-title">Domain Expertise: Biology Meets Tech</h2>
-      <div class="grid-2" style="margin-top: 3rem; margin-bottom: 3rem;">
+      <div class="grid-2">
         <div>
             <img src="images/gap_digital_bridge_between_old_industry_and_future_iot.png" alt="Digital Bridge" style="width: 100%; border-radius: var(--border-radius); box-shadow: var(--shadow-soft);" loading="lazy">
         </div>
@@ -671,7 +671,7 @@ <h3 style="margin-bottom: 1rem; color: var(--text-primary);">Interactive Signatu
     </div>
 
     <!-- Live GitHub Activity Feed Section -->
-    <section id="activity" style="margin-top: 4rem">
+    <section id="activity">
       <h3
         style="
           text-align: center;
@@ -697,7 +697,7 @@ <h3 style="margin-bottom: 1rem; color: var(--text-primary);">Interactive Signatu
 
 
     <!-- Global Network Section -->
-    <section id="network" style="margin-top: 6rem; position: relative;">
+    <section id="network" style="position: relative;">
       <h2 class="section-title">Global Decentralized Network</h2>
       <p class="section-subtitle">Real-time visualization of active edge nodes, validators, and data relays across the globe.</p>
 
@@ -714,15 +714,15 @@ <h2 class="section-title">Global Decentralized Network</h2>
 
 
     <!-- System Telemetry Dashboard -->
-    <section id="telemetry-dash" style="margin-top: 6rem; max-width: 800px; margin-left: auto; margin-right: auto;">
+    <section id="telemetry-dash" style="max-width: 800px; margin-left: auto; margin-right: auto;">
       <h3 style="text-align: center; color: var(--text-secondary); margin-bottom: 2rem;">Live Swarm Telemetry</h3>
       <div style="background: var(--card-bg); padding: 2rem; border-radius: var(--border-radius); border: 1px solid rgba(0,255,194,0.2); box-shadow: var(--shadow-soft);">
         <canvas id="telemetryChart" height="100"></canvas>
       </div>
     </section>
 
     <!-- Interactive Architecture Diagram -->
-    <section id="architecture" style="margin-top: 4rem">
+    <section id="architecture">
       <h3
         style="
           text-align: center;

dist/index.html

@@ -426,7 +426,7 @@ nav.scrolled {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 150px; /* Extra 30px (~1cm) to push content further down */
+  margin-top: 120px; /* Push content down */
 }
 
 .hero-logo {
@@ -545,7 +545,7 @@ nav.scrolled {
 
 /* Sections */
 section {
-  padding: var(--spacing-xl) 0;
+  padding: var(--spacing-lg) 0;
   max-width: var(--max-width);
   margin: 0 auto;
   padding-left: var(--spacing-md);
@@ -943,7 +943,7 @@ footer {
   text-align: center;
   padding: var(--spacing-lg) var(--spacing-md);
   border-top: 1px solid rgba(0, 255, 204, 0.2);
-  margin-top: var(--spacing-xl);
+  margin-top: var(--spacing-lg);
   position: relative;
 }