249 lines
11 KiB
HTML
249 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ZorahM - Contact</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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">
|
||
<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>
|
||
<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">
|
||
<div class="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center">
|
||
<div class="flex items-center space-x-3">
|
||
<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">
|
||
</div>
|
||
<h1 class="text-xl font-bold gradient-text">ZorahM</h1>
|
||
</div>
|
||
|
||
<div class="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-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-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-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.contact">Contact</a>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<!-- Language Switcher -->
|
||
<div class="relative">
|
||
<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="ru">RU</option>
|
||
</select>
|
||
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
||
<i class="fas fa-chevron-down text-xs text-gray-500 dark:text-gray-400"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Theme Toggle -->
|
||
<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">
|
||
<i id="theme-icon" class="fas fa-sun text-gray-700 dark:text-gray-300"></i>
|
||
</button>
|
||
|
||
<!-- Mobile Menu 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">
|
||
<i class="fas fa-bars text-gray-700 dark:text-gray-300"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Menu -->
|
||
<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-4">
|
||
<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-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-indigo-500 dark:hover:text-indigo-400 transition-colors py-2" data-key="nav.contact">Contact</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Contact Section -->
|
||
<section class="min-h-screen flex items-center justify-center px-6 pt-24 pb-16">
|
||
<div class="max-w-md mx-auto w-full text-center">
|
||
<!-- Avatar -->
|
||
<div class="mb-8">
|
||
<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 border-4 border-white dark:border-gray-900 floating">
|
||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Title -->
|
||
<div class="mb-12">
|
||
<h2 class="text-4xl font-bold mb-4" data-key="contact.title">Contact Me</h2>
|
||
<div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto rounded-full"></div>
|
||
</div>
|
||
|
||
<!-- Social Media Links -->
|
||
<div class="space-y-4 max-w-xs mx-auto">
|
||
<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>
|
||
<span>Git</span>
|
||
</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">
|
||
<i class="fab fa-telegram text-xl"></i>
|
||
<span>Telegram</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="py-12 bg-gray-900 text-gray-300">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<div class="flex items-center space-x-3 mb-6 md:mb-0">
|
||
<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">
|
||
</div>
|
||
<span class="text-xl font-bold text-white">ZorahM</span>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-6 mb-6 md:mb-0">
|
||
<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-300 hover:text-indigo-400 transition-colors" data-key="footer.cv">CV</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 class="mt-12 pt-8 border-t border-gray-800 text-center">
|
||
<p class="text-gray-500" data-key="footer.copyright">© 2025 ZorahM. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Language translations
|
||
const translations = {
|
||
en: {
|
||
'nav.home': 'Home',
|
||
'nav.cv': 'CV',
|
||
'nav.contact': 'Contact',
|
||
'contact.title': 'Contact Me',
|
||
'footer.home': 'Home',
|
||
'footer.cv': 'CV',
|
||
'footer.contact': 'Contact',
|
||
'footer.copyright': '© 2025 ZorahM. All rights reserved.'
|
||
},
|
||
ru: {
|
||
'nav.home': 'Главная',
|
||
'nav.cv': 'Резюме',
|
||
'nav.contact': 'Контакты',
|
||
'contact.title': 'Контакты',
|
||
'footer.home': 'Главная',
|
||
'footer.cv': 'Резюме',
|
||
'footer.contact': 'Контакты',
|
||
'footer.copyright': '© 2025 ZorahM. Все права защищены.'
|
||
}
|
||
};
|
||
|
||
// Language switching
|
||
const languageSwitcher = document.getElementById('language-switcher');
|
||
function setLanguage(lang) {
|
||
document.querySelectorAll('[data-key]').forEach(element => {
|
||
const key = element.getAttribute('data-key');
|
||
if (translations[lang][key]) {
|
||
element.textContent = translations[lang][key];
|
||
}
|
||
});
|
||
localStorage.setItem('language', lang);
|
||
}
|
||
|
||
languageSwitcher.addEventListener('change', (e) => {
|
||
setLanguage(e.target.value);
|
||
});
|
||
|
||
// Theme toggling
|
||
const themeToggle = document.getElementById('theme-toggle');
|
||
const themeIcon = document.getElementById('theme-icon');
|
||
const body = document.body;
|
||
|
||
function setTheme(theme) {
|
||
if (theme === 'dark') {
|
||
body.classList.add('dark');
|
||
themeIcon.classList.remove('fa-sun');
|
||
themeIcon.classList.add('fa-moon');
|
||
} else {
|
||
body.classList.remove('dark');
|
||
themeIcon.classList.remove('fa-moon');
|
||
themeIcon.classList.add('fa-sun');
|
||
}
|
||
localStorage.setItem('theme', theme);
|
||
}
|
||
|
||
themeToggle.addEventListener('click', () => {
|
||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
|
||
});
|
||
|
||
// Mobile menu toggle
|
||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
mobileMenuButton.addEventListener('click', () => {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
// Initialize on page load
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// Set language
|
||
const savedLanguage = localStorage.getItem('language') || 'en';
|
||
languageSwitcher.value = savedLanguage;
|
||
setLanguage(savedLanguage);
|
||
|
||
// Set theme
|
||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||
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>
|
||
</body>
|
||
</html> |