Homelab/mbuz-www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CHANGE: New iteration

Browse Source
This commit is contained in:
Maksym Buz
2025-08-27 10:01:12 +02:00
parent c640e25e27
commit 9a84dd7763
2 changed files with 677 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
index.html
View File

@@ -3,17 +3,17 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maksym Buz - Senior Application Engineer</title>
<title>Maksym Buz - Making Technology Work</title>
<style>
/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;500;600&display=swap');
/* --- CSS Variables (Root) --- */
:root {
--bg-color: #1A1A2E;
--bg-color: #121826; /* Darker, slightly blue background */
--text-color: #E0E0E0;
--accent-color: #00BFFF;
--card-bg-color: #2A2A4E;
--card-bg-color: #1A2035; /* Card background to stand out a bit */
--header-font: 'Montserrat', sans-serif;
--body-font: 'Inter', sans-serif;
}
@@ -37,14 +37,14 @@
overflow-x: hidden;
}
/* --- Dynamic Background --- */
/* --- FIX: Fixed dynamic background that doesn't scroll --- */
#dynamic-bg {
position: fixed;
position: fixed; /* This keeps the canvas in place */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
z-index: -1; /* Place it behind all content */
}
/* --- The Engine Room (Hero Section) --- */
@@ -59,6 +59,7 @@
padding: 0 1rem;
}
/* FIX: Softer overlay gradient instead of a hard edge */
.engine-room::before {
content: '';
position: absolute;
@@ -66,7 +67,7 @@
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(26, 26, 46, 0.7) 0%, rgba(26, 26, 46, 1) 70%);
background: radial-gradient(ellipse at center, rgba(18, 24, 38, 0.7) 0%, rgba(18, 24, 38, 1) 75%);
z-index: 0;
}
@@ -78,22 +79,13 @@
.engine-room h1 {
font-family: var(--header-font);
font-size: clamp(2.8rem, 6vw, 5rem);
font-size: clamp(3rem, 7vw, 6rem); /* Made title larger for impact */
font-weight: 900;
letter-spacing: -2px;
margin-bottom: 1rem;
text-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
}
.engine-room h2 {
font-family: var(--body-font);
font-size: clamp(1.2rem, 3vw, 1.5rem);
font-weight: 500;
color: var(--accent-color);
letter-spacing: 2px;
text-transform: uppercase;
}
.scroll-cue {
position: absolute;
bottom: 2rem;
@@ -118,13 +110,13 @@
}
/* --- The Toolkit (Main Content) --- */
/* FIX: Removed solid background to allow fixed canvas to show through */
.toolkit {
max-width: 960px;
margin: 0 auto;
padding: 6rem 1.5rem;
position: relative;
z-index: 1;
background-color: var(--bg-color);
}
.section {
@@ -200,24 +192,35 @@
font-family: var(--header-font);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 2rem;
display: inline-block;
margin-bottom: 2.5rem; /* Increased margin */
text-align: center; /* Centered title */
position: relative;
}
/* FIX: Replaced line under title with a centered version for better aesthetics */
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 50%;
bottom: -10px;
left: 50%;
transform: translateX(-50%); /* Centering trick */
width: 80px;
height: 4px;
background-color: var(--accent-color);
}
.card-grid {
/* FIX: Adjusted grid for 'Areas of Expertise' to be a 2x2 layout */
.expertise-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-template-columns: repeat(2, 1fr); /* Always 2 columns */
gap: 1.5rem;
justify-items: center; /* Center items within grid cells */
}
/* FIX: Adjusted grid for 'Technologies' to also be a 2x2 layout */
.technologies-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Always 2 columns */
gap: 1.5rem;
}
@@ -225,8 +228,10 @@
background-color: var(--card-bg-color);
padding: 2rem;
border-radius: 12px;
border: 1px solid transparent;
border: 1px solid #2a3149; /* Subtle border */
transition: transform 0.3s ease, border-color 0.3s ease;
width: 100%; /* Ensure cards take full width of grid cell */
max-width: 420px; /* Max width for cards */
}
.card:hover {
@@ -240,6 +245,11 @@
color: var(--accent-color);
margin-bottom: 1rem;
}
.card p {
color: var(--text-color);
opacity: 0.8;
}
.skill-tags {
display: flex;
@@ -263,10 +273,10 @@
border-color: var(--accent-color);
transform: scale(1.05);
}
.experience-card {
background-color: var(--card-bg-color);
padding: 2rem;
padding: 2.5rem; /* More padding */
border-radius: 12px;
}
@@ -274,6 +284,7 @@
font-family: var(--header-font);
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--accent-color);
}
.experience-list {
@@ -298,12 +309,13 @@
.homelab-section {
padding: 3rem;
border-radius: 12px;
text-align: center;
position: relative;
overflow: hidden;
background-color: var(--card-bg-color);
background-image:
linear-gradient(rgba(42, 42, 78, 0.9), rgba(42, 42, 78, 0.9)),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300BFFF' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
linear-gradient(rgba(26, 32, 53, 0.95), rgba(26, 32, 53, 0.95)),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300BFFF' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.homelab-section h3 {
@@ -362,6 +374,10 @@
.section-title {
font-size: 2rem;
}
/* FIX: Stacking grids to 1 column on smaller screens */
.expertise-grid, .technologies-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
@@ -369,11 +385,9 @@
<canvas id="dynamic-bg"></canvas>
<!-- Part 1: The Engine Room -->
<header class="engine-room" id="home">
<div class="hero-content">
<h1>Beyond Troubleshooting. Engineering Solutions.</h1>
<h2>Automation | Monitoring | Turnkey Projects</h2>
<h1>Making Technology Work</h1>
</div>
<a href="#toolkit" class="scroll-cue">
<span>Explore the Toolkit</span>
@@ -383,10 +397,8 @@
</a>
</header>
<!-- Part 2: The Toolkit -->
<main class="toolkit" id="toolkit">
<!-- Profile Header -->
<section class="profile-header section">
<img src="https://i.imgur.com/placeholder.png" alt="Maksym Buz Profile Picture" class="profile-pic">
<h1>Maksym Buz</h1>
@@ -407,10 +419,9 @@
</div>
</section>
<!-- Areas of Expertise -->
<section class="section">
<h2 class="section-title">Areas of Expertise</h2>
<div class="card-grid">
<div class="expertise-grid">
<div class="card"><h3>Automation</h3><p>Designing and implementing automated workflows to improve efficiency and reliability.</p></div>
<div class="card"><h3>Monitoring</h3><p>Building comprehensive monitoring solutions to ensure system health and performance.</p></div>
<div class="card"><h3>Turnkey Projects</h3><p>Delivering end-to-end solutions from conception to deployment and maintenance.</p></div>
@@ -418,42 +429,42 @@
</div>
</section>
<!-- Technologies & Tools -->
<section class="section">
<h2 class="section-title">Technologies & Tools</h2>
<div class="card">
<h3>Core Languages</h3>
<div class="skill-tags"><span class="tag">Python</span><span class="tag">Bash</span><span class="tag">SQL</span></div>
</div>
<div class="card" style="margin-top: 1.5rem;">
<h3>Infra & Automation</h3>
<div class="skill-tags"><span class="tag">Ansible</span><span class="tag">Docker</span><span class="tag">Proxmox</span><span class="tag">Git</span><span class="tag">CI/CD Principles</span></div>
</div>
<div class="card" style="margin-top: 1.5rem;">
<h3>Monitoring & Observability</h3>
<div class="skill-tags"><span class="tag">Zabbix</span><span class="tag">SNMP</span></div>
</div>
<div class="card" style="margin-top: 1.5rem;">
<h3>OS & Databases</h3>
<div class="skill-tags"><span class="tag">Linux (Debian/RHEL)</span><span class="tag">PostgreSQL (TimescaleDB, Patroni)</span><span class="tag">MySQL (MariaDB, Galera)</span></div>
<div class="technologies-grid">
<div class="card">
<h3>Core Languages</h3>
<div class="skill-tags"><span class="tag">Python</span><span class="tag">Bash</span><span class="tag">SQL</span></div>
</div>
<div class="card">
<h3>Infra & Automation</h3>
<div class="skill-tags"><span class="tag">Ansible</span><span class="tag">Docker</span><span class="tag">Proxmox</span><span class="tag">Git</span><span class="tag">CI/CD Principles</span></div>
</div>
<div class="card">
<h3>Monitoring & Observability</h3>
<div class="skill-tags"><span class="tag">Zabbix</span><span class="tag">SNMP</span></div>
</div>
<div class="card">
<h3>OS & Databases</h3>
<div class="skill-tags"><span class="tag">Linux</span><span class="tag">PostgreSQL (TimescaleDB, Patroni)</span><span class="tag">MySQL (MariaDB, Galera)</span></div>
</div>
</div>
</section>
<!-- Experience Highlight -->
<section class="section">
<h2 class="section-title">Experience Highlight</h2>
<h2 class="section-title">Professional Experience</h2>
<div class="experience-card">
<h3>Senior Application Engineer @ Zabbix (Current)</h3>
<p style="font-size: 1.1rem; color: var(--text-color); opacity: 1;">A results-oriented engineer with a proven track record in both corporate IT and specialized product environments. My career is focused on enhancing system reliability, automating complex processes, and delivering high-value, turnkey projects.</p>
<br>
<ul class="experience-list">
<li>Led delivery of end-to-end turnkey monitoring projects for enterprise clients.</li>
<li>Drove automation of internal processes and customer deployments using Python, Bash, and Ansible, improving efficiency and reliability.</li>
<li>Mentored colleagues, provided technical expertise to sales, and conducted public webinars and official Zabbix training sessions as a Certified Trainer.</li>
<li>Focused on performance review, troubleshooting, and complex issue resolution (RCA) to ensure robust system operations.</li>
<li>Led the end-to-end delivery of enterprise-grade monitoring solutions, ensuring stability and performance for high-stakes client infrastructures.</li>
<li>Developed and implemented robust automation scripts (Python, Bash, Ansible) that significantly reduced manual deployment times and operational errors.</li>
<li>Managed and synchronized critical business systems (CRM, HR), performing complex database upgrades, migrations, and root cause analysis (RCA).</li>
<li>Acted as a key technical resource, mentoring team members, assisting sales with expert insights, and delivering public webinars as a certified trainer.</li>
</ul>
</div>
</section>
<!-- Homelab Highlight -->
<section class="section">
<div class="homelab-section">
<h3>My Personal Engineering Sandbox: The Homelab</h3>
@@ -461,7 +472,6 @@
</div>
</section>
<!-- Call to Action -->
<section class="cta-section section">
<a href="mailto:buz.maxim@gmail.com" class="cta-button">Let's Build a Solution</a>
</section>
@@ -470,6 +480,7 @@
<script>
// --- Dynamic Background Script ---
// This script creates an interactive particle network on the canvas
const canvas = document.getElementById('dynamic-bg');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
@@ -477,17 +488,6 @@
let particlesArray;
const mouse = {
x: null,
y: null,
radius: (canvas.height / 120) * (canvas.width / 120)
};
window.addEventListener('mousemove', function(event) {
mouse.x = event.x;
mouse.y = event.y;
});
class Particle {
constructor(x, y, directionX, directionY, size, color) {
this.x = x;
@@ -497,12 +497,14 @@
this.size = size;
this.color = color;
}
// Method to draw individual particle
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
ctx.fillStyle = 'rgba(0, 191, 255, 0.5)';
ctx.fill();
}
// Method to update particle's position
update() {
if (this.x > canvas.width || this.x < 0) {
this.directionX = -this.directionX;
@@ -516,6 +518,7 @@
}
}
// Function to create particle array
function init() {
particlesArray = [];
let numberOfParticles = (canvas.height * canvas.width) / 9000;
@@ -530,6 +533,7 @@
}
}
// Function to draw lines between particles
function connect() {
let opacityValue = 1;
for (let a = 0; a < particlesArray.length; a++) {
@@ -549,6 +553,7 @@
}
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, innerWidth, innerHeight);
@@ -559,22 +564,18 @@
connect();
}
// Event listener for window resize
window.addEventListener('resize', function() {
canvas.width = innerWidth;
canvas.height = innerHeight;
mouse.radius = (canvas.height / 120) * (canvas.width / 120);
init();
});
window.addEventListener('mouseout', function() {
mouse.x = undefined;
mouse.y = undefined;
});
init();
animate();
// --- Scroll Animation Observer ---
// This script fades in sections as they become visible
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
@@ -591,4 +592,4 @@
});
</script>
</body>
</html>
</html>