259 lines
15 KiB
HTML
259 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" 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">
|
|
<link rel="shortcut icon" type="image/png" href="/favicon.png">
|
|
<link rel="apple-touch-icon" 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;800&display=swap" rel="stylesheet">
|
|
<!-- Chosen Palette: Gradient Grid (Dark charcoal background, white/gray text, light blue-to-peach 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, rgba(96, 206, 245, 0.8) 0%, rgba(225, 114, 117, 0.8) 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(-7px) 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(96, 206, 245, 0.1);
|
|
border: 1px solid rgba(96, 206, 245, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.skill-tag:hover {
|
|
background-color: rgba(96, 206, 245, 0.2);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(96, 206, 245, 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: #60cef5;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.icon-link:hover {
|
|
background-color: #60cef5;
|
|
color: #111827;
|
|
transform: scale(1.1);
|
|
}
|
|
.icon-link .email-icon {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
.icon-link .linkedin-icon {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
@keyframes fadeInBottom {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.hero-title {
|
|
animation: fadeInBottom 0.8s ease-out 0.3s forwards;
|
|
opacity: 0;
|
|
font-size: 120%;
|
|
}
|
|
/* Removed animation from subtitle */
|
|
</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 pb-16">
|
|
<h1 class="hero-title text-5xl md:text-7xl tracking-wide gradient-text leading-normal md:leading-normal py-2">
|
|
<span class="font-medium">Making</span> <span class="font-extrabold">Technology</span> <span class="font-medium">Work</span>
|
|
</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-cyan-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-cyan-400 mt-1">Senior Application Engineer</p>
|
|
<p class="mt-4 text-lg text-gray-300 max-w-xl mx-auto md:mx-0">
|
|
For more than seven years, I have specialized in building resilient and efficient IT environments. By mastering Linux, scripting, and database management, I execute complex deployments that prioritize high availability, ensure business continuity through robust disaster recovery plans, and streamline operations via 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"><span class="linkedin-icon">in</span></a>
|
|
<a href="mailto:maxim.buz@gmail.com" class="icon-link" aria-label="Email"><span class="email-icon">@</span></a>
|
|
<a href="https://git.mbuz.uk/Homelab" target="_blank" class="icon-link" aria-label="Gitea">
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img"><path d="M12 2a10 10 0 0 0-3.16 19.5c.23.06.44-.13.44-.35v-1.54c-1.4.3-1.69-1.03-1.69-1.03-.37-.93-1.2-1.2-1.2-1.2-.82-.55.06-.54.06-.54.9.06 1.54 1.23 1.54 1.23.8 1.37 2.1 1 2.62.76.08-.6.31-1 .57-1.23-2-.23-4.1-1-4.1-4.44 0-.98.35-1.78.92-2.4-.1-.23-.4-1.13.08-2.37 0 0 .75-.24 2.46.92.72-.2 1.48-.3 2.24-.3.76 0 1.52.1 2.24.3 1.7-1.16 2.45-.92 2.45-.92.48 1.24.18 2.14.08 2.37.57.62.92 1.42.92 2.4 0 3.45-2.1 4.2-4.1 4.43.32.28.6 1.1.6 1.9v2.82c0 .22.2.4.44.35A10 10 0 0 0 12 2z"/></svg>
|
|
</a>
|
|
<a href="https://t.me/mx_bz" target="_blank" class="icon-link" aria-label="Telegram">
|
|
<svg class="w-6 h-6 p-0.5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.62 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15.91L18.22 18c-.27.66-1.02.85-1.58.44l-4.16-3.23-1.7 1.62c-.19.18-.38.35-.58.51z"/></svg>
|
|
</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 versatile engineer with a proven record of enhancing system reliability and operational efficiency in both corporate IT and product-centric environments. Expert in process automation, systems integration, and leading the end-to-end delivery of high-value technical solutions.
|
|
</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-cyan-400 mt-1">➔</div>
|
|
<p><strong>Orchestrated</strong> the full lifecycle delivery of enterprise-scale monitoring solutions, guaranteeing stability and uptime for mission-critical client infrastructures.</p>
|
|
</div>
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0 text-cyan-400 mt-1">➔</div>
|
|
<p><strong>Engineered</strong> robust automation frameworks using Python, Bash, and Ansible, drastically reducing manual deployment times and minimizing operational errors.</p>
|
|
</div>
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0 text-cyan-400 mt-1">➔</div>
|
|
<p><strong>Directed</strong> the integration and management of core business systems (CRM, HR), executing complex database migrations and upgrades with a focus on data integrity and performance.</p>
|
|
</div>
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0 text-cyan-400 mt-1">➔</div>
|
|
<p><strong>Served</strong> as a senior technical authority, mentoring engineering teams, enabling sales with key technical insights, and representing the company as a certified trainer in public webinars.</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-cyan-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-cyan-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-cyan-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-cyan-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">© 2025 Maksym Buz. All rights reserved. Generated using AI</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>
|