Finish list of blog pages

8 files changed, 98 insertions, 6 deletions

diff --git a/content/blog/_index.md b/content/blog/_index.md
index c504e1b..9345d65 100644
--- a/content/blog/_index.md
+++ b/content/blog/_index.md
@@ -3,4 +3,5 @@ title = "Blog"
 sort_by = "date"
 template = "blog.html"
 page_template = "blog-page.html"
+extra.header_title = "blog"
 +++
diff --git a/content/blog/test.md b/content/blog/test.md
index 8034961..1cd3ca6 100644
--- a/content/blog/test.md
+++ b/content/blog/test.md
@@ -1,6 +1,7 @@
 +++
 title = "Blog post test"
 date = 2026-07-17
+extra.image = "/assets/images/Arslaan Pathan.svg"
 +++
 
 # Test blog post
diff --git a/content/blog/test2.md b/content/blog/test2.md
new file mode 100644
index 0000000..a79fa9b
--- /dev/null
+++ b/content/blog/test2.md
@@ -0,0 +1,17 @@
++++
+title = "Blog post test 2"
+date = 2026-07-18
+extra.image = "/assets/images/Arslaan Pathan.svg"
++++
+
+# Test blog post 2
+
+```shell
+echo "Codeblocks"
+```
+
+`smaller codeblocks`
+
+Testing testing 123 chicken nuggets not 3
+
+<span class="yellow">Yellow text.</span>
diff --git a/content/projects/_index.md b/content/projects/_index.md
index b0a2818..efb5169 100644
--- a/content/projects/_index.md
+++ b/content/projects/_index.md
@@ -3,4 +3,5 @@ title = "Projects"
 sort_by = "weight"
 template = "project.html"
 page_template = "projects-page.html"
+extra.header_title = "projects"
 +++
diff --git a/static/style.css b/static/style.css
index 647aee5..e6d610a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -191,3 +191,59 @@ a {
 		width: 70%;
 	}
 }
+
+.blog-date {
+	text-decoration: none;
+}
+
+.blog-entry {
+	display: flex !important;
+	flex-direction: column !important;
+	align-items: center !important;
+	justify-content: center !important;
+	gap: 0.8rem;
+	padding: 1rem !important;
+	text-align: center !important;
+	overflow-y: hidden;
+	overflow-x: hidden;
+	white-space: normal !important;
+	word-wrap: break-word;
+	word-break: break-word;
+}
+
+.blog-image-wrap {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+.blog-thumbnail {
+	max-width: 90%;
+	height: auto;
+	max-height: 200px;
+	border-radius: 4px;
+	border: 4px solid #313244;
+	object-fit: cover;
+}
+
+.blog-title a {
+	color: #cdd6f4;
+	text-decoration: none;
+	transition: color 0.4s;
+}
+
+.blog-title {
+	margin: 0;
+	padding: 0;
+}
+
+.blog-title a:hover {
+	color: #f9e2af;
+	text-decoration: underline;
+}
+
+.blog-ls {
+	text-align: left;
+	margin: 0;
+}
diff --git a/templates/blog.html b/templates/blog.html
index 4653d1c..2690196 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -1,10 +1,26 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="title">{{ section.title }}</h1>
-<ul>
+<h1>{{ section.title }}</h1>
+<div class="blog-list-content">
+<pre class="wrap blog-ls">
+<span class="white">$ </span><span class="green">ls</span>
+</pre>
+
+<div class="blog-list">
 	{% for page in section.pages %}
-	<li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+		<pre class="blog-entry wrap">
+			<a href="{{ page.permalink | safe}}" class="blog-date"><span class="yellow">{{ page.date }}.md</span></a>
+			{% if page.extra.image %}
+			<div class="blog-image-wrap">
+				<a href="{{ page.permalink | safe}}"><img src="{{ page.extra.image | safe}}" alt="{{ page.title }}" class="blog-thumbnail"></a>
+			</div>
+			{% endif %}
+			<h2 class="blog-title">
+				<a href="{{ page.permalink | safe}}">{{ page.title }}</a>
+			</h2>
+		</pre>
 	{% endfor %}
-</ul>
+</div>
+</div>
 {% endblock content %}
diff --git a/templates/header.html b/templates/header.html
index ef38e96..5e64f05 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,7 +1,7 @@
 <header>
 	<div class="header-inner">
 		<div class="site-title">
-			<a href="/"><span class="pink">arslaan</span><span class="white">@</span><span class="yellow">thinkpad-e16-void</span><span class="white">:</span><span class="green bold">~</span></a>
+			<a href="/"><span class="pink">arslaan</span><span class="white">@</span><span class="yellow">thinkpad-e16-void</span><span class="white">:</span><span class="green bold">~{% if section.extra.header_title %}/{{ section.extra.header_title }}{% endif %}</span></a>
 		</div>
 		<nav>
 			<a href="/" class="{% if current_path == '/' %}active{% else %}purple{% endif %}">home</a>
diff --git a/templates/index.html b/templates/index.html
index de90683..273132c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,7 +12,7 @@
 <div class="fastfetch-row">
 	<img src="/assets/images/Arslaan Pathan.svg" alt="Arslaan Pathan Logo" class="fastfetch-image">
 	<div class="fastfetch-text">
-		<p>I like computer science, writing stories (sometimes), Linux, FOSS (Free Open-Source Software), hacking, reverse-engineering and iOS jailbreaking. My favorite colour is yellow, and my favorite genre of music is Hyperpop, particularly Hyperpop-Digicore & Hyperpop-Glitchcore. I work on various projects in low-level development, system programming, and hardware hacking. I'm also active in <a target="_blank" href="https://hackclub.com">Hack Club</a>, a community of over 100,000+ teens around the world who code together. Come join the Slack and say hi!</p>
+		<p>I like computer science, writing stories (sometimes), Linux, FOSS (Free Open-Source Software), hacking, reverse-engineering and iOS jailbreaking. My favorite colour is yellow, and my favorite genre of music is Hyperpop, particularly Hyperpop-Digicore &amp; Hyperpop-Glitchcore. I work on various projects in low-level development, system programming, and hardware hacking. I'm also active in <a target="_blank" href="https://hackclub.com">Hack Club</a>, a community of over 100,000+ teens around the world who code together. Come join the Slack and say hi!</p>
 		<p>I mainly use Void Linux on my ThinkPad E16 Gen 3 (Intel Core Ultra 7 255H) with the bspwm tiling window manager along with picom, polybar, rofi, i3lock-color, sxhkd, and more. Currently, my dotfiles are not available on Git, but hopefully that will change in the near future. My favorite games are osu!, Minecraft and Stick Fight: The Game. I’ve been programming and tinkering with devices since somewhere around the age of six. What originally got me into programming was looking at my old iPad 2 (which I still have as of 2025, seven years later - it's now jailbroken with <a target="_blank" href="https://etasonjb.tihmstar.net">EtasonJB</a> because I felt like it) and saying – “how are these apps made?”</p>
 		<p>Feel free to explore my projects, stories, and achievements, and thanks for stopping by!</p>
 	</div>