✨ new: ImageBanner in /posts

jooncco · Jan 5, 2024 · 8f242ac · 8f242ac
1 parent e92f524
commit 8f242ac
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 47 deletions.
diff --git a/_tmp/index.html b/_tmp/index.html
diff --git a/app/layout.jsx b/app/layout.jsx
@@ -22,9 +22,7 @@ export default function RootLayout({children}) {
       <body className="bg-base flex flex-col h-screen justify-between">
         <AppProvider>
           <NavBar />
-          <main className="mb-20 max-w-6xl mx-auto mt-24 min-w-0 px-6 py-4 flex-auto flex flex-col bg-neutral rounded-2xl">
-            {children}
-          </main>
+          <main className="my-24 mx-auto">{children}</main>
           <Footer />
           <AlertWithContent />
         </AppProvider>

diff --git a/app/page.jsx b/app/page.jsx
@@ -11,7 +11,7 @@ import Accomplishments from '@/components/Accomplishments';
 
 export default function Home() {
   return (
-    <>
+    <div className="max-w-6xl min-w-0 px-6 py-4 flex-auto flex flex-col bg-neutral rounded-2xl">
       <DynamicTextBanner />
       <About />
       <Work />
@@ -21,6 +21,6 @@ export default function Home() {
       <Accomplishments />
       <Testimonials />
       <Contact />
-    </>
+    </div>
   );
 }
diff --git a/app/posts/page.jsx b/app/posts/page.jsx
@@ -1,12 +1,21 @@
 import React from 'react';
+import ImageBanner from '@/components/ImageBanner';
 
 export default function Posts() {
   return (
     <>
-      <h1 className="text-text font-black md:text-[50px] sm:text-[42px] text-[30px]">
-        Posts
-      </h1>
-      The magic you&apos;re looking for is in the work you&apos;re avoiding.
+      <ImageBanner />
+      <div className="mt-4 max-w-6xl min-w-0 px-6 py-4 flex-auto flex flex-col bg-neutral rounded-2xl">
+        <h1 className="w-full text-text font-black md:text-[50px] sm:text-[42px] text-[30px]">
+          Posts
+        </h1>
+        The magic you&apos;re looking for is in the work you&apos;re
+        avoiding.The magic you&apos;re looking for is in the work you&apos;re
+        avoiding.The magic you&apos;re looking for is in the work you&apos;re
+        avoiding.The magic you&apos;re looking for is in the work you&apos;re
+        avoiding.The magic you&apos;re looking for is in the work you&apos;re
+        avoiding.
+      </div>
     </>
   );
 }
diff --git a/components/DynamicTextBanner.jsx b/components/DynamicTextBanner.jsx
@@ -66,7 +66,7 @@ const DynamicTextBanner = () => {
         Feel free to fork, copy and use but don&apos;t forget to star&nbsp;
         <Link
           href="https://github.com/jooncco/jooncco.dev-fe"
-          className="font-bold text-blue-700 dark:text-rose-600 hover:underline">
+          className="font-bold text-blue-700 dark:text-pink-800 hover:underline">
           this repo
         </Link>
         . It will keep evolving, and all of the contents & source code will

diff --git a/components/Icons.jsx b/components/Icons.jsx
@@ -337,6 +337,16 @@ const ExclamationTriangleIcon = ({className}) => (
   </svg>
 );
 
+const InfinityIcon = ({className}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className={`${className ?? ''} h-6 w-6`}>
+    <path d="M20.288 9.463a4.856 4.856 0 0 0-4.336-2.3 4.586 4.586 0 0 0-3.343 1.767c.071.116.148.226.212.347l.879 1.652.134-.254a2.71 2.71 0 0 1 2.206-1.519 2.845 2.845 0 1 1 0 5.686 2.708 2.708 0 0 1-2.205-1.518L13.131 12l-1.193-2.26a4.709 4.709 0 0 0-3.89-2.581 4.845 4.845 0 1 0 0 9.682 4.586 4.586 0 0 0 3.343-1.767c-.071-.116-.148-.226-.212-.347l-.879-1.656-.134.254a2.71 2.71 0 0 1-2.206 1.519 2.855 2.855 0 0 1-2.559-1.369 2.825 2.825 0 0 1 0-2.946 2.862 2.862 0 0 1 2.442-1.374h.121a2.708 2.708 0 0 1 2.205 1.518l.7 1.327 1.193 2.26a4.709 4.709 0 0 0 3.89 2.581h.209a4.846 4.846 0 0 0 4.127-7.378z" />
+  </svg>
+);
+
 export {
   MoonIcon,
   SunIcon,
@@ -362,4 +372,5 @@ export {
   PhotoIcon,
   CheckCircleIcon,
   ExclamationTriangleIcon,
+  InfinityIcon,
 };
diff --git a/components/ImageBanner.jsx b/components/ImageBanner.jsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import '../styles/imagebanner.css';
+import {InfinityIcon} from './Icons';
+
+const ImageBanner = () => {
+  return (
+    <div className="mx-auto canvas">
+      <InfinityIcon className="!w-[460px] !h-[460px]" />
+      <svg className="h-0">
+        <filter id="wave">
+          <feTurbulence
+            x="0"
+            y="0"
+            baseFrequency="0.009"
+            numOctaves="5"
+            seed="2">
+            <animate
+              attributeName="baseFrequency"
+              dur="60s"
+              values="0.02;0.005;0.02"
+              repeatCount="indefinite"
+            />
+          </feTurbulence>
+          <feDisplacementMap in="SourceGraphic" scale="20" />
+        </filter>
+      </svg>
+    </div>
+  );
+};
+
+export default ImageBanner;
diff --git a/_tmp/style.css → styles/imagebanner.css b/_tmp/style.css → styles/imagebanner.css
@@ -12,42 +12,39 @@ body {
     background: #000;
 }
 
-.circle {
-    position: relative;
-    width: 600px;
-    height: 600px;
-    filter: url(#wavy) blur(1px);
+.canvas {
+    width: 460px;
+    height: 460px;
+    filter: url(#wave) blur(1px);
 }
 
-.circle:before {
+.canvas:before {
     content: '';
     position: absolute;
-    top: 100px;
-    Left: 100px;
-    right: 100px;
-    bottom: 100px;
-    border: 20px solid #fff;
+    width: 344px;
+    height: 186px;
+    left: 58px;
+    top: 137px;
     border-radius: 50%;
     box-shadow: 0 0 50px #0f0,
                 inset 0 0 50px #0f0;
     -webkit-box-reflect: below 10px linear-gradient (transparent, transparent,#0002);
     animation: animate 5s linear infinite;
 }
 
-.circle:after {
+.canvas:after {
     content: '';
     position: absolute;
-    top: 100px;
-    Left: 100px;
-    right: 100px;
-    bottom: 100px;
-    border: 20px solid #fff;
+    width: 344px;
+    height: 186px;
+    left: 58px;
+    top: 137px;
     border-radius: 50%;
     box-shadow: 0 0 50px #fff,
                 inset 0 0 50px #fff;
 }
 
-.circle:nth-child(2):before {
+.canvas:nth-child(2):before {
     animation-delay: -2.5s;
 }