Add hobbies page and update projects WIP UI

Introduced a new HobbiesComponent with routing and navigation updates. Removed unused ProjectDetailsComponent. Enhanced the projects page with a new 'work in progress' UI and improved .gitattributes for better file handling.

src/app/app.routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '@angular/router';
 import {AboutComponent} from './pages/about/about.component';
 import {ProjectsComponent} from './pages/projects/projects.component';
+import {HobbiesComponent} from './pages/hobbies/hobbies.component';
 
 export const routes: Routes = [
   { path: '', component: AboutComponent },
   { path: 'about', component: AboutComponent},
   { path: 'projects', component: ProjectsComponent},
+  { path: 'hobbies', component: HobbiesComponent},
 ];
 

src/app/layout/topbar/topbar.component.html

@@ -12,7 +12,7 @@
   <nav class="nav">
     <a routerLink="/about" mat-button>{{ 'TOPBAR.ABOUT' | translate }}</a>
     <a routerLink="/projects" mat-button>{{ 'TOPBAR.PROJECTS' | translate }}</a>
-    <a routerLink="/projects" mat-button>{{ 'TOPBAR.HOBBY' | translate }}</a>
+    <a routerLink="/hobbies" mat-button>{{ 'TOPBAR.HOBBY' | translate }}</a>
     <a routerLink="/projects" mat-button>{{ 'TOPBAR.CONTACT' | translate }}</a>
   </nav>
 

src/app/pages/hobbies/hobbies.component.html

@@ -0,0 +1,3 @@
+<div class="terminal-loader">
+  <span>&gt; Work in progress</span><span class="cursor"></span>
+</div>

src/app/pages/hobbies/hobbies.component.scss

@@ -0,0 +1,19 @@
+.terminal-loader {
+  font-family: monospace;
+  font-size: 1.1rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cursor {
+  width: 10px;
+  height: 1.1rem;
+  background: var(--app-fg);
+  margin-left: .25rem;
+  animation: blink .8s infinite;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}

src/app/pages/hobbies/hobbies.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hobbies',
+  imports: [],
+  templateUrl: './hobbies.component.html',
+  styleUrl: './hobbies.component.scss',
+})
+export class HobbiesComponent {
+
+}

src/app/pages/project-details/project-details.component.html

@@ -1 +0,0 @@
-<p>project-details works!</p>

src/app/pages/project-details/project-details.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-project-details',
-  imports: [],
-  templateUrl: './project-details.component.html',
-  styleUrl: './project-details.component.scss',
-})
-export class ProjectDetailsComponent {
-
-}

src/app/pages/projects/projects.component.html

@@ -1 +1,6 @@
-<p>Working in progress!</p>
+<div class="wip">
+  <div class="dots">
+    <span></span><span></span><span></span>
+  </div>
+  <p>Work in progress…</p>
+</div>

src/app/pages/projects/projects.component.scss

@@ -0,0 +1,29 @@
+.wip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .75rem;
+  padding: 2rem;
+  opacity: .9;
+}
+
+.dots {
+  display: flex;
+  gap: .5rem;
+}
+
+.dots span {
+  width: 10px;
+  height: 10px;
+  background: var(--app-fg);
+  border-radius: 50%;
+  animation: pulse 1.4s infinite ease-in-out;
+}
+
+.dots span:nth-child(2) { animation-delay: .2s; }
+.dots span:nth-child(3) { animation-delay: .4s; }
+
+@keyframes pulse {
+  0%, 80%, 100% { opacity: .3; transform: scale(1); }
+  40% { opacity: 1; transform: scale(1.4); }
+}