Загрузить файлы в «/»
This commit is contained in:
parent
d28eca23e1
commit
b720c23227
160
contact.html
160
contact.html
@ -5,75 +5,95 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>ZorahM - Contact</title>
|
<title>ZorahM - Contact</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
color: #0f172a;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
body.dark {
|
||||||
|
background-color: #0f172a;
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
100% { transform: translateY(0px); }
|
||||||
|
}
|
||||||
|
.floating {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 font-['Inter'] transition-colors duration-300" id="body">
|
<body class="dark:bg-gray-900 dark:text-gray-100">
|
||||||
<!-- Navbar -->
|
<!-- Navbar -->
|
||||||
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm z-50">
|
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md z-50 border-b border-gray-200 dark:border-gray-800">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex justify-between items-center">
|
<div class="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-3">
|
||||||
<div class="w-8 h-8 rounded-full overflow-hidden">
|
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-indigo-500">
|
||||||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
<h1 class="text-xl font-bold text-teal-600 dark:text-teal-400">ZorahM</h1>
|
<h1 class="text-xl font-bold gradient-text">ZorahM</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center space-x-6">
|
<div class="flex items-center space-x-6">
|
||||||
<div class="hidden md:flex items-center space-x-6">
|
<div class="hidden md:flex items-center space-x-8">
|
||||||
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.home">Home</a>
|
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.home">Home</a>
|
||||||
<a href="cv.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.cv">CV</a>
|
<a href="cv.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.cv">CV</a>
|
||||||
<a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.contact">Contact</a>
|
<a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.contact">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center space-x-3">
|
<div class="flex items-center space-x-4">
|
||||||
<!-- Language Switcher -->
|
<!-- Language Switcher -->
|
||||||
<div class="relative group">
|
<div class="relative">
|
||||||
<select id="language-switcher" class="appearance-none bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg px-3 py-1 pr-7 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 cursor-pointer">
|
<select id="language-switcher" class="appearance-none bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer border border-gray-200 dark:border-gray-700">
|
||||||
<option value="en">EN</option>
|
<option value="en">EN</option>
|
||||||
<option value="ru">RU</option>
|
<option value="ru">RU</option>
|
||||||
</select>
|
</select>
|
||||||
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||||
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<i class="fas fa-chevron-down text-xs text-gray-500 dark:text-gray-400"></i>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Theme Toggle -->
|
<!-- Theme Toggle -->
|
||||||
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
|
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors border border-gray-200 dark:border-gray-700">
|
||||||
<svg id="theme-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<i id="theme-icon" class="fas fa-sun text-gray-700 dark:text-gray-300"></i>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Mobile Menu Button -->
|
<!-- Mobile Menu Button -->
|
||||||
<button id="mobile-menu-button" class="md:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
|
<button id="mobile-menu-button" class="md:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors border border-gray-200 dark:border-gray-700">
|
||||||
<svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<i class="fas fa-bars text-gray-700 dark:text-gray-300"></i>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Menu -->
|
<!-- Mobile Menu -->
|
||||||
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 px-4 pb-4 shadow-lg">
|
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-900 px-6 py-4 border-t border-gray-200 dark:border-gray-800">
|
||||||
<div class="flex flex-col space-y-3">
|
<div class="flex flex-col space-y-4">
|
||||||
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.home">Home</a>
|
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.home">Home</a>
|
||||||
<a href="cv.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.cv">CV</a>
|
<a href="cv.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.cv">CV</a>
|
||||||
<a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.contact">Contact</a>
|
<a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.contact">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section class="py-20 pt-24">
|
<section class="min-h-screen flex items-center justify-center px-6 pt-24 pb-16">
|
||||||
<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
<div class="max-w-md mx-auto w-full text-center">
|
||||||
<!-- Avatar -->
|
<!-- Avatar -->
|
||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<div class="inline-block p-3 bg-teal-100 dark:bg-teal-900/30 rounded-full shadow-md">
|
<div class="inline-block p-2 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full shadow-md">
|
||||||
<div class="w-32 h-32 rounded-full overflow-hidden">
|
<div class="w-32 h-32 rounded-full overflow-hidden border-4 border-white dark:border-gray-900 floating">
|
||||||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -81,15 +101,15 @@
|
|||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div class="mb-12">
|
<div class="mb-12">
|
||||||
<h2 class="text-4xl font-bold mb-4" data-key="contact.title">Connect With Me</h2>
|
<h2 class="text-4xl font-bold mb-4" data-key="contact.title">Contact Me</h2>
|
||||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
|
<div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto rounded-full"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Social Media Links -->
|
<!-- Social Media Links -->
|
||||||
<div class="space-y-4">
|
<div class="space-y-4 max-w-xs mx-auto">
|
||||||
<a href="https://github.com/zorahm" target="_blank" class="flex items-center justify-center space-x-3 px-6 py-3 bg-gray-800 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-900 dark:hover:bg-gray-600 transition-all transform hover:scale-105">
|
<a href="https://git.zorahm.ru/ZorahM" target="_blank" class="flex items-center justify-center space-x-3 px-6 py-3 bg-gray-800 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-900 dark:hover:bg-gray-600 transition-all transform hover:scale-105">
|
||||||
<i class="fab fa-github text-xl"></i>
|
<i class="fab fa-github text-xl"></i>
|
||||||
<span>GitHub</span>
|
<span>Git</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://t.me/zorahmwork" target="_blank" class="flex items-center justify-center space-x-3 px-6 py-3 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-all transform hover:scale-105">
|
<a href="https://t.me/zorahmwork" target="_blank" class="flex items-center justify-center space-x-3 px-6 py-3 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-all transform hover:scale-105">
|
||||||
<i class="fab fa-telegram text-xl"></i>
|
<i class="fab fa-telegram text-xl"></i>
|
||||||
@ -100,25 +120,37 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="py-8 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
|
<footer class="py-12 bg-gray-900 text-gray-300">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
<div class="flex items-center space-x-2 mb-4 md:mb-0">
|
<div class="flex items-center space-x-3 mb-6 md:mb-0">
|
||||||
<div class="w-6 h-6 rounded-full overflow-hidden">
|
<div class="w-8 h-8 rounded-full overflow-hidden border-2 border-indigo-500">
|
||||||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
<span class="text-lg font-bold text-teal-600 dark:text-teal-400">ZorahM</span>
|
<span class="text-xl font-bold text-white">ZorahM</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center space-x-6">
|
<div class="flex items-center space-x-6 mb-6 md:mb-0">
|
||||||
<a href="index.html" class="text-gray-600 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors" data-key="footer.home">Home</a>
|
<a href="index.html" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.home">Home</a>
|
||||||
<a href="cv.html" class="text-gray-600 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors" data-key="footer.cv">CV</a>
|
<a href="cv.html" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.cv">CV</a>
|
||||||
<a href="contact.html" class="text-gray-600 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors" data-key="footer.contact">Contact</a>
|
<a href="contact.html" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.contact">Contact</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<a href="https://git.zorahm.ru/ZorahM" target="_blank" class="text-gray-300 hover:text-indigo-400 transition-colors text-xl">
|
||||||
|
<i class="fab fa-github"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://t.me/zorahmwork" target="_blank" class="text-gray-300 hover:text-indigo-400 transition-colors text-xl">
|
||||||
|
<i class="fab fa-telegram"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:text-indigo-400 transition-colors text-xl">
|
||||||
|
<i class="fab fa-twitter"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
|
<div class="mt-12 pt-8 border-t border-gray-800 text-center">
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-sm" data-key="footer.copyright">© 2025 ZorahM. All rights reserved.</p>
|
<p class="text-gray-500" data-key="footer.copyright">© 2025 ZorahM. All rights reserved.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@ -130,7 +162,7 @@
|
|||||||
'nav.home': 'Home',
|
'nav.home': 'Home',
|
||||||
'nav.cv': 'CV',
|
'nav.cv': 'CV',
|
||||||
'nav.contact': 'Contact',
|
'nav.contact': 'Contact',
|
||||||
'contact.title': 'Connect With Me',
|
'contact.title': 'Contact Me',
|
||||||
'footer.home': 'Home',
|
'footer.home': 'Home',
|
||||||
'footer.cv': 'CV',
|
'footer.cv': 'CV',
|
||||||
'footer.contact': 'Contact',
|
'footer.contact': 'Contact',
|
||||||
@ -140,7 +172,7 @@
|
|||||||
'nav.home': 'Главная',
|
'nav.home': 'Главная',
|
||||||
'nav.cv': 'Резюме',
|
'nav.cv': 'Резюме',
|
||||||
'nav.contact': 'Контакты',
|
'nav.contact': 'Контакты',
|
||||||
'contact.title': 'Свяжитесь со мной',
|
'contact.title': 'Контакты',
|
||||||
'footer.home': 'Главная',
|
'footer.home': 'Главная',
|
||||||
'footer.cv': 'Резюме',
|
'footer.cv': 'Резюме',
|
||||||
'footer.contact': 'Контакты',
|
'footer.contact': 'Контакты',
|
||||||
@ -167,15 +199,17 @@
|
|||||||
// Theme toggling
|
// Theme toggling
|
||||||
const themeToggle = document.getElementById('theme-toggle');
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
const themeIcon = document.getElementById('theme-icon');
|
const themeIcon = document.getElementById('theme-icon');
|
||||||
const body = document.getElementById('body');
|
const body = document.body;
|
||||||
|
|
||||||
function setTheme(theme) {
|
function setTheme(theme) {
|
||||||
if (theme === 'dark') {
|
if (theme === 'dark') {
|
||||||
body.classList.add('dark');
|
body.classList.add('dark');
|
||||||
themeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>';
|
themeIcon.classList.remove('fa-sun');
|
||||||
|
themeIcon.classList.add('fa-moon');
|
||||||
} else {
|
} else {
|
||||||
body.classList.remove('dark');
|
body.classList.remove('dark');
|
||||||
themeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>';
|
themeIcon.classList.remove('fa-moon');
|
||||||
|
themeIcon.classList.add('fa-sun');
|
||||||
}
|
}
|
||||||
localStorage.setItem('theme', theme);
|
localStorage.setItem('theme', theme);
|
||||||
}
|
}
|
||||||
@ -194,10 +228,22 @@
|
|||||||
|
|
||||||
// Initialize on page load
|
// Initialize on page load
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Set language
|
||||||
const savedLanguage = localStorage.getItem('language') || 'en';
|
const savedLanguage = localStorage.getItem('language') || 'en';
|
||||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
||||||
languageSwitcher.value = savedLanguage;
|
languageSwitcher.value = savedLanguage;
|
||||||
setLanguage(savedLanguage);
|
setLanguage(savedLanguage);
|
||||||
|
|
||||||
|
// Set theme
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||||
setTheme(savedTheme);
|
setTheme(savedTheme);
|
||||||
|
|
||||||
|
// Close mobile menu when clicking on a link
|
||||||
|
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
mobileMenu.classList.add('hidden');
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
618
index.html
618
index.html
@ -3,510 +3,544 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>ZorahM - Developer Portfolio</title>
|
<title>ZorahM - Portfolio</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
color: #0f172a;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
body.dark {
|
||||||
|
background-color: #0f172a;
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
.dark .card-hover:hover {
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
100% { transform: translateY(0px); }
|
||||||
|
}
|
||||||
|
.floating {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 font-['Inter'] transition-colors duration-300" id="body">
|
<body class="dark:bg-gray-900 dark:text-gray-100">
|
||||||
<!-- Navbar -->
|
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md z-50 border-b border-gray-200 dark:border-gray-800">
|
||||||
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm z-50">
|
<div class="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex justify-between items-center">
|
<div class="flex items-center space-x-3">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-indigo-500">
|
||||||
<div class="w-8 h-8 rounded-full overflow-hidden">
|
|
||||||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
<h1 class="text-xl font-bold text-teal-600 dark:text-teal-400">ZorahM</h1>
|
<h1 class="text-xl font-bold gradient-text">ZorahM</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center space-x-6">
|
<div class="flex items-center space-x-6">
|
||||||
<div class="hidden md:flex items-center space-x-6">
|
<div class="hidden md:flex items-center space-x-8">
|
||||||
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.home">Home</a>
|
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.home">Home</a>
|
||||||
<a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.about">About</a>
|
<a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.about">About</a>
|
||||||
<a href="#skills" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.skills">Skills</a>
|
<a href="#skills" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.skills">Skills</a>
|
||||||
<a href="#projects" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.projects">Projects</a>
|
<a href="#projects" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.projects">Projects</a>
|
||||||
<a href="cv.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.cv">CV</a>
|
<a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.contact">Contact</a>
|
||||||
<a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.contact">Contact</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
<div class="flex items-center space-x-3">
|
<div class="relative">
|
||||||
<!-- Language Switcher -->
|
<select id="language-switcher" class="appearance-none bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer border border-gray-200 dark:border-gray-700">
|
||||||
<div class="relative group">
|
|
||||||
<select id="language-switcher" class="appearance-none bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg px-3 py-1 pr-7 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 cursor-pointer">
|
|
||||||
<option value="en">EN</option>
|
<option value="en">EN</option>
|
||||||
<option value="ru">RU</option>
|
<option value="ru">RU</option>
|
||||||
</select>
|
</select>
|
||||||
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||||
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<i class="fas fa-chevron-down text-xs text-gray-500 dark:text-gray-400"></i>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors border border-gray-200 dark:border-gray-700">
|
||||||
<!-- Theme Toggle -->
|
<i id="theme-icon" class="fas fa-sun text-gray-700 dark:text-gray-300"></i>
|
||||||
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
|
|
||||||
<svg id="theme-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
|
<button id="mobile-menu-button" class="md:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors border border-gray-200 dark:border-gray-700">
|
||||||
<!-- Mobile Menu Button -->
|
<i class="fas fa-bars text-gray-700 dark:text-gray-300"></i>
|
||||||
<button id="mobile-menu-button" class="md:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
|
|
||||||
<svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-900 px-6 py-4 border-t border-gray-200 dark:border-gray-800">
|
||||||
<!-- Mobile Menu -->
|
<div class="flex flex-col space-y-4">
|
||||||
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 px-4 pb-4 shadow-lg">
|
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.home">Home</a>
|
||||||
<div class="flex flex-col space-y-3">
|
<a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.about">About</a>
|
||||||
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.home">Home</a>
|
<a href="#skills" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.skills">Skills</a>
|
||||||
<a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.about">About</a>
|
<a href="#projects" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.projects">Projects</a>
|
||||||
<a href="#skills" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.skills">Skills</a>
|
<a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.contact">Contact</a>
|
||||||
<a href="#projects" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.projects">Projects</a>
|
|
||||||
<a href="cv.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.cv">CV</a>
|
|
||||||
<a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 transition-colors py-2" data-key="nav.contact">Contact</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<section class="min-h-screen flex items-center justify-center px-6 pt-24 pb-16 relative overflow-hidden">
|
||||||
<!-- Hero Section -->
|
|
||||||
<section class="min-h-screen flex items-center justify-center px-4 relative overflow-hidden pt-16">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-gray-900 to-teal-900 opacity-10 dark:opacity-5"></div>
|
|
||||||
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 dark:opacity-5"></div>
|
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 dark:opacity-5"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 dark:from-indigo-900/5 dark:to-purple-900/5"></div>
|
||||||
<div class="text-center relative z-10 max-w-4xl mx-auto">
|
<div class="text-center relative z-10 max-w-4xl mx-auto">
|
||||||
<div class="inline-block mb-6 p-3 bg-teal-100 dark:bg-teal-900/30 rounded-full animate-bounce-slow">
|
<div class="inline-block mb-8 p-2 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full">
|
||||||
<div class="w-16 h-16 rounded-full overflow-hidden">
|
<div class="w-24 h-24 rounded-full overflow-hidden border-4 border-white dark:border-gray-900">
|
||||||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<h1 class="text-5xl md:text-6xl font-bold mb-4">ZorahM</h1>
|
||||||
<h1 class="text-5xl md:text-7xl font-bold mb-4 animate-fade-in-down">ZorahM</h1>
|
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto" data-key="hero.subtitle">
|
||||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto animate-fade-in-up delay-100" data-key="hero.subtitle">
|
Пишу код, решаю задачи
|
||||||
Beginner Developer | Learning and Building
|
|
||||||
</p>
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
<div class="flex flex-col sm:flex-row justify-center gap-4 animate-fade-in-up delay-200">
|
<a href="#projects" class="inline-block bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-8 py-3 rounded-full hover:from-indigo-600 hover:to-purple-600 transition-all transform hover:scale-105 shadow-lg shadow-indigo-500/20 font-medium" data-key="hero.button">
|
||||||
<a href="#projects" class="inline-block bg-gradient-to-r from-teal-500 to-teal-600 text-white px-6 py-3 rounded-lg hover:from-teal-600 hover:to-teal-700 transition-all transform hover:scale-105 shadow-lg shadow-teal-500/20" data-key="hero.button">
|
Мои проекты <i class="fas fa-arrow-right ml-2"></i>
|
||||||
View Projects <i class="fas fa-arrow-right ml-2"></i>
|
|
||||||
</a>
|
</a>
|
||||||
<a href="contact.html" class="inline-block border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg hover:border-teal-500 hover:text-teal-600 dark:hover:text-teal-400 transition-all transform hover:scale-105">
|
<a href="#contact" class="inline-block border-2 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 px-8 py-3 rounded-full hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all transform hover:scale-105 font-medium">
|
||||||
Contact Me <i class="fas fa-paper-plane ml-2"></i>
|
Написать мне <i class="fas fa-paper-plane ml-2"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-12">
|
||||||
<div class="mt-12 animate-fade-in-up delay-300">
|
<div class="inline-flex space-x-6">
|
||||||
<div class="inline-flex space-x-4">
|
<a href="https://git.zorahm.ru/zorahM" target="_blank" class="text-gray-500 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors text-2xl">
|
||||||
<a href="https://github.com/zorahM" target="_blank" class="text-gray-500 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors text-2xl">
|
|
||||||
<i class="fab fa-github"></i>
|
<i class="fab fa-github"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-16">
|
||||||
|
<a href="#about" class="inline-flex items-center text-gray-500 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">
|
||||||
|
<span class="mr-2" data-key="hero.scroll">Листай ниже</span>
|
||||||
|
<i class="fas fa-arrow-down animate-bounce"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="about" class="py-20 bg-gray-50 dark:bg-gray-900/50">
|
||||||
<!-- About Section -->
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
<section id="about" class="py-20 bg-white dark:bg-gray-800">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<span class="inline-block px-3 py-1 text-sm font-medium rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 mb-4" data-key="about.subtitle">About Me</span>
|
<span class="inline-block px-4 py-1 text-sm font-medium rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 mb-4" data-key="about.subtitle">Кто я</span>
|
||||||
<h2 class="text-4xl font-bold mb-6" data-key="about.title">Turning Ideas Into Reality</h2>
|
<h2 class="text-4xl font-bold mb-6" data-key="about.title">Обо мне</h2>
|
||||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
|
<div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto rounded-full"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col lg:flex-row items-center gap-12">
|
<div class="flex flex-col lg:flex-row items-center gap-12">
|
||||||
<div class="lg:w-1/2">
|
<div class="lg:w-1/2">
|
||||||
<div class="relative group">
|
<div class="relative group">
|
||||||
<div class="absolute -inset-2 bg-gradient-to-r from-teal-400 to-teal-600 rounded-xl blur opacity-25 group-hover:opacity-50 transition duration-500"></div>
|
<div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-2xl blur opacity-20 group-hover:opacity-30 transition duration-500"></div>
|
||||||
<div class="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
|
<div class="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800">
|
||||||
<img src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
<img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
||||||
alt="Developer working"
|
alt="Developer working"
|
||||||
class="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105">
|
class="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="lg:w-1/2">
|
<div class="lg:w-1/2">
|
||||||
<h3 class="text-2xl font-semibold mb-4" data-key="about.heading">Hi, I'm ZorahM</h3>
|
<h3 class="text-2xl font-semibold mb-6" data-key="about.heading">Привет, я <span class="gradient-text">ZorahM</span></h3>
|
||||||
<p class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed" data-key="about.content">
|
<p class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed" data-key="about.content">
|
||||||
I'm a beginner developer exploring Java, TypeScript, Lua, Python, and Shell scripting. I'm passionate about learning and creating tools and plugins, especially for gaming communities. My projects, from Minecraft server plugins to simple utilities, reflect my growing skills and dedication to coding.
|
Пишу код на Python и Lua. Делаю рабочие программы, стараюсь, чтобы всё было просто и понятно. Учусь новому, когда есть время.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
<div class="flex items-start">
|
||||||
<div class="flex items-center">
|
<div class="mr-3 mt-1 text-indigo-500">
|
||||||
<div class="mr-3 text-teal-500">
|
|
||||||
<i class="fas fa-check-circle"></i>
|
<i class="fas fa-check-circle"></i>
|
||||||
</div>
|
</div>
|
||||||
<span data-key="about.list1">Problem Solving</span>
|
<div>
|
||||||
|
<h4 class="font-medium text-gray-900 dark:text-gray-100" data-key="about.list1">Решаю задачи</h4>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" data-key="about.list1_desc">Нахожу выход из сложных ситуаций</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-start">
|
||||||
<div class="mr-3 text-teal-500">
|
<div class="mr-3 mt-1 text-indigo-500">
|
||||||
<i class="fas fa-check-circle"></i>
|
<i class="fas fa-check-circle"></i>
|
||||||
</div>
|
</div>
|
||||||
<span data-key="about.list2">Clean Code</span>
|
<div>
|
||||||
|
<h4 class="font-medium text-gray-900 dark:text-gray-100" data-key="about.list2">Понятный код</h4>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" data-key="about.list2_desc">Пишу так, чтобы другим было ясно</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-start">
|
||||||
<div class="mr-3 text-teal-500">
|
<div class="mr-3 mt-1 text-indigo-500">
|
||||||
<i class="fas fa-check-circle"></i>
|
<i class="fas fa-check-circle"></i>
|
||||||
</div>
|
</div>
|
||||||
<span data-key="about.list3">Responsive Design</span>
|
<div>
|
||||||
|
<h4 class="font-medium text-gray-900 dark:text-gray-100" data-key="about.list3">Работает везде</h4>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" data-key="about.list3_desc">Код запускается на любом устройстве</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-start">
|
||||||
<div class="mr-3 text-teal-500">
|
<div class="mr-3 mt-1 text-indigo-500">
|
||||||
<i class="fas fa-check-circle"></i>
|
<i class="fas fa-check-circle"></i>
|
||||||
</div>
|
</div>
|
||||||
<span data-key="about.list4">Team Collaboration</span>
|
<div>
|
||||||
|
<h4 class="font-medium text-gray-900 dark:text-gray-100" data-key="about.list4">Работа в команде</h4>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400" data-key="about.list4_desc">Общаюсь без проблем</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
<a href="cv.html" class="inline-flex items-center text-teal-600 dark:text-teal-400 font-medium hover:text-teal-700 dark:hover:text-teal-500 transition-colors">
|
<a href="#contact" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-full hover:from-indigo-600 hover:to-purple-600 transition-all font-medium">
|
||||||
<span data-key="about.button">View CV</span>
|
<span data-key="about.button1">Написать</span>
|
||||||
<i class="fas fa-download ml-2"></i>
|
<i class="fas fa-paper-plane ml-2"></i>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all font-medium">
|
||||||
|
<span data-key="about.button2">Моё резюме</span>
|
||||||
|
<i class="fas fa-download ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="skills" class="py-20 bg-white dark:bg-gray-900">
|
||||||
<!-- Skills Section -->
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
<section id="skills" class="py-20 bg-gray-50 dark:bg-gray-900">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<span class="inline-block px-3 py-1 text-sm font-medium rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 mb-4" data-key="skills.subtitle">My Skills</span>
|
<span class="inline-block px-4 py-1 text-sm font-medium rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 mb-4" data-key="skills.subtitle">Что умею</span>
|
||||||
<h2 class="text-4xl font-bold mb-6" data-key="skills.title">Technologies I Work With</h2>
|
<h2 class="text-4xl font-bold mb-6" data-key="skills.title">Навыки</h2>
|
||||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
|
<div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto rounded-full"></div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6" id="skills-grid">
|
|
||||||
<!-- Skill items will be injected here by JavaScript -->
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6" id="skills-grid"></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="projects" class="py-20 bg-gray-50 dark:bg-gray-900/50">
|
||||||
<!-- Projects Section -->
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
<section id="projects" class="py-20 bg-white dark:bg-gray-800">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<span class="inline-block px-3 py-1 text-sm font-medium rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 mb-4" data-key="projects.subtitle">My Work</span>
|
<span class="inline-block px-4 py-1 text-sm font-medium rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 mb-4" data-key="projects.subtitle">Что сделал</span>
|
||||||
<h2 class="text-4xl font-bold mb-6" data-key="projects.title">Recent Projects</h2>
|
<h2 class="text-4xl font-bold mb-6" data-key="projects.title">Проекты</h2>
|
||||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
|
<div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto rounded-full"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="projects-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>
|
||||||
<div id="projects-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
||||||
<!-- Projects will be injected here by JavaScript -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center mt-12">
|
<div class="text-center mt-12">
|
||||||
<a href="https://github.com/zorahm" target="_blank" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:border-teal-500 hover:text-teal-600 dark:hover:text-teal-400 transition-all">
|
<a href="https://git.zorahm.ru/zorahm" target="_blank" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-700 rounded-full text-gray-700 dark:text-gray-300 hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all font-medium">
|
||||||
<span data-key="projects.viewall">View All Projects</span>
|
<span data-key="projects.viewall">Все проекты</span>
|
||||||
<i class="fas fa-external-link-alt ml-2"></i>
|
<i class="fas fa-external-link-alt ml-2"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<footer class="py-12 bg-gray-900 text-gray-300">
|
||||||
<!-- Footer -->
|
<div class="max-w-7xl mx-auto px-6">
|
||||||
<footer class="py-8 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
<div class="flex items-center space-x-2 mb-4 md:mb-0">
|
<div class="flex items-center space-x-3 mb-6 md:mb-0">
|
||||||
<div class="w-6 h-6 rounded-full overflow-hidden">
|
<div class="w-8 h-8 rounded-full overflow-hidden border-2 border-indigo-500">
|
||||||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
<span class="text-lg font-bold text-teal-600 dark:text-teal-400">ZorahM</span>
|
<span class="text-xl font-bold text-white">ZorahM</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex items-center space-x-6 mb-6 md:mb-0">
|
||||||
<div class="flex items-center space-x-6">
|
<a href="index.html" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.home">Home</a>
|
||||||
<a href="index.html" class="text-gray-600 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors" data-key="footer.home">Home</a>
|
<a href="#about" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.about">About</a>
|
||||||
<a href="cv.html" class="text-gray-600 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors" data-key="footer.cv">CV</a>
|
<a href="#projects" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.projects">Projects</a>
|
||||||
<a href="contact.html" class="text-gray-600 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors" data-key="footer.contact">Contact</a>
|
<a href="#contact" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.contact">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex space-x-6">
|
||||||
|
<a href="https://git.zorahm.ru/zorahm" target="_blank" class="text-gray-300 hover:text-indigo-400 transition-colors text-xl">
|
||||||
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex flex-col md:flex-row justify-between items-center">
|
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4 md:mb-0" data-key="footer.copyright">© 2025 ZorahM. All rights reserved.</p>
|
|
||||||
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<a href="https://github.com/zorahm" class="text-gray-500 dark:text-gray-400 hover:text-teal-500 dark:hover:text-teal-400 transition-colors">
|
|
||||||
<i class="fab fa-github"></i>
|
<i class="fab fa-github"></i>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:text-indigo-400 transition-colors text-xl">
|
||||||
|
<i class="fab fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-300 hover:text-indigo-400 transition-colors text-xl">
|
||||||
|
<i class="fab fa-twitter"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-12 pt-8 border-t border-gray-800 text-center">
|
||||||
|
<p class="text-gray-500" data-key="footer.copyright">© 2025 ZorahM. Все права мои.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Language translations
|
|
||||||
const translations = {
|
const translations = {
|
||||||
en: {
|
en: {
|
||||||
'nav.home': 'Home',
|
'nav.home': 'Home',
|
||||||
'nav.about': 'About',
|
'nav.about': 'About',
|
||||||
'nav.skills': 'Skills',
|
'nav.skills': 'Skills',
|
||||||
'nav.projects': 'Projects',
|
'nav.projects': 'Projects',
|
||||||
'nav.cv': 'CV',
|
|
||||||
'nav.contact': 'Contact',
|
'nav.contact': 'Contact',
|
||||||
'hero.subtitle': 'Beginner Developer | Learning and Building',
|
'hero.subtitle': 'I write code, solve problems',
|
||||||
'hero.button': 'View Projects',
|
'hero.button': 'See My Projects',
|
||||||
'about.subtitle': 'About Me',
|
'hero.scroll': 'Scroll down',
|
||||||
'about.title': 'Turning Ideas Into Reality',
|
'about.subtitle': 'Who I Am',
|
||||||
'about.heading': "Hi, I'm ZorahM",
|
'about.title': 'About Me',
|
||||||
'about.content': "I'm a beginner developer exploring Java, TypeScript, Lua, Python, and Shell scripting. I'm passionate about learning and creating tools and plugins, especially for gaming communities. My projects, from Minecraft server plugins to simple utilities, reflect my growing skills and dedication to coding.",
|
'about.heading': "Hey, I'm",
|
||||||
'about.list1': 'Problem Solving',
|
'about.content': "I code in Python and Lua. I make working programs, keep things simple and clear. I learn new stuff when I can.",
|
||||||
'about.list2': 'Clean Code',
|
'about.list1': 'Solving Problems',
|
||||||
'about.list3': 'Responsive Design',
|
'about.list1_desc': 'Finding ways out of tough spots',
|
||||||
'about.list4': 'Team Collaboration',
|
'about.list2': 'Clear Code',
|
||||||
'about.button': 'View CV',
|
'about.list2_desc': 'Writing code others can understand',
|
||||||
'skills.subtitle': 'My Skills',
|
'about.list3': 'Works Everywhere',
|
||||||
'skills.title': 'Technologies I Work With',
|
'about.list3_desc': 'Code runs on any device',
|
||||||
'projects.subtitle': 'My Work',
|
'about.list4': 'Teamwork',
|
||||||
'projects.title': 'Recent Projects',
|
'about.list4_desc': 'I get along with people',
|
||||||
|
'about.button1': 'Write Me',
|
||||||
|
'about.button2': 'My Resume',
|
||||||
|
'skills.subtitle': 'What I Can Do',
|
||||||
|
'skills.title': 'Skills',
|
||||||
|
'projects.subtitle': 'What I Made',
|
||||||
|
'projects.title': 'Projects',
|
||||||
'projects.language': 'Language',
|
'projects.language': 'Language',
|
||||||
'projects.updated': 'Updated',
|
'projects.updated': 'Updated',
|
||||||
'projects.view': 'View Project',
|
'projects.view': 'Check Project',
|
||||||
'projects.viewall': 'View All Projects',
|
'projects.viewall': 'All Projects',
|
||||||
|
'contact.subtitle': 'Get In Touch',
|
||||||
|
'contact.title': 'Contact Me',
|
||||||
|
'contact.lets_talk': "Let's talk about your project",
|
||||||
|
'contact.description': "Got a question or need a coder? Drop me a line.",
|
||||||
|
'contact.email': 'Email',
|
||||||
|
'contact.location': 'Location',
|
||||||
|
'contact.social': 'Social Media',
|
||||||
|
'contact.form.name': 'Your Name',
|
||||||
|
'contact.form.email': 'Your Email',
|
||||||
|
'contact.form.subject': 'Subject',
|
||||||
|
'contact.form.message': 'Your Message',
|
||||||
|
'contact.form.submit': 'Send Message',
|
||||||
'footer.home': 'Home',
|
'footer.home': 'Home',
|
||||||
'footer.cv': 'CV',
|
'footer.about': 'About',
|
||||||
|
'footer.projects': 'Projects',
|
||||||
'footer.contact': 'Contact',
|
'footer.contact': 'Contact',
|
||||||
'footer.copyright': '© 2025 ZorahM. All rights reserved.'
|
'footer.copyright': '© 2025 ZorahM. All mine.'
|
||||||
},
|
},
|
||||||
ru: {
|
ru: {
|
||||||
'nav.home': 'Главная',
|
'nav.home': 'Главная',
|
||||||
'nav.about': 'Обо мне',
|
'nav.about': 'Обо мне',
|
||||||
'nav.skills': 'Навыки',
|
'nav.skills': 'Навыки',
|
||||||
'nav.projects': 'Проекты',
|
'nav.projects': 'Проекты',
|
||||||
'nav.cv': 'Резюме',
|
|
||||||
'nav.contact': 'Контакты',
|
'nav.contact': 'Контакты',
|
||||||
'hero.subtitle': 'Начинающий разработчик | Учусь и создаю',
|
'hero.subtitle': 'Пишу код, решаю задачи',
|
||||||
'hero.button': 'Посмотреть проекты',
|
'hero.button': 'Мои проекты',
|
||||||
'about.subtitle': 'Обо мне',
|
'hero.scroll': 'Листай ниже',
|
||||||
'about.title': 'Превращаю идеи в реальность',
|
'about.subtitle': 'Кто я',
|
||||||
'about.heading': "Привет, я ZorahM",
|
'about.title': 'Обо мне',
|
||||||
'about.content': "Я начинающий разработчик, изучающий Java, TypeScript, Lua, Python и Shell-скрипты. Я увлечён обучением и созданием инструментов и плагинов, особенно для игровых сообществ. Мои проекты, от плагинов для серверов Minecraft до простых утилит, отражают мои растущие навыки и преданность программированию.",
|
'about.heading': 'Привет, я',
|
||||||
'about.list1': 'Решение проблем',
|
'about.content': 'Пишу код на Python и Lua. Делаю рабочие программы, стараюсь, чтобы всё было просто и понятно. Учусь новому, когда есть время.',
|
||||||
'about.list2': 'Чистый код',
|
'about.list1': 'Решаю задачи',
|
||||||
'about.list3': 'Адаптивный дизайн',
|
'about.list1_desc': 'Нахожу выход из сложных ситуаций',
|
||||||
'about.list4': 'Командная работа',
|
'about.list2': 'Понятный код',
|
||||||
'about.button': 'Посмотреть резюме',
|
'about.list2_desc': 'Пишу так, чтобы другим было ясно',
|
||||||
'skills.subtitle': 'Мои навыки',
|
'about.list3': 'Работает везде',
|
||||||
'skills.title': 'Технологии, с которыми я работаю',
|
'about.list3_desc': 'Код запускается на любом устройстве',
|
||||||
'projects.subtitle': 'Мои работы',
|
'about.list4': 'Работа в команде',
|
||||||
'projects.title': 'Последние проекты',
|
'about.list4_desc': 'Общаюсь без проблем',
|
||||||
|
'about.button1': 'Написать',
|
||||||
|
'about.button2': 'Моё резюме',
|
||||||
|
'skills.subtitle': 'Что умею',
|
||||||
|
'skills.title': 'Навыки',
|
||||||
|
'projects.subtitle': 'Что сделал',
|
||||||
|
'projects.title': 'Проекты',
|
||||||
'projects.language': 'Язык',
|
'projects.language': 'Язык',
|
||||||
'projects.updated': 'Обновлено',
|
'projects.updated': 'Обновлено',
|
||||||
'projects.view': 'Посмотреть проект',
|
'projects.view': 'Посмотреть проект',
|
||||||
'projects.viewall': 'Все проекты',
|
'projects.viewall': 'Все проекты',
|
||||||
|
'contact.subtitle': 'Связаться',
|
||||||
|
'contact.title': 'Контакты',
|
||||||
|
'contact.lets_talk': 'Поговорим о твоём проекте',
|
||||||
|
'contact.description': 'Есть вопрос или нужен кодер? Пиши.',
|
||||||
|
'contact.email': 'Email',
|
||||||
|
'contact.location': 'Где я',
|
||||||
|
'contact.social': 'Социалки',
|
||||||
|
'contact.form.name': 'Твоё имя',
|
||||||
|
'contact.form.email': 'Твой email',
|
||||||
|
'contact.form.subject': 'Тема',
|
||||||
|
'contact.form.message': 'Твоё сообщение',
|
||||||
|
'contact.form.submit': 'Отправить',
|
||||||
'footer.home': 'Главная',
|
'footer.home': 'Главная',
|
||||||
'footer.cv': 'Резюме',
|
'footer.about': 'Обо мне',
|
||||||
|
'footer.projects': 'Проекты',
|
||||||
'footer.contact': 'Контакты',
|
'footer.contact': 'Контакты',
|
||||||
'footer.copyright': '© 2025 ZorahM. Все права защищены.'
|
'footer.copyright': '© 2025 ZorahM. Все права мои.'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Skills data
|
|
||||||
const skills = [
|
const skills = [
|
||||||
{ name: "Java", icon: "fab fa-java", color: "text-red-500" },
|
{ name: "Python", icon: "fab fa-python", color: "text-yellow-500", level: 40 },
|
||||||
{ name: "TypeScript", icon: "fas fa-code", color: "text-blue-500" },
|
{ name: "Lua", icon: "fas fa-gamepad", color: "text-blue-700", level: 45 }
|
||||||
{ name: "Lua", icon: "fas fa-gamepad", color: "text-blue-700" },
|
|
||||||
{ name: "Python", icon: "fab fa-python", color: "text-yellow-500" },
|
|
||||||
{ name: "Shell", icon: "fas fa-terminal", color: "text-green-500" },
|
|
||||||
{ name: "HTML5", icon: "fab fa-html5", color: "text-orange-500" }
|
|
||||||
];
|
];
|
||||||
|
|
||||||
// Project data
|
|
||||||
const projectsData = [
|
const projectsData = [
|
||||||
{
|
{
|
||||||
name: "zoChat",
|
name: "zoChat",
|
||||||
description: {
|
description: {
|
||||||
en: "Chat plugin for Minecraft servers, enhancing communication features.",
|
en: "Chat plugin for Minecraft servers. Makes chatting better.",
|
||||||
ru: "Плагин чата для серверов Minecraft, улучшающий функции общения."
|
ru: "Плагин для чата в Minecraft. Делает общение удобнее."
|
||||||
},
|
},
|
||||||
language: "Java",
|
language: "Java",
|
||||||
url: "https://github.com/zorahm/zochat",
|
url: "https://git.zorahm.ru/ZorahM/zochat",
|
||||||
updated: "2 weeks ago"
|
updated: "2 weeks ago",
|
||||||
|
stars: 1,
|
||||||
|
forks: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Ubuntu-autologin",
|
name: "Ubuntu-autologin",
|
||||||
description: {
|
description: {
|
||||||
en: "Shell script for automating login on Ubuntu systems.",
|
en: "Script to log in to Ubuntu automatically.",
|
||||||
ru: "Shell-скрипт для автоматического входа в системы Ubuntu."
|
ru: "Скрипт для автоматического входа в Ubuntu."
|
||||||
},
|
},
|
||||||
language: "Shell",
|
language: "Shell",
|
||||||
url: "https://github.com/zorahm/ubuntu-autologin",
|
url: "https://git.zorahm.ru/ZorahM/ubuntu-autologin",
|
||||||
updated: "3 weeks ago"
|
updated: "3 weeks ago",
|
||||||
|
stars: 1,
|
||||||
|
forks: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "mtiworlds",
|
name: "mtiworlds",
|
||||||
description: {
|
description: {
|
||||||
en: "TypeScript project for managing game worlds.",
|
en: "Manages game worlds in TypeScript.",
|
||||||
ru: "Проект на TypeScript для управления игровыми мирами."
|
ru: "Управляет игровыми мирами на TypeScript."
|
||||||
},
|
},
|
||||||
language: "TypeScript",
|
language: "TypeScript",
|
||||||
url: "https://github.com/zorahm/mtiworlds",
|
url: "https://git.zorahm.ru/ZorahM/mtiworlds",
|
||||||
updated: "last month"
|
updated: "last month",
|
||||||
|
stars: 1,
|
||||||
|
forks: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "RepFlow",
|
name: "RepFlow",
|
||||||
description: {
|
description: {
|
||||||
en: "Administration tool for Arizona RP, catching and reporting data.",
|
en: "Tool for Arizona RP admins to track and report stuff.",
|
||||||
ru: "Инструмент администрирования для Arizona RP, сбор и отчётность данных."
|
ru: "Инструмент для админов Arizona RP. Следит и отчитывается."
|
||||||
},
|
},
|
||||||
language: "Lua",
|
language: "Lua",
|
||||||
url: "https://github.com/zorahm/repflow",
|
url: "https://git.zorahm.ru/ZorahM/repflow",
|
||||||
updated: "Mar 21, 2025"
|
updated: "Mar 21, 2025",
|
||||||
|
stars: 1,
|
||||||
|
forks: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "MinistryOfHealthMan",
|
name: "MinistryOfHealthMan",
|
||||||
description: {
|
description: {
|
||||||
en: "TypeScript analogue of SetHP for health management in games.",
|
en: "Health management tool for games in TypeScript.",
|
||||||
ru: "Аналог SetHP на TypeScript для управления здоровьем в играх."
|
ru: "Инструмент для управления здоровьем в играх на TypeScript."
|
||||||
},
|
},
|
||||||
language: "TypeScript",
|
language: "TypeScript",
|
||||||
url: "https://github.com/zorahm/ministryofhealthman",
|
url: "https://git.zorahm.ru/ZorahM/ministryofhealthman",
|
||||||
updated: "Mar 16, 2025"
|
updated: "Mar 16, 2025",
|
||||||
|
stars: 1,
|
||||||
|
forks: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "zorahm.github.io",
|
name: "zorahm.github.io",
|
||||||
description: {
|
description: {
|
||||||
en: "Personal portfolio website hosted on GitHub Pages.",
|
en: "My portfolio site on GitHub Pages.",
|
||||||
ru: "Личный сайт-портфолио, размещённый на GitHub Pages."
|
ru: "Мой сайт-портфолио на GitHub Pages."
|
||||||
},
|
},
|
||||||
language: "HTML",
|
language: "HTML",
|
||||||
url: "https://github.com/zorahm/zorahm.github.io",
|
url: "https://git.zorahm.ru/ZorahM/zorahm.github.io",
|
||||||
updated: "Mar 15, 2025"
|
updated: "Mar 15, 2025",
|
||||||
},
|
stars: 1,
|
||||||
{
|
forks: 0
|
||||||
name: "password_manager",
|
|
||||||
description: {
|
|
||||||
en: "Secure password management tool built in Python.",
|
|
||||||
ru: "Безопасный менеджер паролей, созданный на Python."
|
|
||||||
},
|
|
||||||
language: "Python",
|
|
||||||
url: "https://github.com/zorahm/password_manager",
|
|
||||||
updated: "Jul 2, 2024"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "MedHelper",
|
|
||||||
description: {
|
|
||||||
en: "Lua-based tool for health-related functionalities in games.",
|
|
||||||
ru: "Инструмент на Lua для функций, связанных со здоровьем в играх."
|
|
||||||
},
|
|
||||||
language: "Lua",
|
|
||||||
url: "https://github.com/zorahm/MedHelper",
|
|
||||||
updated: "May 12, 2024"
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// Language switching
|
|
||||||
const languageSwitcher = document.getElementById('language-switcher');
|
const languageSwitcher = document.getElementById('language-switcher');
|
||||||
function setLanguage(lang) {
|
function setLanguage(lang) {
|
||||||
document.querySelectorAll('[data-key]').forEach(element => {
|
document.querySelectorAll('[data-key]').forEach(element => {
|
||||||
const key = element.getAttribute('data-key');
|
const key = element.getAttribute('data-key');
|
||||||
if (translations[lang][key]) {
|
if (translations[lang][key]) {
|
||||||
element.textContent = translations[lang][key];
|
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
|
||||||
|
element.placeholder = translations[lang][key];
|
||||||
|
} else {
|
||||||
|
element.textContent = translations[lang][key];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
renderProjects(lang);
|
renderProjects(lang);
|
||||||
renderSkills();
|
renderSkills();
|
||||||
localStorage.setItem('language', lang);
|
localStorage.setItem('language', lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
languageSwitcher.addEventListener('change', (e) => {
|
languageSwitcher.addEventListener('change', (e) => {
|
||||||
setLanguage(e.target.value);
|
setLanguage(e.target.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Theme toggling
|
|
||||||
const themeToggle = document.getElementById('theme-toggle');
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
const themeIcon = document.getElementById('theme-icon');
|
const themeIcon = document.getElementById('theme-icon');
|
||||||
const body = document.getElementById('body');
|
const body = document.body;
|
||||||
|
|
||||||
function setTheme(theme) {
|
function setTheme(theme) {
|
||||||
if (theme === 'dark') {
|
if (theme === 'dark') {
|
||||||
body.classList.add('dark');
|
body.classList.add('dark');
|
||||||
themeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>';
|
themeIcon.classList.remove('fa-sun');
|
||||||
|
themeIcon.classList.add('fa-moon');
|
||||||
} else {
|
} else {
|
||||||
body.classList.remove('dark');
|
body.classList.remove('dark');
|
||||||
themeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>';
|
themeIcon.classList.remove('fa-moon');
|
||||||
|
themeIcon.classList.add('fa-sun');
|
||||||
}
|
}
|
||||||
localStorage.setItem('theme', theme);
|
localStorage.setItem('theme', theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
themeToggle.addEventListener('click', () => {
|
themeToggle.addEventListener('click', () => {
|
||||||
const currentTheme = localStorage.getItem('theme') || 'light';
|
const currentTheme = localStorage.getItem('theme') || 'light';
|
||||||
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
|
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Mobile menu toggle
|
|
||||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||||
const mobileMenu = document.getElementById('mobile-menu');
|
const mobileMenu = document.getElementById('mobile-menu');
|
||||||
mobileMenuButton.addEventListener('click', () => {
|
mobileMenuButton.addEventListener('click', () => {
|
||||||
mobileMenu.classList.toggle('hidden');
|
mobileMenu.classList.toggle('hidden');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Render skills
|
|
||||||
function renderSkills() {
|
function renderSkills() {
|
||||||
const skillsGrid = document.getElementById('skills-grid');
|
const skillsGrid = document.getElementById('skills-grid');
|
||||||
skillsGrid.innerHTML = skills.map(skill => `
|
skillsGrid.innerHTML = skills.map(skill => `
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md hover:shadow-lg transition-all transform hover:scale-105 text-center">
|
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all card-hover">
|
||||||
<i class="${skill.icon} ${skill.color} text-3xl mb-4"></i>
|
<div class="flex items-center mb-4">
|
||||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">${skill.name}</h3>
|
<i class="${skill.icon} ${skill.color} text-3xl mr-3"></i>
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">${skill.name}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
|
||||||
|
<div class="bg-gradient-to-r from-indigo-500 to-purple-500 h-2.5 rounded-full" style="width: ${skill.level}%"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`).join('');
|
`).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Render projects
|
|
||||||
function renderProjects(lang = 'en') {
|
function renderProjects(lang = 'en') {
|
||||||
const projectsGrid = document.getElementById('projects-grid');
|
const projectsGrid = document.getElementById('projects-grid');
|
||||||
projectsGrid.innerHTML = projectsData.map(project => `
|
projectsGrid.innerHTML = projectsData.map(project => `
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-all">
|
<div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all card-hover">
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h3 class="text-xl font-semibold text-teal-600 dark:text-teal-400 mb-3">${project.name}</h3>
|
<div class="flex justify-between items-start mb-4">
|
||||||
<p class="text-gray-600 dark:text-gray-300 mb-4">${project.description[lang]}</p>
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">${project.name}</h3>
|
||||||
<div class="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-200">
|
||||||
<span><i class="fas fa-code mr-1"></i> ${project.language}</span>
|
${project.language}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 dark:text-gray-300 mb-6">${project.description[lang]}</p>
|
||||||
|
<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<span class="flex items-center">
|
||||||
|
<i class="fas fa-star mr-1"></i> ${project.stars}
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center">
|
||||||
|
<i class="fas fa-code-branch mr-1"></i> ${project.forks}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<span><i class="fas fa-clock mr-1"></i> ${project.updated}</span>
|
<span><i class="fas fa-clock mr-1"></i> ${project.updated}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-700">
|
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-800">
|
||||||
<a href="${project.url}" target="_blank" class="text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-500 font-medium">
|
<a href="${project.url}" target="_blank" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 font-medium">
|
||||||
${translations[lang]['projects.view']} <i class="fas fa-external-link-alt ml-1"></i>
|
${translations[lang]['projects.view']} <i class="fas fa-external-link-alt ml-2"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`).join('');
|
`).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize on page load
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const savedLanguage = localStorage.getItem('language') || 'en';
|
const savedLanguage = localStorage.getItem('language') || 'en';
|
||||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
||||||
languageSwitcher.value = savedLanguage;
|
languageSwitcher.value = savedLanguage;
|
||||||
setLanguage(savedLanguage);
|
setLanguage(savedLanguage);
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||||
setTheme(savedTheme);
|
setTheme(savedTheme);
|
||||||
|
renderSkills();
|
||||||
|
renderProjects(savedLanguage);
|
||||||
|
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
mobileMenu.classList.add('hidden');
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
<style>
|
</html>
|
||||||
/* Custom animations */
|
|
||||||
@keyframes fadeInDown {
|
|
||||||
from { opacity: 0; transform: translateY(-20px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
@keyframes bounceSlow {
|
|
||||||
0%, 100% { transform: translateY(0); }
|
|
||||||
50% { transform: translateY(-10px); }
|
|
||||||
}
|
|
||||||
.animate-fade-in-down { animation: fadeInDown 0.6s ease-out; }
|
|
||||||
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
|
|
||||||
.animate-bounce-slow { animation: bounceSlow 3s infinite ease-in-out; }
|
|
||||||
.delay-100 { animation-delay: 0.1s; }
|
|
||||||
.delay-200 { animation-delay: 0.2s; }
|
|
||||||
.delay-300 { animation-delay: 0.3s; }
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user