ZorahM/site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Загрузить файлы в «/»

Browse Source
This commit is contained in:
ZorahM 2025-05-01 16:28:08 +00:00
commit d28eca23e1
5 changed files with 1012 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CNAME Normal file
View File

@ -0,0 +1 @@
zorahm.ru

BIN
avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

203
contact.html Normal file
View File

@ -0,0 +1,203 @@
<!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=Inter: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">
</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">
<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>
</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>
<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">
<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>
</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>
<!-- 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>
</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>
</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">
<!-- 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">
<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">Connect With Me</h2>
<div class="w-20 h-1 bg-teal-500 mx-auto"></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">
<i class="fab fa-github text-xl"></i>
<span>GitHub</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-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 items-center space-x-2 mb-4 md:mb-0">
<div class="w-6 h-6 rounded-full overflow-hidden">
<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>
</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>
</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>
</div>
</footer>
<script>
// Language translations
const translations = {
en: {
'nav.home': 'Home',
'nav.cv': 'CV',
'nav.contact': 'Contact',
'contact.title': 'Connect With 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.getElementById('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>';
} 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>';
}
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', () => {
const savedLanguage = localStorage.getItem('language') || 'en';
const savedTheme = localStorage.getItem('theme') || 'light';
languageSwitcher.value = savedLanguage;
setLanguage(savedLanguage);
setTheme(savedTheme);
});
</script>

296
cv.html Normal file
View File

@ -0,0 +1,296 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZorahM - CV</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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</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">
<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>
</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>
<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">
<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>
</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>
<!-- 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>
</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>
</div>
</nav>
<!-- CV Section -->
<section class="py-20 pt-24">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<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="cv.subtitle">Curriculum Vitae</span>
<h2 class="text-4xl font-bold mb-6" data-key="cv.title">My CV</h2>
<div class="w-20 h-1 bg-teal-500 mx-auto"></div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8">
<!-- Personal Info -->
<div class="mb-12">
<h3 class="text-2xl font-semibold mb-4 text-teal-600 dark:text-teal-400" data-key="cv.personal">Personal Information</h3>
<div class="space-y-2 text-gray-600 dark:text-gray-300">
<p><span class="font-medium" data-key="cv.name">Name:</span> ZorahM</p>
<p><span class="font-medium" data-key="cv.email">Email:</span> <a href="mailto:zorahm@foxiland.ru" class="text-teal-500 hover:underline">zorahm@foxiland.ru</a></p>
<p><span class="font-medium" data-key="cv.location">Location:</span> Moscow, Russia</p>
<p><span class="font-medium" data-key="cv.github">GitHub:</span> <a href="https://github.com/zorahm" class="text-teal-500 hover:underline">github.com/zorahm</a></p>
</div>
</div>
<!-- Education -->
<div class="mb-12">
<h3 class="text-2xl font-semibold mb-4 text-teal-600 dark:text-teal-400" data-key="cv.education">Education</h3>
<div class="space-y-4">
<div>
<h4 class="text-lg font-medium" data-key="cv.education1.title">Self-Taught Developer</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm" data-key="cv.education1.duration">2023 - Present</p>
<p class="text-gray-600 dark:text-gray-300" data-key="cv.education1.description">Learning programming through online resources, focusing on Java, TypeScript, Lua, Python, and Shell scripting.</p>
</div>
</div>
</div>
<!-- Skills -->
<div class="mb-12">
<h3 class="text-2xl font-semibold mb-4 text-teal-600 dark:text-teal-400" data-key="cv.skills">Skills</h3>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Java</li>
<li>TypeScript</li>
<li>Lua</li>
<li>Python</li>
<li>Shell Scripting</li>
<li>HTML5</li>
<li>Responsive Design</li>
<li>Problem Solving</li>
</ul>
</div>
<!-- Experience -->
<div class="mb-12">
<h3 class="text-2xl font-semibold mb-4 text-teal-600 dark:text-teal-400" data-key="cv.experience">Experience</h3>
<div class="space-y-4">
<div>
<h4 class="text-lg font-medium" data-key="cv.experience1.title">Freelance Developer</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm" data-key="cv.experience1.duration">2024 - Present</p>
<p class="text-gray-600 dark:text-gray-300" data-key="cv.experience1.description">Developed plugins and tools for gaming communities, including Minecraft server plugins and administration tools for Arizona RP.</p>
</div>
</div>
</div>
<!-- Projects -->
<div>
<h3 class="text-2xl font-semibold mb-4 text-teal-600 dark:text-teal-400" data-key="cv.projects">Key Projects</h3>
<div class="space-y-4">
<div>
<h4 class="text-lg font-medium">zoChat</h4>
<p class="text-gray-600 dark:text-gray-300" data-key="cv.project1.description">Chat plugin for Minecraft servers, enhancing communication features. Built with Java.</p>
<a href="https://github.com/zorahm/zochat" class="text-teal-500 hover:underline">GitHub</a>
</div>
<div>
<h4 class="text-lg font-medium">RepFlow</h4>
<p class="text-gray-600 dark:text-gray-300" data-key="cv.project2.description">Administration tool for Arizona RP, focusing on data reporting. Built with Lua.</p>
<a href="https://github.com/zorahm/repflow" class="text-teal-500 hover:underline">GitHub</a>
</div>
<div>
<h4 class="text-lg font-medium">Ubuntu-autologin</h4>
<p class="text-gray-600 dark:text-gray-300" data-key="cv.project3.description">Shell script for automating login on Ubuntu systems.</p>
<a href="https://github.com/zorahm/ubuntu-autologin" class="text-teal-500 hover:underline">GitHub</a>
</div>
</div>
</div>
</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">
<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">
<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>
</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>
</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>
</div>
</footer>
<script>
// Language translations
const translations = {
en: {
'nav.home': 'Home',
'nav.cv': 'CV',
'nav.contact': 'Contact',
'cv.subtitle': 'Curriculum Vitae',
'cv.title': 'My CV',
'cv.personal': 'Personal Information',
'cv.name': 'Name',
'cv.email': 'Email',
'cv.phone': 'Phone',
'cv.location': 'Location',
'cv.github': 'GitHub',
'cv.education': 'Education',
'cv.education1.title': 'Self-Taught Developer',
'cv.education1.duration': '2023 - Present',
'cv.education1.description': 'Learning programming through online resources, focusing on Java, TypeScript, Lua, Python, and Shell scripting.',
'cv.skills': 'Skills',
'cv.experience': 'Experience',
'cv.experience1.title': 'Freelance Developer',
'cv.experience1.duration': '2024 - Present',
'cv.experience1.description': 'Developed plugins and tools for gaming communities, including Minecraft server plugins and administration tools for Arizona RP.',
'cv.projects': 'Key Projects',
'cv.project1.description': 'Chat plugin for Minecraft servers, enhancing communication features. Built with Java.',
'cv.project2.description': 'Administration tool for Arizona RP, focusing on data reporting. Built with Lua.',
'cv.project3.description': 'Shell script for automating login on Ubuntu systems.',
'footer.home': 'Home',
'footer.cv': 'CV',
'footer.contact': 'Contact',
'footer.copyright': '© 2025 ZorahM. All rights reserved.'
},
ru: {
'nav.home': 'Главная',
'nav.cv': 'Резюме',
'nav.contact': 'Контакты',
'cv.subtitle': 'Резюме',
'cv.title': 'Моё резюме',
'cv.personal': 'Личная информация',
'cv.name': 'Имя',
'cv.email': 'Email',
'cv.phone': 'Телефон',
'cv.location': 'Местоположение',
'cv.github': 'GitHub',
'cv.education': 'Образование',
'cv.education1.title': 'Самоучка-разработчик',
'cv.education1.duration': '2023 - Настоящее время',
'cv.education1.description': 'Изучение программирования через онлайн-ресурсы, с акцентом на Java, TypeScript, Lua, Python и Shell-скрипты.',
'cv.skills': 'Навыки',
'cv.experience': 'Опыт',
'cv.experience1.title': 'Фриланс-разработчик',
'cv.experience1.duration': '2024 - Настоящее время',
'cv.experience1.description': 'Разработка плагинов и инструментов для игровых сообществ, включая плагины для серверов Minecraft и инструменты администрирования для Arizona RP.',
'cv.projects': 'Ключевые проекты',
'cv.project1.description': 'Плагин чата для серверов Minecraft, улучшающий функции общения. Создан на Java.',
'cv.project2.description': 'Инструмент администрирования для Arizona RP, сосредоточенный на отчётности данных. Создан на Lua.',
'cv.project3.description': 'Shell-скрипт для автоматизации входа в системы Ubuntu.',
'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.getElementById('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>';
} 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>';
}
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', () => {
const savedLanguage = localStorage.getItem('language') || 'en';
const savedTheme = localStorage.getItem('theme') || 'light';
languageSwitcher.value = savedLanguage;
setLanguage(savedLanguage);
setTheme(savedTheme);
});
</script>

512
index.html Normal file
View File

@ -0,0 +1,512 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZorahM - Developer 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</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">
<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>
</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>
<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">
<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>
</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>
<!-- 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>
</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>
</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>
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 dark:opacity-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">
<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
</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>
</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>
</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">
<i class="fab fa-github"></i>
</a>
</div>
</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">
<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>
</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"
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>
<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.
</p>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="flex items-center">
<div class="mr-3 text-teal-500">
<i class="fas fa-check-circle"></i>
</div>
<span data-key="about.list1">Problem Solving</span>
</div>
<div class="flex items-center">
<div class="mr-3 text-teal-500">
<i class="fas fa-check-circle"></i>
</div>
<span data-key="about.list2">Clean Code</span>
</div>
<div class="flex items-center">
<div class="mr-3 text-teal-500">
<i class="fas fa-check-circle"></i>
</div>
<span data-key="about.list3">Responsive Design</span>
</div>
<div class="flex items-center">
<div class="mr-3 text-teal-500">
<i class="fas fa-check-circle"></i>
</div>
<span data-key="about.list4">Team Collaboration</span>
</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>
</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">
<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 -->
</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">
<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>
</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">
<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>
<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">
<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">
<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>
</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>
</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">
<i class="fab fa-github"></i>
</a>
</div>
</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',
'projects.language': 'Language',
'projects.updated': 'Updated',
'projects.view': 'View Project',
'projects.viewall': 'View All Projects',
'footer.home': 'Home',
'footer.cv': 'CV',
'footer.contact': 'Contact',
'footer.copyright': '© 2025 ZorahM. All rights reserved.'
},
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': 'Последние проекты',
'projects.language': 'Язык',
'projects.updated': 'Обновлено',
'projects.view': 'Посмотреть проект',
'projects.viewall': 'Все проекты',
'footer.home': 'Главная',
'footer.cv': 'Резюме',
'footer.contact': 'Контакты',
'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" }
];
// Project data
const projectsData = [
{
name: "zoChat",
description: {
en: "Chat plugin for Minecraft servers, enhancing communication features.",
ru: "Плагин чата для серверов Minecraft, улучшающий функции общения."
},
language: "Java",
url: "https://github.com/zorahm/zochat",
updated: "2 weeks ago"
},
{
name: "Ubuntu-autologin",
description: {
en: "Shell script for automating login on Ubuntu systems.",
ru: "Shell-скрипт для автоматического входа в системы Ubuntu."
},
language: "Shell",
url: "https://github.com/zorahm/ubuntu-autologin",
updated: "3 weeks ago"
},
{
name: "mtiworlds",
description: {
en: "TypeScript project for managing game worlds.",
ru: "Проект на TypeScript для управления игровыми мирами."
},
language: "TypeScript",
url: "https://github.com/zorahm/mtiworlds",
updated: "last month"
},
{
name: "RepFlow",
description: {
en: "Administration tool for Arizona RP, catching and reporting data.",
ru: "Инструмент администрирования для Arizona RP, сбор и отчётность данных."
},
language: "Lua",
url: "https://github.com/zorahm/repflow",
updated: "Mar 21, 2025"
},
{
name: "MinistryOfHealthMan",
description: {
en: "TypeScript analogue of SetHP for health management in games.",
ru: "Аналог SetHP на TypeScript для управления здоровьем в играх."
},
language: "TypeScript",
url: "https://github.com/zorahm/ministryofhealthman",
updated: "Mar 16, 2025"
},
{
name: "zorahm.github.io",
description: {
en: "Personal portfolio website hosted 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"
}
];
// 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];
}
});
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');
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>';
} 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>';
}
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>
`).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="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>
<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>
</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);
setTheme(savedTheme);
});
</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>