229 lines
13 KiB
HTML
229 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Maksym Buz | Senior Application Engineer</title>
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
|
|
<!-- Chosen Palette: Gradient Grid (Dark charcoal background, white/gray text, blue-to-red gradient accent) -->
|
|
<!-- Application Structure Plan: A single-page, vertical-scrolling narrative structure was chosen to guide the user logically from a high-level introduction (Hero) to personal details (About), capabilities (Skills), proof of work (Experience), and finally personal passion (Homelab). This linear flow is intuitive for a personal portfolio and tells a compelling story. Interactions are focused on smooth scrolling and subtle fade-in animations to create a professional, modern feel without distracting from the content. -->
|
|
<!-- Visualization & Content Choices: Report Info: Background -> Goal: Create a calm, structured, tech-themed atmosphere -> Viz: Static CSS grid pattern -> Interaction: Passive visual element -> Justification: Fulfills the user's request for a less "noisy" background, providing a clean and professional foundation that evokes technical precision. -> Library/Method: CSS repeating-linear-gradient. Report Info: Hero Title -> Goal: Create a strong visual focal point -> Viz: Gradient text -> Interaction: None -> Justification: Adds a modern, dynamic flair to the main heading, making it memorable. -> Library/Method: CSS background-clip. -->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #111827;
|
|
color: #e0e0e0;
|
|
}
|
|
.hero-section {
|
|
background-color: transparent;
|
|
background-image:
|
|
radial-gradient(ellipse at center, #1e293b 0%, #111827 70%),
|
|
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
background-size: cover, 80px 80px;
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(90deg, #3b82f6 0%, #ec4899 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.scroll-down-chevron {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-left: 2px solid #9ca3af;
|
|
border-bottom: 2px solid #9ca3af;
|
|
transform: rotate(-45deg);
|
|
animation: bounce 2s infinite;
|
|
}
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {
|
|
transform: translateY(0) rotate(-45deg);
|
|
}
|
|
40% {
|
|
transform: translateY(-10px) rotate(-45deg);
|
|
}
|
|
60% {
|
|
transform: translateY(-5px) rotate(-45deg);
|
|
}
|
|
}
|
|
.fade-in-section {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
.fade-in-section.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.skill-tag {
|
|
background-color: rgba(59, 130, 246, 0.1);
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.skill-tag:hover {
|
|
background-color: rgba(59, 130, 246, 0.2);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.icon-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
color: #60a5fa;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.icon-link:hover {
|
|
background-color: #3b82f6;
|
|
color: #ffffff;
|
|
transform: scale(1.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="w-full">
|
|
|
|
<!-- Section 1: Hero / Landing Page -->
|
|
<section id="hero" class="hero-section h-screen flex flex-col items-center justify-center text-center relative overflow-hidden">
|
|
<div class="content-container">
|
|
<h1 class="text-5xl md:text-7xl font-black tracking-tighter gradient-text pb-4">Making Technology Work</h1>
|
|
</div>
|
|
<a href="#about" class="absolute bottom-10 flex flex-col items-center text-gray-400 hover:text-white transition-colors duration-300 no-underline">
|
|
<div class="scroll-down-chevron mb-2"></div>
|
|
<span class="text-sm font-medium tracking-wide">Make it work</span>
|
|
</a>
|
|
</section>
|
|
|
|
<main class="max-w-5xl mx-auto px-6 md:px-8">
|
|
<!-- Section 2: About & Contact -->
|
|
<section id="about" class="py-20 md:py-32 fade-in-section">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 items-center">
|
|
<div class="md:col-span-1 flex justify-center">
|
|
<img src="profile.jpg" alt="Maksym Buz" class="w-48 h-48 md:w-56 md:h-56 rounded-full object-cover shadow-2xl shadow-blue-500/10" onerror="this.onerror=null;this.src='https://placehold.co/224x224/111827/e0e0e0?text=M.B';">
|
|
</div>
|
|
<div class="md:col-span-2 text-center md:text-left">
|
|
<h2 class="text-4xl font-bold text-white">Maksym Buz</h2>
|
|
<p class="text-xl font-medium text-blue-400 mt-1">Senior Application Engineer</p>
|
|
<p class="mt-4 text-lg text-gray-300 max-w-xl mx-auto md:mx-0">
|
|
With over 7 years of experience, I specialize in delivering exceptional technical support and robust turnkey solutions. My expertise in Bash, Python, and Linux allows me to execute complex deployments with a focus on high availability, disaster recovery, and process automation.
|
|
</p>
|
|
<div class="mt-8 flex justify-center md:justify-start space-x-4">
|
|
<a href="https://www.linkedin.com/in/maksym-buz" target="_blank" class="icon-link" aria-label="LinkedIn">in</a>
|
|
<a href="mailto:maxim.buz@gmail.com" class="icon-link" aria-label="Email">@</a>
|
|
<a href="https://git.mbuz.uk/Homelab" target="_blank" class="icon-link" aria-label="Git">G</a>
|
|
<a href="https://t.me/mx_bz" target="_blank" class="icon-link" aria-label="Telegram">T</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Skills & Technologies -->
|
|
<section id="skills" class="py-20 md:py-24 fade-in-section">
|
|
<h2 class="text-3xl font-bold text-center text-white mb-12">Technologies & Tools</h2>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 text-center">
|
|
<div class="skill-tag p-4 rounded-lg">Python</div>
|
|
<div class="skill-tag p-4 rounded-lg">Bash</div>
|
|
<div class="skill-tag p-4 rounded-lg">SQL</div>
|
|
<div class="skill-tag p-4 rounded-lg">Ansible</div>
|
|
<div class="skill-tag p-4 rounded-lg">Git</div>
|
|
<div class="skill-tag p-4 rounded-lg">Docker</div>
|
|
<div class="skill-tag p-4 rounded-lg">Docker Compose</div>
|
|
<div class="skill-tag p-4 rounded-lg">Proxmox</div>
|
|
<div class="skill-tag p-4 rounded-lg">Linux</div>
|
|
<div class="skill-tag p-4 rounded-lg">Zabbix</div>
|
|
<div class="skill-tag p-4 rounded-lg">PostgreSQL</div>
|
|
<div class="skill-tag p-4 rounded-lg">TimescaleDB</div>
|
|
<div class="skill-tag p-4 rounded-lg">Patroni</div>
|
|
<div class="skill-tag p-4 rounded-lg">MySQL</div>
|
|
<div class="skill-tag p-4 rounded-lg">Galera</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Professional Experience -->
|
|
<section id="experience" class="py-20 md:py-24 fade-in-section">
|
|
<h2 class="text-3xl font-bold text-center text-white mb-6">Professional Experience</h2>
|
|
<p class="text-lg text-center text-gray-300 max-w-3xl mx-auto mb-12">
|
|
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 that solve real-world challenges.
|
|
</p>
|
|
<div class="space-y-8 max-w-3xl mx-auto">
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0 text-blue-400 mt-1">➔</div>
|
|
<p>Led the end-to-end delivery of enterprise-grade monitoring solutions, ensuring stability for high-stakes client infrastructures.</p>
|
|
</div>
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0 text-blue-400 mt-1">➔</div>
|
|
<p>Developed robust automation scripts (Python, Bash, Ansible) that significantly reduced manual deployment times and operational errors.</p>
|
|
</div>
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0 text-blue-400 mt-1">➔</div>
|
|
<p>Managed and synchronized critical business systems (CRM, HR), performing complex database upgrades, migrations, and root cause analysis (RCA).</p>
|
|
</div>
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0 text-blue-400 mt-1">➔</div>
|
|
<p>Acted as a key technical resource, mentoring team members, assisting sales with expert insights, and delivering public webinars as a certified trainer.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 5: Homelab Projects -->
|
|
<section id="homelab" class="py-20 md:py-32 fade-in-section">
|
|
<h2 class="text-3xl font-bold text-center text-white mb-6">My Passion: The Homelab</h2>
|
|
<p class="text-lg text-center text-gray-300 max-w-3xl mx-auto mb-12">
|
|
Technology is not just my profession—it's my hobby. I run a dedicated homelab where I experiment, learn, and automate everything. This hands-on experience is where I push the boundaries of my knowledge.
|
|
</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div class="bg-gray-900/50 p-6 rounded-lg border border-gray-700/50 text-center">
|
|
<h3 class="text-xl font-bold text-blue-400">Infrastructure</h3>
|
|
<p class="mt-2 text-gray-300">Multi-node Proxmox cluster for robust virtualization.</p>
|
|
</div>
|
|
<div class="bg-gray-900/50 p-6 rounded-lg border border-gray-700/50 text-center">
|
|
<h3 class="text-xl font-bold text-blue-400">Containerization</h3>
|
|
<p class="mt-2 text-gray-300">Multiple Docker hosts running dozens of self-hosted services.</p>
|
|
</div>
|
|
<div class="bg-gray-900/50 p-6 rounded-lg border border-gray-700/50 text-center">
|
|
<h3 class="text-xl font-bold text-blue-400">Source Control</h3>
|
|
<p class="mt-2 text-gray-300">A personal Gitea service for all my projects and configurations.</p>
|
|
</div>
|
|
<div class="bg-gray-900/50 p-6 rounded-lg border border-gray-700/50 text-center">
|
|
<h3 class="text-xl font-bold text-blue-400">Core Philosophy</h3>
|
|
<p class="mt-2 text-gray-300">A strong focus on "Infrastructure as Code" and automation.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="text-center py-8 border-t border-gray-800/50">
|
|
<p class="text-gray-500">© 2024 Maksym Buz. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Fade-in sections on scroll
|
|
const sections = document.querySelectorAll('.fade-in-section');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1
|
|
});
|
|
|
|
sections.forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|