Hero is animated and has a hole in the paper behind him
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 54s
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 54s
This commit is contained in:
parent
6de299bd50
commit
0168204858
1 changed files with 99 additions and 1 deletions
100
site/index.md
100
site/index.md
|
@ -7,6 +7,104 @@ next: false
|
||||||
|
|
||||||
I'm Anthony, or The Paper Pilot, and welcome to my [digital garden](/garden/digital-gardens/index.md)!
|
I'm Anthony, or The Paper Pilot, and welcome to my [digital garden](/garden/digital-gardens/index.md)!
|
||||||
|
|
||||||
<img class="hero" src="/paperpilot.png" />
|
<div class="hero-wrapper">
|
||||||
|
<div class="hole"></div>
|
||||||
|
<img class="hero" src="/paperpilot.png" :style="`--x-offset: ${xOffset * 20}%`" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg>
|
||||||
|
<filter id="displacementFilter">
|
||||||
|
<feTurbulence
|
||||||
|
type="turbulence"
|
||||||
|
baseFrequency="0.01"
|
||||||
|
numOctaves="5"
|
||||||
|
result="turbulence" />
|
||||||
|
<feDisplacementMap
|
||||||
|
in2="turbulence"
|
||||||
|
in="SourceGraphic"
|
||||||
|
scale="100"
|
||||||
|
xChannelSelector="R"
|
||||||
|
yChannelSelector="G" />
|
||||||
|
</filter>
|
||||||
|
</svg>
|
||||||
|
|
||||||
This is a public website collecting all my (public) thoughts and projects all in one place. There are a lot of pages here, that link to each other wiki-style. I suggest starting your browsing with one of the recommended pages that most closely align with your interests :).
|
This is a public website collecting all my (public) thoughts and projects all in one place. There are a lot of pages here, that link to each other wiki-style. I suggest starting your browsing with one of the recommended pages that most closely align with your interests :).
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
|
|
||||||
|
const xOffset = ref(0);
|
||||||
|
function mouseMoveHandler(event) {
|
||||||
|
xOffset.value = event.pageX / window.innerWidth - .5;
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener("mousemove", mouseMoveHandler);
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener("mousemove", mouseMoveHandler);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.hero-wrapper {
|
||||||
|
height: 16lh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.hero-wrapper {
|
||||||
|
height: 12lh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.hero-wrapper {
|
||||||
|
height: 10lh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.hero-wrapper {
|
||||||
|
height: 9lh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hole {
|
||||||
|
height: 80%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border: solid 10px lightgrey;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #3b4252;
|
||||||
|
position: absolute;
|
||||||
|
left: 33%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
filter: url(#displacementFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
height: 80%;
|
||||||
|
width: unset;
|
||||||
|
margin: auto;
|
||||||
|
position: absolute;
|
||||||
|
right: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate(calc(50% + var(--x-offset)), 0%);
|
||||||
|
animation: bob 5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bob {
|
||||||
|
0% {
|
||||||
|
transform: translate(calc(50% + var(--x-offset)), -10%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(calc(50% + var(--x-offset)), 10%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(calc(50% + var(--x-offset)), -10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue