impulsivefps
/
lemonlink
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix category styling, replace Network with Skills section, fix terminal to stop after 3 commands

This commit is contained in:
Roberth Rajala 2026-02-01 17:58:51 +01:00
parent 5dd6161b93
commit 41987fba17
3 changed files with 163 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
index.html
View File

@ -262,7 +262,7 @@
<div class="services-category"> <div class="services-category">
<h3 class="category-title"> <h3 class="category-title">
<span class="category-icon">🌐</span> <span class="category-icon">🌐</span>
Public Services <span class="category-title-text">Public Services</span>
<span class="category-badge">Open Access</span> <span class="category-badge">Open Access</span>
</h3> </h3>
<div class="services-grid"> <div class="services-grid">
@ -326,7 +326,7 @@
<div class="services-category"> <div class="services-category">
<h3 class="category-title"> <h3 class="category-title">
<span class="category-icon">🔒</span> <span class="category-icon">🔒</span>
Private Services <span class="category-title-text">Private Services</span>
<span class="category-badge">Restricted Access</span> <span class="category-badge">Restricted Access</span>
</h3> </h3>
<div class="services-grid"> <div class="services-grid">
@ -517,80 +517,74 @@
</div> </div>
</section> </section>
<!-- Network Section --> <!-- Skills & Stack Section -->
<section id="network" class="section network-section"> <section id="skills" class="section skills-section">
<div class="section-container"> <div class="section-container">
<div class="section-header"> <div class="section-header">
<span class="section-badge">🌐 Sub-Domains</span> <span class="section-badge">🛠️ Toolbox</span>
<h2 class="section-title">Network</h2> <h2 class="section-title">Skills & Stack</h2>
<p class="section-desc">Explore the LemonLink ecosystem</p> <p class="section-desc">Technologies and tools I work with</p>
</div> </div>
<div class="network-map"> <div class="skills-grid">
<div class="domain-hub"> <div class="skill-category">
<div class="hub-center"> <h3 class="skill-cat-title">Virtualization</h3>
<span class="hub-icon">🍋</span> <div class="skill-tags">
<span class="hub-text">lemonlink.eu</span> <span class="skill-tag">Proxmox VE</span>
</div> <span class="skill-tag">KVM/QEMU</span>
<div class="hub-connections"> <span class="skill-tag">LXC Containers</span>
<svg class="connections-svg" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet"> <span class="skill-tag">VMware</span>
<defs>
<linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(234,179,8,0.2)"/>
<stop offset="50%" style="stop-color:rgba(234,179,8,0.8)"/>
<stop offset="100%" style="stop-color:rgba(234,179,8,0.2)"/>
</linearGradient>
</defs>
</svg>
</div> </div>
</div> </div>
<div class="domains-grid"> <div class="skill-category">
<a href="https://cloud.lemonlink.eu" class="domain-node" target="_blank"> <h3 class="skill-cat-title">Containerization</h3>
<div class="node-pulse"></div> <div class="skill-tags">
<span class="node-name">cloud</span> <span class="skill-tag">Docker</span>
<span class="node-desc">Nextcloud Storage</span> <span class="skill-tag">Docker Compose</span>
</a> <span class="skill-tag">Portainer</span>
<a href="https://git.lemonlink.eu" class="domain-node" target="_blank"> <span class="skill-tag">Kubernetes</span>
<div class="node-pulse"></div> </div>
<span class="node-name">git</span> </div>
<span class="node-desc">Gitea Repositories</span>
</a> <div class="skill-category">
<a href="https://stats.lemonlink.eu" class="domain-node" target="_blank"> <h3 class="skill-cat-title">Networking</h3>
<div class="node-pulse"></div> <div class="skill-tags">
<span class="node-name">stats</span> <span class="skill-tag">Nginx Proxy Manager</span>
<span class="node-desc">Netdata Monitoring</span> <span class="skill-tag">Tailscale</span>
</a> <span class="skill-tag">VLANs</span>
<a href="https://photos.lemonlink.eu" class="domain-node" target="_blank"> <span class="skill-tag">WireGuard</span>
<div class="node-pulse"></div> </div>
<span class="node-name">photos</span> </div>
<span class="node-desc">Immich Gallery</span>
</a> <div class="skill-category">
<a href="https://dash.lemonlink.eu" class="domain-node" target="_blank"> <h3 class="skill-cat-title">Storage</h3>
<div class="node-pulse"></div> <div class="skill-tags">
<span class="node-name">dash</span> <span class="skill-tag">TrueNAS SCALE</span>
<span class="node-desc">Homarr Dashboard</span> <span class="skill-tag">ZFS</span>
</a> <span class="skill-tag">NFS</span>
<a href="https://vpn.lemonlink.eu" class="domain-node" target="_blank"> <span class="skill-tag">Samba</span>
<div class="node-pulse"></div> </div>
<span class="node-name">vpn</span> </div>
<span class="node-desc">Tailscale Access</span>
</a> <div class="skill-category">
<a href="https://lemonlink.eu" class="domain-node" target="_blank"> <h3 class="skill-cat-title">Monitoring</h3>
<div class="node-pulse"></div> <div class="skill-tags">
<span class="node-name">www</span> <span class="skill-tag">Netdata</span>
<span class="node-desc">This Website</span> <span class="skill-tag">Grafana</span>
</a> <span class="skill-tag">Prometheus</span>
<a href="https://git.lemonlink.eu/impulsivefps" class="domain-node" target="_blank"> <span class="skill-tag">Uptime Kuma</span>
<div class="node-pulse"></div> </div>
<span class="node-name">projects</span> </div>
<span class="node-desc">My Code</span>
</a> <div class="skill-category">
<a href="https://retro.lemonlink.eu" class="domain-node" target="_blank"> <h3 class="skill-cat-title">Development</h3>
<div class="node-pulse"></div> <div class="skill-tags">
<span class="node-name">retro</span> <span class="skill-tag">Git/Gitea</span>
<span class="node-desc">🎮 Classic Games</span> <span class="skill-tag">CI/CD</span>
</a> <span class="skill-tag">Bash</span>
<span class="skill-tag">Python</span>
</div>
</div> </div>
</div> </div>
</div> </div>

31
script.js
View File

@ -363,8 +363,6 @@ function initLimitedTerminalTyping() {
]; ];
let currentCommand = 0; let currentCommand = 0;
let cycleCount = 0;
const maxCycles = 3;
let isTyping = false; let isTyping = false;
const typeCommand = () => { const typeCommand = () => {
@ -416,13 +414,7 @@ function initLimitedTerminalTyping() {
terminal.scrollTop = terminal.scrollHeight; terminal.scrollTop = terminal.scrollHeight;
isTyping = false; isTyping = false;
currentCommand++; currentCommand = (currentCommand + 1) % commands.length;
// Count completed cycles
if (currentCommand >= commands.length) {
currentCommand = 0;
cycleCount++;
}
}, 500); }, 500);
} }
}; };
@ -430,18 +422,19 @@ function initLimitedTerminalTyping() {
typeChar(); typeChar();
}; };
// Start typing effect every 5 seconds - loops forever, clears after 3 cycles // Start typing effect - only run 3 commands total, then stop
setInterval(() => { let commandsTyped = 0;
// Reset terminal after 3 cycles const maxCommands = 3;
if (cycleCount >= maxCycles) {
// Clear all dynamic content const intervalId = setInterval(() => {
const dynamicContent = terminal.querySelectorAll('.terminal-line:nth-child(n+4), .terminal-output'); if (commandsTyped >= maxCommands) {
dynamicContent.forEach(el => el.remove()); clearInterval(intervalId);
currentCommand = 0; // Just keep the cursor blinking on last line
cycleCount = 0; return;
} }
typeCommand(); typeCommand();
}, 5000); commandsTyped++;
}, 4000);
} }
/** /**

91
styles.css
View File

@ -1709,13 +1709,23 @@ body {
.category-title { .category-title {
font-family: 'Space Grotesk', sans-serif; font-family: 'Space Grotesk', sans-serif;
font-size: 1.25rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
color: var(--color-text); color: var(--color-text-muted);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.category-title .category-icon {
font-size: 1.2rem;
}
.category-title-text {
color: var(--color-text);
} }
.category-icon { .category-icon {
@ -1766,3 +1776,78 @@ body {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
/* ========================================
Skills Section
======================================== */
.skills-section {
background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 50%, transparent 100%);
}
.skills-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.skill-category {
background: var(--color-bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem;
transition: var(--transition-normal);
}
.skill-category:hover {
transform: translateY(-3px);
border-color: rgba(234, 179, 8, 0.3);
box-shadow: var(--shadow-card);
}
.skill-cat-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.skill-tag {
padding: 0.4rem 0.8rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
border-radius: 100px;
font-size: 0.85rem;
color: var(--color-text);
transition: var(--transition-fast);
}
.skill-tag:hover {
background: rgba(234, 179, 8, 0.1);
border-color: rgba(234, 179, 8, 0.3);
color: var(--color-primary);
}
@media (max-width: 1024px) {
.skills-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.skills-grid {
grid-template-columns: 1fr;
}
}