Update README.md

Author: frankfulness

README.md

@@ -1,11 +1,8 @@
-# Blog
+# 📰 Blog
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/frankfulness/blog)
+<img width="680" alt="Sample" src="https://github.com/user-attachments/assets/fb38b2c9-8f4c-4bd7-9b56-ef92fcb56b91" />
 
-This is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) blog.
-Next App directory with [React Server Component](https://nextjs.org/docs/getting-started/react-essentials#server-components) and uses [Contentlayer](https://www.contentlayer.dev/) to manage markdown content.
-
-## Features
+## 🏎️ Features
 
 - Next.js with Typescript
 - [Contentlayer](https://www.contentlayer.dev/) to manage content logic
@@ -35,7 +32,48 @@ Next App directory with [React Server Component](https://nextjs.org/docs/getting
 - Preconfigured security headers
 - SEO friendly with RSS feed, sitemaps and more!
 
-## Sample posts
+## 🗞️ Posts
+
+Content is modelled using [Contentlayer](https://www.contentlayer.dev/), define content schema and use it to generate typed content objects. See [Contentlayer documentation](https://www.contentlayer.dev/docs/getting-started) for more information.
+
+Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
+
+Showcase for projects - hero image specs: (16 x 9 - 1920 x 1080)
+
+Please refer to `contentlayer.config.ts` for an up to date list of supported fields. The following fields are supported:
+
+```
+title (required)
+date (required)
+tags (optional)
+lastmod (optional)
+draft (optional)
+summary (optional)
+images (optional)
+authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
+layout (optional list which should correspond to the file names in `data/layouts`)
+canonicalUrl (optional, canonical url for the post for SEO)
+```
+
+Here's an example of a post's frontmatter:
+
+```
+---
+title: 'Starter Blog'
+date: '2025-01-20'
+lastmod: '2021-01-18'
+tags: ['next-js', 'tailwind', 'guide']
+draft: false
+summary: 'A performant Stsarter Blog.'
+images: ['/static/images/blog-pic.jpg', '/static/images/blog-pic-2.jpg']
+authors: ['default', 'sparrowhawk']
+layout: PostLayout
+canonicalUrl: https://frankcarv.com/blog/
+---
+```
+
+
+## 📯 Sample posts
 
 - [A markdown guide](https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide)
 - [Learn more about images in Next.js](https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs)
@@ -44,7 +82,7 @@ Next App directory with [React Server Component](https://nextjs.org/docs/getting
 - [Example of long prose](https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine)
 - [Example of Nested Route Post](https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing)
 
-## Steps:
+## 🪜 Steps:
 
 1. Personalized `siteMetadata.js` (site related information)
 2. Modify the content security policy in `next.config.js` to use
@@ -55,13 +93,13 @@ Next App directory with [React Server Component](https://nextjs.org/docs/getting
 6. Added a blog post
 7. Deployed on Vercel
 
-## Development
+## 👨🏻‍💻 Development
 
 devcontainer runs and opens [http://localhost:3000](http://localhost:3000)
 
 Edit the layout in `app` or content in `data`. With live reloading, the pages auto-updates as you edit them.
 
-## Extend / Customize
+## 🎨 Extend / Customize
 
 `data/siteMetadata.js` - contains most of the site related information which should be modified for a user's need.
 
@@ -94,50 +132,8 @@ Edit the layout in `app` or content in `data`. With live reloading, the pages au
 
 `next.config.js` - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.
 
-## Post
-
-Content is modelled using [Contentlayer](https://www.contentlayer.dev/), define content schema and use it to generate typed content objects. See [Contentlayer documentation](https://www.contentlayer.dev/docs/getting-started) for more information.
-
-### Frontmatter
-
-Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
-
-Please refer to `contentlayer.config.ts` for an up to date list of supported fields. The following fields are supported:
-
-```
-title (required)
-date (required)
-tags (optional)
-lastmod (optional)
-draft (optional)
-summary (optional)
-images (optional)
-authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
-layout (optional list which should correspond to the file names in `data/layouts`)
-canonicalUrl (optional, canonical url for the post for SEO)
-```
-
-Here's an example of a post's frontmatter:
-
-```
----
-title: 'Starter Blog'
-date: '2025-01-20'
-lastmod: '2021-01-18'
-tags: ['next-js', 'tailwind', 'guide']
-draft: false
-summary: 'A performant Stsarter Blog.'
-images: ['/static/images/blog-pic.jpg', '/static/images/blog-pic-2.jpg']
-authors: ['default', 'sparrowhawk']
-layout: PostLayout
-canonicalUrl: https://frankcarv.com/blog/
----
-```
-
-## Deploy
+## 👨🏻‍🚀 Deploy
 
 ### Vercel
 
 The easiest way to deploy is on [Vercel](https://vercel.com). The [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
-
-Showcase projects with a hero image (16 x 9 - 1920 x 1080)