feat: enhance dynamic forms and popups for About, Contact, and Resume sections; add project detail popup

2026-02-15 05:27:23 +05:30
parent 55b436c7d2
commit 58929ae6d4
21 changed files with 605 additions and 87 deletions
@@ -0,0 +1,101 @@
+<div class="project-detail" role="dialog" aria-labelledby="project-title">
+    <div class="detail-header">
+        <h2 id="project-title">{{ project.name }}</h2>
+        <button class="close-btn" (click)="close()" aria-label="Close">
+            <i class="fa-solid fa-xmark"></i>
+        </button>
+    </div>
+
+    @if (project.status) {
+    <span class="status-badge">{{ project.status }}</span>
+    }
+
+    @if (project.description) {
+    <div class="detail-section">
+        <h4>Description</h4>
+        <p>{{ project.description }}</p>
+    </div>
+    }
+
+    @if (project.roles.length) {
+    <div class="detail-section">
+        <h4>Roles</h4>
+        <div class="tag-list">
+            @for (role of project.roles; track role) {
+            <span class="tag">{{ role }}</span>
+            }
+        </div>
+    </div>
+    }
+
+    @if (project.responsibilities.length) {
+    <div class="detail-section">
+        <h4>Responsibilities</h4>
+        <div class="tag-list">
+            @for (r of project.responsibilities; track r) {
+            <span class="tag">{{ r }}</span>
+            }
+        </div>
+    </div>
+    }
+
+    @if (project.technologiesUsed.length) {
+    <div class="detail-section">
+        <h4>Technologies</h4>
+        <div class="tag-list">
+            @for (tech of project.technologiesUsed; track tech) {
+            <span class="tag tech">{{ tech }}</span>
+            }
+        </div>
+    </div>
+    }
+
+    @if (project.startDate || project.endDate) {
+    <div class="detail-section">
+        <h4>Duration</h4>
+        <p class="duration">
+            @if (project.startDate) {
+            <span>{{ project.startDate | date: 'MMM yyyy' }}</span>
+            }
+            @if (project.startDate && project.endDate) {
+            <span> — </span>
+            }
+            @if (project.endDate) {
+            <span>{{ project.endDate | date: 'MMM yyyy' }}</span>
+            }
+        </p>
+    </div>
+    }
+
+    @if (project.challenges) {
+    <div class="detail-section">
+        <h4>Challenges</h4>
+        <p>{{ project.challenges }}</p>
+    </div>
+    }
+
+    @if (project.lessonsLearned) {
+    <div class="detail-section">
+        <h4>Lessons Learned</h4>
+        <p>{{ project.lessonsLearned }}</p>
+    </div>
+    }
+
+    @if (project.impact) {
+    <div class="detail-section">
+        <h4>Impact</h4>
+        <p>{{ project.impact }}</p>
+    </div>
+    }
+
+    @if (project.categories?.length) {
+    <div class="detail-section">
+        <h4>Categories</h4>
+        <div class="tag-list">
+            @for (cat of project.categories; track cat) {
+            <span class="tag category">{{ cat }}</span>
+            }
+        </div>
+    </div>
+    }
+</div>