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

src/components/Name.vue

@@ -0,0 +1,135 @@
+<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/shared.scss";
+
+.name{
+  display:flex;
+  align-items: flex-end;
+  justify-content: center;
+  margin:0 2.4rem;
+  
+  // border : #f0f solid 1px;
+    & h1{
+    font-size: 2.7rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    position :relative;
+    color: $page-title;
+    font-weight: bold;
+    margin-top: 0.5em;
+    padding: 0em ;
+    // 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:$white;
+  animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
+  
+}
+
+
+
+@keyframes title-h1{
+  0%{
+    margin-top: 1.6em
+  }
+  
+}
+@keyframes title-spans{
+  0% {
+      transform: rotateY(360deg);
+      // color: $red;
+    }
+    
+    100% {
+      transform: rotateY(0deg);
+      
+    }
+}
+@keyframes subtitle{
+
+    100% {
+        top:0;
+    }
+}
+
+@media (max-width: 320px){
+  .name{
+  margin : 0;
+  }
+}
+
+@media (max-width: 520px){
+  .name h1 .r-letter{
+    margin-left:2ch;
+  }
+  .name h1 .i-letter{
+    margin-right:2ch;
+  }
+}
+</style>