Many new styles.

assets/index.css

@@ -529,108 +529,119 @@ body::before {
 .separator {
     color: var(--border-color);
 }
+
 .contact-grid {
     display: grid;
     gap: 20px;
     margin-top: 20px;
+    max-width: 800px;
 }
+
 .contact-card {
     background: linear-gradient(
-        135deg,
+        145deg,
         rgba(42, 90, 90, 0.05) 0%,
-        rgba(42, 90, 90, 0.1) 100%
+        rgba(42, 90, 90, 0.15) 100%
     );
     border: 1px solid var(--border-color);
     clip-path: polygon(
         0 0,
-        95% 0,
+        98% 0,
-        100% 20px,
+        100% 15px,
         100% 100%,
-        5% 100%,
+        2% 100%,
-        0 calc(100% - 20px)
+        0 calc(100% - 15px)
     );
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow:
+        0 5px 15px rgba(0, 0, 0, 0.2),
+        0 0 30px rgba(42, 90, 90, 0.1),
+        inset 0 1px rgba(255, 255, 255, 0.1);
+    position: relative;
+    backdrop-filter: blur(5px);
 }
+
+.contact-card:hover {
+    transform: translateY(-2px);
+    box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.3),
+        0 0 40px rgba(42, 90, 90, 0.2),
+        inset 0 1px rgba(255, 255, 255, 0.2);
+    border-color: var(--text-bright);
+}
+
 .contact-header {
-    padding: 15px;
+    padding: 20px;
     border-bottom: 1px solid var(--border-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background: rgba(42, 90, 90, 0.1);
 }
+
 .contact-type {
     color: var(--text-bright);
-    font-size: 0.9em;
+    font-size: 1em;
-}
+    font-weight: bold;
-.connection-status {
+    letter-spacing: 1px;
-    display: flex;
+    text-transform: uppercase;
-    align-items: center;
-    font-size: 0.8em;
-    color: var(--text-muted);
-}
-.status-dot {
-    width: 6px;
-    height: 6px;
-    background: var(--text-bright);
-    border-radius: 50%;
-    margin-right: 8px;
-    box-shadow: 0 0 8px var(--glow-color);
-    animation: pulse 2s infinite;
 }
+
 .contact-content {
-    padding: 15px;
+    padding: 20px;
 }
+
 .contact-method {
     display: flex;
     align-items: center;
-    padding: 12px;
+    padding: 15px;
-    margin: 8px 0;
+    margin: 10px 0;
     text-decoration: none;
     color: var(--text-muted);
-    border: 1px solid transparent;
+    background: rgba(42, 90, 90, 0.05);
-    background: rgba(42, 90, 90, 0.1);
+    border-left: 2px solid var(--border-color);
     transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
 }
+
 .contact-method:hover {
     color: var(--text-bright);
-    border-color: var(--border-color);
+    background: rgba(42, 90, 90, 0.15);
-    background: rgba(42, 90, 90, 0.2);
+    border-left: 2px solid var(--text-bright);
-    transform: translateX(5px);
+    padding-left: 20px;
-}
-.contact-method::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background: var(--text-bright);
-    box-shadow: 0 0 10px var(--glow-color);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-.contact-method:hover::before {
-    opacity: 1;
 }
+
 .method-icon {
     font-size: 1.2em;
     margin-right: 15px;
     color: var(--text-bright);
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
 }
+
+.contact-method:hover .method-icon {
+    opacity: 1;
+}
+
 .method-details {
     flex: 1;
-    display: flex;
-    flex-direction: column;
 }
+
 .method-name {
     font-size: 0.9em;
     margin-bottom: 4px;
+    color: var(--text-bright);
 }
+
 .method-address {
     font-size: 0.8em;
     color: var(--text-muted);
+    transition: color 0.3s ease;
 }
+
+.contact-method:hover .method-address {
+    color: var(--text-bright);
+}
+
 .connection-indicator {
     margin-left: 10px;
     transition: transform 0.3s ease;
@@ -638,6 +649,7 @@ body::before {
 .contact-method:hover .connection-indicator {
     transform: translateX(5px);
 }
+
 @media (max-width: 768px) {
     .contact-grid {
         gap: 15px;
@@ -656,3 +668,211 @@ body::before {
         font-size: 0.9em;
     }
 }
+
+.project-grid {
+    display: grid;
+    gap: 20px;
+    margin-top: 20px;
+    max-width: 800px;
+}
+
+.project-card {
+    background: linear-gradient(
+        145deg,
+        rgba(42, 90, 90, 0.05) 0%,
+        rgba(42, 90, 90, 0.15) 100%
+    );
+    border: 1px solid var(--border-color);
+    clip-path: polygon(
+        0 0,
+        98% 0,
+        100% 15px,
+        100% 100%,
+        2% 100%,
+        0 calc(100% - 15px)
+    );
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow:
+        0 5px 15px rgba(0, 0, 0, 0.2),
+        0 0 30px rgba(42, 90, 90, 0.1),
+        inset 0 1px rgba(255, 255, 255, 0.1);
+    position: relative;
+    backdrop-filter: blur(5px);
+}
+
+.project-card:hover {
+    transform: translateY(-2px);
+    box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.3),
+        0 0 40px rgba(42, 90, 90, 0.2),
+        inset 0 1px rgba(255, 255, 255, 0.2);
+    border-color: var(--text-bright);
+}
+
+.project-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(42, 90, 90, 0.1);
+}
+
+.project-title {
+    color: var(--text-bright);
+    font-size: 1em;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+.project-content {
+    padding: 20px;
+    max-height: none;
+    opacity: 1;
+    transform: none;
+}
+
+.project-description {
+    color: var(--text-muted);
+    font-size: 0.9em;
+    margin-bottom: 15px;
+    line-height: 1.5;
+}
+
+.project-tech-stack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 15px;
+}
+
+.tech-tag {
+    background: rgba(42, 90, 90, 0.2);
+    padding: 4px 8px;
+    border-radius: 3px;
+    font-size: 0.8em;
+    color: var(--text-muted);
+}
+
+/* Status Grid Styling */
+.status-grid {
+    display: grid;
+    gap: 20px;
+    margin-top: 20px;
+    max-width: 800px;
+}
+
+.status-card {
+    background: linear-gradient(
+        145deg,
+        rgba(42, 90, 90, 0.05) 0%,
+        rgba(42, 90, 90, 0.15) 100%
+    );
+    border: 1px solid var(--border-color);
+    clip-path: polygon(
+        0 0,
+        98% 0,
+        100% 15px,
+        100% 100%,
+        2% 100%,
+        0 calc(100% - 15px)
+    );
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow:
+        0 5px 15px rgba(0, 0, 0, 0.2),
+        0 0 30px rgba(42, 90, 90, 0.1),
+        inset 0 1px rgba(255, 255, 255, 0.1);
+    position: relative;
+    backdrop-filter: blur(5px);
+}
+
+.status-card:hover {
+    transform: translateY(-2px);
+    box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.3),
+        0 0 40px rgba(42, 90, 90, 0.2),
+        inset 0 1px rgba(255, 255, 255, 0.2);
+    border-color: var(--text-bright);
+}
+
+.status-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(42, 90, 90, 0.1);
+}
+
+.status-name {
+    color: var(--text-bright);
+    font-size: 1em;
+    font-weight: bold;
+    letter-spacing: 1px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.status-content {
+    padding: 20px;
+}
+
+.status-metrics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+    margin-top: 10px;
+}
+
+.metric {
+    background: rgba(42, 90, 90, 0.05);
+    padding: 10px;
+    border-left: 2px solid var(--border-color);
+}
+
+.metric-label {
+    font-size: 0.8em;
+    color: var(--text-muted);
+    margin-bottom: 5px;
+}
+
+.metric-value {
+    font-size: 1.1em;
+    color: var(--text-bright);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .project-grid,
+    .status-grid {
+        gap: 15px;
+    }
+
+    .project-header,
+    .status-header {
+        padding: 15px;
+    }
+
+    .project-content,
+    .status-content {
+        padding: 15px;
+    }
+
+    .status-metrics {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .project-header,
+    .status-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    .tech-tag {
+        font-size: 0.75em;
+    }
+}

index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
     <head>
-	<title>elia dot network</title>
+        <title>elia dot network</title>
         <link rel="stylesheet" href="assets/index.css" />
         <meta charset="UTF-8" />
     </head>
@@ -31,9 +31,11 @@
                     <div class="header-metrics">
                         <div class="timestamp" id="current-time"></div>
                         <div class="separator">|</div>
-                        <div class="status-average" id="average-uptime">Initializing...</div>
+                        <div class="status-average" id="average-uptime">
+                            Initializing...
+                        </div>
                     </div>
-                    <div class="location">ZÜRICH, SWITZERLAND</div>
+                    <div class="location">X-SERVED-AT</div>
                 </div>
                 <div class="section-title">ELIA.NETWORK</div>
                 <div class="entry-list">
@@ -103,92 +105,142 @@
                 </div>
             </section>
 
+            <!-- Projects Section -->
             <section id="projects" class="section">
                 <div class="section-title">PROJECTS</div>
-
+                <div class="project-grid">
-                <div class="project-item">
+                    <div class="project-card">
-                    <div class="project-header">
+                        <div class="project-header">
-                        <div class="entry">CAS</div>
+                            <div class="project-title">CAS</div>
-                        <span class="expand-icon">+</span>
+                        </div>
-                    </div>
+                        <div class="project-content">
-                    <div class="project-content">
+                            <div class="project-description">
-                        <p>
+                                Open-Source Language Model interface for use in
-                            Open-Source Language Model interface for use in web
+                                web browsers.
-                            browsers.
+                            </div>
-                        </p>
+                            <div class="project-tech-stack">
-                        <div class="project-links">
+                                <span class="tech-tag">JavaScript</span>
+                                <span class="tech-tag">LLama</span>
+                            </div>
                             <a
                                 href="https://git.elia.network/elia/cas/"
-                                class="project-link"
+                                class="contact-method"
-                                >⎔ GIT →</a
                             >
+                                <span class="method-icon">⎔</span>
+                                <span class="method-details">
+                                    <span class="method-name">Repository</span>
+                                    <span class="method-address"
+                                        >git.elia.network/elia/cas</span
+                                    >
+                                </span>
+                                <span class="connection-indicator">→</span>
+                            </a>
                         </div>
                     </div>
-                </div>
 
-                <div class="project-item">
+                    <div class="project-card">
-                    <div class="project-header">
+                        <div class="project-header">
-                        <div class="entry">cchat</div>
+                            <div class="project-title">cchat</div>
-                        <span class="expand-icon">+</span>
+                        </div>
-                    </div>
+                        <div class="project-content">
-                    <div class="project-content">
+                            <div class="project-description">
-                        <p>
+                                Language model interface designed for autonomous
-                            Language model interface designed for autonomous
+                                agents that utilize the internet.
-                            agents that utilize the internet.
+                            </div>
-                        </p>
+                            <div class="project-tech-stack">
-                        <div class="project-links">
+                                <span class="tech-tag">Python</span>
+                                <span class="tech-tag">LLama</span>
+                            </div>
                             <a
                                 href="https://git.elia.network/informaticker/cchat"
-                                class="project-link"
+                                class="contact-method"
-                                >⎔ GIT →</a
                             >
+                                <span class="method-icon">⎔</span>
+                                <span class="method-details">
+                                    <span class="method-name">Repository</span>
+                                    <span class="method-address"
+                                        >git.elia.network/informaticker/cchat</span
+                                    >
+                                </span>
+                                <span class="connection-indicator">→</span>
+                            </a>
                         </div>
                     </div>
-                </div>
 
-                <div class="project-item">
+                    <div class="project-card">
-                    <div class="project-header">
+                        <div class="project-header">
-                        <div class="entry">discord-jellyfin-bot</div>
+                            <div class="project-title">
-                        <span class="expand-icon">+</span>
+                                discord-jellyfin-bot
-                    </div>
+                            </div>
-                    <div class="project-content">
+                        </div>
-                        <p>
+                        <div class="project-content">
-                            Discord music bot utilizing Jellyfin to play your
+                            <div class="project-description">
-                            own music at crisp 96kbps Opus quality.
+                                Discord music bot utilizing Jellyfin to play
-                        </p>
+                                your own music at crisp 96kbps Opus quality.
-                        <div class="project-links">
+                            </div>
+                            <div class="project-tech-stack">
+                                <span class="tech-tag">Python</span>
+                                <span class="tech-tag">Discord</span>
+                                <span class="tech-tag">TypeScript</span>
+                            </div>
                             <a
                                 href="https://git.elia.network/informaticker/discord-jellyfin-bot"
-                                class="project-link"
+                                class="contact-method"
-                                >⎔ GIT →</a
                             >
+                                <span class="method-icon">⎔</span>
+                                <span class="method-details">
+                                    <span class="method-name">Repository</span>
+                                    <span class="method-address"
+                                        >git.elia.network/.../discord-jellyfin-bot</span
+                                    >
+                                </span>
+                                <span class="connection-indicator">→</span>
+                            </a>
                         </div>
                     </div>
-                </div>
 
-                <div class="project-item">
+                    <div class="project-card">
-                    <div class="project-header">
+                        <div class="project-header">
-                        <div class="entry">netwatch</div>
+                            <div class="project-title">netwatch</div>
-                        <span class="expand-icon">+</span>
+                        </div>
-                    </div>
+                        <div class="project-content">
-                    <div class="project-content">
+                            <div class="project-description">
-                        <p>
+                                Monitor internet connectivity in regions of war
-                            Monitor internet connectivity in regions of war and
+                                and conflict.
-                            conflict.
+                            </div>
-                        </p>
+                            <div class="project-tech-stack">
-                        <div class="project-links">
+                                <span class="tech-tag">Python</span>
+                                <span class="tech-tag">Networking</span>
+                            </div>
                             <a
                                 href="https://git.elia.network/elia/netwatch"
-                                class="project-link"
+                                class="contact-method"
-                                >⎔ GIT →</a
                             >
-                        </div>
+                                <span class="method-icon">⎔</span>
-                        <div class="project-links">
+                                <span class="method-details">
+                                    <span class="method-name">Repository</span>
+                                    <span class="method-address"
+                                        >git.elia.network/elia/netwatch</span
+                                    >
+                                </span>
+                                <span class="connection-indicator">→</span>
+                            </a>
                             <a
                                 href="https://netwatch.elia.network"
-                                class="project-link"
+                                class="contact-method"
-                                >⎔ NETWATCH →</a
                             >
+                                <span class="method-icon">◈</span>
+                                <span class="method-details">
+                                    <span class="method-name"
+                                        >Live Instance</span
+                                    >
+                                    <span class="method-address"
+                                        >netwatch.elia.network</span
+                                    >
+                                </span>
+                                <span class="connection-indicator">→</span>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </section>
@@ -212,19 +264,29 @@
                             </div>
                         </div>
                         <div class="contact-content">
-                            <a href="mailto:alerts@elia.network" class="contact-method">
+                            <a
+                                href="mailto:alerts@elia.network"
+                                class="contact-method"
+                            >
                                 <span class="method-icon">⌘</span>
                                 <span class="method-details">
                                     <span class="method-name">ALERTS</span>
-                                    <span class="method-address">alerts@elia.network</span>
+                                    <span class="method-address"
+                                        >alerts@elia.network</span
+                                    >
                                 </span>
                                 <span class="connection-indicator">→</span>
                             </a>
-                            <a href="mailto:noc@elia.network" class="contact-method">
+                            <a
+                                href="mailto:noc@elia.network"
+                                class="contact-method"
+                            >
                                 <span class="method-icon">⌘</span>
                                 <span class="method-details">
                                     <span class="method-name">NOC</span>
-                                    <span class="method-address">noc@elia.network</span>
+                                    <span class="method-address"
+                                        >noc@elia.network</span
+                                    >
                                 </span>
                                 <span class="connection-indicator">→</span>
                             </a>
@@ -240,11 +302,16 @@
                             </div>
                         </div>
                         <div class="contact-content">
-                            <a href="https://t.me/beslikmeister" class="contact-method">
+                            <a
+                                href="https://t.me/beslikmeister"
+                                class="contact-method"
+                            >
                                 <span class="method-icon">⌥</span>
                                 <span class="method-details">
                                     <span class="method-name">TELEGRAM</span>
-                                    <span class="method-address">@beslikmeister</span>
+                                    <span class="method-address"
+                                        >@beslikmeister</span
+                                    >
                                 </span>
                                 <span class="connection-indicator">→</span>
                             </a>