Загрузить файлы в «/»
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">
|
||||
<title>ZorahM - Contact</title>
|
||||
<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">
|
||||
<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="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-800/80 backdrop-blur-md shadow-sm z-50">
|
||||
<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-2">
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden">
|
||||
<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 text-teal-600 dark:text-teal-400">ZorahM</h1>
|
||||
<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-6">
|
||||
<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="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-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.contact">Contact</a>
|
||||
<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-3">
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Language Switcher -->
|
||||
<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">
|
||||
<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">
|
||||
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<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-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 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-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 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-800 px-4 pb-4 shadow-lg">
|
||||
<div class="flex flex-col space-y-3">
|
||||
<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="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 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="py-20 pt-24">
|
||||
<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<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-3 bg-teal-100 dark:bg-teal-900/30 rounded-full shadow-md">
|
||||
<div class="w-32 h-32 rounded-full overflow-hidden">
|
||||
<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>
|
||||
@ -81,15 +101,15 @@
|
||||
|
||||
<!-- Title -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4" data-key="contact.title">Connect With Me</h2>
|
||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
|
||||
<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">
|
||||
<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">
|
||||
<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>GitHub</span>
|
||||
<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>
|
||||
@ -100,25 +120,37 @@
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<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">
|
||||
<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-2 mb-4 md:mb-0">
|
||||
<div class="w-6 h-6 rounded-full overflow-hidden">
|
||||
<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-lg font-bold text-teal-600 dark:text-teal-400">ZorahM</span>
|
||||
<span class="text-xl font-bold text-white">ZorahM</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6">
|
||||
<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="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="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>
|
||||
<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-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm" data-key="footer.copyright">© 2025 ZorahM. All rights reserved.</p>
|
||||
<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>
|
||||
@ -130,7 +162,7 @@
|
||||
'nav.home': 'Home',
|
||||
'nav.cv': 'CV',
|
||||
'nav.contact': 'Contact',
|
||||
'contact.title': 'Connect With Me',
|
||||
'contact.title': 'Contact Me',
|
||||
'footer.home': 'Home',
|
||||
'footer.cv': 'CV',
|
||||
'footer.contact': 'Contact',
|
||||
@ -140,7 +172,7 @@
|
||||
'nav.home': 'Главная',
|
||||
'nav.cv': 'Резюме',
|
||||
'nav.contact': 'Контакты',
|
||||
'contact.title': 'Свяжитесь со мной',
|
||||
'contact.title': 'Контакты',
|
||||
'footer.home': 'Главная',
|
||||
'footer.cv': 'Резюме',
|
||||
'footer.contact': 'Контакты',
|
||||
@ -167,15 +199,17 @@
|
||||
// Theme toggling
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const themeIcon = document.getElementById('theme-icon');
|
||||
const body = document.getElementById('body');
|
||||
const body = document.body;
|
||||
|
||||
function setTheme(theme) {
|
||||
if (theme === '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 {
|
||||
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);
|
||||
}
|
||||
@ -194,10 +228,22 @@
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Set language
|
||||
const savedLanguage = localStorage.getItem('language') || 'en';
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
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>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
618
index.html
618
index.html
@ -3,510 +3,544 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 font-['Inter'] transition-colors duration-300" id="body">
|
||||
<!-- Navbar -->
|
||||
<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-4 sm:px-6 lg:px-8 py-3 flex justify-between items-center">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden">
|
||||
<body class="dark:bg-gray-900 dark:text-gray-100">
|
||||
<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 text-teal-600 dark:text-teal-400">ZorahM</h1>
|
||||
<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-6">
|
||||
<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="#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="#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="#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="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-teal-500 dark:hover:text-teal-400 transition-colors font-medium" data-key="nav.contact">Contact</a>
|
||||
<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="#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-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-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.projects">Projects</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-3">
|
||||
<!-- Language Switcher -->
|
||||
<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">
|
||||
<div class="flex items-center space-x-4">
|
||||
<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">
|
||||
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<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-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 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-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 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-800 px-4 pb-4 shadow-lg">
|
||||
<div class="flex flex-col space-y-3">
|
||||
<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="#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="#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="#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 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="#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="#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="#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="#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>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 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>
|
||||
<section class="min-h-screen flex items-center justify-center px-6 pt-24 pb-16 relative overflow-hidden">
|
||||
<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="inline-block mb-6 p-3 bg-teal-100 dark:bg-teal-900/30 rounded-full animate-bounce-slow">
|
||||
<div class="w-16 h-16 rounded-full overflow-hidden">
|
||||
<div class="inline-block mb-8 p-2 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 animate-fade-in-up delay-100" data-key="hero.subtitle">
|
||||
Beginner Developer | Learning and Building
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-4">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>
|
||||
|
||||
<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-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">
|
||||
View Projects <i class="fas fa-arrow-right ml-2"></i>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<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">
|
||||
Мои проекты <i class="fas fa-arrow-right ml-2"></i>
|
||||
</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">
|
||||
Contact Me <i class="fas fa-paper-plane ml-2"></i>
|
||||
<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">
|
||||
Написать мне <i class="fas fa-paper-plane ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 animate-fade-in-up delay-300">
|
||||
<div class="inline-flex space-x-4">
|
||||
<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">
|
||||
<div class="mt-12">
|
||||
<div class="inline-flex space-x-6">
|
||||
<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">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<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">
|
||||
<section id="about" class="py-20 bg-gray-50 dark:bg-gray-900/50">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<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>
|
||||
<h2 class="text-4xl font-bold mb-6" data-key="about.title">Turning Ideas Into Reality</h2>
|
||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
|
||||
<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">Обо мне</h2>
|
||||
<div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row items-center gap-12">
|
||||
<div class="lg:w-1/2">
|
||||
<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="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
|
||||
<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"
|
||||
<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-800">
|
||||
<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"
|
||||
class="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
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>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="flex items-center">
|
||||
<div class="mr-3 text-teal-500">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||||
<div class="flex items-start">
|
||||
<div class="mr-3 mt-1 text-indigo-500">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</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 class="flex items-center">
|
||||
<div class="mr-3 text-teal-500">
|
||||
<div class="flex items-start">
|
||||
<div class="mr-3 mt-1 text-indigo-500">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</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 class="flex items-center">
|
||||
<div class="mr-3 text-teal-500">
|
||||
<div class="flex items-start">
|
||||
<div class="mr-3 mt-1 text-indigo-500">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</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 class="flex items-center">
|
||||
<div class="mr-3 text-teal-500">
|
||||
<div class="flex items-start">
|
||||
<div class="mr-3 mt-1 text-indigo-500">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</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>
|
||||
|
||||
<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">
|
||||
<span data-key="about.button">View CV</span>
|
||||
<i class="fas fa-download ml-2"></i>
|
||||
</a>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<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.button1">Написать</span>
|
||||
<i class="fas fa-paper-plane ml-2"></i>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<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">
|
||||
<section id="skills" class="py-20 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<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>
|
||||
<h2 class="text-4xl font-bold mb-6" data-key="skills.title">Technologies I Work With</h2>
|
||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></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 -->
|
||||
<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">Навыки</h2>
|
||||
<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"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section -->
|
||||
<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">
|
||||
<section id="projects" class="py-20 bg-gray-50 dark:bg-gray-900/50">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<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>
|
||||
<h2 class="text-4xl font-bold mb-6" data-key="projects.title">Recent Projects</h2>
|
||||
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
|
||||
<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">Проекты</h2>
|
||||
<div class="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</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 id="projects-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>
|
||||
<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">
|
||||
<span data-key="projects.viewall">View All Projects</span>
|
||||
<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">Все проекты</span>
|
||||
<i class="fas fa-external-link-alt ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<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">
|
||||
<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-2 mb-4 md:mb-0">
|
||||
<div class="w-6 h-6 rounded-full overflow-hidden">
|
||||
<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-lg font-bold text-teal-600 dark:text-teal-400">ZorahM</span>
|
||||
<span class="text-xl font-bold text-white">ZorahM</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-6">
|
||||
<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="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="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>
|
||||
<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="#about" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.about">About</a>
|
||||
<a href="#projects" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.projects">Projects</a>
|
||||
<a href="#contact" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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="#" 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 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>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Language translations
|
||||
const translations = {
|
||||
en: {
|
||||
'nav.home': 'Home',
|
||||
'nav.about': 'About',
|
||||
'nav.skills': 'Skills',
|
||||
'nav.projects': 'Projects',
|
||||
'nav.cv': 'CV',
|
||||
'nav.contact': 'Contact',
|
||||
'hero.subtitle': 'Beginner Developer | Learning and Building',
|
||||
'hero.button': 'View Projects',
|
||||
'about.subtitle': 'About Me',
|
||||
'about.title': 'Turning Ideas Into Reality',
|
||||
'about.heading': "Hi, I'm ZorahM",
|
||||
'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.list1': 'Problem Solving',
|
||||
'about.list2': 'Clean Code',
|
||||
'about.list3': 'Responsive Design',
|
||||
'about.list4': 'Team Collaboration',
|
||||
'about.button': 'View CV',
|
||||
'skills.subtitle': 'My Skills',
|
||||
'skills.title': 'Technologies I Work With',
|
||||
'projects.subtitle': 'My Work',
|
||||
'projects.title': 'Recent Projects',
|
||||
'hero.subtitle': 'I write code, solve problems',
|
||||
'hero.button': 'See My Projects',
|
||||
'hero.scroll': 'Scroll down',
|
||||
'about.subtitle': 'Who I Am',
|
||||
'about.title': 'About Me',
|
||||
'about.heading': "Hey, I'm",
|
||||
'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.list1': 'Solving Problems',
|
||||
'about.list1_desc': 'Finding ways out of tough spots',
|
||||
'about.list2': 'Clear Code',
|
||||
'about.list2_desc': 'Writing code others can understand',
|
||||
'about.list3': 'Works Everywhere',
|
||||
'about.list3_desc': 'Code runs on any device',
|
||||
'about.list4': 'Teamwork',
|
||||
'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.updated': 'Updated',
|
||||
'projects.view': 'View Project',
|
||||
'projects.viewall': 'View All Projects',
|
||||
'projects.view': 'Check Project',
|
||||
'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.cv': 'CV',
|
||||
'footer.about': 'About',
|
||||
'footer.projects': 'Projects',
|
||||
'footer.contact': 'Contact',
|
||||
'footer.copyright': '© 2025 ZorahM. All rights reserved.'
|
||||
'footer.copyright': '© 2025 ZorahM. All mine.'
|
||||
},
|
||||
ru: {
|
||||
'nav.home': 'Главная',
|
||||
'nav.about': 'Обо мне',
|
||||
'nav.skills': 'Навыки',
|
||||
'nav.projects': 'Проекты',
|
||||
'nav.cv': 'Резюме',
|
||||
'nav.contact': 'Контакты',
|
||||
'hero.subtitle': 'Начинающий разработчик | Учусь и создаю',
|
||||
'hero.button': 'Посмотреть проекты',
|
||||
'about.subtitle': 'Обо мне',
|
||||
'about.title': 'Превращаю идеи в реальность',
|
||||
'about.heading': "Привет, я ZorahM",
|
||||
'about.content': "Я начинающий разработчик, изучающий Java, TypeScript, Lua, Python и Shell-скрипты. Я увлечён обучением и созданием инструментов и плагинов, особенно для игровых сообществ. Мои проекты, от плагинов для серверов Minecraft до простых утилит, отражают мои растущие навыки и преданность программированию.",
|
||||
'about.list1': 'Решение проблем',
|
||||
'about.list2': 'Чистый код',
|
||||
'about.list3': 'Адаптивный дизайн',
|
||||
'about.list4': 'Командная работа',
|
||||
'about.button': 'Посмотреть резюме',
|
||||
'skills.subtitle': 'Мои навыки',
|
||||
'skills.title': 'Технологии, с которыми я работаю',
|
||||
'projects.subtitle': 'Мои работы',
|
||||
'projects.title': 'Последние проекты',
|
||||
'hero.subtitle': 'Пишу код, решаю задачи',
|
||||
'hero.button': 'Мои проекты',
|
||||
'hero.scroll': 'Листай ниже',
|
||||
'about.subtitle': 'Кто я',
|
||||
'about.title': 'Обо мне',
|
||||
'about.heading': 'Привет, я',
|
||||
'about.content': 'Пишу код на Python и Lua. Делаю рабочие программы, стараюсь, чтобы всё было просто и понятно. Учусь новому, когда есть время.',
|
||||
'about.list1': 'Решаю задачи',
|
||||
'about.list1_desc': 'Нахожу выход из сложных ситуаций',
|
||||
'about.list2': 'Понятный код',
|
||||
'about.list2_desc': 'Пишу так, чтобы другим было ясно',
|
||||
'about.list3': 'Работает везде',
|
||||
'about.list3_desc': 'Код запускается на любом устройстве',
|
||||
'about.list4': 'Работа в команде',
|
||||
'about.list4_desc': 'Общаюсь без проблем',
|
||||
'about.button1': 'Написать',
|
||||
'about.button2': 'Моё резюме',
|
||||
'skills.subtitle': 'Что умею',
|
||||
'skills.title': 'Навыки',
|
||||
'projects.subtitle': 'Что сделал',
|
||||
'projects.title': 'Проекты',
|
||||
'projects.language': 'Язык',
|
||||
'projects.updated': 'Обновлено',
|
||||
'projects.view': 'Посмотреть проект',
|
||||
'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.cv': 'Резюме',
|
||||
'footer.about': 'Обо мне',
|
||||
'footer.projects': 'Проекты',
|
||||
'footer.contact': 'Контакты',
|
||||
'footer.copyright': '© 2025 ZorahM. Все права защищены.'
|
||||
'footer.copyright': '© 2025 ZorahM. Все права мои.'
|
||||
}
|
||||
};
|
||||
|
||||
// Skills data
|
||||
const skills = [
|
||||
{ name: "Java", icon: "fab fa-java", color: "text-red-500" },
|
||||
{ name: "TypeScript", icon: "fas fa-code", color: "text-blue-500" },
|
||||
{ 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" }
|
||||
{ name: "Python", icon: "fab fa-python", color: "text-yellow-500", level: 40 },
|
||||
{ name: "Lua", icon: "fas fa-gamepad", color: "text-blue-700", level: 45 }
|
||||
];
|
||||
|
||||
// Project data
|
||||
const projectsData = [
|
||||
{
|
||||
name: "zoChat",
|
||||
description: {
|
||||
en: "Chat plugin for Minecraft servers, enhancing communication features.",
|
||||
ru: "Плагин чата для серверов Minecraft, улучшающий функции общения."
|
||||
en: "Chat plugin for Minecraft servers. Makes chatting better.",
|
||||
ru: "Плагин для чата в Minecraft. Делает общение удобнее."
|
||||
},
|
||||
language: "Java",
|
||||
url: "https://github.com/zorahm/zochat",
|
||||
updated: "2 weeks ago"
|
||||
url: "https://git.zorahm.ru/ZorahM/zochat",
|
||||
updated: "2 weeks ago",
|
||||
stars: 1,
|
||||
forks: 0
|
||||
},
|
||||
{
|
||||
name: "Ubuntu-autologin",
|
||||
description: {
|
||||
en: "Shell script for automating login on Ubuntu systems.",
|
||||
ru: "Shell-скрипт для автоматического входа в системы Ubuntu."
|
||||
en: "Script to log in to Ubuntu automatically.",
|
||||
ru: "Скрипт для автоматического входа в Ubuntu."
|
||||
},
|
||||
language: "Shell",
|
||||
url: "https://github.com/zorahm/ubuntu-autologin",
|
||||
updated: "3 weeks ago"
|
||||
url: "https://git.zorahm.ru/ZorahM/ubuntu-autologin",
|
||||
updated: "3 weeks ago",
|
||||
stars: 1,
|
||||
forks: 0
|
||||
},
|
||||
{
|
||||
name: "mtiworlds",
|
||||
description: {
|
||||
en: "TypeScript project for managing game worlds.",
|
||||
ru: "Проект на TypeScript для управления игровыми мирами."
|
||||
en: "Manages game worlds in TypeScript.",
|
||||
ru: "Управляет игровыми мирами на TypeScript."
|
||||
},
|
||||
language: "TypeScript",
|
||||
url: "https://github.com/zorahm/mtiworlds",
|
||||
updated: "last month"
|
||||
url: "https://git.zorahm.ru/ZorahM/mtiworlds",
|
||||
updated: "last month",
|
||||
stars: 1,
|
||||
forks: 0
|
||||
},
|
||||
{
|
||||
name: "RepFlow",
|
||||
description: {
|
||||
en: "Administration tool for Arizona RP, catching and reporting data.",
|
||||
ru: "Инструмент администрирования для Arizona RP, сбор и отчётность данных."
|
||||
en: "Tool for Arizona RP admins to track and report stuff.",
|
||||
ru: "Инструмент для админов Arizona RP. Следит и отчитывается."
|
||||
},
|
||||
language: "Lua",
|
||||
url: "https://github.com/zorahm/repflow",
|
||||
updated: "Mar 21, 2025"
|
||||
url: "https://git.zorahm.ru/ZorahM/repflow",
|
||||
updated: "Mar 21, 2025",
|
||||
stars: 1,
|
||||
forks: 0
|
||||
},
|
||||
{
|
||||
name: "MinistryOfHealthMan",
|
||||
description: {
|
||||
en: "TypeScript analogue of SetHP for health management in games.",
|
||||
ru: "Аналог SetHP на TypeScript для управления здоровьем в играх."
|
||||
en: "Health management tool for games in TypeScript.",
|
||||
ru: "Инструмент для управления здоровьем в играх на TypeScript."
|
||||
},
|
||||
language: "TypeScript",
|
||||
url: "https://github.com/zorahm/ministryofhealthman",
|
||||
updated: "Mar 16, 2025"
|
||||
url: "https://git.zorahm.ru/ZorahM/ministryofhealthman",
|
||||
updated: "Mar 16, 2025",
|
||||
stars: 1,
|
||||
forks: 0
|
||||
},
|
||||
{
|
||||
name: "zorahm.github.io",
|
||||
description: {
|
||||
en: "Personal portfolio website hosted on GitHub Pages.",
|
||||
ru: "Личный сайт-портфолио, размещённый на GitHub Pages."
|
||||
en: "My portfolio site on GitHub Pages.",
|
||||
ru: "Мой сайт-портфолио на GitHub Pages."
|
||||
},
|
||||
language: "HTML",
|
||||
url: "https://github.com/zorahm/zorahm.github.io",
|
||||
updated: "Mar 15, 2025"
|
||||
},
|
||||
{
|
||||
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"
|
||||
url: "https://git.zorahm.ru/ZorahM/zorahm.github.io",
|
||||
updated: "Mar 15, 2025",
|
||||
stars: 1,
|
||||
forks: 0
|
||||
}
|
||||
];
|
||||
|
||||
// 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];
|
||||
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
|
||||
element.placeholder = translations[lang][key];
|
||||
} else {
|
||||
element.textContent = translations[lang][key];
|
||||
}
|
||||
}
|
||||
});
|
||||
renderProjects(lang);
|
||||
renderSkills();
|
||||
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.getElementById('body');
|
||||
|
||||
const body = document.body;
|
||||
function setTheme(theme) {
|
||||
if (theme === '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 {
|
||||
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);
|
||||
}
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
// Render skills
|
||||
function renderSkills() {
|
||||
const skillsGrid = document.getElementById('skills-grid');
|
||||
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">
|
||||
<i class="${skill.icon} ${skill.color} text-3xl mb-4"></i>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">${skill.name}</h3>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all card-hover">
|
||||
<div class="flex items-center mb-4">
|
||||
<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>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Render projects
|
||||
function renderProjects(lang = 'en') {
|
||||
const projectsGrid = document.getElementById('projects-grid');
|
||||
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">
|
||||
<h3 class="text-xl font-semibold text-teal-600 dark:text-teal-400 mb-3">${project.name}</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-4">${project.description[lang]}</p>
|
||||
<div class="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span><i class="fas fa-code mr-1"></i> ${project.language}</span>
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">${project.name}</h3>
|
||||
<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">
|
||||
${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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-700">
|
||||
<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">
|
||||
${translations[lang]['projects.view']} <i class="fas fa-external-link-alt ml-1"></i>
|
||||
<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="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-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const savedLanguage = localStorage.getItem('language') || 'en';
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
languageSwitcher.value = savedLanguage;
|
||||
setLanguage(savedLanguage);
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
setTheme(savedTheme);
|
||||
renderSkills();
|
||||
renderProjects(savedLanguage);
|
||||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user