102 lines
2.6 KiB
HTML
102 lines
2.6 KiB
HTML
<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>
|