raffi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project nearly finished. TODO Next : Project page and refine some text

Browse Source
This commit is contained in:
Raffiskender
2023-05-29 19:50:07 +02:00
parent 3be7a4adfd
commit ff3ea2cdcd
62 changed files with 6197 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/Deprecated/Cards.vue Normal file
View File

@@ -0,0 +1,174 @@
<script setup>
import Name from './Name.vue';
import { useBurgerStore } from '@/stores/burger';
//import { Ref } from 'vue';
const burger = useBurgerStore()
const turnMyCard = (event) => {
let link = event.currentTarget
link.classList.add('turned')
}
</script>
<template>
<div class="images-grid-gallery">
<a class="image-link" href="#"
@click="turnMyCard($event)"
>
<div class="image-container" data-label="Who am I">
<img class="image hide"
src="@/assets/MaPhoto.jpg"
alt=""
>
<img class="image_background"
src="@/assets/question.png"
alt="">
</div>
</a>
<a class="image-link" href="#">
<div class="image-container" data-label="Who am I">
<img class="image_background" src="@/assets/question.png" alt="">
</div>
</a>
<a class="image-link" href="#">
<div class="image-container" data-label="Who am I">
<img class="image_background" src="@/assets/question.png" alt="">
</div>
</a>
<a class="image-link" href="#">
<div class="image-container" data-label="Who am I">
<img class="image_background" src="@/assets/question.png" alt="">
</div>
</a>
</div>
</template>
<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
@import "@/style/shared.scss";
.images-grid-gallery {
//max-width: $maxWidth;
margin: 0 1em;
display: grid;
grid-template-columns: repeat (2, 1fr);
//grid-auto-columns: minmax(10px, auto);
gap:1em;
//border : 3px solid white;
height:100vh;
}
.image-link {
display: flex;
border : 3px solid white;
background : white;
border-radius: 10px;
margin:0 auto;
margin-bottom: 1em;
width: $imageWidth;
overflow: hidden;
transform: rotateY(0deg);
transition: 1s;
&.turned{
transform: rotateY(180deg);
}
& > .image-container {
border : 3px solid white;
border-radius: 22px;
overflow: hidden;
opacity: 1;
}
&:nth-child(1), &:nth-child(2){
aspect-ratio: 1/1;
aspect-ratio: 8/11;
}
&:nth-child(3), &:nth-child(4){
aspect-ratio: 8/11;
}
@for $i from 1 to 5 {
&:nth-child(#{$i}) > .image-container > .image_background{
transform:scale(1.0);
transition: 0.5s;
position:relative;
bottom:-400px;
left:-120px;
animation-duration: 1000ms;
animation-name: show-gallery;
animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
animation-delay: $i*200 + 1000ms;
animation-fill-mode: forwards;
}
}
&:hover .image_background{
transform: scale(1.1);
}
&:hover > .image_background:before {
opacity: 1;
left: -5px;
top: 50px;
}
}
.hide{
display : none;
}
@media (min-width: 720px){
.images-grid-gallery{
grid-template-columns: repeat(4, 1fr);
}
}
@keyframes show-gallery {
0%{
}
100%{
bottom: 300px;;
}
}
// @keyframes menu-shake{
// from {
// //opacity: 0;
// filter: drop-shadow(-150px 0px 10px #4d0000);
// //background-color: rgb(99, 0, 0);
// }
// 10%{
// //opacity: 50%;
// filter: drop-shadow(150px 0px 3px #4d0000);
// }
// 20%{
// filter: drop-shadow(-100px 0px 3px #4d0000);
// }
// 30%{
// filter: drop-shadow(50px 0px 3px #4d0000);
// }
// 40%{
// filter: drop-shadow(-25px 0px 3px #4d0000);
// }
// 50%{
// filter: drop-shadow(10px 0px 3px #4d0000);
// }
// 80%{
// filter: drop-shadow(-10px 0px 3px #4d0000);
// }
// 100%{
// //opacity : 100%;
// filter: drop-shadow(0px 0px 3px #4d0000);
// }
// }
</style>