diff --git a/.gitattributes b/.gitattributes
index 9a48b31..7f68c74 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,9 +1,60 @@
-* text=auto eol=lf
+# ---- Standard: All textfiles normalize to LF also during checkout ----
+* text=auto eol=lf
 
-*.png binary
-*.jpg binary
-*.svg text
-*.ts text
-*.html text
-*.scss text
-*.json text
+# ---- Sourcecode / Build ----
+*.java   text eol=lf
+*.kt     text eol=lf
+*.kts    text eol=lf
+*.groovy text eol=lf
+*.gradle text eol=lf
+gradlew  text eol=lf
+# Windows wrapper keeps CRLF
+gradlew.bat text eol=crlf
+
+# ---- Scripts ----
+*.sh   text eol=lf
+*.bash text eol=lf
+*.cmd  text eol=crlf
+*.bat  text eol=crlf
+*.ps1  text eol=crlf
+
+# ---- Configuration / Resources ----
+*.properties text eol=lf
+*.yml       text eol=lf
+*.yaml      text eol=lf
+*.xml       text eol=lf
+*.json      text eol=lf
+*.sql       text eol=lf
+*.conf      text eol=lf
+Dockerfile  text eol=lf
+*.dockerfile text eol=lf
+
+# ---- Document ----
+*.md   text eol=lf
+*.adoc text eol=lf
+*.txt  text eol=lf
+*.csv  text eol=lf
+*.svg  text eol=lf   # svg ist Text
+
+# ---- binary files never convert ----
+*.jar  binary
+*.war  binary
+*.ear  binary
+*.class binary
+*.png  binary
+*.jpg  binary
+*.jpeg binary
+*.gif  binary
+*.ico  binary
+*.pdf  binary
+*.zip  binary
+*.tar  binary
+*.gz   binary
+*.7z   binary
+*.ttf  binary
+*.woff binary
+*.woff2 binary
+*.so   binary
+*.dll  binary
+*.dylib binary
+*.exe  binary
\ No newline at end of file
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 4320e95..75612ce 100644
--- a/src/app/app.routes.ts
+++ b/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},
 ];
 
diff --git a/src/app/layout/topbar/topbar.component.html b/src/app/layout/topbar/topbar.component.html
index d42c9eb..8245025 100644
--- a/src/app/layout/topbar/topbar.component.html
+++ b/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>
 
diff --git a/src/app/pages/hobbies/hobbies.component.html b/src/app/pages/hobbies/hobbies.component.html
new file mode 100644
index 0000000..3e705ce
--- /dev/null
+++ b/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>
diff --git a/src/app/pages/hobbies/hobbies.component.scss b/src/app/pages/hobbies/hobbies.component.scss
new file mode 100644
index 0000000..07ff5e5
--- /dev/null
+++ b/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; }
+}
diff --git a/src/app/pages/hobbies/hobbies.component.ts b/src/app/pages/hobbies/hobbies.component.ts
new file mode 100644
index 0000000..8dfb207
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/pages/project-details/project-details.component.html b/src/app/pages/project-details/project-details.component.html
deleted file mode 100644
index cc13d82..0000000
--- a/src/app/pages/project-details/project-details.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>project-details works!</p>
diff --git a/src/app/pages/project-details/project-details.component.scss b/src/app/pages/project-details/project-details.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/pages/project-details/project-details.component.ts b/src/app/pages/project-details/project-details.component.ts
deleted file mode 100644
index 47934ab..0000000
--- a/src/app/pages/project-details/project-details.component.ts
+++ /dev/null
@@ -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 {
-
-}
diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html
index 7fb276e..ddcf4ce 100644
--- a/src/app/pages/projects/projects.component.html
+++ b/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>
diff --git a/src/app/pages/projects/projects.component.scss b/src/app/pages/projects/projects.component.scss
index e69de29..56ce4f9 100644
--- a/src/app/pages/projects/projects.component.scss
+++ b/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); }
+}