upper body finished

app/globals.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

app/page.tsx

@@ -1,47 +1,82 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
     <div className="flex flex-col bg-white">
       <div className="ml-20 py-8">
-        <p className="font-sans text-2xl font-extralight">SUYONO</p>
+        <p className="font-blog text-2xl font-thin">SUYONO</p>
       </div>
       <div className="bg-gray-100">
         <div className="flex flex-row ml-20">
-          <a href="#" className="m-2 font-extralight text-sm">
+          <Link href="/" className="m-2 font-thin text-sm font-blog">
             Home
-          </a>
+          </Link>
-          <a href="#" className="m-2 font-extralight text-sm">
+          <Link href="#" className="m-2 font-thin text-sm font-blog">
             About
-          </a>
+          </Link>
-          <a href="#" className="m-2 font-extralight text-sm">
+          <Link href="#" className="m-2 font-thin text-sm font-blog">
             Blog
-          </a>
+          </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-extralight font-sans mb-6">
+          <p className="text-white text-center text-7xl font-thin font-blog mb-6">
             SUYONO
           </p>
-          <p className="text-white text-center font-sans font-extralight text-xl mb-10">
+          <p className="text-white text-center font-blog font-thin text-xl mb-10">
             A Tech Archive
           </p>
         </div>
         <div className="h-64"></div> {/* spacer */}
         <div className="h-64"></div> {/* spacer */}
       </div>
-      <div className="flex flex-row justify-center">
+      <div className="flex flex-row justify-center my-8">
-        <div className="border">
+        <div className="border border-slate-100 flex flex-col">
+          <Link href="#" className="flex flex-row max-w-4xl items-center">
             <Image
               src="/assets/pthumb.webp"
               alt="post thumbnail"
               width={454}
               height={341}
             />
-          <div className="flex flex-col"></div>
+            <div className="flex flex-col mx-10">
+              <p className="font-blog text-2xl">
+                Nginx + SSL Client Certificate Verification: Manage Access to a
+                site
+              </p>
+              <p className="font-blog line-clamp-3 mt-4">
+                Access control is a fundamental part of security. Most entities
+                rely on the combination of username and password, sometimes with
+                additional multi-factor authentication to improve security. Some
+                entities also use the SSL client certificate verification to
+                manage access to specific resources. One of the use cases where
+                SSL client certificate verification fits perfectly is managing
+                access to internet-facing development or staging servers. In
+                this post, I&apos;ll share how to set up the certificates and
+                configure nginx to verify users based on their certificates.
+              </p>
+            </div>
+          </Link>
         </div>
       </div>
+      <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="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
+            various knowledge and skills I&apos;ve accumulated. I hope the
+            articles, source code examples, and server config examples I wrote
+            will help you somehow. Read on and enjoy!
+          </p>
+        </div>
+      </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>
   );
 }

tailwind.config.ts

@@ -1,5 +1,7 @@
 import type { Config } from 'tailwindcss'
 
+import { fontFamily } from 'tailwindcss/defaultTheme'
+
 const config: Config = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -14,6 +16,9 @@ const config: Config = {
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
         'blog-cover': "url('/assets/placeholder.webp')"
       },
+      fontFamily: {
+        'blog': ['Raleway', ...fontFamily.sans],
+      },
     },
   },
   plugins: [],