feat:BlogBox2 finish

Author: TaskManagerOL

app/globals.css

@@ -89,3 +89,68 @@
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   animation: triangle 12s ease forwards infinite;
 }
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 225px;
+  }
+}
+
+@keyframes disappear {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes blink {
+  50% {
+    border-right: 4px solid white;
+  }
+  100% {
+    border-right: 4px solid transparent;
+  }
+}
+
+@keyframes warning{
+  0%{
+    opacity: 0;
+    visibility: visible;
+    content: '!Time out';
+    color: rgb(255, 0, 0);
+    font-weight: bold;
+  }
+  100%{
+    opacity: 1;
+    visibility: visible;
+    content: '!Time out';
+    color: rgb(255, 0, 0);
+    font-weight: bold;
+  }
+}
+
+.animate-typing{
+  position: relative;
+}
+
+.animate-typing::after {
+  position: absolute;
+  left: -112px;
+  top: -50px;
+  content: 'git push↲';
+  font-family: 'Courier New', monospace;
+  font-size: 2.6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #fff;
+  width: 0;
+  animation: typing 1.5s steps(9) .5s forwards, blink 0.75s step-end 5,disappear 0.15s 4s forwards,warning 0.5s 5s forwards ;
+}
+

app/page.tsx

@@ -100,6 +100,7 @@ const BlogBox = () => {
       >
         Blog.
       </div>
+
       <a
         className='w-full h-[500px] md:h-[700px]  bg-[#314964] flex justify-center items-center lg:w-1/2 flex-col group overflow-hidden relative'
         href='https://taskmanagerol.github.io/Blog/2023/06/24/CSS/#CSS%E4%B8%89%E8%A7%92%E5%BD%A2%E7%BB%98%E5%88%B6'
@@ -113,16 +114,32 @@ const BlogBox = () => {
         <div className='h-[175px] md:h-[250px] flex justify-center items-center'>
           <div className='animate-triangle'></div>
         </div>
-        <div className='w-4/5 text-[#f4f5f6] tracking-[-0.3px] transition-all group-hover:mt-2 text-center mb-[40px]'>Stop using symbols.Complete a standard polygon by modifying the border, background attributes and other options</div>
+        <div className='w-3/5 text-[#f4f5f6] tracking-[-0.3px] transition-all group-hover:mt-2 text-center mb-[40px]'>Stop using symbols.Complete a standard polygon by modifying the border, background attributes and other options</div>
         <div className='absolute bg-black w-[80px] md:w-[120px] h-[40px] md:h-[60px] right-[10px] md:right-[40px] top-[-60px] transition-all ease-in-out duration-200 text-[#fff] flex justify-center items-center group-hover:top-0'>
           <div className='mb-[20px] opacity-0 transition-all duration-200 ease-in group-hover:opacity-100 group-hover:mb-0 text-[12px] tracking-[-0.3px]'>Read more</div>
         </div>
       </a>
-      <div
-        className='w-full min-w-[300px] h-[600px] bg-[#2b2f3c] lg:w-1/2'
-      >
 
-      </div>
+      <a
+        className='w-full h-[500px] md:h-[700px]  bg-[#2b2f3c] flex justify-center items-center lg:w-1/2 flex-col group overflow-hidden relative'
+        href='https://taskmanagerol.github.io/Blog/2024/01/30/Problem/#Git-Time-out'
+        target='_blank'
+      >
+        <div 
+          className=' w-4/5 text-[#fff] text-[34px] md:text-[46px] font-black tracking-[-0.3px] font-[TT] transition-all group-hover:mb-2 flex flex-wrap justify-center items-center break-words text-center mt-[40px]'
+        >
+          Troubleshooting Timeout Issues with Git
+        </div>
+        <div className='h-[175px] md:h-[250px] flex justify-center items-center'>
+          <div className='animate-typing'></div>
+        </div>
+        <div className='w-3/5 text-[#f4f5f6] tracking-[-0.3px] transition-all group-hover:mt-2 text-center mb-[40px]'>
+          It must be hard to have a timeout when you've done a bunch of work, here's how to fix it
+        </div>
+        <div className='absolute bg-black w-[80px] md:w-[120px] h-[40px] md:h-[60px] right-[10px] md:right-[40px] top-[-60px] transition-all ease-in-out duration-200 text-[#fff] flex justify-center items-center group-hover:top-0'>
+          <div className='mb-[20px] opacity-0 transition-all duration-200 ease-in group-hover:opacity-100 group-hover:mb-0 text-[12px] tracking-[-0.3px]'>Read more</div>
+        </div>
+      </a>
     </div>
   )
 }