initial
This commit is contained in:
gfxv
commit
bd54572858
224
index.html
Normal file
224
index.html
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
<!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>
|
||||||
4
script.js
Normal file
4
script.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Set the current year in the footer
|
||||||
|
document.getElementById('current-year').textContent = new Date().getFullYear();
|
||||||
|
});
|
||||||
193
styles.css
Normal file
193
styles.css
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
body {
|
||||||
|
background-color: #0f1210;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Inter Tight', sans-serif;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Refined color palette */
|
||||||
|
:root {
|
||||||
|
--lavender-primary: #c2a0dc;
|
||||||
|
--lavender-secondary: #B39DDB;
|
||||||
|
--lavender-tertiary: #C9A3E4;
|
||||||
|
--lavender-dark: rgba(124, 99, 154, 0.1);
|
||||||
|
--bg-dark: #0f1210;
|
||||||
|
--bg-card: rgba(22, 27, 26, 0.7);
|
||||||
|
--text-light: #f3f4f6;
|
||||||
|
--text-muted: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom color classes */
|
||||||
|
.bg-custom-lavender {
|
||||||
|
background-color: var(--lavender-primary);
|
||||||
|
}
|
||||||
|
.border-custom-lavender {
|
||||||
|
border-color: var(--lavender-primary);
|
||||||
|
}
|
||||||
|
.text-custom-lavender {
|
||||||
|
color: var(--lavender-primary);
|
||||||
|
}
|
||||||
|
.hover\:bg-custom-lavender:hover {
|
||||||
|
background-color: var(--lavender-primary);
|
||||||
|
}
|
||||||
|
.hover\:border-custom-lavender:hover {
|
||||||
|
border-color: var(--lavender-primary);
|
||||||
|
}
|
||||||
|
.hover\:text-custom-lavender:hover {
|
||||||
|
color: var(--lavender-primary);
|
||||||
|
}
|
||||||
|
.bg-custom-lavender-900\/30 {
|
||||||
|
background-color: var(--lavender-dark);
|
||||||
|
}
|
||||||
|
.text-custom-lavender-300 {
|
||||||
|
color: var(--lavender-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
.section-heading {
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding-bottom: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--text-light);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Business card glass effect */
|
||||||
|
.glass-card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Matte glass effect for skill and project blocks */
|
||||||
|
.matte-glass {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.15);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden; /* Ensure the blob stays contained */
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated blobs with improved colors */
|
||||||
|
.blob {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(60px);
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob-1 {
|
||||||
|
background-color: var(--lavender-primary);
|
||||||
|
width: 220px;
|
||||||
|
height: 220px;
|
||||||
|
top: -70px;
|
||||||
|
left: 20%;
|
||||||
|
animation: blob-move-1 25s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob-2 {
|
||||||
|
background-color: var(--lavender-secondary);
|
||||||
|
width: 280px;
|
||||||
|
height: 280px;
|
||||||
|
bottom: -70px;
|
||||||
|
right: 15%;
|
||||||
|
animation: blob-move-2 20s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob-3 {
|
||||||
|
background-color: var(--lavender-tertiary);
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
top: 40%;
|
||||||
|
left: 10%;
|
||||||
|
animation: blob-move-3 22s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blob-move-1 {
|
||||||
|
0% { transform: translate(0, 0) scale(1); }
|
||||||
|
33% { transform: translate(30px, 20px) scale(1.1); }
|
||||||
|
66% { transform: translate(-20px, 40px) scale(0.9); }
|
||||||
|
100% { transform: translate(10px, 30px) scale(1.05); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blob-move-2 {
|
||||||
|
0% { transform: translate(0, 0) scale(1); }
|
||||||
|
33% { transform: translate(-40px, -20px) scale(1.15); }
|
||||||
|
66% { transform: translate(20px, -30px) scale(0.95); }
|
||||||
|
100% { transform: translate(-15px, -25px) scale(1.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blob-move-3 {
|
||||||
|
0% { transform: translate(0, 0) scale(1); }
|
||||||
|
25% { transform: translate(8px, -10px) scale(0.98); }
|
||||||
|
50% { transform: translate(-10px, 8px) scale(1.03); }
|
||||||
|
75% { transform: translate(5px, -5px) scale(0.95); }
|
||||||
|
100% { transform: translate(7px, -7px) scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skill tags and project tags */
|
||||||
|
.skill-tag, .project-tag {
|
||||||
|
background-color: var(--lavender-dark);
|
||||||
|
color: var(--lavender-secondary);
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons styling */
|
||||||
|
.icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
min-width: 1.25rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: 0px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Improved scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: rgba(15, 18, 16, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(220, 187, 226, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(220, 187, 226, 0.5);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user