diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8d4e1d0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,228 @@
+<!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">&copy; 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>
