initialized structure

app/about/page.tsx

@@ -0,0 +1,11 @@
+import BlogHeader from "@/components/blogHeader";
+import BlogFooter from "@/components/blogFooter";
+
+export default function About() {
+    return(
+        <div>
+            <BlogHeader />
+            <BlogFooter />
+        </div>
+    )
+}

app/blog/page.tsx

@@ -0,0 +1,11 @@
+import BlogHeader from "@/components/blogHeader";
+import BlogFooter from "@/components/blogFooter";
+
+export default function Blog() {
+    return(
+        <div>
+            <BlogHeader />
+            <BlogFooter />
+        </div>
+    )
+}

app/page.tsx

@@ -1,25 +1,12 @@
 import Image from "next/image";
 import Link from "next/link";
+import BlogHeader from "../components/blogHeader";
+import BlogFooter from "@/components/blogFooter";
 
 export default function Home() {
   return (
     <div className="flex flex-col bg-white">
-      <div className="ml-20 py-8">
+      <BlogHeader />
-        <p className="font-blog text-2xl font-thin">SUYONO</p>
-      </div>
-      <div className="bg-gray-100">
-        <div className="flex flex-row ml-20">
-          <Link href="/" className="m-2 font-thin text-sm font-blog">
-            Home
-          </Link>
-          <Link href="#" className="m-2 font-thin text-sm font-blog">
-            About
-          </Link>
-          <Link href="#" className="m-2 font-thin text-sm font-blog">
-            Blog
-          </Link>
-        </div>
-      </div>
       <div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover">
         <div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10">
           <p className="text-white text-center text-7xl font-thin font-blog mb-6">
@@ -34,7 +21,10 @@ export default function Home() {
       </div>
       <div className="flex flex-row justify-center my-8">
         <div className="border border-slate-100 flex flex-col">
-          <Link href="#" className="flex flex-row max-w-4xl items-center">
+          <Link
+            href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
+            className="flex flex-row max-w-4xl items-center"
+          >
             <Image
               src="/assets/pthumb.webp"
               alt="post thumbnail"
@@ -64,7 +54,9 @@ export default function Home() {
       <div className="flex flex-row bg-teal-50 justify-center">
         <div className="max-w-4xl py-28 px-10">
           <p className="text-3xl font-blog">Hi There</p>
-          <p className="text-base font-blog my-4">a new take on experience is the best teacher</p>
+          <p className="text-base font-blog my-4">
+            a new take on experience is the best teacher
+          </p>
           <p className="font-blog text-sm">
             I started this blog as an archive of my experiences and knowledge.
             By writing them out, I hope it will help me unlearn and relearn the
@@ -74,9 +66,7 @@ export default function Home() {
           </p>
         </div>
       </div>
-        <p className="text-center font-blog text-xl my-10">Suyono</p>
+      <BlogFooter />
-        <p className="text-center font-blog">suyono3484@gmail.com</p>
-        <p className="text-center font-blog mt-20 mb-10">&copy;2023 by Suyono. Built using Next.js</p>
     </div>
   );
 }

app/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site/page.tsx

@@ -0,0 +1,11 @@
+import BlogHeader from "@/components/blogHeader";
+import BlogFooter from "@/components/blogFooter";
+
+export default function Post1() {
+    return(
+        <div>
+            <BlogHeader />
+            <BlogFooter />
+        </div>
+    )
+}

components/blogFooter.tsx

@@ -0,0 +1,11 @@
+export default function BlogFooter() {
+    return(
+        <div>
+            <p className="text-center font-blog text-xl my-10">Suyono</p>
+            <p className="text-center font-blog">suyono3484@gmail.com</p>
+            <p className="text-center font-blog mt-20 mb-10">
+                &copy;2023 by Suyono. Built using Next.js
+            </p>
+        </div>
+    )
+}

components/blogHeader.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+export default function BlogHeader() {
+    return(
+        <div>
+            <div className="ml-20 py-8">
+                <p className="font-blog text-2xl font-thin">SUYONO</p>
+            </div>
+            <div className="bg-gray-100">
+                <div className="flex flex-row ml-20">
+                    <Link href="/" className="m-2 font-thin text-sm font-blog">
+                        Home
+                    </Link>
+                    <Link href="/about" className="m-2 font-thin text-sm font-blog">
+                        About
+                    </Link>
+                    <Link href="/blog" className="m-2 font-thin text-sm font-blog">
+                        Blog
+                    </Link>
+                </div>
+            </div>
+        </div>
+    )
+}