big update

2025-07-25 13:35:22 +03:00
parent e72efcb828
commit d513c2565c
11 changed files with 373 additions and 44 deletions
--- a/about.html
+++ b/about.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>elleoma@0day ~ > About</title>
+  <title>elleoma@logs ~ > About</title>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
 </head>
@@ -13,7 +13,7 @@
  <div class="scroll-container">
    <div class="center-window">
      <header>
-        <h1>elleoma@0day ~ > ls</h1>
+        <h1>elleoma@logs ~ > ls</h1>
        <nav>
          <a href="index.html">./home</a>
          <a href="projects.html">./projects</a>
--- a/blog.html
+++ b/blog.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>elleoma@0day ~ > Blog</title>
+  <title>elleoma@logs ~ > Blog</title>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
 </head>
@@ -13,7 +13,7 @@
  <div class="scroll-container">
    <div class="center-window">
      <header>
-        <h1>elleoma@0day ~ > ls</h1>
+        <h1>elleoma@logs ~ > ls</h1>
        <nav>
          <a href="index.html">./home</a>
          <a href="projects.html">./projects</a>
--- a/contact.html
+++ b/contact.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>elleoma@0day ~ > Contact</title>
+  <title>elleoma@logs ~ > Contact</title>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
 </head>
@@ -11,7 +11,7 @@
  <div class="scroll-container">
    <div class="center-window">
      <header>
-        <h1>elleoma@0day ~ > ls</h1>
+        <h1>elleoma@logs ~ > ls</h1>
        <nav>
          <a href="index.html">./home</a>
          <a href="projects.html">./projects</a>
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>elleoma@0day ~ > ls</title>
+  <title>elleoma@logs ~ > ls</title>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
 </head>
@@ -13,7 +13,7 @@
  <div class="scroll-container">
    <div class="center-window">
      <header>
-        <h1>elleoma@0day ~ > ls</h1>
+        <h1>elleoma@logs ~ > ls</h1>
        <nav>
          <a href="index.html">./home</a>
          <a href="projects.html">./projects</a>
@@ -26,6 +26,7 @@
      <main>
        <section class="terminal-box">
          <h2>whoami</h2>
+			    <img src="pfp.jpg" class="pfp" alt="elleoma" width="200" />
          <p>I'm a Ukrainian student and a unix/linux & open-source enthusiast, trying to get into cybersecurity, gain
            some practical skills.</p>
          <p>Check my blog post to see more...</p>
@@ -42,11 +43,18 @@
          </ul>

          <h3>Self-hosting</h3>
-          <p>I have a Raspberry Pi 5 (4GB RAM) and I'm currently hosting multiple services on it with Docker and
-            desec.io for DNS.</p>
+          <div class="terminal-container">
+            <div class="terminal-header">
+              <!-- <div class="terminal-title">SYSTEM MONITOR - RASPBERRY PI 5</div> -->
+            </div>
+            
+            <div class="terminal-body" id="main-terminal">elleoma@logs:~$ </div>
+          </div>
+
+          <p>I have a Raspberry Pi 5 (4GB RAM) and I'm currently hosting multiple services on it with Docker and desec.io for DNS.</p>
          <p dir="auto">
            <a target="_blank" rel="noopener noreferrer nofollow" href="../self-host.png">
-              <img src="../self-host.png" alt="My self-hosting setup" style="max-width: 100%;">
+              <img src="../self-host.png" alt="My self-hosting setup" style="max-width: 100%;" class="center">
            </a>
          </p>

@@ -64,6 +72,7 @@
      </footer>
    </div>
  </div>
+  <script src="terminal-status.js"></script>
 </body>

 </html>
--- a/pfp.jpg
+++ b/pfp.jpg
--- a/posts/whoami.html
+++ b/posts/whoami.html
@@ -25,6 +25,7 @@

      <main>
        <section class="markdown-container">
+			    <img src="../pfp.jpg" class="pfp" alt="elleoma" width="200" />
          <h1>~ &gt; whoami</h1>
          <p>I’m a Ukrainian student and a unix/linux & open-source enthusiast, trying to get into cybersecurity, gain
            some practical skills.</p>
@@ -48,7 +49,7 @@
          <p>Currently hosting a bunch of stuff on it via Docker containers with help of desec.io.</p>
          <p dir="auto">
            <a target="_blank" rel="noopener noreferrer nofollow" href="../self-host.png">
-              <img src="../self-host.png" alt="My self-hosting setup" style="max-width: 60%;">
+              <img src="../self-host.png" alt="My self-hosting setup" style="max-width: 60%;" class="center">
            </a>
          </p>
          <hr />
@@ -100,21 +101,17 @@
          <p>Here’s my <code>fastfetch</code> output:</p>
          <pre><code>~/shit ❯ fastfetch

-              OS : Arch Linux x86_64
-              Kernel : Linux 6.15.5-arch1-1
-              Packages : 2025 (pacman), 10 (flatpak-system), 1 (flatpak-user)
-              Display : 1920x1080 @ 144 Hz in 15" [Built-in]
-              WM : Hyprland 0.49.0 (Wayland)
-              Terminal : tmux 3.5a
-
-              CPU : 12th Gen Intel(R) Core(TM) i7-12650H
-              GPU : GeForce RTX 4060 Max-Q / Mobile
-              GPU : UHD Graphics
-              GPU Driver : nvidia (proprietary) 575.64.03
-              GPU Driver : i915
-              Memory : 9.28 GiB / 15.32 GiB (61%)
-              OS Age : 182 days
-              Uptime : 9 hours, 40 mins
+  OS : Arch Linux x86_64
+  Kernel : Linux 6.15.5-arch1-1
+  Display : 1920x1080 @ 144 Hz in 15" [Built-in]
+  Terminal : tmux 3.5a
+  
+  CPU : 12th Gen Intel(R) Core(TM) i7-12650H
+  GPU : GeForce RTX 4060 Max-Q / Mobile
+  GPU : UHD Graphics
+  GPU Driver : nvidia (proprietary) 575.64.03
+  GPU Driver : i915
+  OS Age : 182 days
            </code></pre>

          <p>My dotfiles are here: <a class="post-title"
--- a/projects.html
+++ b/projects.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>elleoma@0day ~ > Projects</title>
+  <title>elleoma@logs ~ > Projects</title>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
 </head>
@@ -13,7 +13,7 @@
  <div class="scroll-container">
    <div class="center-window">
      <header>
-        <h1>elleoma@0day ~ > ls</h1>
+        <h1>elleoma@logs ~ > ls</h1>
        <nav>
          <a href="index.html">./home</a>
          <a href="projects.html">./projects</a>
--- a/self-host.png
+++ b/self-host.png
--- a/styles.css
+++ b/styles.css
@@ -1,11 +1,11 @@
 :root {
-  --bg: #1a1a1a;
-  --fg: #e0e0e0;
-  --panel: #2d2d2d;
-  --border: #cccccc;
-  --link: #66d9ef;
-  --accent: #ffcc00;
-  --muted: #888888;
+  --bg: #282828; /* Gruvbox dark background */
+  --fg: #ebdbb2; /* Gruvbox light text */
+  --panel: #3c3836; /* Gruvbox dark panel */
+  --border: #665c54; /* Gruvbox gray */
+  --link: #83a598; /* Gruvbox blue */
+  --accent: #d79921; /* Gruvbox yellow */
+  --muted: #a89984; /* Gruvbox light gray */
 }

 html, body {
@@ -44,9 +44,18 @@ a:hover {
  text-decoration: underline;
 }

+.pfp {
+	position: relative;
+	float: right;
+	clear: both;
+	margin-left: 10px;
+	margin-bottom: 10px;
+	border-radius: 30px;
+}
+
 .rainbow-text {
  font-size: 1.2rem;
-  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
+  background: linear-gradient(90deg, #fb4934, #fe8019, #fabd2f, #b8bb26, #83a598, #d3869b, #fb4934);
  background-size: 300%;
  background-clip: text;
  -webkit-background-clip: text;
@@ -61,7 +70,7 @@ a:hover {

 .scroll-container {
  width: 100%;
-  max-width: 900px;
+  max-width: 1000px;
  padding: 2rem 1rem;
  margin: 0 auto;
 }
@@ -131,10 +140,166 @@ nav a:hover {
  font-size: 0.9em;
 }

-footer {
-  margin-top: 2rem;
-  border-top: 2px dashed var(--border);
-  padding-top: 1rem;
-  text-align: center;
-  color: var(--link);
+/* Terminal Status Display - Gruvbox VHS Style */
+.terminal-container {
+  width: 85%;
+  background: linear-gradient(135deg, #1d2021, #282828);
+  border: 2px solid #d79921b0;
+  border-radius: 0;
+  box-shadow: 
+    0 0 20px #d7992150,
+    0 20px 20px #d7992130,
+    inset 0 0 10px rgba(215, 153, 33, 0.1);
+  overflow: hidden;
+  margin: 2rem auto 4rem;
+  position: relative;
+}
+
+.terminal-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    transparent 50%,
+    rgba(235, 219, 178, 0.03) 50%
+  );
+  background-size: 100% 4px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.terminal-container::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(235, 219, 178, 0.02);
+  animation: flicker 0.15s infinite linear alternate;
+  pointer-events: none;
+  z-index: 2;
+}
+
+@keyframes flicker {
+  0% { opacity: 1; }
+  100% { opacity: 0.98; }
+}
+
+/* .terminal-header { */
+/*   background: linear-gradient(135deg, #1d2021, #282828); */
+/*   padding: 0.9rem 1rem; */
+/*   border-bottom: 1px solid #d79921ee; */
+/*   font-size: 1rem; */
+/*   color: #d79921ee; */
+/*   text-transform: uppercase; */
+/*   letter-spacing: 1px; */
+/*   position: relative; */
+/*   z-index: 3; */
+/* } */
+
+/* .terminal-header::before { */
+/*   content: '● REC'; */
+/*   position: absolute; */
+/*   right: 1rem; */
+/*   top: 50%; */
+/*   transform: translateY(-50%); */
+/*   color: #fb4934; */
+/*   animation: blink-rec 2s infinite; */
+/*   font-weight: bold; */
+/* } */
+/**/
+/* @keyframes blink-rec { */
+/*   0%, 50% { opacity: 1; } */
+/*   51%, 100% { opacity: 0.3; } */
+/* } */
+
+/* .terminal-title { */
+/*   margin: 0; */
+/*   font-weight: bold; */
+/* } */
+
+.terminal-body {
+  padding: 1rem;
+  min-height: 280px;
+  font-size: 0.9rem;
+  line-height: 1.3;
+  white-space: pre-wrap;
+  color: #ebdbb2;
+  position: relative;
+  z-index: 3;
+  overflow-x: auto;
+}
+
+.terminal-body::after {
+  content: '█';
+  color: #d79921;
+  display: inline;
+  animation: blink-cursor 1.2s infinite;
+  font-weight: bold;
+}
+
+.terminal-body.no-animation::after {
+  animation: none;
+}
+
+@keyframes blink-cursor {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+.prompt {
+  color: #b8bb26; /* Gruvbox green */
+  font-weight: bold;
+}
+
+.status-active { 
+  color: #b8bb26; /* Gruvbox green */
+  text-shadow: 0 0 5px #b8bb26;
+}
+
+.status-loading { 
+  color: #fabd2f; /* Gruvbox yellow */
+  text-shadow: 0 0 5px #fabd2f;
+  animation: pulse-yellow 1.5s infinite;
+}
+
+.status-inactive { 
+  color: #928374; /* Gruvbox gray */
+}
+
+.status-error { 
+  color: #fb4934; /* Gruvbox red */
+  text-shadow: 0 0 5px #fb4934;
+}
+
+@keyframes pulse-yellow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.service-name { 
+  color: #83a598; /* Gruvbox blue */
+  font-weight: bold;
+}
+
+.service-url { 
+  color: #8ec07c; /* Gruvbox aqua */
+  font-style: italic;
+}
+
+.terminal-body {
+  text-shadow: 0 0 2px currentColor;
+}
+
+.terminal-body * {
+  text-shadow: inherit;
+}
+
+.terminal-container {
+  transform: perspective(300px) rotateX(8deg);
+  filter: contrast(1.1) brightness(1.05);
 }
--- a/terminal-status.js
+++ b/terminal-status.js
@@ -0,0 +1,158 @@
+/**
+ * Terminal Status Display - Retro VHS Style
+ * Adapted from Dave Eddy's terminal emulator for elleoma@logs
+ */
+
+const TYPING_SPEED = 80;
+const INITIAL_DELAY = 1500;
+const SUBSEQUENT_DELAY = 8000;
+const CURSOR_BLINK_START = 1;
+const CURSOR_BLINK_END = 2;
+
+// Define your commands and their outputs
+const COMMANDS = [
+    {
+        cmd: 'curl forsen-cock.dedyn.io/status',
+        lines: [
+            'Connecting to status endpoint...',
+            '',
+            '<span class="status-active">[--------██-------██-----]</span> - <span class="service-name">main website</span> <span class="service-url">(forsen-cock.dedyn.io)</span>',
+            '<span class="status-active">[-█------██--------------]</span> - <span class="service-name">gitea instance</span> <span class="service-url">(git.forsen-cock.dedyn.io)</span>',
+            '<span class="status-active">[-█------██--------------]</span> - <span class="service-name">vaultwarden</span> <span class="service-url">(vault.forsen-cock.dedyn.io)</span>',
+            '<span class="status-loading">[------------------------]</span> - <span class="service-name">matrix server</span> <span class="service-url">(@forsen-cock.dedyn.io)</span>',
+            '<span class="status-active">[--██----██--------------]</span> - <span class="service-name">status page</span> <span class="service-url">(status.forsen-cock.dedyn.io)</span>',
+            ''
+        ]
+    },
+    {
+        cmd: 'systemctl status docker',
+        lines: [
+            '● docker.service - Docker Application Container Engine',
+            '   Loaded: loaded (/lib/systemd/system/docker.service; enabled)',
+            '   Active: <span class="status-active">active (running)</span> since Mon 2025-07-25 14:30:22 UTC',
+            '     Docs: https://docs.docker.com',
+            ' Main PID: 1024 (dockerd)',
+            '    Tasks: 42',
+            '   Memory: 156.2M',
+            ''
+        ]
+    },
+    {
+        cmd: 'docker ps --format "table {{.Names}}\\t{{.Status}}"',
+        lines: [
+            'NAMES                    STATUS',
+            'vaultwarden             <span class="status-active">Up 2 hours</span>',
+            'gitea                   <span class="status-active">Up 2 hours</span>', 
+            'nginx-proxy-manager     <span class="status-active">Up 2 hours</span>',
+            'matrix-tuwunel          <span class="status-loading">Restarting (1) 3s ago</span>',
+            'gatus                   <span class="status-active">Up 2 hours</span>',
+            ''
+        ]
+    },
+    {
+        cmd: 'htop -n 1 | head -5',
+        lines: [
+            'top - 16:45:32 up  2:15,  1 user,  load average: 0.08, 0.12, 0.09',
+            'Tasks:  42 total,   1 running,  41 sleeping,   0 stopped,   0 zombie',
+            '%Cpu(s):  2.1 us,  1.2 sy,  0.0 ni, 96.5 id,  0.2 wa,  0.0 hi,  0.0 si',
+            'MiB Mem :   3906.2 total,    852.4 free,   1247.8 used,   1806.0 buff/cache',
+            ''
+        ]
+    }
+];
+
+let terminal;
+
+function runCommand(i, cb) {
+    let o = COMMANDS[i];
+    let lines = o.lines;
+    let command = o.cmd.split('');
+    let output = lines.map((line) => line + '\n');
+    
+    let prompt = 'elleoma@logs:~$ ';
+    let items = [].concat(
+        CURSOR_BLINK_END,
+        command,
+        ['\n'],
+        output,
+        prompt,
+        CURSOR_BLINK_START,
+    );
+
+    // Clear terminal and show initial prompt
+    blinkCursorStart();
+    terminal.innerHTML = prompt;
+
+    // Simulate typing the command
+    let idx = 0;
+    function type() {
+        if (idx === items.length) {
+            cb();
+            return;
+        }
+        
+        let c = items[idx];
+        idx++;
+        
+        switch (c) {
+            case CURSOR_BLINK_START:
+                blinkCursorStart();
+                break;
+            case CURSOR_BLINK_END:
+                blinkCursorEnd();
+                break;
+            default:
+                // Handle special case for adding content after cursor
+                if (terminal.classList.contains('no-animation')) {
+                    terminal.innerHTML += c;
+                } else {
+                    // Remove cursor, add content, cursor will be re-added by CSS
+                    let content = terminal.innerHTML;
+                    terminal.innerHTML = content + c;
+                }
+                break;
+        }
+        setTimeout(type, TYPING_SPEED + Math.random() * 40);
+    }
+    type();
+}
+
+function blinkCursorStart() {
+    if (terminal) {
+        terminal.classList.remove('no-animation');
+    }
+}
+
+function blinkCursorEnd() {
+    if (terminal) {
+        terminal.classList.add('no-animation');
+    }
+}
+
+function main() {
+    terminal = document.querySelector('#main-terminal .terminal-body') || 
+               document.getElementById('main-terminal');
+    
+    if (!terminal) {
+        console.warn('Terminal element not found');
+        return;
+    }
+    
+    terminal.innerHTML = 'elleoma@logs:~$ ';
+    let i = 0;
+    let max = COMMANDS.length;
+    let delay = INITIAL_DELAY;
+
+    function loop() {
+        setTimeout(function () {
+            delay = SUBSEQUENT_DELAY;
+            runCommand(i, loop);
+            i = (i + 1) % max;
+        }, delay);
+    }
+    
+    loop();
+}
+
+// Start when DOM is loaded
+document.addEventListener('DOMContentLoaded', main);