Got CV working in basic form.

.angular-cli.json

@@ -19,7 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css",
+        "styles.scss",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
@@ -56,7 +56,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "component": {}
+    "styleExt": "scss",
+    "component": {
+    }
   }
 }

package.json

@@ -29,6 +29,7 @@
     "core-js": "^2.5.3",
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
+    "npm": "^5.7.1",
     "popper.js": "^1.12.9",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
@@ -48,6 +49,7 @@
     "karma-coverage-istanbul-reporter": "^1.3.3",
     "karma-jasmine": "^1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "node-sass": "^4.7.2",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",

src/app/app.component.ts

@@ -7,9 +7,9 @@ declare var $: any;
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit, AfterViewChecked {
- 
+
   title = 'Joachim Homepage';
-  
+
   ngAfterViewChecked(): void {
     $(function () {
       $('[data-toggle="tooltip"]').tooltip()
@@ -18,5 +18,5 @@ export class AppComponent implements OnInit, AfterViewChecked {
 
   ngOnInit() {
   }
-  
+
 }

src/app/components/cv/cv.component.html

@@ -1,3 +1,39 @@
-<p>
-  cv works!
-</p>
+<div class="card">
+  <div class="card-body">
+    <h6 class="card-title">Opleiding</h6>
+    <div *ngFor="let educationItem of getEducationItems()" class="experience-card-body">
+      <img *ngIf="educationItem.iconName != null" src="{{educationItem.iconName}}" alt="..." class="img-thumbnail cv-item-thumbnail">
+      <div class="cvitem-text">
+        <div class="lead">
+          {{educationItem.employer}}
+        </div>
+        <div class="font-italic">
+          {{educationItem.fromYear}} - {{educationItem.toYear}}
+        </div>
+        <div>
+          {{educationItem.description}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <h6 class="card-title">Werkervaring</h6>
+    <div *ngFor="let experienceItem of getExperienceItems()" class="experience-card-body">
+      <img *ngIf="experienceItem.iconName != null" src="{{experienceItem.iconName}}" alt="..." class="img-thumbnail cv-item-thumbnail">
+      <div class="cvitem-text">
+        <div class="lead">
+          {{experienceItem.employer}}
+        </div>
+        <div class="font-italic">
+          {{experienceItem.fromYear}} - {{experienceItem.toYear}}
+        </div>
+        <div>
+          {{experienceItem.description}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/cv/cv.component.scss

@@ -0,0 +1,14 @@
+.institution {
+  font-weight: bold;
+
+
+}
+
+.cv-item-thumbnail {
+  width: 90px;
+}
+
+.experience-card-body {
+  display: flex !important;
+  align-items: flex-start;
+}

src/app/components/cv/cv.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import {CVTimeLineItem} from '../../model/educationitem';
 
 @Component({
   selector: 'app-cv',
   templateUrl: './cv.component.html',
-  styleUrls: ['./cv.component.css']
+  styleUrls: ['./cv.component.scss']
 })
 export class CvComponent implements OnInit {
 
@@ -12,4 +13,57 @@ export class CvComponent implements OnInit {
   ngOnInit() {
   }
 
+  getEducationItems(): CVTimeLineItem[] {
+    return [
+      new CVTimeLineItem()
+        .setLanguage("nl")
+        .setEmployer('Universiteit Gent')
+        .setDescription('Master, computerwetenschappen - software ontwikkeling, cum laude')
+        .setFromYear(2003)
+        .setToYear(2010)
+        .setIconName("assets/images/ugent-icon.png"),
+      new CVTimeLineItem()
+        .setLanguage('nl')
+        .setEmployer('Leonardo Lyceum/Pestalozzi')
+        .setDescription('Latijn + Wetenschappen / Wiskunde')
+        .setFromYear(1999)
+        .setToYear(2003)
+        .setIconName("assets/images/pestalozzi-icon.png"),
+      new CVTimeLineItem()
+        .setLanguage('nl')
+        .setEmployer('Leonardo Lyceum Esemnegen')
+        .setDescription('Latijn')
+        .setFromYear(1997)
+        .setToYear(1999)
+    ];
+  }
+
+  getExperienceItems(): CVTimeLineItem[] {
+    return [
+      new CVTimeLineItem()
+        .setLanguage('nl')
+        .setEmployer('Universiteit Gent')
+        .setDescription('Postdoctoral researcher')
+        .setFromYear(2017)
+        .setFromMonth("mar")
+        .setIconName("assets/images/ugent-icon.png"),
+      new CVTimeLineItem()
+        .setLanguage('nl')
+        .setEmployer('Universiteit Gent')
+        .setDescription('PhD student / assistent')
+        .setFromYear(2010)
+        .setToYear(2017)
+        .setIconName("assets/images/ugent-icon.png")
+        .setFromMonth("apr").setToMonth("mar"),
+      new CVTimeLineItem()
+        .setLanguage('nl')
+        .setEmployer('Oxynade')
+        .setDescription('Software developer')
+        .setFromYear(2009)
+        .setToYear(2010)
+        .setIconName("assets/images/oxynade-icon.png")
+        .setFromMonth("nov").setToMonth("apr")
+    ];
+  }
+
 }

src/app/components/post/post.component.ts

@@ -5,21 +5,21 @@ import { DataloaderService } from 'app/services/dataloader.service';
 @Component({
   selector: 'app-post',
   templateUrl: './post.component.html',
-  styleUrls: ['./post.component.css']
+  styleUrls: ['./post.component.scss']
 })
 export class PostComponent implements OnInit {
 
-  @Input() post:Post;
+  @Input() post: Post;
   @ViewChild('htmlcontainer') htmlContainer: ElementRef;
 
-  constructor(private dataloaderService:DataloaderService) { }
+  constructor(private dataloaderService: DataloaderService) { }
 
   ngOnInit() {
-    //TODO load the relevant HTML file!
-    // console.log('post component has inited: '+this.post.id); 
+    // TODO load the relevant HTML file!
+    // console.log('post component has inited: '+this.post.id);
     // console.log(this.post);
 
-    this.dataloaderService.getPost(this.post.type, this.post.id).subscribe(content=>{
+    this.dataloaderService.getPost(this.post.type, this.post.id).subscribe(content => {
       this.htmlContainer.nativeElement.innerHTML = content;
     });
   }

src/app/model/educationitem.ts

@@ -0,0 +1,54 @@
+export class CVTimeLineItem {
+
+  language: string;
+  employer: string;
+  fromYear: number;
+  toYear: number;
+  description: string;
+  iconName: string;
+  fromMonth: string;
+  toMonth: string;
+
+  constructor() {
+  }
+
+  setIconName(iconName: string): CVTimeLineItem {
+    this.iconName = iconName;
+    return this;
+  }
+
+  setFromMonth(fromMonth: string) : CVTimeLineItem {
+    this.fromMonth = fromMonth;
+    return this;
+  }
+
+  setToMonth(toMonth: string) : CVTimeLineItem {
+    this.toMonth = toMonth;
+    return this;
+  }
+
+  setLanguage(language:string): CVTimeLineItem {
+    this.language = language;
+    return this;
+  }
+
+  setToYear(toYear: number): CVTimeLineItem {
+    this.toYear = toYear;
+    return this;
+  }
+
+  setFromYear(fromYear : number) : CVTimeLineItem {
+    this.fromYear = fromYear;
+    return this;
+  }
+
+  setDescription(description: string) : CVTimeLineItem {
+    this.description = description;
+    return this;
+  }
+
+  setEmployer(employer: string) : CVTimeLineItem {
+    this.employer = employer;
+    return this;
+  }
+}

src/app/services/dataloader.service.ts

@@ -2,29 +2,29 @@ import { Injectable } from '@angular/core';
 import { Post } from '../model/post';
 
 import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-import 'rxjs/add/operator/map';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 
+import 'rxjs/add/operator/map';
+
 @Injectable()
 export class DataloaderService {
 
-  constructor(private http:HttpClient) { }
+  constructor(private http: HttpClient) { }
 
   getPosts(): Observable<Post[]> {
-    return this.http.get("assets/posts.json").map(posts=>{
-      let res:Post[] = [];
-      //fill it up
-      for(var index in posts) {
-          let post:any = posts[index];
+    return this.http.get('assets/posts.json').map(posts => {
+      const res: Post[] = [];
+      // fill it up
+      for (const index in posts) {
+          const post: any = posts[index];
           // console.log('got this key: '+post);
           // console.log(post);
-          let temp:Post = new Post(post.id);
+          const temp: Post = new Post(post.id);
           temp.title = post.info.title;
           temp.type = post.type;
-          console.log('got this timestamp: '+post.info.created_timestamp);
-          temp.created_timestamp = new Date(post.info.created_timestamp*1000);
-          console.log('converted it to this: '+temp.created_timestamp);
+          console.log('got this timestamp: ' + post.info.created_timestamp);
+          temp.created_timestamp = new Date(post.info.created_timestamp * 1000);
+          console.log('converted it to this: ' + temp.created_timestamp);
           res.push(temp);
       }
       // console.log('these are the posts...');
@@ -37,13 +37,13 @@ export class DataloaderService {
    * Fetch the 'full fat' post. This returns HTML content that can be wrapped in any container, no sanitizing done.
    * @param filename the filename for which the post needs to be fetched
    */
-  getPost(type:String, id:String): Observable<String> {
+  getPost(type: String, id: String): Observable<String> {
     const httpOptions = {
-      headers: new HttpHeaders({ 'Content-Type': 'text/html', 'Accept':'text/html' })
+      headers: new HttpHeaders({ 'Content-Type': 'text/html', 'Accept': 'text/html' })
     };
 
     // console.log('launching GET');
-    let url = "assets/post/"+type+"/"+id+"/full.html";
+    const url = 'assets/post/' + type + '/' + id + '/full.html';
     // console.log('fetching: '+url);
     return this.http.get(url, {responseType: 'text'});
   }

tslint.json

@@ -91,7 +91,7 @@
       {
         "call-signature": "nospace",
         "index-signature": "nospace",
-        "parameter": "nospace",
+        //"parameter": "nospace",
         "property-declaration": "nospace",
         "variable-declaration": "nospace"
       }