gfxv/public
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
gfxv 2025-03-03 13:38:19 +03:00
commit bd54572858
3 changed files with 421 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
index.html Normal file
View 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
View 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
View 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);
}