Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
start [2024/12/06 15:57] – kymkistart [2025/04/15 10:24] (current) – kymki
Line 5: Line 5:
     <p>     <p>
         Welcome to my <strong>project journal</strong>, my place for tracking, organizing, and sharing projects.<br/><br/>         Welcome to my <strong>project journal</strong>, my place for tracking, organizing, and sharing projects.<br/><br/>
-        Here, I document my ongoing work, research, and ideas in a clear, structured format.<br/><br/>+        It is not a landing page for my personal brand. It is maintained as a digital garden - pruned, reshaped, parts wild, parts neat - for ongoing work, research, and ideas.<br/><br/>
         The site is meant to serve as both a personal archive and a way to share my work with collaborators and visitors like you. <br/><br/>         The site is meant to serve as both a personal archive and a way to share my work with collaborators and visitors like you. <br/><br/>
         It’s built with simplicity and functionality in mind.<br/><br/>         It’s built with simplicity and functionality in mind.<br/><br/>
 +        For your own safety, use the Ramble Meter as an indicator of the state of the information in a post.<br/><br/>
 +        In the <strong>top right corner</strong> toggle dark mode if that interests you.<br/><br/>
     </p>     </p>
  
  
 </div> </div>
-</html> 
- 
-<html> 
-<head> 
-  <meta charset="UTF-8"> 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-  <title>Ramble Meter</title> 
-  <style> 
-    /* Container for the entire Ramble Meter */ 
-    .ramble-meter-container { 
-      display: flex; 
-      align-items: center; 
-      justify-content: space-between; 
-      margin: 20px auto; 
-      width: 500px; /* Adjust for layout */ 
-      font-family: Arial, sans-serif; 
-    } 
- 
-    /* Ramble Meter wrapper */ 
-    .ramble-meter-wrapper { 
-      display: flex; 
-      flex-direction: column; 
-      align-items: center; 
-    } 
- 
-    /* Ramble Meter */ 
-    .ramble-meter { 
-      position: relative; 
-      width: 200px; /* Scaled down */ 
-      height: 40px; 
-      background: linear-gradient(to right, green, yellow, orange, red); 
-      border-radius: 20px; 
-      overflow: hidden; 
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 
-      margin-bottom: 10px; 
-    } 
- 
-    /* Needle */ 
-    .needle { 
-      position: absolute; 
-      top: 5px; /* Adjust for centering */ 
-      left: 50%; /* Default position */ 
-      width: 4px; /* Visible width */ 
-      height: 30px; 
-      background: black; 
-      border-radius: 2px; 
-      z-index: 2; 
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Glow effect */ 
-    } 
- 
-    /* Label in the middle of the meter */ 
-    .meter-label { 
-      position: absolute; 
-      top: 50%; 
-      left: 50%; 
-      transform: translate(-50%, -50%); 
-      font-size: 12px; 
-      font-weight: bold; 
-      color: #fff; 
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
-      z-index: 3; 
-    } 
- 
-    /* Scale below the meter */ 
-    .scale { 
-      display: flex; 
-      justify-content: space-between; 
-      width: 100%; 
-      font-size: 10px; 
-      color: white; 
-      margin-top: 5px; 
-    } 
- 
-    /* Message box */ 
-    .message-box { 
-      background: #333; 
-      color: #fff; 
-      font-size: 12px; 
-      padding: 10px; 
-      border-radius: 5px; 
-      width: 200px; 
-      text-align: center; 
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
-    } 
- 
-    /* Scale text styling */ 
-    .scale-text { 
-      margin-top: 5px; 
-      font-size: 12px; 
-      color: white; 
-      text-align: center; 
-    } 
-  </style> 
-  <script> 
-    document.addEventListener("DOMContentLoaded", () => { 
-      const needle = document.querySelector(".needle"); 
-      const rambleMeter = document.querySelector(".ramble-meter"); 
-      const level = rambleMeter.getAttribute("data-level"); // Read the level from the attribute (0-100) 
-      needle.style.left = `${Math.min(Math.max(level, 0), 100)}%`; // Clamp between 0 and 100 
-    }); 
-  </script> 
-</head> 
-<body> 
-  <div class="ramble-meter-container"> 
-    <!-- Ramble Meter --> 
-    <div class="ramble-meter-wrapper"> 
-      <div class="ramble-meter" data-level="70"> <!-- Adjust level here (0-100) --> 
-        <div class="meter-label">Ramble Meter</div> 
-        <div class="needle"></div> 
-      </div> 
-      <!-- Scale --> 
-      <div class="scale"> 
-        <span>Low</span> 
-        <span>Medium</span> 
-        <span>High</span> 
-        <span>Critical</span> 
-      </div> 
-      <!-- Scale text --> 
-      <div class="scale-text">Current Ramble Intensity</div> 
-    </div> 
-    <!-- Message Box --> 
-    <div class="message-box"> 
-      Warning: The ramble level is high! 🗣️ <br> 
-      Adjust focus to reduce ramble! 
-    </div> 
-  </div> 
-</body> 
 </html> </html>