feat: profile picture on the main page

assets/css/style.css

@@ -428,6 +428,22 @@ html {
       height: 100%;
       object-fit: cover; } }
 
+.authors-container {
+  display: flex;
+  justify-content: center;
+  gap: 20px; }
+
+.author-image-container {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid white; }
+  .author-image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; }
+
 .post-card-image {
   max-width: 800px;
   height: 150px; }

index.hbs

@@ -2,6 +2,7 @@
 <header class="blog-header {{#if @site.cover_image}} has-cover{{/if}}">
 	<div class="inner">
 		<div class="box blog-box">
+			{{> "primary-author"}}
 			<h1 class="blog-name">{{@site.title}}</h1>
 			{{#if @site.description}}
 			<span class="blog-description">{{@site.description}}</span>

partials/primary-author.hbs

@@ -0,0 +1,10 @@
+{{#get "authors"}}
+    {{! Loop through authors }}
+    <div class="authors-container">
+        {{#foreach authors}}
+        <div class="author-image-container">
+            <img class="author-profile-image" src='{{ profile_image }}' alt='{{ name }}'>
+        </div>
+        {{/foreach}}
+    </div>
+{{/get}}

src/sass/style.scss

@@ -48,6 +48,25 @@ html {
 	}
 }
 
+.authors-container {
+	display: flex; 
+	justify-content: center;
+	gap: 20px;
+}
+
+.author-image-container {
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	overflow: hidden;
+	border: 2px solid white;
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+}
+
 .post-card-image {
 	max-width: 800px;
 	height: 150px;