Merge pull request #2 from LoboTheDark/feature/CV

Add hobbies page and update projects WIP UI

.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

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); }
+}