Merge pull request #30 from eazypau/revamp/home-page

Revamp/home page
eazypau · Feb 9, 2024 · 1a1f780 · 1a1f780
2 parents c3aca6d + daf7d23
commit 1a1f780
Show file tree

Hide file tree

Showing 7 changed files with 261 additions and 206 deletions.
diff --git a/assets/css/tailwind.scss b/assets/css/tailwind.scss
@@ -15,7 +15,7 @@ html {
   background-color: $bg-light;
 }
 h1 {
-  @apply text-white flex flex-col justify-center text-4xl lg:text-6xl 2xl:text-[4.1rem] 3xl:text-7xl font-bold;
+  @apply h-full text-[#14213d] dark:text-white flex flex-col justify-center;
   @include header-font;
 }
 h2.profile-title {
@@ -86,17 +86,25 @@ nav#nav-bar {
 header {
   @apply relative w-full overflow-hidden flex;
 
-  div:first-child {
-    @apply absolute w-full h-full;
+  div.header-bg {
+    @apply absolute inset-0 dark:blur-sm;
+
+    div {
+      @apply absolute z-10 bg-white dark:bg-opacity-0 transition duration-300 ease-out;
+    }
 
     img {
-      @apply w-full h-full object-cover object-top;
+      @apply absolute inset-0 w-full h-full object-cover object-top transition duration-300 ease-out;
     }
   }
 
-  div:last-child {
-    @apply relative w-full text-center px-1 md:px-16 lg:px-28 xl:px-40 pt-5 2xl:pt-10;
+  div.content {
+    @apply relative z-20 mx-auto top-[25%] lg:top-[28%] w-[90%] md:w-4/5 lg:w-1/2 xl:w-[45%] h-[40%] lg:h-[40%] 2xl:h-[35%] px-7 md:px-10 rounded-md bg-white dark:bg-[#171717] border-t border-gray-100 dark:border-none shadow-lg shadow-gray-700 dark:shadow-md dark:shadow-gray-400 transition duration-300 ease-out;
   }
+
+  // div:last-child {
+  //   @apply relative w-full text-center px-1 md:px-16 lg:px-28 xl:px-40 pt-5 2xl:pt-10;
+  // }
 }
 
 // about
@@ -223,7 +231,7 @@ section#works {
   height: auto;
   @include section-vertical-padding;
 
-  @media screen and (min-width: 1280px) {
+  @media screen and (min-width: 1580px) {
     height: calc(100vh - 227px);
   }
 
@@ -350,7 +358,7 @@ section.contact-section {
   @apply px-10 pt-24 sm:pb-16 md:pb-7 md:pt-16 flex items-center justify-center mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:pb-0 xl:pb-4 2xl:pb-0;
 
   @media screen and (min-width: 768px) {
-    height: calc(100vh - 227px);
+    height: calc(100vh - 175px);
   }
 
   .contact-section-width {
@@ -493,5 +501,5 @@ section.contact-section {
 
 .smth-fun {
   @include sub-font-family;
-  @apply text-center pt-3 pb-1 tracking-wider;
+  @apply text-center pt-3 pb-1 tracking-wider dark:text-white;
 }
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -3,52 +3,32 @@
     <footer>
       <div class="social-icons-and-navigation">
         <!-- nav - start -->
-        <nav>
+        <!-- <nav>
           <NuxtLink
             v-for="item in navigation"
             :key="item.id"
             :href="item.href"
             class="footerBtn"
             >{{ item.name }}</NuxtLink
           >
-        </nav>
+        </nav> -->
         <!-- nav - end -->
 
         <!-- social - start -->
         <div>
-          <a
-            href="https://www.instagram.com/yzpo/"
-            aria-label="Instagram"
-            target="_blank"
-            class="footerIcon"
-          >
+          <a href="https://www.instagram.com/yzpo/" aria-label="Instagram" target="_blank" class="footerIcon">
             <IconsInstaIcon />
           </a>
 
-          <a
-            href="https://www.facebook.com/yizhipo"
-            aria-label="Facebook"
-            target="_blank"
-            class="footerIcon"
-          >
+          <a href="https://www.facebook.com/yizhipo" aria-label="Facebook" target="_blank" class="footerIcon">
             <IconsFacebookIcon />
           </a>
 
-          <a
-            href="https://www.linkedin.com/in/yzpo/"
-            aria-label="Linkden"
-            target="_blank"
-            class="footerIcon"
-          >
+          <a href="https://www.linkedin.com/in/yzpo/" aria-label="Linkden" target="_blank" class="footerIcon">
             <IconsLinkedInIcon />
           </a>
 
-          <a
-            href="https://github.com/eazypau"
-            aria-label="Github"
-            target="_blank"
-            class="footerIcon"
-          >
+          <a href="https://github.com/eazypau" aria-label="Github" target="_blank" class="footerIcon">
             <IconsGithubIcon />
           </a>
         </div>

diff --git a/components/Header.vue b/components/Header.vue
@@ -1,7 +1,6 @@
 <template>
   <header class="headerHeight">
-    <div>
-      <!-- previously set width 1600 height 1200 -->
+    <!-- <div>
       <img
         src="/wide-laptop-gradient-bg.webp"
         sizes="(max-width: 768px) 50vw, (max-width: 1024px) 80vw, (max-width: 1439px) 100vw"
@@ -11,45 +10,147 @@
         "
         alt="laptop with black background"
       />
-    </div>
-    <div>
-      <h1>
-        <MyTransition>
-          <span v-if="!loading" class="flex justify-center">
-            Hi there
-            <span>
-              <IconsHiIcon class="ml-3 p-1" />
-            </span>
-          </span>
-        </MyTransition>
-        <MyTransition :delay="Number(1.1)">
-          <span v-if="!loading" class="mt-1 tracking-wide text-white">
-            My name is Po
-          </span>
-        </MyTransition>
-        <MyTransition :delay="Number(1.3)">
-          <span v-if="!loading" class="mt-2 tracking-wide text-white">
-            A Frontend
-          </span>
-        </MyTransition>
-        <MyTransition :delay="Number(1.5)">
-          <span v-if="!loading" class="py-2 tracking-wide text-white">
-            Web Developer
-          </span>
-        </MyTransition>
+    </div> -->
+    <TransitionGroup name="list" tag="div" class="header-bg">
+      <div v-for="rectang in columns" :key="rectang" :style="rectang"></div>
+      <img v-if="showBgImg" src="/red-blue.jpg" width="1920" height="1280" alt="blue red fusion" />
+    </TransitionGroup>
+    <div class="content">
+      <h1 class="leading-3">
+        <span class="text-4xl md:text-5xl font-semibold">{{
+          introObj.lineOne
+        }}</span>
+        <br />
+        <span class="text-2xl md:text-3xl font-medium">{{
+          introObj.lineTwo
+        }}</span>
+        <br />
+        <span class="text-xl md:text-2xl">{{ introObj.lineThree }}</span>
       </h1>
     </div>
   </header>
 </template>
 <script setup>
-import { ref, onMounted } from "vue";
-let loading = ref(true);
+// const loading = ref(true);
+const columns = ref([]);
+const counter = ref(0);
+const numOfColumns = ref(4);
+const currentLeftPosition = ref(20)
+const width = 2
+const typeSpeed = 50;
+const columnSpeed = 100;
+const rectangDelay = ref(1300)
+const typeWriterDelay = ref(2500)
+const showBgImg = ref(false)
+const { enabled } = useTheme()
+const { transitionCompletedOnce } = useTransitionTracking()
+
+const i = ref(0);
+const j = ref(0);
+const introObj = ref({
+  lineOne: "",
+  lineTwo: "",
+  lineThree: "",
+});
+const intro = [
+  "Po Yi Zhi",
+  "Software Developer in RISB",
+  "I specialise in building web app that helps to solve real world challenges.",
+];
+
+
+const addColumns = () => {
+  if (counter.value < numOfColumns.value) {
+    const positionY = 0
+    const styling = `height: 100%; width: ${width}%; top: ${positionY}; left: ${currentLeftPosition.value}%`;
+    columns.value.push(styling);
+    currentLeftPosition.value += 20
+    counter.value++;
+    setTimeout(addColumns, columnSpeed);
+  }
+};
+
+const typeWriter = () => {
+  const currentLine =
+    j.value === 0 ? "lineOne" : j.value === 1 ? "lineTwo" : "lineThree";
+  if (j.value < 3) {
+    if (i.value < intro[j.value].length) {
+      introObj.value[currentLine] += intro[j.value][i.value];
+      i.value++;
+      setTimeout(typeWriter, typeSpeed);
+    } else {
+      if (j.value < 2) i.value = 0;
+      j.value++;
+      if (j.value < 3) setTimeout(typeWriter, typeSpeed);
+    }
+  }
+};
+
+const assignDelayAmount = () => {
+  if (window.innerWidth < 500) {
+    if (enabled.value) {
+      typeWriterDelay.value = 800
+    } else {
+      rectangDelay.value = 0
+      typeWriterDelay.value = 1200
+    }
+  } else {
+    if (enabled.value) {
+      rectangDelay.value = 0
+      typeWriterDelay.value = transitionCompletedOnce.value ? 800 : 2100
+    } else {
+      rectangDelay.value = transitionCompletedOnce.value ? 0 : 1300
+      typeWriterDelay.value = transitionCompletedOnce.value ? 1200 : 2500
+    }
+  }
+}
+
+watchEffect(() => {
+  if (counter.value === 4 && !enabled.value) {
+    setTimeout(() => {
+      showBgImg.value = true
+    }, 200);
+  } else if (enabled.value) {
+    setTimeout(() => {
+      showBgImg.value = true
+    }, transitionCompletedOnce ? 0 : 1200);
+  }
+})
+
 onMounted(() => {
-  loading.value = false;
+  assignDelayAmount()
+  setTimeout(() => {
+    addColumns()
+  }, rectangDelay.value);
+  if (counter.value === 4 && !enabled.value) {
+    setTimeout(() => {
+      showBgImg.value = true
+    }, enabled.value ? 0 : 500);
+  } else if (enabled.value) {
+    setTimeout(() => {
+      showBgImg.value = true
+    }, transitionCompletedOnce ? 0 : 1200);
+  }
+  setTimeout(() => {
+    typeWriter()
+  }, typeWriterDelay.value);
+  // loading.value = false;
+  // Promise.all([addSquare(), typeWriter()]);
 });
+
 </script>
 <style lang="scss" scoped>
 .headerHeight {
   height: calc(100vh - 70px);
 }
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+}
 </style>