UpdateFeatureWeb DevelopmentPortfolio Website

Blog 1.0 — Major Update

A complete overhaul of the blog system with a redesigned reading experience, project linking, @mentions, password reset, and admin tools.

Marwan Elmaraghy

Apr 13, 2026·3 min read

What Changed?

The blog just got a massive upgrade. Every part of the reading experience has been reworked from the ground up — here's everything that's new.


Redesigned Blog Layout

  • Featured post hero — the latest post now gets a full-width vertical card with cover image on top
  • Compact card grid — remaining posts use a clean horizontal thumbnail + text layout
  • Read time and timestamps — every card now shows estimated read time and publish time
  • Live like and comment counts — counts are computed in real time, no more stale numbers

Better Reading Experience

The entire article renderer has been rewritten:

  • Proper markdown — code blocks with language labels, grouped lists, blockquotes, links, and inline images all render correctly now
  • Typography — optimized font sizes and line height for comfortable reading on any device
  • Author card — shows avatar, name, date, and read time in a proper layout
  • Responsive — every element adapts seamlessly from mobile to desktop

Project Linking

Blog posts can now be linked to one or more projects:

  • Purple badges — linked projects show as pills on both the listing and the post page
  • Project callout cards — at the bottom of each post, linked projects appear as rich cards with tech stack, GitHub link, and description

Comment System Upgrades

  • Styled input — single-line input with a send icon inside, press Enter to post
  • @mention tagging — replying auto-fills @username, mentions are highlighted in cyan
  • Collapsible replies — replies are collapsed by default with "View N replies" / "Hide replies" toggle
  • Delete confirmation — inline prompt before deleting a comment
  • Always-visible actions — Reply, Edit, and Delete buttons are always shown, not hidden behind hover

Password Reset

  • Full email flow — request reset, receive email, click link, set new password
  • Password requirements — live visual indicators (uppercase, lowercase, number, 6+ characters) with green checks and red crosses
  • Confirm password — match indicator below the confirm field
  • OAuth detection — Google sign-in users see a clear message that password reset isn't available for their account
  • Rate limit handling — live countdown timer when requests are sent too frequently

Profile Preferences

  • Display section — Light/Dark theme toggle at the top of preferences
  • Show Real Name — toggle whether your display name or @username appears in comments
  • Notifications — control new post and reply email notifications

Signup Improvements

  • Confirm password — new field to retype your password
  • Live password rules — always-visible checklist showing which requirements are met as you type

What's Next?

More features are on the way. If you have ideas or feedback, drop a comment below or reach out through the contact form.

Related Project

Sign in to view related projects

Sign In
Discussion

Comments (0)

?

No comments yet. Be the first to share your thoughts!