links fix

Author: nitin27may

docs/backend.md

@@ -11,7 +11,9 @@ permalink: /backend
 The backend of this project is built with .NET 9, following Clean Architecture principles. It provides a robust API layer for the Angular frontend, using Dapper for efficient data access and PostgreSQL as the database.
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="screenshots/CleanArchitecture.png" alt="Clean Architecture Diagram" style="width: 90%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <a href="screenshots/clean-architecture.png" target="_blank">
+    <img src="screenshots/clean-architecture.png" alt="Clean Architecture Diagram" style="width: 90%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  </a>
   <p style="font-style: italic; margin-top: 10px;">Clean Architecture implementation in the .NET 9 backend</p>
 </div>
 
@@ -405,7 +407,9 @@ public class UnitOfWork : IUnitOfWork
 The application uses JWT-based authentication with role-based authorization:
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="screenshots/landing-page.png" alt="Login Page" style="width: 70%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <a href="screenshots/landing-page.png" target="_blank">
+    <img src="screenshots/landing-page.png" alt="Login Page" style="width: 70%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  </a>
   <p style="font-style: italic; margin-top: 10px;">Login page that connects to the JWT authentication system</p>
 </div>
 
@@ -490,11 +494,15 @@ The backend implements a flexible permission system:
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/role-master.png" target="_blank">
+      <img src="screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Role Management System</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/role-permission-mapping.png" alt="Role Permission Mapping" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/role-permission-mapping.png" target="_blank">
+      <img src="screenshots/role-permission-mapping.png" alt="Role Permission Mapping" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Role Permission Mapping</p>
   </div>
 </div>
@@ -635,7 +643,9 @@ public class ExceptionMiddleware
 Comprehensive activity tracking:
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="screenshots/User-activity-log.png" alt="User Activity Log" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <a href="screenshots/User-activity-log.png" target="_blank">
+    <img src="screenshots/User-activity-log.png" alt="User Activity Log" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  </a>
   <p style="font-style: italic; margin-top: 10px;">User Activity Logging System</p>
 </div>
 
@@ -707,7 +717,9 @@ public class ActivityLoggingMiddleware
 Complete CRUD operations:
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="screenshots/contact-list-page.png" alt="Contact List" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <a href="screenshots/contact-list-page.png" target="_blank">
+    <img src="screenshots/contact-list-page.png" alt="Contact List" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  </a>
   <p style="font-style: italic; margin-top: 10px;">Contact Management System powered by the API</p>
 </div>
 

docs/frontend.md

@@ -11,7 +11,9 @@ permalink: /Frontend
 The frontend of this project is built with Angular 19, leveraging modern Angular features including standalone components, signals for state management, the inject() function for dependency injection, and a powerful combination of Angular Material and TailwindCSS for styling.
 
 <div style="text-align: center; margin: 30px 0;">
-  <img src="screenshots/contact-list-page.png" alt="Contact List Page" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <a href="screenshots/contact-list-page.png" target="_blank">
+    <img src="screenshots/contact-list-page.png" alt="Contact List Page" style="width: 90%; max-width: 800px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  </a>
   <p style="font-style: italic; margin-top: 10px;">The Contact List page demonstrating the clean UI design with Angular Material and TailwindCSS</p>
 </div>
 
@@ -331,11 +333,15 @@ Authentication is implemented using JWT tokens with automatic refresh capability
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/landing-page.png" alt="Login Page" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/landing-page.png" target="_blank">
+      <img src="screenshots/landing-page.png" alt="Login Page" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Login Page with Material Design components</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/landing-page-drak.png" alt="Login Page (Dark Mode)" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/landing-page-drak.png" target="_blank">
+      <img src="screenshots/landing-page-drak.png" alt="Login Page (Dark Mode)" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Login Page in Dark Mode</p>
   </div>
 </div>
@@ -524,11 +530,15 @@ export class HasPermissionDirective {
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/contact-list-page.png" alt="Contact List View" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/contact-list-page.png" target="_blank">
+      <img src="screenshots/contact-list-page.png" alt="Contact List View" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Contact List View with filtering and sorting</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/Contacnt-form.png" alt="Contact Form" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/Contacnt-form.png" target="_blank">
+      <img src="screenshots/Contacnt-form.png" alt="Contact Form" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Contact Form with validation</p>
   </div>
 </div>
@@ -537,11 +547,15 @@ export class HasPermissionDirective {
 
 <div style="display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap;">
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/role-master.png" target="_blank">
+      <img src="screenshots/role-master.png" alt="Role Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Role Management</p>
   </div>
   <div style="flex: 1; min-width: 300px;">
-    <img src="screenshots/operation-master.png" alt="Operation Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    <a href="screenshots/operation-master.png" target="_blank">
+      <img src="screenshots/operation-master.png" alt="Operation Management" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+    </a>
     <p style="font-style: italic; text-align: center;">Operation Management</p>
   </div>
 </div>

docs/index.md

@@ -21,7 +21,9 @@ A production-ready full-stack application with Angular 19, .NET 9, and PostgreSQ
 
 
 <p align="center">
-  <img src="screenshots/clean-architecture-demo.gif" alt="Application Demo" width="700">
+  <a href="screenshots/clean-architecture-demo.gif" target="_blank">
+    <img src="screenshots/clean-architecture-demo.gif" alt="Application Demo" width="700">
+  </a>
 </p>
 
 A modern, full-stack contact management system built with Angular 19, .NET 9, and PostgreSQL following Clean Architecture principles. This project demonstrates how to structure enterprise applications for maintainability, testability, and scalability while providing a complete development workflow with Docker containerization.
@@ -75,7 +77,9 @@ That's it! Visit [http://localhost](http://localhost) in your browser.
 ## 🏗️ System Architecture
 
 <p align="center">
-  <img src="screenshots/architecture.png" alt="Architecture Diagram" width="700">
+  <a href="screenshots/architecture.png" target="_blank">
+    <img src="screenshots/architecture.png" alt="Architecture Diagram" width="700">
+  </a>
 </p>
 
 ### Container Architecture
@@ -90,7 +94,9 @@ The application is structured into multiple containers that work together:
 ## 📐 Clean Architecture Explained
 
 <p align="center">
-  <img src="screenshots/CleanArchitecture.png" alt="Clean Architecture Diagram" width="500">
+  <a href="screenshots/clean-architecture.png" target="_blank">
+    <img src="screenshots/clean-architecture.png" alt="Clean Architecture Diagram" width="500">
+  </a>
 </p>
 
 ### Why Choose Clean Architecture?