546 lines
28 KiB
HTML
546 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ZorahM - Portfolio</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
body {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
background-color: #f8fafc;
|
||
color: #0f172a;
|
||
transition: all 0.3s ease;
|
||
}
|
||
body.dark {
|
||
background-color: #0f172a;
|
||
color: #f8fafc;
|
||
}
|
||
.gradient-text {
|
||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.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="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 gradient-text">ZorahM</h1>
|
||
</div>
|
||
<div class="flex items-center space-x-6">
|
||
<div class="hidden md:flex items-center space-x-8">
|
||
<a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors font-medium" data-key="nav.home">Home</a>
|
||
<a href="#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-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">
|
||
<i class="fas fa-chevron-down text-xs text-gray-500 dark:text-gray-400"></i>
|
||
</div>
|
||
</div>
|
||
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors border border-gray-200 dark:border-gray-700">
|
||
<i id="theme-icon" class="fas fa-sun text-gray-700 dark:text-gray-300"></i>
|
||
</button>
|
||
<button id="mobile-menu-button" class="md:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors border border-gray-200 dark:border-gray-700">
|
||
<i class="fas fa-bars text-gray-700 dark:text-gray-300"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<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-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-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">
|
||
<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" 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">
|
||
<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>
|
||
<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-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-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-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">
|
||
Пишу код на Python и Lua. Делаю рабочие программы, стараюсь, чтобы всё было просто и понятно. Учусь новому, когда есть время.
|
||
</p>
|
||
<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>
|
||
<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-start">
|
||
<div class="mr-3 mt-1 text-indigo-500">
|
||
<i class="fas fa-check-circle"></i>
|
||
</div>
|
||
<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-start">
|
||
<div class="mr-3 mt-1 text-indigo-500">
|
||
<i class="fas fa-check-circle"></i>
|
||
</div>
|
||
<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-start">
|
||
<div class="mr-3 mt-1 text-indigo-500">
|
||
<i class="fas fa-check-circle"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-medium text-gray-900 dark:text-gray-100" data-key="about.list4">Работа в команде</h4>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400" data-key="about.list4_desc">Общаюсь без проблем</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div 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>
|
||
<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-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>
|
||
<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-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"></div>
|
||
<div class="text-center mt-12">
|
||
<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 class="py-12 bg-gray-900 text-gray-300">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<div class="flex items-center space-x-3 mb-6 md:mb-0">
|
||
<div class="w-8 h-8 rounded-full overflow-hidden border-2 border-indigo-500">
|
||
<img src="avatar.png" alt="ZorahM Avatar" class="w-full h-full object-cover">
|
||
</div>
|
||
<span class="text-xl font-bold text-white">ZorahM</span>
|
||
</div>
|
||
<div class="flex items-center space-x-6 mb-6 md:mb-0">
|
||
<a href="index.html" class="text-gray-300 hover:text-indigo-400 transition-colors" data-key="footer.home">Home</a>
|
||
<a href="#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 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>
|
||
const translations = {
|
||
en: {
|
||
'nav.home': 'Home',
|
||
'nav.about': 'About',
|
||
'nav.skills': 'Skills',
|
||
'nav.projects': 'Projects',
|
||
'nav.contact': 'Contact',
|
||
'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': '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.about': 'About',
|
||
'footer.projects': 'Projects',
|
||
'footer.contact': 'Contact',
|
||
'footer.copyright': '© 2025 ZorahM. All mine.'
|
||
},
|
||
ru: {
|
||
'nav.home': 'Главная',
|
||
'nav.about': 'Обо мне',
|
||
'nav.skills': 'Навыки',
|
||
'nav.projects': 'Проекты',
|
||
'nav.contact': 'Контакты',
|
||
'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.about': 'Обо мне',
|
||
'footer.projects': 'Проекты',
|
||
'footer.contact': 'Контакты',
|
||
'footer.copyright': '© 2025 ZorahM. Все права мои.'
|
||
}
|
||
};
|
||
const skills = [
|
||
{ name: "Python", icon: "fab fa-python", color: "text-yellow-500", level: 40 },
|
||
{ name: "Lua", icon: "fas fa-gamepad", color: "text-blue-700", level: 45 }
|
||
];
|
||
const projectsData = [
|
||
{
|
||
name: "zoChat",
|
||
description: {
|
||
en: "Chat plugin for Minecraft servers. Makes chatting better.",
|
||
ru: "Плагин для чата в Minecraft. Делает общение удобнее."
|
||
},
|
||
language: "Java",
|
||
url: "https://git.zorahm.ru/ZorahM/zochat",
|
||
updated: "2 weeks ago",
|
||
stars: 1,
|
||
forks: 0
|
||
},
|
||
{
|
||
name: "Ubuntu-autologin",
|
||
description: {
|
||
en: "Script to log in to Ubuntu automatically.",
|
||
ru: "Скрипт для автоматического входа в Ubuntu."
|
||
},
|
||
language: "Shell",
|
||
url: "https://git.zorahm.ru/ZorahM/ubuntu-autologin",
|
||
updated: "3 weeks ago",
|
||
stars: 1,
|
||
forks: 0
|
||
},
|
||
{
|
||
name: "mtiworlds",
|
||
description: {
|
||
en: "Manages game worlds in TypeScript.",
|
||
ru: "Управляет игровыми мирами на TypeScript."
|
||
},
|
||
language: "TypeScript",
|
||
url: "https://git.zorahm.ru/ZorahM/mtiworlds",
|
||
updated: "last month",
|
||
stars: 1,
|
||
forks: 0
|
||
},
|
||
{
|
||
name: "RepFlow",
|
||
description: {
|
||
en: "Tool for Arizona RP admins to track and report stuff.",
|
||
ru: "Инструмент для админов Arizona RP. Следит и отчитывается."
|
||
},
|
||
language: "Lua",
|
||
url: "https://git.zorahm.ru/ZorahM/repflow",
|
||
updated: "Mar 21, 2025",
|
||
stars: 1,
|
||
forks: 0
|
||
},
|
||
{
|
||
name: "MinistryOfHealthMan",
|
||
description: {
|
||
en: "Health management tool for games in TypeScript.",
|
||
ru: "Инструмент для управления здоровьем в играх на TypeScript."
|
||
},
|
||
language: "TypeScript",
|
||
url: "https://git.zorahm.ru/ZorahM/ministryofhealthman",
|
||
updated: "Mar 16, 2025",
|
||
stars: 1,
|
||
forks: 0
|
||
},
|
||
{
|
||
name: "zorahm.github.io",
|
||
description: {
|
||
en: "My portfolio site on GitHub Pages.",
|
||
ru: "Мой сайт-портфолио на GitHub Pages."
|
||
},
|
||
language: "HTML",
|
||
url: "https://git.zorahm.ru/ZorahM/zorahm.github.io",
|
||
updated: "Mar 15, 2025",
|
||
stars: 1,
|
||
forks: 0
|
||
}
|
||
];
|
||
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]) {
|
||
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);
|
||
});
|
||
const themeToggle = document.getElementById('theme-toggle');
|
||
const themeIcon = document.getElementById('theme-icon');
|
||
const body = document.body;
|
||
function setTheme(theme) {
|
||
if (theme === 'dark') {
|
||
body.classList.add('dark');
|
||
themeIcon.classList.remove('fa-sun');
|
||
themeIcon.classList.add('fa-moon');
|
||
} else {
|
||
body.classList.remove('dark');
|
||
themeIcon.classList.remove('fa-moon');
|
||
themeIcon.classList.add('fa-sun');
|
||
}
|
||
localStorage.setItem('theme', theme);
|
||
}
|
||
themeToggle.addEventListener('click', () => {
|
||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
|
||
});
|
||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
mobileMenuButton.addEventListener('click', () => {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
function renderSkills() {
|
||
const skillsGrid = document.getElementById('skills-grid');
|
||
skillsGrid.innerHTML = skills.map(skill => `
|
||
<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('');
|
||
}
|
||
function renderProjects(lang = 'en') {
|
||
const projectsGrid = document.getElementById('projects-grid');
|
||
projectsGrid.innerHTML = projectsData.map(project => `
|
||
<div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all card-hover">
|
||
<div class="p-6">
|
||
<div class="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 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('');
|
||
}
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const savedLanguage = localStorage.getItem('language') || 'en';
|
||
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>
|
||
</body>
|
||
</html> |