animasi animasi manis

ridhozhr10 · May 14, 2024 · 3cc3fe6 · 3cc3fe6
1 parent 61d58d2
commit 3cc3fe6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/src/app/_components/layout/Header/index.tsx b/src/app/_components/layout/Header/index.tsx
@@ -16,7 +16,8 @@ const Logo = ({ text }: { text?: string }) => (
   <Link href="/" className={style.logo}>
     <div>
       <span>&gt;</span>
-      {text ? <span>{text}</span> : <span>$ echo &quot;Hi&quot;</span>}
+      <span>$</span>
+      {text ? <span>{text}</span> : <span>echo &quot;Hi&quot;</span>}
       <span className="animate-cursor"></span>
     </div>
   </Link>

diff --git a/src/app/_components/layout/Header/style.module.scss b/src/app/_components/layout/Header/style.module.scss
@@ -12,10 +12,14 @@
   & div {
     @apply font-mono text-lg flex items-center;
 
-    & span:nth-child(1) {
+    & span:nth-child(1),
+    & span:nth-child(2) {
       @apply mr-[5px];
     }
     & span:nth-child(3) {
+      @apply animate-typing overflow-hidden whitespace-nowrap tracking-widest w-0;
+    }
+    & span:nth-child(4) {
       @apply inline-block w-2 h-4 bg-red-400 ml-[5px] rounded-[1px];
     }
   }

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -7,7 +7,7 @@ export const metadata = {
 
 export default function NotFound() {
   return (
-    <BaseLayout logoText="$ exit code 1.">
+    <BaseLayout logoText="exit code 1.">
       <div>
         <h2 className="text-4xl mb-5">Page Not Found</h2>
         <Link href="/">Home</Link>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -20,12 +20,18 @@ const config: Config = {
         'bg-dark': "#232425"
       },
       animation: {
-        'cursor': 'cursor 1s infinite'
+        'cursor': 'cursor 1s infinite',
+        'typing': 'typing 15s steps(25, end) infinite'
       },
       keyframes: {
         cursor: {
           '0%, 100%': { opacity: '1' },
           '50%': { opacity: '0' },
+        },
+        typing: {
+          '5%': {width: '0%'},
+          '15%, 90%': {width: '100%'},
+          '100%': {width: '0%'},
         }
       }
     }