add proj

src/components/Header.vue

@@ -1,13 +1,22 @@
 <script setup>
-const props = defineProps({
+defineProps({
-  currentTab: String
+  currentTab: String,
+  isFading: Boolean,
+  isSliding: Boolean,
 })
+
+defineEmits(['calendar-click'])
 </script>
 
 <template>
-    <header>
+  <header :class="{ 'slide-up': isSliding }">
     <ul>
-            <li><RouterLink to="/">Home</RouterLink></li>
+      <li :class="{ 'collapse': isFading }">
+        <RouterLink to="/">Home</RouterLink>
+      </li>
+      <li>
+        <a href="#" @click.prevent="$emit('calendar-click')">calenbar</a>
+      </li>
     </ul>
   </header>
 </template>
@@ -18,5 +27,48 @@ header {
   align-items: center;
   justify-content: center;
   border-bottom: 1px solid #4F4F4F;
+  position: relative;
+  z-index: 20;
+  transition: transform 0.45s ease, border-color 0.3s ease;
+}
+
+header.slide-up {
+  transform: translateY(-200%);
+  border-color: transparent;
+}
+
+ul {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
+li {
+  padding: 0.5rem 1rem;
+  overflow: hidden;
+  max-width: 300px;
+  opacity: 1;
+  white-space: nowrap;
+  transition: max-width 0.4s ease, opacity 0.35s ease, padding 0.4s ease;
+}
+
+li.collapse {
+  max-width: 0;
+  opacity: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+a {
+  color: #fff;
+  text-decoration: none;
+  font-family: monospace;
+  cursor: pointer;
+}
+
+a:hover {
+  opacity: 0.7;
 }
 </style>

src/main.css

@@ -1,8 +1,9 @@
-@import "tailwindcss";
-
 * {
   font-family: "JetBrains Mono", monospace;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
 }
+body {
+  margin: 0;
+}

src/views/Home.vue

@@ -1,18 +1,39 @@
 <script setup>
 import { ref } from 'vue'
 import Header from '../components/Header.vue';
+
 const curTab = ref('/')
+const isFading = ref(false)
+const isSliding = ref(false)
+
+function handleCalendarClick() {
+  isFading.value = true
+
+  setTimeout(() => {
+    isSliding.value = true
+
+    setTimeout(() => {
+      window.location.href = 'https://calenbar.just-mn.dev'
+    }, 600)
+  }, 500)
+}
 </script>
 
 <template>
   <div class="grid">
-    <div id="vert-line"></div>
+    <div class="overlay" :class="{ 'fading': isFading, 'sliding': isSliding }"></div>
-    <div id="hor-line"></div>
+    <div id="vert-line" :class="{ 'fade-out': isFading }"></div>
-    <Header :currentTab="curTab" />
+    <div id="hor-line" :class="{ 'fade-out': isFading }"></div>
-    <span class="wip">WIP. Coming  Soon.</span>
+    <Header
-    <span class="under">under construction</span>
+      :currentTab="curTab"
-    <h1 class="title">hi, i&rsquo;m denis.</h1>
+      :isFading="isFading"
-    <div class="sub">
+      :isSliding="isSliding"
+      @calendar-click="handleCalendarClick"
+    />
+    <span class="wip" :class="{ 'fade-out': isFading }">WIP. Coming  Soon.</span>
+    <span class="under" :class="{ 'fade-out': isFading }">under construction</span>
+    <h1 class="title" :class="{ 'fade-out': isFading }">hi, i&rsquo;m denis.</h1>
+    <div class="sub" :class="{ 'fade-out': isFading }">
       <p id="sub1">making some useful/useless</p>
       <p id="sub2">and imho.beautiful stuff.</p>
     </div>
@@ -33,6 +54,25 @@ const curTab = ref('/')
   overflow: hidden;
 }
 
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: #000;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10;
+  transition: opacity 0.5s ease;
+}
+
+.overlay.fading {
+  opacity: 0.75;
+}
+
+.overlay.sliding {
+  opacity: 1;
+  transition: opacity 0.35s ease;
+}
+
 header {
   grid-column: 1/13;
   grid-row: 1;
@@ -40,7 +80,9 @@ header {
 
 span {
   display: block;
+  transition: opacity 0.45s ease;
 }
+
 .wip {
   grid-column: 7 / 13;
   grid-row: 2;
@@ -64,7 +106,6 @@ span {
 @media (max-width: 1510px) {
   .under {
     grid-column: 10 / 13;
-    
   }
 }
 
@@ -76,6 +117,7 @@ span {
   font-size: 3.2rem;
   margin: 0;
   font-weight: 666;
+  transition: opacity 0.45s ease;
 }
 
 .sub {
@@ -83,6 +125,7 @@ span {
   grid-row: 7;
   margin: 0;
   font-size: 1.5rem;
+  transition: opacity 0.45s ease;
 }
 
 #sub1 {
@@ -97,11 +140,17 @@ span {
   grid-column: 2;
   grid-row: 2 / 13;
   border-left: 1px solid #4F4F4F;
+  transition: opacity 0.45s ease;
 }
 
 #hor-line {
   border-top: 1px solid #4F4F4F;
   grid-column: 1 / 13;
   grid-row: 12;
+  transition: opacity 0.45s ease;
+}
+
+.fade-out {
+  opacity: 0 !important;
 }
 </style>