Improve post display and image readability

- Increase generated image font size from 42 to 56px
- Center posts on /posts page with flexbox
- Update tag font size to 20px for better visibility
- Style profile image as circular in README

Author: ericgitangu

README.md

@@ -10,7 +10,8 @@
 
 <div align="center">
     <a href="https://developer.ericgitangu.com">
-        <img src="https://developer.ericgitangu.com/_next/image?url=%2Ffavicon.png&w=96&q=75" style="border-radius: 50%" alt="deveric.io logo"/>
+        <img src="https://developer.ericgitangu.com/_next/image?url=%2Ffavicon.png&w=128&q=75" width="128" height="128" style="border-radius: 50%; overflow: hidden; display: inline-block;" alt="Eric Gitangu"/>
+        <br/>
         <h2>Eric Gitangu</h2>
     </a>
 

portfolio/management/commands/generate_images.py

@@ -118,7 +118,7 @@ def generate_image(self, post):
         draw = ImageDraw.Draw(image)
 
         # Try to load a font, fall back to default
-        font_size = 42
+        font_size = 56
         try:
             font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", font_size)
         except (IOError, OSError):
@@ -132,7 +132,7 @@ def generate_image(self, post):
         lines = self.wrap_text(title, font, width - 80, draw)
 
         # Calculate vertical position to center text
-        line_height = font_size + 10
+        line_height = font_size + 14
         total_height = len(lines) * line_height
         y_start = (height - total_height) // 2
 
@@ -153,10 +153,10 @@ def generate_image(self, post):
         if tags:
             tag_text = ' | '.join(tags)
             try:
-                small_font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 16)
+                small_font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 20)
             except (IOError, OSError):
                 small_font = font
-            draw.text((20, height - 30), tag_text.upper(), font=small_font, fill=(255, 255, 255, 180))
+            draw.text((20, height - 35), tag_text.upper(), font=small_font, fill=(255, 255, 255, 180))
 
         return image
 

portfolio/static/all-posts.css

@@ -24,8 +24,10 @@ ul {
   list-style: none;
   margin: 0 auto;
   padding: 0;
-  display: content;
- 
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
 }
 
 .post img {