refactor: style tweaks

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-semibold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
 					{title}
 				</h2>
 			</div>
@@ -29,7 +29,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
 							key={post.slug}
 							className="flex flex-col h-full  hover:bg-primary/5 py-4 px-0"
 						>
-              <CardHeader className="">
+							<CardHeader className="px-4 md:px-6">
 								<CardTitle className="leading-snug font-semibold ">
 									{post.title}
 								</CardTitle>
@@ -44,7 +44,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
 				))}
 			</div>
 			{showAllButton && (
-        <Button asChild variant="secondary" className="w-full mt-4">
+				<Button asChild variant="" className="w-full mt-4">
 					<Link to="/posts/page/1">View all</Link>
 				</Button>
 			)}

src/pages/about.tsx

@@ -5,7 +5,7 @@ const AboutPage = () => {
   return (
     <MainTemplate>
       <div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+        <h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
           About
         </h2>
       </div>
@@ -29,14 +29,19 @@ const AboutPage = () => {
         </figcaption>
       </figure>
       <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
-				Another software engineer with a blog!{" "}
+        Husband. Dad. Christian.
       </p>
 
       <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
-				I am a self-taught engineer from London. This blog is a technical
+        No, not really. I am a Londoner living on the south coast of the UK. I
+        am a self-taught software engineer and this blog is my technical
         scrapbook. I document the details of my technical life so I can have a
-				record of progress when I look back. Doing this publicly motivates me to
+        record of progress when I look back.{" "}
-				take care with my writing and to be as clear as possible.{" "}
+      </p>
+
+      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
+        I completed a degree in Philosophy at the University of Warwick and hold
+        a Postgraduate Certificate of Education.
       </p>
       <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
         Currently I work for{" "}
@@ -65,12 +70,32 @@ const AboutPage = () => {
         >
           Arria NLG
         </a>{" "}
-				and in several web developer roles.{" "}
+        and in several web developer roles. Before software I was a
+        teacher.{" "}
       </p>
 
-			<h3 className="mt-5 mb-0 scroll-m-20 text-xl font-semibold tracking-tight">
+      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
-				Code
+        Some things I like:
-			</h3>
+        <ul className="pt-2">
+          <li className="mb-1">🐶 Staffies and bull-breeds</li>
+          <li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
+          <li className="mb-1">🛸 Science fiction </li>
+        </ul>
+      </p>
+
+      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
+        Some things I'm interested in:
+        <ul className="pt-2">
+          <li className="mb-1">🧑‍💻 Self-hosting and digital resiliance</li>
+          <li className="mb-1">🖳 The history of computing and networks</li>
+          <li className="mb-1">🇮🇪 Irish history and culture</li>
+          <li className="mb-1">☸️ Buddhism</li>
+          {/*
+
+					<li className="mb-1">📡 Civil communications infrastructure</li>
+					*/}
+        </ul>
+      </p>
 
       <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
         I self-host my own Git forge at{" "}

src/pages/home.tsx

@@ -1,11 +1,34 @@
 import MainTemplate from "@/templates/MainTemplate"
 import PostListing from "@/containers/PostListing"
 import { usePosts } from "@/hooks/usePosts"
+import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Link } from "react-router"
 
 const HomePage = () => {
 	const { posts } = usePosts()
 	return (
 		<MainTemplate>
+			<Card className="mb-8">
+				<CardHeader>
+					<h1 className="scroll-m-20 text-left text-3xl font-bold  text-balance">
+						Another software engineer with a blog 🥱
+					</h1>
+				</CardHeader>
+				<CardContent>
+					<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
+						I'm a self-taught software engineer currently working at ITV,
+						previously at the BBC. This blog is a technical scrapbook and
+						digital garden.
+					</p>
+				</CardContent>
+				<CardFooter>
+					<Button asChild>
+						<Link to="/about">About</Link>
+					</Button>
+				</CardFooter>
+			</Card>
+
 			<PostListing
 				title="Recent posts"
 				posts={posts.slice(0, 5)}

src/pages/posts.tsx

@@ -61,7 +61,7 @@ const PostsPage = () => {
 	return (
 		<MainTemplate>
 			<div className="mb-5 ">
-        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
 					All posts
 				</h2>
 			</div>
@@ -84,7 +84,7 @@ const PostsPage = () => {
 									<CardDescription className="text-sm text-muted-foreground">
 										<div className="flex justify-between gap-2">
 											<span className="text-sm">{convertDate(post.date)}</span>
-                      <div>
+											<div className="hidden md:block">
 												{post.tags.map((tag, i) => (
 													<Badge
 														className="ml-2 cursor-pointer"

src/styles/syntax-highlighting.css

@@ -15,7 +15,7 @@ p code {
 	border-radius: var(--radius);
 	overflow-x: auto;
 	margin: 1.5rem 0;
-	/* line-height: 1.3; */
+	line-height: 1.3;
 	/* counter-reset: line; */
 	font-family: var(--font-monospaced) !important;
 	font-size: 14px !important;

src/templates/BlogTemplate.tsx

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

src/templates/MainTemplate.tsx

@@ -22,7 +22,7 @@ const MainContent = ({ children }) => {
 		<div className={classes}>
 			<Header />
 			<main className="flex-1 w-full px-2 md:px-4 flex justify-center pt-16">
-				<div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-4 py-3">
+				<div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-2 md:px-4 md:py-3 py-0">
 					{children}
 				</div>
 			</main>