Bangara Raju Kottedi
55b436c7d2
- 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.
153 lines
4.0 KiB
HTML
153 lines
4.0 KiB
HTML
@if (resume$ | async; as model) {
|
|
<article class="resume" data-page="resume">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">Resume</h2>
|
|
</header>
|
|
|
|
<section class="timeline">
|
|
|
|
<div class="title-wrapper">
|
|
<div class="icon-box">
|
|
<i class="fa-light fa-book-open"></i>
|
|
</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.academicId) {
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization !== null ? " - "
|
|
+ education.degreeSpecialization : ""}}</h4>
|
|
|
|
<span>{{education.period}}</span>
|
|
|
|
<p class="timeline-text">
|
|
{{education.institution}}
|
|
</p>
|
|
|
|
</li>
|
|
|
|
}
|
|
|
|
</ol>
|
|
|
|
</section>
|
|
|
|
<section class="timeline">
|
|
|
|
<div class="title-wrapper">
|
|
<div class="icon-box">
|
|
<i class="fa-light fa-briefcase"></i>
|
|
</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.experienceId) {
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">{{experience.title}}</h4>
|
|
|
|
<span>{{experience.period}}</span>
|
|
|
|
<p class="timeline-text">
|
|
{{experience.company}}
|
|
</p>
|
|
|
|
</li>
|
|
|
|
}
|
|
|
|
</ol>
|
|
|
|
</section>
|
|
|
|
<section class="skill">
|
|
|
|
<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.skillId) {
|
|
|
|
<li class="skills-item">
|
|
|
|
<div class="title-wrapper">
|
|
<h5 class="h5">{{skill.name}}</h5>
|
|
<data value="{{skill.proficiencyLevel}}">{{skill.proficiencyLevel}}%</data>
|
|
</div>
|
|
|
|
<div class="skill-progress-bg">
|
|
<div class="skill-progress-fill" [style]="'width: ' + skill.proficiencyLevel + '%'"></div>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
}
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
<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>
|
|
} |