changes: api integration,

components, styles, fontawesome icons added

src/app/resume/resume.component.html

@@ -8,7 +8,7 @@
 
       <div class="title-wrapper">
         <div class="icon-box">
-          <ion-icon name="book-outline"></ion-icon>
+          <i class="fa-light fa-book-open"></i>
         </div>
 
         <h3 class="h3">Education</h3>
@@ -16,43 +16,14 @@
 
       <ol class="timeline-list">
 
-        <li class="timeline-item">
+        <li class="timeline-item" *ngFor="let education of model.academics">
 
-          <h4 class="h4 timeline-item-title">University school of the arts</h4>
+          <h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization != null ? " - " + education.degreeSpecialization : ""}}</h4>
 
-          <span>2007 — 2008</span>
+          <span>{{education.period}}</span>
 
           <p class="timeline-text">
-            Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
-            quas molestias
-            exceptur.
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">New york academy of art</h4>
-
-          <span>2006 — 2007</span>
-
-          <p class="timeline-text">
-            Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est
-            omnis..
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">High school of art and design</h4>
-
-          <span>2002 — 2004</span>
-
-          <p class="timeline-text">
-            Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur
-            magni dolores
-            eos.
+            {{education.institution}}
           </p>
 
         </li>
@@ -65,7 +36,7 @@
 
       <div class="title-wrapper">
         <div class="icon-box">
-          <ion-icon name="book-outline"></ion-icon>
+          <i class="fa-light fa-briefcase"></i>
         </div>
 
         <h3 class="h3">Experience</h3>
@@ -73,44 +44,14 @@
 
       <ol class="timeline-list">
 
-        <li class="timeline-item">
+        <li class="timeline-item" *ngFor="let experience of model.experiences">
 
-          <h4 class="h4 timeline-item-title">Creative director</h4>
+          <h4 class="h4 timeline-item-title">{{experience.title}}</h4>
 
-          <span>2015 — Present</span>
+          <span>{{experience.period}}</span>
 
           <p class="timeline-text">
-            Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas
-            molestias
-            exceptur.
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">Art director</h4>
-
-          <span>2013 — 2015</span>
-
-          <p class="timeline-text">
-            Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
-            quas molestias
-            exceptur.
-          </p>
-
-        </li>
-
-        <li class="timeline-item">
-
-          <h4 class="h4 timeline-item-title">Web designer</h4>
-
-          <span>2010 — 2013</span>
-
-          <p class="timeline-text">
-            Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
-            quas molestias
-            exceptur.
+            {{experience.company}}
           </p>
 
         </li>
@@ -125,11 +66,11 @@
 
       <ul class="skills-list content-card">
 
-        <li class="skills-item">
+        <li class="skills-item" *ngFor="let skill of model.skills">
 
           <div class="title-wrapper">
-            <h5 class="h5">Web design</h5>
-            <data value="80">80%</data>
+            <h5 class="h5">{{skill.name}}</h5>
+            <data value="{{skill.proficiencyLevel}}">{{skill.proficiencyLevel}}%</data>
           </div>
 
           <div class="skill-progress-bg">
@@ -137,46 +78,7 @@
           </div>
 
         </li>
-
-        <li class="skills-item">
-
-          <div class="title-wrapper">
-            <h5 class="h5">Graphic design</h5>
-            <data value="70">70%</data>
-          </div>
-
-          <div class="skill-progress-bg">
-            <div class="skill-progress-fill" style="width: 70%;"></div>
-          </div>
-
-        </li>
-
-        <li class="skills-item">
-
-          <div class="title-wrapper">
-            <h5 class="h5">Branding</h5>
-            <data value="90">90%</data>
-          </div>
-
-          <div class="skill-progress-bg">
-            <div class="skill-progress-fill" style="width: 90%;"></div>
-          </div>
-
-        </li>
-
-        <li class="skills-item">
-
-          <div class="title-wrapper">
-            <h5 class="h5">WordPress</h5>
-            <data value="50">50%</data>
-          </div>
-
-          <div class="skill-progress-bg">
-            <div class="skill-progress-fill" style="width: 50%;"></div>
-          </div>
-
-        </li>
-
+        
       </ul>
 
     </section>