project nearly finished. TODO Next : Project page and refine some text
This commit is contained in:
227
src/Deprecated/OldMenu.vue
Normal file
227
src/Deprecated/OldMenu.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<script setup>
|
||||
import Name from './Name.vue';
|
||||
import { useBurgerStore } from '@/stores/burger';
|
||||
//import { Ref } from 'vue';
|
||||
|
||||
const burger = useBurgerStore()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="menu">
|
||||
<div class="menu-inner">
|
||||
<div class="prez">
|
||||
<Name/>
|
||||
</div>
|
||||
<!-- <ul class="menu-nav">
|
||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
||||
<div>Who am I</div>
|
||||
</span></a></li>
|
||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
||||
<div>Projects</div>
|
||||
</span></a></li>
|
||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
||||
<div>Networks</div>
|
||||
</span></a></li>
|
||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
||||
<div>Contact</div>
|
||||
</span></a></li>
|
||||
</ul> -->
|
||||
<!-- <div class="title">
|
||||
|
||||
<p>Introducing myself...</p>
|
||||
</div> -->
|
||||
<div class="gallery">
|
||||
<div class="images">
|
||||
<a class="image-link" href="#">
|
||||
<div class="image" data-label="Who am I"><img src="../assets/question.png" alt=""></div>
|
||||
</a>
|
||||
<a class="image-link" href="#">
|
||||
<div class="image" data-label="Sun"><img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" alt=""></div>
|
||||
</a>
|
||||
<a class="image-link" href="#">
|
||||
<div class="image" data-label="Tree"><img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" alt=""></div>
|
||||
</a>
|
||||
<a class="image-link" href="#">
|
||||
<div class="image" data-label="Sky"><img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" alt=""></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
||||
|
||||
|
||||
|
||||
|
||||
.menu {
|
||||
//z-index: 1;
|
||||
|
||||
//position: fixed;
|
||||
padding-top: 4em;
|
||||
//top: 0;
|
||||
//left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background: #1a1e23;
|
||||
opacity: 0;
|
||||
//overflow: auto;
|
||||
//visibility:visible;
|
||||
transition: 0.3s;
|
||||
|
||||
&-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
transform: translateY(105%);
|
||||
margin: 0.25em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--primary-color);
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.images {
|
||||
margin-top: 36px;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
// flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.image-link {
|
||||
//min-width: px;
|
||||
width: 20vw;
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
transition: 0.6s;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: attr(data-label);
|
||||
//display: block;
|
||||
top: -50px;
|
||||
left: -0px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
width: 20vw;
|
||||
color: rgb(218, 218, 218);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 1;
|
||||
padding : 0 0.2em;
|
||||
transition: 0.5s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .image {
|
||||
transform: scale(1.1);
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
left: -5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 250px;
|
||||
transform: translateY(105%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
Reference in New Issue
Block a user