feat:BlogBox1 finish

Author: TaskManagerOL

app/globals.css

@@ -42,6 +42,13 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: TT;
+  src: url(/fonts/TT.ttf);
+  font-weight: normal;
+  font-style: normal;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -55,3 +62,30 @@
   animation: fade-in 0.5s ease forwards;
 }
 
+@keyframes triangle {
+  0% {
+    border-radius: 0px;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  25% {
+    border-radius: 20px;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
+  }
+  50% {
+    border-radius: 0px;
+    clip-path: polygon(0 0, 100% 0, 50% 50%, 0 0);
+  }
+  75% {
+    border-radius: 20px;
+    clip-path: polygon(0 30%, 0 0, 30% 0,80% 80%);
+  }
+}
+
+.animate-triangle {
+  width: 100px;
+  height: 100px;
+  background-color: #fff;
+  border-radius: 0px;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  animation: triangle 12s ease forwards infinite;
+}

app/layout.tsx

@@ -38,6 +38,14 @@ export default function RootLayout({
             font-style: normal;
             font-display: swap
           }
+
+          @font-face {
+            font-family: TT;
+            src: url(./fonts/TT.ttf);
+            font-weight: normal;
+            font-style: normal;
+            font-display: swap
+          }
         `}</style>
         {children}
       </body>

app/page.tsx

@@ -12,10 +12,8 @@ const IndexBox = () =>{
     const handleResize = () => {
       setIsMobile(window.innerWidth <= 768); // 判断屏幕宽度是否小于等于768px
     };
-
     window.addEventListener("resize", handleResize);
     handleResize(); // 初始检查设备类型
-
     return () => {
       window.removeEventListener("resize", handleResize);
     };
@@ -63,13 +61,13 @@ const IndexBox = () =>{
         >   
 
           <div 
-            className='text-[#eee] text-[clamp(48px,6vw,120px)] select-none flex flex-col justify-center mt-[5vw]'
+            className='text-[#eee] text-[clamp(48px,6vw,120px)] select-none flex flex-col justify-center mt-[5vw] items-center md:items-start'
             style={{
               fontFamily:'SuperLobster',
             }}
           >
-            <div className='flex flex-wrap mx-[5rem]'>Hi <div className='hover:rotate-60 transition'>👋</div> Here,</div>
-            <div className='flex flex-wrap mx-[5rem]'>
+            <div className='flex flex-wrap mx-[5rem] justify-center'>Hi <div className='transition-all hover:rotate-[60deg]'>👋</div> Here,</div>
+            <div className='flex flex-wrap mx-[5rem] justify-center'>
               <div>Task</div>
               <div>Manager</div>
               <div>OL.</div>
@@ -92,23 +90,36 @@ const IndexBox = () =>{
 const BlogBox = () => {
   return (
     <div 
-      className="w-4/5 my-[3rem] bg-[#a9a9a9] relative flex flex-wrap"
+      className="w-4/5 mt-[5rem] mb-[20rem] bg-[#a9a9a9] relative flex flex-wrap justify-center"
     >
       <div 
-        className='absolute top-[-6rem] left-2 text-[100px] font-bold'
+        className='absolute top-[-4.5rem] md:top-[-6rem] left-2 text-[70px] md:text-[100px] font-bold z-50'
         style={{
           fontFamily:'KGPerfectPenmanship'
         }}
       >
         Blog.
       </div>
-      <div
-        className='w-1/2 min-w-[300px] h-[600px] bg-[#616161]'
+      <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'
+        target='_blank'
       >
-
-      </div>
+        <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]'
+        >
+          Drawing a triangle or even a polygon with CSS
+        </div>
+        <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='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-1/2 min-w-[300px] h-[600px] bg-[#616161]'
+        className='w-full min-w-[300px] h-[600px] bg-[#2b2f3c] lg:w-1/2'
       >
 
       </div>
@@ -122,7 +133,7 @@ const ProjectBox = () => {
       className="w-4/5 h-[700px] my-[3rem] bg-[#a9a9a9] relative flex flex-wrap"
     >
       <div 
-        className='absolute top-[-6rem] left-2 text-[100px] font-bold'
+        className='absolute top-[-5rem] left-2 text-[80px] font-bold md:text-[100px] md:top-[-6rem]'
         style={{
           fontFamily:'KGPerfectPenmanship'
         }}