anatolykopyl/pure-city.ru
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blob

Browse Source
This commit is contained in:
Anatoly Kopyl
2024-09-22 15:24:55 +03:00
parent d0c8077073
commit 820aff3d83
4 changed files with 130 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/about-company.vue
View File

@@ -1,9 +1,20 @@
<script setup lang="ts">
import {useMouse, useWindowScroll} from "@vueuse/core"
const y = ref<number>()
const x = ref<number>()
const handleMouseMove = (event: MouseEvent) => {
x.value = event.clientX
y.value = event.clientY
}
</script>
<template>
<section>
<section
class="overflow-hidden"
@mousemove="handleMouseMove"
>
<div class="about__grid py-16">
<NuxtPicture
class="overflow-hidden rounded-r-xl"
@@ -22,6 +33,17 @@
style="grid-area: img-b;"
></NuxtPicture>
</div>
<div
class="about__blob-wrapper"
:style="{
transform: `translate(${x}px, ${y}px)`
}"
>
<div
class="about__blob bg-lime-500"
></div>
</div>
</section>
</template>
@@ -50,4 +72,19 @@
height: 100%;
object-fit: cover;
}
.about__blob-wrapper {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.about__blob {
width: 300px;
height: 300px;
border-radius: 999px;
filter: blur(96px);
transform: translate(-50%, -50%);
}
</style>

4
components/k-nav.vue
View File

@@ -3,13 +3,13 @@ import PureCitySvg from '~/assets/pure-city.svg'
</script>
<template>
<nav class="flex flex-col gap-16 justify-center items-center p-4 pt-8 w-full">
<nav class="flex flex-col gap-16 justify-center items-center py-8 px-4 w-full border-b-2 bg-white">
<img
:src="PureCitySvg"
alt="Логотип"
class="w-64"
>
<h1 class="font-semibold text-5xl">
<h1 class="font-semibold text-6xl">
Чистый город
</h1>
</nav>

89
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"@nuxt/icon": "^1.5.1",
"@nuxt/image": "^1.8.0",
"@nuxtjs/tailwindcss": "^6.12.1",
"@vueuse/core": "^11.1.0",
"nuxt": "^3.13.0",
"vue": "latest",
"vue-router": "latest"
@@ -2262,6 +2263,11 @@
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
},
"node_modules/@unhead/dom": {
"version": "1.11.6",
"resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.6.tgz",
@@ -2668,6 +2674,89 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.7.tgz",
"integrity": "sha512-NBE1PBIvzIedxIc2RZiKXvGbJkrZ2/hLf3h8GlS4/sP9xcXEZMFWOazFkNd6aGeUCMaproe5MHVYB3/4AW9q9g=="
},
"node_modules/@vueuse/core": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
"integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
"dependencies": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "11.1.0",
"@vueuse/shared": "11.1.0",
"vue-demi": ">=0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
"integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
"integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
"dependencies": {
"vue-demi": ">=0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",

1
package.json
View File

@@ -13,6 +13,7 @@
"@nuxt/icon": "^1.5.1",
"@nuxt/image": "^1.8.0",
"@nuxtjs/tailwindcss": "^6.12.1",
"@vueuse/core": "^11.1.0",
"nuxt": "^3.13.0",
"vue": "latest",
"vue-router": "latest"