project tile changes

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { LoaderService } from './services/loader.service';
 
 @Component({
   selector: 'app-root',

src/app/contact-sidebar/contact-sidebar.component.html

@@ -35,7 +35,7 @@
           <div class="contact-info">
             <p class="contact-title">Email</p>
 
-            <a href="mailto:richard@example.com" class="contact-link">{{model.candidate?.email}}</a>
+            <a href="mailto:{{model.candidate?.email}}" class="contact-link">{{model.candidate?.email}}</a>
           </div>
 
         </li>
@@ -49,7 +49,7 @@
           <div class="contact-info">
             <p class="contact-title">Phone</p>
 
-            <a href="tel:+12133522795" class="contact-link">{{model.candidate?.phone}}</a>
+            <a href="tel:{{model.candidate?.phone}}" class="contact-link">{{model.candidate?.phone}}</a>
           </div>
 
         </li>

src/app/projects/projects.component.html

@@ -57,9 +57,9 @@
             </figure>
 
             <h3 class="project-title">{{project.name}}</h3>
-
-            <span class="project-category" *ngFor="let category of project.categories; index as i" [ngClass]="i > 0 ? 'inline no-margin' : 'inline'">{{i > 0 ? ', ' + category : category}}</span>
-
+            <div class="project-category">
+              <span  *ngFor="let responsbility of project.responsibilities; index as i" class="inline">{{i > 0 ? ', ' + responsbility : responsbility}}</span>
+            </div>
           </a>
         </li>
 

src/styles.scss

@@ -129,7 +129,7 @@
   
   li { list-style: none; }
   
-  img, ion-icon, a, button, time, span { display: block; }
+  img, i, a, button, time, span { display: block; }
   
   button {
     font: inherit;
@@ -206,7 +206,7 @@
     z-index: -1;
   }
   
-  .icon-box ion-icon { --ionicon-stroke-width: 35px; }
+  .icon-box i { --ionicon-stroke-width: 35px; }
   
 //   article { display: none; }
   
@@ -504,7 +504,7 @@
     line-height: 1.6;
   }
   
-  .about-text p { margin-bottom: 15px; }
+  .about-text pre { margin-bottom: 15px; }
   
   
   
@@ -695,7 +695,7 @@
   .modal-close-btn:hover,
   .modal-close-btn:focus { opacity: 1; }
   
-  .modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+  .modal-close-btn i { --ionicon-stroke-width: 50px; }
   
   .modal-avatar-box {
     background: var(--bg-gradient-onyx);
@@ -1000,7 +1000,7 @@
     opacity: 1;
   }
   
-  .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
+  .project-item-icon-box i { --ionicon-stroke-width: 50px; }
   
   .project-img img {
     width: 100%;
@@ -1212,7 +1212,7 @@
     transition: var(--transition-1);
   }
   
-  .form-btn ion-icon { font-size: 16px; }
+  .form-btn i { font-size: 16px; }
   
   .form-btn:hover { background: var(--bg-gradient-yellow-1); }
   
@@ -1255,7 +1255,7 @@
   
     .project-img,
     .blog-banner-box { height: auto; }
-  
+
   }
   
   
@@ -1363,7 +1363,7 @@
       font-size: var(--fs-8);
     }
   
-    .info_more-btn ion-icon { display: none; }
+    .info_more-btn i { display: none; }
   
     .separator { margin: 32px 0; }
   
@@ -1394,7 +1394,7 @@
   
     .about .article-title { margin-bottom: 20px; }
   
-    .about-text { margin-bottom: 40px; }
+    .about-text { margin-bottom: 35px; }
   
     /* service */
   
@@ -1545,7 +1545,7 @@
       padding: 16px 20px;
     }
   
-    .form-btn ion-icon { font-size: 18px; }
+    .form-btn i { font-size: 18px; }
   
   }