move the assets to remote location and change blog cover to Next/Image
This commit is contained in:
119
app/page.tsx
119
app/page.tsx
@@ -4,66 +4,73 @@ import { raleway, syne, questrial } from "@/app/fonts";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className={`flex flex-col`}>
|
||||
<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={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
|
||||
SUYONO
|
||||
</p>
|
||||
<p className={`${raleway.className} text-white text-center 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 my-8`}>
|
||||
<div className={`border border-slate-100 flex flex-col`}>
|
||||
<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"
|
||||
width={454}
|
||||
height={341}
|
||||
/>
|
||||
<div className={`flex flex-col mx-10`}>
|
||||
<p className={`${syne.className} text-2xl`}>
|
||||
Nginx + SSL Client Certificate Verification: Manage Access to a
|
||||
site
|
||||
<div className={`flex flex-col`}>
|
||||
<div className={`grid grid-rows-1 grid-cols-1 justify-items-center`}>
|
||||
<Image
|
||||
src={`https://assets.suyono.me/placeholder.webp`}
|
||||
alt={`blog cover`}
|
||||
className={`object-cover col-start-1 row-start-1 w-screen h-192 z-0`}
|
||||
width={1581}
|
||||
height={759}
|
||||
/>
|
||||
<div className={`flex flex-col-reverse col-start-1 row-start-1 w-screen`}>
|
||||
<div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10 z-10`}>
|
||||
<p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
|
||||
SUYONO
|
||||
</p>
|
||||
<p className={`${questrial.className} 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'll share how to set up the certificates and
|
||||
configure nginx to verify users based on their certificates.
|
||||
<p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
|
||||
A Tech Archive
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex flex-row justify-center my-8`}>
|
||||
<div className={`border border-slate-100 flex flex-col`}>
|
||||
<Link
|
||||
href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
|
||||
className={`flex flex-row max-w-4xl items-center`}
|
||||
>
|
||||
<Image
|
||||
src="https://assets.suyono.me/pthumb.webp"
|
||||
alt="post thumbnail"
|
||||
width={454}
|
||||
height={341}
|
||||
/>
|
||||
<div className={`flex flex-col mx-10`}>
|
||||
<p className={`${syne.className} text-2xl`}>
|
||||
Nginx + SSL Client Certificate Verification: Manage Access to a
|
||||
site
|
||||
</p>
|
||||
<p className={`${questrial.className} 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'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 ${raleway.className}`}>Hi There</p>
|
||||
<p className={`text-base ${raleway.className} my-4`}>
|
||||
a new take on experience is the best teacher
|
||||
</p>
|
||||
<p className={`${raleway.className} 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'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>
|
||||
</div>
|
||||
<div className={`flex flex-row bg-teal-50 justify-center`}>
|
||||
<div className={`max-w-4xl py-28 px-10`}>
|
||||
<p className={`text-3xl ${raleway.className}`}>Hi There</p>
|
||||
<p className={`text-base ${raleway.className} my-4`}>
|
||||
a new take on experience is the best teacher
|
||||
</p>
|
||||
<p className={`${raleway.className} 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'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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user