style: use semibold for headers

src/containers/PostListing.tsx

@@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
 	return (
 		<>
 			<div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
 					{title}
 				</h2>
 			</div>

src/pages/about.tsx

@@ -5,7 +5,7 @@ const AboutPage = () => {
 	return (
 		<MainTemplate>
 			<div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
 					About
 				</h2>
 			</div>

src/pages/home.tsx

@@ -11,7 +11,7 @@ const HomePage = () => {
     <MainTemplate>
       <Card className="mb-8">
         <CardHeader>
-					<h1 className="scroll-m-20 text-left text-3xl font-bold  text-balance">
+          <h1 className="scroll-m-20 text-left text-3xl font-semibold">
             Another software engineer with a blog
           </h1>
         </CardHeader>

src/pages/posts.tsx

@@ -61,7 +61,7 @@ const PostsPage = () => {
 	return (
 		<MainTemplate>
 			<div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
 					All posts
 				</h2>
 			</div>

src/templates/BlogTemplate.tsx

@@ -17,7 +17,7 @@ const BlogTemplate = () => {
 			) : (
 				<>
 					<div className="mb-5">
-            <h2 className="text-2xl font-bold lg:text-2xl border-b pb-3">
+						<h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3">
 							{post?.title}
 						</h2>
 					</div>