Skip to content

Commit 8562cac

Browse files
w33bvGLw33bvGL
committed
fix leaves
1 parent daac378 commit 8562cac

File tree

12 files changed

+434
-58
lines changed

12 files changed

+434
-58
lines changed

‎app/app.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default defineAppConfig({
88
phone: '+374(94) 161-331',
99
address: 'Armenia, Ararat Vedi.vosketap i.hakobyan 28',
1010
telegram: '@Vahesargsyan2005',
11-
available: true,
11+
available: false,
1212
birthday: '2005-03-30',
1313
experienceStartDate: '2022-01-01'
1414
},

‎app/app.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<script setup lang="ts">
22
import * as locales from '@nuxt/ui/locale'
33
import AppIcons from '~/components/AppIcons.vue'
4+
import { ref, onMounted } from 'vue'
45
56
const colorMode = useColorMode()
67
const { locale } = useI18n()
78
const color = computed(() => colorMode.value === 'dark' ? '#020618' : 'white')
89
10+
// Настройка head
911
useHead({
1012
meta: [
1113
{ charset: 'utf-8' },
@@ -20,11 +22,40 @@ useHead({
2022
}
2123
})
2224
25+
// SEO
2326
useSeoMeta({
2427
ogImage: '/avatar-og.jpg',
2528
twitterImage: '/avatar-og.jpg',
2629
twitterCard: 'summary'
2730
})
31+
32+
// --- Сезонная тема ---
33+
function useSeasonTheme() {
34+
const season = ref<'winter' | 'spring' | 'summer' | 'autumn'>('winter')
35+
36+
const month = new Date().getMonth() + 1
37+
if ([12, 1, 2].includes(month)) season.value = 'winter'
38+
else if ([3, 4, 5].includes(month)) season.value = 'spring'
39+
else if ([6, 7, 8].includes(month)) season.value = 'summer'
40+
else season.value = 'autumn'
41+
42+
const seasonColors: Record<string, string> = {
43+
winter: '#0ea5e9', // голубой
44+
spring: '#22c55e', // зелёный
45+
summer: '#facc15', // жёлтый
46+
autumn: '#f97316' // оранжевый
47+
}
48+
49+
const setSeasonTheme = () => {
50+
document.documentElement.style.setProperty('--primary', seasonColors[season.value])
51+
}
52+
53+
onMounted(() => setSeasonTheme())
54+
return { season }
55+
}
56+
57+
// Вызов хука
58+
useSeasonTheme()
2859
</script>
2960

3061
<template>

‎app/components/AutumnEffects.vue‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script setup lang="ts">
2+
import { ref, onMounted } from 'vue'
3+
4+
interface Leaf {
5+
x: number
6+
y: number
7+
size: number
8+
speedY: number
9+
rotate: number
10+
rotateSpeed: number
11+
color: string
12+
sway: number
13+
swaySpeed: number
14+
depth: number
15+
}
16+
17+
const leaves = ref<Leaf[]>([])
18+
19+
const leafColors = ['#FF7F00', '#FFD700', '#8B0000', '#A0522D'] // оранж, золото, бордо, коричн
20+
const numLeaves = 50
21+
22+
onMounted(() => {
23+
for (let i = 0; i < numLeaves; i++) {
24+
const depth = Math.random() * 2 + 0.5 // 0.5 - дальние, 2 - ближе
25+
leaves.value.push({
26+
x: Math.random() * window.innerWidth,
27+
y: Math.random() * window.innerHeight,
28+
size: Math.random() * 25 + 20,
29+
speedY: Math.random() * 1 + 0.5 * depth,
30+
rotate: Math.random() * 360,
31+
rotateSpeed: Math.random() * 2 - 1,
32+
color: leafColors[Math.floor(Math.random() * leafColors.length)],
33+
sway: Math.random() * 20 - 10,
34+
swaySpeed: Math.random() * 0.05 + 0.01,
35+
depth
36+
})
37+
}
38+
39+
animate()
40+
})
41+
42+
function animate() {
43+
leaves.value.forEach(l => {
44+
l.y += l.speedY
45+
l.rotate += l.rotateSpeed
46+
l.sway += l.swaySpeed
47+
if (l.y > window.innerHeight) {
48+
l.y = -l.size
49+
l.x = Math.random() * window.innerWidth
50+
}
51+
})
52+
53+
requestAnimationFrame(animate)
54+
}
55+
56+
function handleMouseMove(event: MouseEvent) {
57+
leaves.value.forEach(l => {
58+
const dx = event.clientX - l.x
59+
const dy = event.clientY - l.y
60+
const dist = Math.sqrt(dx * dx + dy * dy)
61+
if (dist < 100) {
62+
l.y -= 0.5
63+
l.x += (Math.random() * 2 - 1) * 2
64+
}
65+
})
66+
}
67+
</script>
68+
69+
<template>
70+
<div
71+
class="autumn-effects fixed top-0 left-0 w-full h-full pointer-events-none z-[9999]"
72+
@mousemove="handleMouseMove"
73+
>
74+
<div
75+
v-for="(l, i) in leaves"
76+
:key="i"
77+
class="leaf absolute"
78+
:style="{
79+
width: l.size + 'px',
80+
height: l.size + 'px',
81+
background: l.color,
82+
transform: 'translate(' + (l.x + Math.sin(l.sway)) + 'px,' + l.y + 'px) rotate(' + l.rotate + 'deg)',
83+
zIndex: Math.floor(l.depth * 10),
84+
clipPath: 'polygon(50% 0%, 60% 20%, 80% 30%, 70% 50%, 90% 70%, 50% 100%, 10% 70%, 30% 50%, 20% 30%, 40% 20%)'
85+
}"
86+
></div>
87+
</div>
88+
</template>
89+
90+
<style scoped>
91+
</style>

‎app/components/ChristmasLights.vue‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
3-
42
const month = new Date().getMonth() + 1
5-
const isWinter = month === 11 || month === 12 || month === 1 || month === 2
3+
const isWinter = month === 12 || month === 1 || month === 2
64
75
const levels = 1
86
const bulbsPerLevel = 20
@@ -41,7 +39,7 @@ const bulbsColors = wires.map(() => {
4139
</script>
4240

4341
<template>
44-
<ClientOnly>
42+
<ClientOnly v-if="isWinter">
4543
<div class="bottom-3 left-3 w-full fixed">
4644
<UButton
4745
variant="soft"
@@ -51,10 +49,7 @@ const bulbsColors = wires.map(() => {
5149
/>
5250
</div>
5351

54-
<div
55-
v-if="isWinter"
56-
class="pointer-events-none select-none top-0 left-0 w-full z-[9999] fixed"
57-
>
52+
<div class="pointer-events-none select-none top-0 left-0 w-full z-[9999] fixed">
5853
<div class="lightrope-wrapper">
5954
<div
6055
v-for="(lvl, lvlIndex) in wires"
@@ -67,7 +62,7 @@ const bulbsColors = wires.map(() => {
6762
v-for="(b, bIndex) in bulbs"
6863
:key="b"
6964
:class="{
70-
off: mode === 0,
65+
'off': mode === 0,
7166
'flash-1': mode === 1,
7267
'flash-2': mode === 2,
7368
'flash-3': mode === 3
@@ -110,13 +105,14 @@ const bulbsColors = wires.map(() => {
110105
display: inline-block;
111106
width: 14px;
112107
height: 28px;
113-
margin: 18px 24px;
108+
margin: 16px 24px;
114109
}
115110
116-
/* Лампа с анимацией */
117111
.lightrope li .bulb {
112+
position: relative;
113+
z-index: 1;
118114
width: 100%;
119-
height: 100%;
115+
height: 70%;
120116
border-radius: 50%;
121117
animation-fill-mode: both;
122118
animation-duration: 1.7s;
@@ -136,12 +132,13 @@ const bulbsColors = wires.map(() => {
136132
.lightrope li::before {
137133
content: "";
138134
position: absolute;
139-
top: -6px;
135+
top: -7px;
140136
left: 2px;
141137
width: 10px;
142138
height: 10px;
143139
background: var(--ui-border-muted);
144-
border-radius: 3px;
140+
border-radius: 3px 3px 2px 2px;
141+
z-index: 10;
145142
}
146143
147144
.lightrope li::after {
@@ -150,7 +147,7 @@ const bulbsColors = wires.map(() => {
150147
top: -20px;
151148
left: 13px;
152149
width: 50px;
153-
height: 16px;
150+
height: 10px;
154151
border-bottom: 2px solid var(--ui-border-muted);
155152
border-radius: 50%;
156153
pointer-events: none;
@@ -160,7 +157,6 @@ const bulbsColors = wires.map(() => {
160157
161158
.lightrope li:last-child::after { content: none; }
162159
163-
/* Анимации моргания ламп */
164160
@keyframes flash-1 { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.3; filter: brightness(2.5); } }
165161
@keyframes flash-2 { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.4; filter: brightness(2); } }
166162
@keyframes flash-3 { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.3; filter: brightness(1.8); } }

‎app/components/SeasonalAvatar.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
import { NuxtImg } from '#components'
4+
5+
interface Props {
6+
src: string
7+
alt: string
8+
size?: number
9+
}
10+
11+
const props = defineProps<Props>()
12+
13+
const month = new Date().getMonth() + 1
14+
15+
const season = computed(() => {
16+
if ([12, 1, 2].includes(month)) return 'winter'
17+
if ([3, 4, 5].includes(month)) return 'spring'
18+
if ([6, 7, 8].includes(month)) return 'summer'
19+
return 'autumn'
20+
})
21+
22+
const seasonalHats: Record<string, string> = {
23+
winter: '/avatars/winter.png',
24+
spring: '/avatars/spring.png',
25+
summer: '/avatars/summer.png',
26+
autumn: '/avatars/autumn.png'
27+
}
28+
29+
const size = computed(() => props.size ?? 112)
30+
</script>
31+
32+
<template>
33+
<div
34+
:style="{ width: size + 'px', height: size + 'px' }"
35+
class="relative"
36+
>
37+
<!-- <NuxtImg -->
38+
<!-- :src="props.src" -->
39+
<!-- :alt="props.alt" -->
40+
<!-- :width="size" -->
41+
<!-- :height="size" -->
42+
<!-- format="webp" -->
43+
<!-- class="rounded-full border border-muted w-full h-full" -->
44+
<!-- /> -->
45+
46+
<NuxtImg
47+
v-if="season"
48+
:src="seasonalHats[season]"
49+
:alt="props.alt"
50+
:width="size"
51+
:height="size"
52+
format="webp"
53+
class="rounded-full border border-muted w-full h-full"
54+
/>
55+
</div>
56+
</template>

0 commit comments

Comments
 (0)