added fancy top-animation of name and menu text

src/app/app.component.html

@@ -1,11 +1,14 @@
 <!--this is bootstrap super container-->
 <div class="container-fluid">
 
-  <div class="row">
+  <div class="row" id="namerow">
     <div class="col-md-8 offset-md-2">
-      <div class="centercontents" id="topname">
+      <div class="centercontents" id="topname" [class.active]="mousingOver === null">
         <span class="display-1" id="first">Joachim</span><span id="dot">.</span><span id="last" class="display-1">Nielandt</span>
       </div>
+      <div class="" id="highlightedlink" [class.active]="mousingOver !== null">
+        {{mousingOver}}
+      </div>
     </div>
   </div>
 
@@ -14,12 +17,10 @@
     <div class="col-md-8 offset-md-2 centercontents">
       <div id="topmenubuttons">
         <div class="btn-group mx-auto" role="group">
-          <!-- <button type="button" class="btn btn-secondary">Left</button> -->
-          <!-- <button type="button" class="btn btn-secondary">Middle</button> -->
-          <!-- <button type="button" class="btn btn-secondary">Right</button> -->
-          <a routerLink="/home"><i class="fa fa-home fa-fw fa-2x" tooltip="Huis" placement="bottom" aria-hidden="true"></i></a>
-          <a routerLink="/posts"><i class="fa fa-sticky-note fa-fw  fa-2x" tooltip="Posts" placement="bottom" aria-hidden="true"></i></a>
-          <a routerLink="/cv"><i class="fa fa-id-badge fa-fw fa-2x" tooltip="Curriculum Vitae" placement="bottom" aria-hidden="true"></i></a>
+          <!--removed this from the <i: tooltip="Huis" placement="bottom"-->
+          <a routerLink="/home" (mouseout)="mouseOut('home')" (mouseover)="mouseOver('home')"><i class="fa fa-home fa-fw fa-2x" aria-hidden="true"></i></a>
+          <a routerLink="/posts" (mouseout)="mouseOut('posts')" (mouseover)="mouseOver('posts')"><i class="fa fa-sticky-note fa-fw  fa-2x" aria-hidden="true"></i></a>
+          <a routerLink="/cv" (mouseout)="mouseOut('cv')" (mouseover)="mouseOver('cv')"><i class="fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
         </div>
       </div>
     </div>

src/app/app.component.scss

@@ -1,5 +1,9 @@
 @import "../globals";
 
+#namerow {
+  height: 66pt;
+}
+
 .centercontents {
     text-align: center;
     margin-left: auto;
@@ -10,6 +14,11 @@
   //font-family: $mainFont;
   margin-top: 25px;
   padding-bottom: 9px;
+  font-size: 80%;
+  transition: font-size 0.15s ease-out;
+}
+#topname.active {
+  font-size: 100%;
 }
 
 #topname #first {
@@ -51,3 +60,20 @@
     color: darkorange;
   }
 }
+
+#highlightedlink {
+  transition: opacity 0.15s ease-out;
+  color: gray;
+  opacity: 0;
+  //background-color: aqua;
+  position: absolute;
+  width: 100%;
+  bottom: -3px;
+  left: 0px;
+  font-size: 89%;
+  text-align: center;
+}
+
+#highlightedlink.active {
+  opacity: 1;
+}

src/app/app.component.ts

@@ -9,6 +9,7 @@ declare var $: any;
 })
 export class AppComponent implements OnInit {
   title = 'Joachim Homepage';
+  mousingOver: string = null;
 
   constructor(private router:Router) {}
 
@@ -23,4 +24,13 @@ export class AppComponent implements OnInit {
       default: return 'Unknown path';
     }
   }
+
+  mouseOver(s: string) {
+    console.log('mouseover!'+s);
+    this.mousingOver = s;
+  }
+
+  mouseOut(s: string) {
+    this.mousingOver = null;
+  }
 }

src/app/services/state.service.ts

@@ -41,14 +41,14 @@ export class StateService {
   }
 
   isActiveTag(tag:string):boolean {
-    console.log('isActive');
-    console.log(this.tagFilter);
+  //  console.log('isActive');
+  //  console.log(this.tagFilter);
     return this.tagFilter[tag]===true;
   }
 
   toggleTag(tag: string) {
-    console.log('toggle');
-    console.log(this.tagFilter);
+   // console.log('toggle');
+   // console.log(this.tagFilter);
     if(this.tagFilter[tag]==null)
       this.tagFilter[tag] = true;
     else