Refactor code structure for improved readability and maintainability

src/app/admin/resume/resume.html

@@ -0,0 +1,99 @@
+<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>
+        </div>
+
+        <ol class="timeline-list">
+
+            @for (education of model.academics; track education) {
+
+            <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>
+        </div>
+
+        <ol class="timeline-list">
+
+            @for (experience of model.experiences; track experience) {
+
+            <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">
+
+        <h3 class="h3 skills-title">My skills</h3>
+
+        <ul class="skills-list content-card">
+
+            @for (skill of model.skills; track skill) {
+
+            <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>
+
+</article>