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/resume/resume.html

@@ -1,3 +1,4 @@
+@if (resume$ | async; as model) {
 <article class="resume" data-page="resume">
 
     <header>
@@ -12,11 +13,15 @@
             </div>
 
             <h3 class="h3">Education</h3>
+
+            <button class="edit-btn" type="button" (click)="openEditEducation()" title="Edit Education">
+                <i class="fa-solid fa-pen-to-square"></i>
+            </button>
         </div>
 
         <ol class="timeline-list">
 
-            @for (education of model.academics; track education) {
+            @for (education of model.academics; track education.academicId) {
 
             <li class="timeline-item">
 
@@ -45,11 +50,15 @@
             </div>
 
             <h3 class="h3">Experience</h3>
+
+            <button class="edit-btn" type="button" (click)="openEditExperience()" title="Edit Experience">
+                <i class="fa-solid fa-pen-to-square"></i>
+            </button>
         </div>
 
         <ol class="timeline-list">
 
-            @for (experience of model.experiences; track experience) {
+            @for (experience of model.experiences; track experience.experienceId) {
 
             <li class="timeline-item">
 
@@ -71,11 +80,17 @@
 
     <section class="skill">
 
-        <h3 class="h3 skills-title">My skills</h3>
+        <div class="title-wrapper">
+            <h3 class="h3 skills-title">My skills</h3>
+
+            <button class="edit-btn" type="button" (click)="openEditSkills()" title="Edit Skills">
+                <i class="fa-solid fa-pen-to-square"></i>
+            </button>
+        </div>
 
         <ul class="skills-list content-card">
 
-            @for (skill of model.skills; track skill) {
+            @for (skill of model.skills; track skill.skillId) {
 
             <li class="skills-item">
 
@@ -96,4 +111,43 @@
 
     </section>
 
-</article>
+    <section class="timeline">
+
+        <div class="title-wrapper">
+            <div class="icon-box">
+                <i class="fa-light fa-certificate"></i>
+            </div>
+
+            <h3 class="h3">Certifications</h3>
+
+            <button class="edit-btn" type="button" (click)="openEditCertifications()" title="Edit Certifications">
+                <i class="fa-solid fa-pen-to-square"></i>
+            </button>
+        </div>
+
+        <ol class="timeline-list">
+
+            @for (cert of model.certifications; track cert.certificationId) {
+
+            <li class="timeline-item">
+
+                <h4 class="h4 timeline-item-title">{{cert.certificationName}}</h4>
+
+                <span>{{cert.issuingOrganization}}</span>
+
+                @if (cert.certificationLink) {
+                <a class="timeline-link" [href]="cert.certificationLink" target="_blank" rel="noopener">
+                    <i class="fa-solid fa-arrow-up-right-from-square"></i> View Certificate
+                </a>
+                }
+
+            </li>
+
+            }
+
+        </ol>
+
+    </section>
+
+</article>
+}