300 lines
No EOL
9.1 KiB
Text
300 lines
No EOL
9.1 KiB
Text
---
|
||
import PageHeading from '@components/base/PageHeading.astro'
|
||
|
||
const skills = [
|
||
"Astro",
|
||
"NextJS",
|
||
"SolidJS",
|
||
"Preact",
|
||
"React",
|
||
"SolidJS",
|
||
"TypeScript",
|
||
"Tailwind CSS"
|
||
]
|
||
---
|
||
|
||
<section class="space-y-8 md:space-y-12">
|
||
<PageHeading
|
||
title="Информация и профессиональный опыт"
|
||
description="Привет 👋 Я Redi, Jamstack-разработчик. Создаю современные веб-приложения, увлекаюсь новыми технологиями и делюсь опыт через статьи и open-source проекты."
|
||
/>
|
||
|
||
<!-- Первая строка: изображение + блок доступности + текст -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 mb-8 md:mb-12">
|
||
|
||
<!-- Левая колонка - 2 ячейки -->
|
||
<div class="lg:col-span-1 space-y-4 md:space-y-6">
|
||
<!-- Картинка -->
|
||
<div class="relative group">
|
||
<div class="relative overflow-hidden rounded-xl md:rounded-2xl shadow-lg md:shadow-2xl">
|
||
<img
|
||
src="/images/about.avif"
|
||
width={280}
|
||
height={280}
|
||
alt="RediBedi - Веб-разработчик"
|
||
class="w-full h-auto object-cover transition-transform duration-700 group-hover:scale-105"
|
||
loading="eager"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блок "Доступен для проектов" с анимированной ракетой -->
|
||
<div class="p-4 md:p-6 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl md:rounded-2xl shadow-md md:shadow-lg overflow-hidden relative rocket-container">
|
||
<div class="text-center relative z-10">
|
||
<div class="rocket-animation">
|
||
<div class="rocket text-2xl md:text-4xl">🚀</div>
|
||
<div class="exhaust"></div>
|
||
<div class="stars">
|
||
{Array.from({ length: 10 }).map((_, i) => (
|
||
<div class={`star star-${i + 1}`}></div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<h3 class="text-base md:text-lg font-semibold text-white mb-1 md:mb-2 mt-2 md:mt-4">Доступен для проектов</h3>
|
||
<p class="text-indigo-100 text-xs md:text-sm">Готов к новым вызовам и интересным проектам</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Правая колонка - Текст -->
|
||
<div class="lg:col-span-2">
|
||
<div class="p-4 md:p-6 lg:p-8 bg-white dark:bg-neutral-900 rounded-xl md:rounded-2xl shadow-md md:shadow-lg border border-gray-100 dark:border-neutral-800 h-full">
|
||
<p class="text-md md:text-base text-center md:text-left lg:text-lg leading-7 md:leading-8 text-gray-700 dark:text-neutral-300">
|
||
Jamstack-разработчик с 12+ годами опыта, специализируюсь на создании высоконагруженных веб-приложений.
|
||
Люблю работать с современным стеком технологий и решать сложные архитектурные задачи.
|
||
Постоянно изучаю новые подходы к разработке и делюсь знаниями с сообществом через технические статьи
|
||
и open-source проекты. Верю в силу сообщества и открытого кода.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Вторая строка: Технологии на всю ширину -->
|
||
<div>
|
||
<h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-4 md:mb-6 lg:mb-8 text-center">
|
||
Технологии которые я использую
|
||
</h2>
|
||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 md:gap-3 lg:gap-4">
|
||
{skills.map((skill, index) => (
|
||
<div
|
||
class="flex items-center justify-center p-2 md:p-3 lg:p-4 bg-gradient-to-br from-white to-gray-50 dark:from-neutral-800 dark:to-neutral-700 rounded-lg md:rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 border border-gray-200 dark:border-neutral-600 group"
|
||
style={`animation-delay: ${index * 50}ms`}
|
||
>
|
||
<span class="text-xs md:text-sm font-medium text-gray-700 dark:text-neutral-200 text-center group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
|
||
{skill}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
/* Анимация для карточек технологий */
|
||
.grid.grid-cols-2 > div {
|
||
animation: fadeInUp 0.6s ease-out forwards;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Плавные переходы */
|
||
.group {
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
|
||
/* Анимация ракеты */
|
||
.rocket-container {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rocket-animation {
|
||
position: relative;
|
||
height: 60px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.rocket-animation {
|
||
height: 80px;
|
||
}
|
||
}
|
||
|
||
.rocket {
|
||
animation: rocketFloat 3s ease-in-out infinite;
|
||
z-index: 2;
|
||
position: relative;
|
||
}
|
||
|
||
.exhaust {
|
||
position: absolute;
|
||
bottom: -8px;
|
||
width: 16px;
|
||
height: 24px;
|
||
background: linear-gradient(to top, #ff9d00, #ff2c00, transparent);
|
||
border-radius: 50% 50% 0 0;
|
||
opacity: 0.8;
|
||
animation: exhaustPulse 1.5s ease-in-out infinite;
|
||
z-index: 1;
|
||
filter: blur(2px);
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.exhaust {
|
||
bottom: -10px;
|
||
width: 20px;
|
||
height: 30px;
|
||
filter: blur(3px);
|
||
}
|
||
}
|
||
|
||
.stars {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.star {
|
||
position: absolute;
|
||
background-color: white;
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Создаем несколько звездочек с разными позициями и анимациями */
|
||
.star-1 { width: 1px; height: 1px; top: 20%; left: 30%; animation: starShine 3s 0.5s infinite; }
|
||
.star-2 { width: 2px; height: 2px; top: 40%; left: 60%; animation: starShine 4s 1s infinite; }
|
||
.star-3 { width: 1px; height: 1px; top: 60%; left: 20%; animation: starShine 3.5s 0.8s infinite; }
|
||
.star-4 { width: 2px; height: 2px; top: 30%; left: 80%; animation: starShine 4.5s 1.2s infinite; }
|
||
.star-5 { width: 1px; height: 1px; top: 70%; left: 40%; animation: starShine 3.2s 0.6s infinite; }
|
||
.star-6 { width: 2px; height: 2px; top: 10%; left: 50%; animation: starShine 4.2s 1.4s infinite; }
|
||
.star-7 { width: 1px; height: 1px; top: 50%; left: 10%; animation: starShine 3.8s 0.9s infinite; }
|
||
.star-8 { width: 2px; height: 2px; top: 80%; left: 70%; animation: starShine 4.8s 1.6s infinite; }
|
||
.star-9 { width: 1px; height: 1px; top: 25%; left: 90%; animation: starShine 3.3s 1.1s infinite; }
|
||
.star-10 { width: 2px; height: 2px; top: 65%; left: 30%; animation: starShine 4.3s 0.7s infinite; }
|
||
|
||
@media (min-width: 768px) {
|
||
.star-1, .star-3, .star-5, .star-7, .star-9 { width: 2px; height: 2px; }
|
||
.star-2, .star-4, .star-6, .star-8, .star-10 { width: 3px; height: 3px; }
|
||
}
|
||
|
||
@keyframes rocketFloat {
|
||
0%, 100% {
|
||
transform: translateY(0) rotate(0deg);
|
||
}
|
||
25% {
|
||
transform: translateY(-4px) rotate(2deg);
|
||
}
|
||
50% {
|
||
transform: translateY(0) rotate(0deg);
|
||
}
|
||
75% {
|
||
transform: translateY(4px) rotate(-2deg);
|
||
}
|
||
}
|
||
|
||
@keyframes exhaustPulse {
|
||
0%, 100% {
|
||
height: 16px;
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
height: 24px;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
@keyframes exhaustPulse {
|
||
0%, 100% {
|
||
height: 20px;
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
height: 30px;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes starShine {
|
||
0%, 100% {
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/* Эффект при наведении на контейнер */
|
||
.rocket-container:hover .rocket {
|
||
animation: rocketHover 2s ease-in-out;
|
||
}
|
||
|
||
.rocket-container:hover .exhaust {
|
||
animation: exhaustBoost 1s ease-in-out;
|
||
}
|
||
|
||
@keyframes rocketHover {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
@keyframes rocketHover {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-15px);
|
||
}
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes exhaustBoost {
|
||
0%, 100% {
|
||
height: 16px;
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
height: 32px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
@keyframes exhaustBoost {
|
||
0%, 100% {
|
||
height: 20px;
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
height: 40px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
</style> |