feat: implement dynamic form and popup components

- Added DynamicField interface to define form field structure.
- Created DynamicFormConfig interface for form configuration.
- Developed DynamicFormComponent to handle dynamic form rendering and validation.
- Implemented DynamicPopupComponent for displaying forms in a modal dialog.
- Added HTML and SCSS for dynamic form and popup styling.
- Integrated Material Design components for form inputs and buttons.
- Implemented form submission logic with API integration.
- Added tests for DynamicForm and DynamicPopup components.
- Updated global styles for Material components in themed popups.
- Included Material Icons in index.html for better UI representation.

src/app/admin/about/about.html

@@ -1,6 +1,10 @@
+@if (about$ | async; as model) {
 <article class="about  active" data-page="about">
     <header>
-        <h2 class="h2 article-title">About me</h2>
+        <h2 class="h2 article-title">About Me</h2>
+        <button class="edit-btn" (click)="openEdit()" aria-label="Edit About">
+            <i class="fa-light fa-pencil"></i>
+        </button>
     </header>
 
     <section class="about-text">
@@ -15,7 +19,8 @@
 
         <ul class="service-list">
 
-            <li class="service-item" *ngFor="let hobby of model.hobbies">
+            @for (hobby of model.hobbies; track hobby.hobbyId) {
+            <li class="service-item">
                 <div class="service-icon-box">
                     <i class="fa-regular fa-2x " [ngClass]="hobby.icon"></i>
                 </div>
@@ -27,8 +32,10 @@
                     </p>
                 </div>
             </li>
+            }
         </ul>
 
     </section>
 
-</article>
+</article>
+}