Shapes 📦 (e.g. more enriched post cards, highlighted blocks like in Confluence with What, Why, How, etc)
Icons 🔎 (e.g. accessible search from every screen, RSS to subscribe to updates, subscribe to newsletter)
Why
Now the main page https://blog.beraliv.dev looks like different parts which are disconnected from each other.
The post cards are very short and may be not clear without image, introductory description, read time and more expanded title.
Some parts are completely unnecessary and can be moved or completely removed, e.g. buy me a coffee in header and footer, spotify in the footer
Everything fancy can be moved to portfolio site, here it should be focused on the blog only.
How
Header
It will contain all important icons for navigation, e.g. menu for mobile, accessible search from every screen, RSS to subscribe to updates, subscribe to newsletter and social networks links:
It will contain all enhanced information to understand before starting reading it: more explanatory titles, 3-liner introductory description, read time (given 238 words per minute is average per average person) and image. It won't have visible lines so there won't be a confusion that it's disconnected from each other by style.
It will be a pop-up with input that will return nothing by default (now it's everything at https://blog.beraliv.dev/search) and will return articles when changing input value:
What
Address perceptual patterns in structure, e.g.:
Why
Now the main page https://blog.beraliv.dev looks like different parts which are disconnected from each other. The post cards are very short and may be not clear without image, introductory description, read time and more expanded title. Some parts are completely unnecessary and can be moved or completely removed, e.g. buy me a coffee in header and footer, spotify in the footer Everything fancy can be moved to portfolio site, here it should be focused on the blog only.
How
Header
It will contain all important icons for navigation, e.g. menu for mobile, accessible search from every screen, RSS to subscribe to updates, subscribe to newsletter and social networks links:
Additional information:
--tw-bg-opacity: 0.7; background-color: rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: 0.7; background-color: rgb(15 23 42 / var(--tw-bg-opacity));Links:
Blog post card
It will contain all enhanced information to understand before starting reading it: more explanatory titles, 3-liner introductory description, read time (given 238 words per minute is average per average person) and image. It won't have visible lines so there won't be a confusion that it's disconnected from each other by style.
Additional information:
Links:
Search
It will be a pop-up with input that will return nothing by default (now it's everything at https://blog.beraliv.dev/search) and will return articles when changing input value: