diff --git a/components/blog.templ b/components/blog.templ
new file mode 100644
index 0000000..d13b349
--- /dev/null
+++ b/components/blog.templ
@@ -0,0 +1,48 @@
+package components
+
+import "strings"
+
+type Blog struct {
+	Title   string
+	Summary string
+	Link    templ.SafeURL
+}
+
+templ BlogSummary(entry Blog) {
+	<article
+		aria-labelledby={ "blog-entry-" + strings.ReplaceAll(entry.Title, " ", "-") }
+	>
+		<h3
+			id={ "blog-entry-" + strings.ReplaceAll(entry.Title, " ", "-") }
+			class="font-cal text-xl"
+		>
+			{ entry.Title }
+		</h3>
+		<div class="relative w-fit h-fit">
+			<p class="line-clamp-3 text-justify text-light-gray">
+				{ entry.Summary }
+			</p>
+			<div
+				aria-hidden="true"
+				class="h-0 w-0 pointer-events-none bg-transparent!"
+			>
+				<div
+					class={ "absolute left-0 top-0 h-100% w-100% " +
+						"bg-transparent bg-gradient-to-t from-black/50" }
+				></div>
+			</div>
+		</div>
+		<div>
+			<a
+				class={ "transition-1s transition-color text-gray hover:text-light-gray no-underline " +
+				"hover:underline transform-gpu hover:-translate-y-0.2 transition-transform" }
+				href={ entry.Link }
+			>
+				Read all
+				<span
+					class="w-3 h-3 bg-gray hover:bg-light-gray i-solar:arrow-right-up-line-duotone inline-block"
+				></span>
+			</a>
+		</div>
+	</article>
+}
diff --git a/config/routes.go b/config/routes.go
index ced8b2a..b52f515 100644
--- a/config/routes.go
+++ b/config/routes.go
@@ -64,6 +64,45 @@ var mockProjects = []components.Project{
 	},
 }
 
+var mockBlog = []components.Blog{
+	{
+		Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
+		Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
+			"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link: templ.URL("/001"),
+	},
+	{
+		Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
+		Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
+			"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link: templ.URL("/001"),
+	},
+	{
+		Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
+		Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
+			"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link: templ.URL("/001"),
+	},
+	{
+		Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
+		Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
+			"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link: templ.URL("/001"),
+	},
+	{
+		Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
+		Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
+			"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link: templ.URL("/001"),
+	},
+	{
+		Title: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim.",
+		Summary: "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint " +
+			"cillum sint consectetur cupidatat Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link: templ.URL("/001"),
+	},
+}
+
 var images = []string{
 	"/images/image-1.png",
 	"/images/image-2.png",
diff --git a/pages/homepage.templ b/pages/homepage.templ
index 28235e5..a8693b1 100644
--- a/pages/homepage.templ
+++ b/pages/homepage.templ
@@ -7,6 +7,7 @@ import (
 
 type HomepageProps struct {
 	Projects []components.Project
+	Blogs    []components.Blog
 	Images   []string
 }
 
@@ -147,6 +148,44 @@ templ Homepage(props HomepageProps) {
 					</div>
 				</div>
 			</section>
+			<section
+				aria-labelledby="blog-header"
+				id="blog"
+				class="w-screen min-h-screen flex justify-center items-center"
+			>
+				<div class="w-90% xl:w-50% max-h-60% snap-start">
+					<hgroup class="flex justify-between my-5">
+						<h2 id="blog-header" class="font-cal text-5xl m-0">Blog.</h2>
+						<p class="m-0">
+							<a
+								href="/blog"
+								class="decoration-none text-light-gray flex items-center"
+							>
+								See more
+								<span
+									class="w-5 h-5 bg-light-gray i-solar:arrow-right-up-line-duotone inline-block"
+								></span>
+							</a>
+						</p>
+					</hgroup>
+					<div
+						class={ "w-100% max-h-65vh md:max-h-70vh overflow-hidden " +
+								"md:grid grid-cols-2 gap-4" }
+					>
+						for i, blog := range props.Blogs {
+							if i < 2 {
+								<div class="">
+									@components.BlogSummary(blog)
+								</div>
+							} else if i < 4 {
+								<div class="hidden md:block">
+									@components.BlogSummary(blog)
+								</div>
+							}
+						}
+					</div>
+				</div>
+			</section>
 		</div>
 		<footer>
 			<div