elleoma/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

big update

Browse Source
This commit is contained in:
Amoelle
2025-07-25 13:35:22 +03:00
parent e72efcb828
commit d513c2565c
11 changed files with 373 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
about.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
@@ -13,7 +13,7 @@
<div class="scroll-container"> <div class="scroll-container">
<div class="center-window"> <div class="center-window">
<header> <header>
<h1>elleoma@0day ~ > ls</h1> <h1>elleoma@logs ~ > ls</h1>
<nav> <nav>
<a href="index.html">./home</a> <a href="index.html">./home</a>
<a href="projects.html">./projects</a> <a href="projects.html">./projects</a>

4
blog.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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 href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
@@ -13,7 +13,7 @@
<div class="scroll-container"> <div class="scroll-container">
<div class="center-window"> <div class="center-window">
<header> <header>
<h1>elleoma@0day ~ > ls</h1> <h1>elleoma@logs ~ > ls</h1>
<nav> <nav>
<a href="index.html">./home</a> <a href="index.html">./home</a>
<a href="projects.html">./projects</a> <a href="projects.html">./projects</a>

4
contact.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
@@ -11,7 +11,7 @@
<div class="scroll-container"> <div class="scroll-container">
<div class="center-window"> <div class="center-window">
<header> <header>
<h1>elleoma@0day ~ > ls</h1> <h1>elleoma@logs ~ > ls</h1>
<nav> <nav>
<a href="index.html">./home</a> <a href="index.html">./home</a>
<a href="projects.html">./projects</a> <a href="projects.html">./projects</a>

BIN
favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

19
index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
@@ -13,7 +13,7 @@
<div class="scroll-container"> <div class="scroll-container">
<div class="center-window"> <div class="center-window">
<header> <header>
<h1>elleoma@0day ~ > ls</h1> <h1>elleoma@logs ~ > ls</h1>
<nav> <nav>
<a href="index.html">./home</a> <a href="index.html">./home</a>
<a href="projects.html">./projects</a> <a href="projects.html">./projects</a>
@@ -26,6 +26,7 @@
<main> <main>
<section class="terminal-box"> <section class="terminal-box">
<h2>whoami</h2> <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 <p>I'm a Ukrainian student and a unix/linux & open-source enthusiast, trying to get into cybersecurity, gain
some practical skills.</p> some practical skills.</p>
<p>Check my blog post to see more...</p> <p>Check my blog post to see more...</p>
@@ -42,11 +43,18 @@
</ul> </ul>
<h3>Self-hosting</h3> <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 <div class="terminal-container">
desec.io for DNS.</p> <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"> <p dir="auto">
<a target="_blank" rel="noopener noreferrer nofollow" href="../self-host.png"> <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> </a>
</p> </p>
@@ -64,6 +72,7 @@
</footer> </footer>
</div> </div>
</div> </div>
<script src="terminal-status.js"></script>
</body> </body>
</html> </html>

BIN
pfp.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

27
posts/whoami.html
View File

@@ -25,6 +25,7 @@
<main> <main>
<section class="markdown-container"> <section class="markdown-container">
<img src="../pfp.jpg" class="pfp" alt="elleoma" width="200" />
<h1>~ &gt; whoami</h1> <h1>~ &gt; whoami</h1>
<p>I’m a Ukrainian student and a unix/linux & open-source enthusiast, trying to get into cybersecurity, gain <p>I’m a Ukrainian student and a unix/linux & open-source enthusiast, trying to get into cybersecurity, gain
some practical skills.</p> 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>Currently hosting a bunch of stuff on it via Docker containers with help of desec.io.</p>
<p dir="auto"> <p dir="auto">
<a target="_blank" rel="noopener noreferrer nofollow" href="../self-host.png"> <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> </a>
</p> </p>
<hr /> <hr />
@@ -100,21 +101,17 @@
<p>Here’s my <code>fastfetch</code> output:</p> <p>Here’s my <code>fastfetch</code> output:</p>
<pre><code>~/shit ❯ fastfetch <pre><code>~/shit ❯ fastfetch
OS : Arch Linux x86_64 OS : Arch Linux x86_64
Kernel : Linux 6.15.5-arch1-1 Kernel : Linux 6.15.5-arch1-1
Packages : 2025 (pacman), 10 (flatpak-system), 1 (flatpak-user) Display : 1920x1080 @ 144 Hz in 15" [Built-in]
Display : 1920x1080 @ 144 Hz in 15" [Built-in] Terminal : tmux 3.5a
WM : Hyprland 0.49.0 (Wayland)
Terminal : tmux 3.5a
CPU : 12th Gen Intel(R) Core(TM) i7-12650H CPU : 12th Gen Intel(R) Core(TM) i7-12650H
GPU : GeForce RTX 4060 Max-Q / Mobile GPU : GeForce RTX 4060 Max-Q / Mobile
GPU : UHD Graphics GPU : UHD Graphics
GPU Driver : nvidia (proprietary) 575.64.03 GPU Driver : nvidia (proprietary) 575.64.03
GPU Driver : i915 GPU Driver : i915
Memory : 9.28 GiB / 15.32 GiB (61%) OS Age : 182 days
OS Age : 182 days
Uptime : 9 hours, 40 mins
</code></pre> </code></pre>
<p>My dotfiles are here: <a class="post-title" <p>My dotfiles are here: <a class="post-title"

4
projects.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
@@ -13,7 +13,7 @@
<div class="scroll-container"> <div class="scroll-container">
<div class="center-window"> <div class="center-window">
<header> <header>
<h1>elleoma@0day ~ > ls</h1> <h1>elleoma@logs ~ > ls</h1>
<nav> <nav>
<a href="index.html">./home</a> <a href="index.html">./home</a>
<a href="projects.html">./projects</a> <a href="projects.html">./projects</a>

BIN
self-host.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 680 KiB

After

Width:  |  Height:  |  Size: 721 KiB

195
styles.css
View File

@@ -1,11 +1,11 @@
:root { :root {
--bg: #1a1a1a; --bg: #282828; /* Gruvbox dark background */
--fg: #e0e0e0; --fg: #ebdbb2; /* Gruvbox light text */
--panel: #2d2d2d; --panel: #3c3836; /* Gruvbox dark panel */
--border: #cccccc; --border: #665c54; /* Gruvbox gray */
--link: #66d9ef; --link: #83a598; /* Gruvbox blue */
--accent: #ffcc00; --accent: #d79921; /* Gruvbox yellow */
--muted: #888888; --muted: #a89984; /* Gruvbox light gray */
} }
html, body { html, body {
@@ -44,9 +44,18 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
.pfp {
position: relative;
float: right;
clear: both;
margin-left: 10px;
margin-bottom: 10px;
border-radius: 30px;
}
.rainbow-text { .rainbow-text {
font-size: 1.2rem; 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-size: 300%;
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
@@ -61,7 +70,7 @@ a:hover {
.scroll-container { .scroll-container {
width: 100%; width: 100%;
max-width: 900px; max-width: 1000px;
padding: 2rem 1rem; padding: 2rem 1rem;
margin: 0 auto; margin: 0 auto;
} }
@@ -131,10 +140,166 @@ nav a:hover {
font-size: 0.9em; font-size: 0.9em;
} }
footer { /* Terminal Status Display - Gruvbox VHS Style */
margin-top: 2rem; .terminal-container {
border-top: 2px dashed var(--border); width: 85%;
padding-top: 1rem; background: linear-gradient(135deg, #1d2021, #282828);
text-align: center; border: 2px solid #d79921b0;
color: var(--link); 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);
} }

158
terminal-status.js Normal file
View File

@@ -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);