57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<template>
|
||
<section id="hero" class="hero-gradient min-h-screen flex items-center justify-center px-4 py-24">
|
||
<div class="max-w-4xl mx-auto text-center section-hidden" ref="sectionRef">
|
||
<div class="mb-6">
|
||
<UBadge color="primary" variant="soft" size="lg" class="mb-4">
|
||
Доступен для новых проектов
|
||
</UBadge>
|
||
</div>
|
||
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
|
||
Алексей<br>
|
||
<span class="text-indigo-400">Разработчик</span>
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-gray-400 mb-4 font-medium">
|
||
Fullstack Developer · NestJS · Nuxt 3 · TypeScript
|
||
</p>
|
||
<p class="text-lg text-gray-500 max-w-2xl mx-auto mb-10">
|
||
Создаю современные веб-приложения с чистым кодом и отличным UX.
|
||
От MVP до production-ready решений.
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<UButton
|
||
size="xl"
|
||
color="primary"
|
||
icon="i-heroicons-paper-airplane"
|
||
@click="scrollTo('#contact')"
|
||
>
|
||
Связаться
|
||
</UButton>
|
||
<UButton
|
||
size="xl"
|
||
variant="ghost"
|
||
color="neutral"
|
||
icon="i-heroicons-code-bracket"
|
||
@click="scrollTo('#projects')"
|
||
>
|
||
Проекты
|
||
</UButton>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const sectionRef = ref<HTMLElement | null>(null);
|
||
|
||
function scrollTo(selector: string) {
|
||
document.querySelector(selector)?.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
|
||
onMounted(() => {
|
||
if (sectionRef.value) {
|
||
sectionRef.value.classList.remove('section-hidden');
|
||
sectionRef.value.classList.add('section-visible');
|
||
}
|
||
});
|
||
</script>
|