144 lines
2.6 KiB
Vue
144 lines
2.6 KiB
Vue
<script setup>
|
|
//import { onMounted } from 'vue';
|
|
import { useBurgerStore } from '@/stores/burger';
|
|
const burger = useBurgerStore()
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="header">
|
|
<div class = "name">
|
|
<h1 class="spans">
|
|
<div class="first-name">
|
|
<span class="r-letter">R</span>
|
|
<span>a</span>
|
|
<span>f</span>
|
|
<span>f</span>
|
|
<span class="i-letter">i</span>
|
|
</div>
|
|
<div class="last-name">
|
|
<span>A</span>
|
|
<span>l</span>
|
|
<span>e</span>
|
|
<span>x</span>
|
|
<span>a</span>
|
|
<span>n</span>
|
|
<span>i</span>
|
|
<span>a</span>
|
|
<span>n</span>
|
|
</div>
|
|
</h1>
|
|
</div>
|
|
<div class="come-in">
|
|
<h2>
|
|
I'm a web developer
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/style/colors.scss';
|
|
|
|
.name{
|
|
display:flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
margin:0 2.4rem;
|
|
|
|
// border : #f0f solid 1px;
|
|
& h1{
|
|
position :relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 0.5em;
|
|
padding: 0em ;
|
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
|
font-size: 2.7rem;
|
|
font-weight: bold;
|
|
letter-spacing: 0.2em;
|
|
color: $title-normal;
|
|
// border : #f0f solid 1px;
|
|
animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
|
|
|
& div {
|
|
display:flex;
|
|
margin:0;
|
|
// border : #f0f solid 1px;
|
|
}
|
|
& span{
|
|
transform: rotateY(0deg);
|
|
animation: title-spans 1500ms;
|
|
}
|
|
.i-letter{
|
|
margin-right: 1ch ;
|
|
}
|
|
.r-letter{
|
|
margin:0;
|
|
}
|
|
}
|
|
}
|
|
.come-in, .name{
|
|
overflow:hidden;
|
|
}
|
|
h2{
|
|
margin: 0.5em 3em 0.5em 1em;
|
|
top:100px;
|
|
position: relative;
|
|
font-size:1.7rem;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
color:$main-normal;
|
|
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
|
|
font-family: 'acme', Arial, Helvetica, sans-serif;
|
|
font-style: italic;
|
|
letter-spacing: 0.2ch;
|
|
}
|
|
|
|
|
|
|
|
@keyframes title-h1{
|
|
0%{
|
|
margin-top: 1.6em;
|
|
color:$renforced-normal
|
|
}
|
|
|
|
}
|
|
@keyframes title-spans{
|
|
0% {
|
|
transform: rotateY(360deg);
|
|
// color: $renforced-normal;
|
|
}
|
|
|
|
100% {
|
|
transform: rotateY(0deg);
|
|
|
|
}
|
|
}
|
|
@keyframes subtitle{
|
|
|
|
100% {
|
|
top:0;
|
|
}
|
|
}
|
|
|
|
@media (width < 400px){
|
|
.name{
|
|
margin : 0;
|
|
}
|
|
}
|
|
@media (width < 520px){
|
|
|
|
.name h1 .r-letter{
|
|
margin-left:2ch;
|
|
}
|
|
.name h1 .i-letter{
|
|
margin-right:2ch;
|
|
}
|
|
.come-in h2{
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
</style>
|