224 lines
12 KiB
HTML
224 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ilya Rudkevich</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
|
<script src="https://kit.fontawesome.com/f502f0780c.js" crossorigin="anonymous"></script>
|
|
|
|
<script defer data-domain="rferee.dev" src="https://analytics.rfer.ee/js/script.js"></script>
|
|
|
|
<!-- External CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<!-- External JavaScript -->
|
|
<script defer src="script.js"></script>
|
|
</head>
|
|
<body class="text-gray-100">
|
|
<div class="min-h-screen flex flex-col">
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-6 md:px-8 py-12 flex-grow max-w-4xl">
|
|
<!-- Name and Header -->
|
|
<section class="mb-16 pt-6">
|
|
<div class="relative">
|
|
<!-- Animated background elements -->
|
|
<div class="absolute inset-0 overflow-hidden rounded-xl" style="z-index: 0;">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
</div>
|
|
|
|
<div class="glass-card rounded-xl p-8 mb-10 mx-auto overflow-hidden relative" style="z-index: 1;">
|
|
<div class="space-y-4">
|
|
<h1 class="text-5xl md:text-6xl font-black text-white">
|
|
<span class="bg-gradient-to-r from-white to-gray-300 text-transparent bg-clip-text">Ilya Rudkevich</span>
|
|
</h1>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 pt-2">
|
|
<div class="flex items-center gap-2 text-white">
|
|
<i class="fa-solid fa-location-dot text-white icon"></i>
|
|
<span>Saint-Petersburg, Russia</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-white col-span-2">
|
|
<i class="fa-solid fa-language text-white icon"></i>
|
|
<span>RU, EN, BY</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Links -->
|
|
<div class="gap-x-6 gap-y-3 text-white pt-4">
|
|
<a href="#" class="text-white flex items-center gap-2 mb-2">
|
|
<i class="fa-brands fa-github icon"></i>
|
|
<span class="text-custom-lavender">@gfxv</span>
|
|
</a>
|
|
<a href="#" class="text-white flex items-center gap-2 mb-2">
|
|
<i class="fa-solid fa-file-lines icon"></i>
|
|
<span class="text-custom-lavender">Resume / CV
|
|
</span>
|
|
</a>
|
|
<div class="flex items-center gap-2 md:col-span-2 gap-2">
|
|
<i class="fa-solid fa-envelope icon"></i>
|
|
<span>ilya.rud.main [AT] gmail.com</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Skills Section -->
|
|
<section class="mb-16 skills-section">
|
|
<h2 class="section-heading text-white">Skills</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div class="matte-glass rounded-lg p-5">
|
|
<h3 class="text-xl font-bold mb-4 text-white flex items-center">
|
|
<i class="fa-solid fa-code text-white mr-4 icon"></i>
|
|
Languages
|
|
</h3>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="skill-tag">Go</span>
|
|
<span class="skill-tag">Python</span>
|
|
<span class="skill-tag">JavaScript</span>
|
|
<span class="skill-tag">HTML/CSS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matte-glass rounded-lg p-5">
|
|
<h3 class="text-xl font-bold mb-4 text-white flex items-center">
|
|
<i class="fa-solid fa-server text-white mr-4 icon"></i>
|
|
Backend
|
|
</h3>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="skill-tag">Gin</span>
|
|
<span class="skill-tag">Fiber</span>
|
|
<span class="skill-tag">FastAPI</span>
|
|
<span class="skill-tag">REST</span>
|
|
<span class="skill-tag">gRPC</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matte-glass rounded-lg p-5">
|
|
<h3 class="text-xl font-bold mb-4 text-white flex items-center">
|
|
<i class="fa-solid fa-database text-white mr-4 icon"></i>
|
|
Databases
|
|
</h3>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="skill-tag">PostgreSQL</span>
|
|
<span class="skill-tag">SQLite</span>
|
|
<span class="skill-tag">MongoDB</span>
|
|
<span class="skill-tag">Redis</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matte-glass rounded-lg p-5">
|
|
<h3 class="text-xl font-bold mb-4 text-white flex items-center">
|
|
<i class="fa-solid fa-cloud text-white mr-4 icon"></i>
|
|
DevOps
|
|
</h3>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="skill-tag">Docker</span>
|
|
<span class="skill-tag">Portainer</span>
|
|
<span class="skill-tag">GitLab CI</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matte-glass rounded-lg p-5 md:col-span-2">
|
|
<h3 class="text-xl font-bold mb-4 text-white flex items-center">
|
|
<i class="fa-solid fa-wrench text-white mr-4 icon"></i>
|
|
Tools
|
|
</h3>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="skill-tag">Git</span>
|
|
<span class="skill-tag">Make</span>
|
|
<span class="skill-tag">Task</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section class="mb-12 projects-section">
|
|
<h2 class="section-heading text-white">Projects</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div class="matte-glass rounded-lg p-6 md:col-span-2">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
|
<h4 class="text-2xl font-bold text-white mb-2 md:mb-0">Project One</h4>
|
|
<div class="flex gap-3">
|
|
<a href="#" class="text-gray-300 flex items-center" aria-label="GitHub Repository">
|
|
<i class="fa-brands fa-github icon text-lg"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-300 flex items-center" aria-label="Live Demo">
|
|
<i class="fa-solid fa-link icon text-lg"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-300 mb-4">A brief description of the first project and what technologies were used. Explains the problem solved and key features implemented.</p>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="project-tag">Go</span>
|
|
<span class="project-tag">PostgreSQL</span>
|
|
<span class="project-tag">Docker</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matte-glass rounded-lg p-6">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
|
<h4 class="text-2xl font-bold text-white mb-2 md:mb-0">Project Two</h4>
|
|
<div class="flex gap-3">
|
|
<a href="#" class="text-gray-300 flex items-center" aria-label="GitHub Repository">
|
|
<i class="fa-brands fa-github icon text-lg"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-300 flex items-center" aria-label="Live Demo">
|
|
<i class="fa-solid fa-link icon text-lg"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-300 mb-4">A brief description of the second project with its key features. Demonstrates technical skills and problem-solving abilities.</p>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="project-tag">Python</span>
|
|
<span class="project-tag">FastAPI</span>
|
|
<span class="project-tag">MongoDB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matte-glass rounded-lg p-6">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
|
<h4 class="text-2xl font-bold text-white mb-2 md:mb-0">Project Three</h4>
|
|
<div class="flex gap-3">
|
|
<a href="#" class="text-gray-300 flex items-center" aria-label="GitHub Repository">
|
|
<i class="fa-brands fa-github icon text-lg"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-300 flex items-center" aria-label="Live Demo">
|
|
<i class="fa-solid fa-link icon text-lg"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-300 mb-4">An overview of the third project highlighting its innovative aspects. Shows creativity and technical expertise.</p>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="project-tag">JavaScript</span>
|
|
<span class="project-tag">HTML/CSS</span>
|
|
<span class="project-tag">Redis</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Subtle footer -->
|
|
<footer class="text-center text-gray-500 text-sm pt-4 pb-4">
|
|
© <span id="current-year"></span> Ilya Rudkevich. Designed and developed by <a href="https://rferee.dev" class="text-gray-400">@rferee</a>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Set the current year in the footer
|
|
document.getElementById('current-year').textContent = new Date().getFullYear();
|
|
</script>
|
|
</body>
|
|
</html> |