cards

src/app/about-me/about-me.component.css

@@ -0,0 +1,17 @@
+.card {
+    border-radius: 10px;
+
+    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+
+    cursor: pointer;
+}
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+}
+
+img {
+    height: fit-content;
+}

src/app/about-me/about-me.component.html

@@ -0,0 +1,6 @@
+<a href="https://marcusferl.de" class="custom-card">
+    <div class="card p-2 my-1" style="width: auto;">
+        <h3>About me</h3>
+        <img src="https://marcusferl.de/wp-content/uploads/2021/01/edititsme.png" alt="" class="card-img-bottom">
+    </div>
+</a>

src/app/about-me/about-me.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutMeComponent } from './about-me.component';
+
+describe('AboutMeComponent', () => {
+  let component: AboutMeComponent;
+  let fixture: ComponentFixture<AboutMeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutMeComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AboutMeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about-me/about-me.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about-me',
+  templateUrl: './about-me.component.html',
+  styleUrls: ['./about-me.component.css']
+})
+export class AboutMeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/app.component.css

@@ -1,3 +1,6 @@
-.container-bg {
+.bg-container {
-    background: yellow;
+    background: rgb(132, 131, 133);
+    margin-right: 60px;
+    margin-left: 60px;
+    height: 2000px;
 }

src/app/app.component.html

@@ -1,5 +1,26 @@
 <app-nav-bar></app-nav-bar>
 <div class="container-fluid bg-dark">
+    <div class="container">
+        <div class="row">
+            <div class="container" style="height: 100px;"></div>
 
+        </div>
+        <div class="row p-3">
+            <div class="col-sm-6 align-self-center">
+                <app-about-me></app-about-me>
+            </div>
+            <div class="col-sm-6">
+                <app-csharp></app-csharp>
+            </div>
+        </div>
+        <div class="row p-3">
+            <div class="col-sm-6 align-self-center">
+                <app-android-apps></app-android-apps>
+            </div>
+            <div class="col-sm-6 align-self-center">
+                <app-python></app-python>
+            </div>
+        </div>
+    </div>
 
 </div>

src/app/app.module.ts

@@ -4,11 +4,25 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
+import { AboutMeComponent } from './about-me/about-me.component';
+import { CardsComponent } from './cards/cards.component';
+import { AndroidAppsComponent } from './cards/android-apps/android-apps.component';
+import { CsharpComponent } from './cards/csharp/csharp.component';
+import { PythonComponent } from './cards/python/python.component';
+import { AngularComponent } from './cards/angular/angular.component';
+import { JavaComponent } from './cards/java/java.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    NavBarComponent
+    NavBarComponent,
+    AboutMeComponent,
+    CardsComponent,
+    AndroidAppsComponent,
+    CsharpComponent,
+    PythonComponent,
+    AngularComponent,
+    JavaComponent
   ],
   imports: [
     BrowserModule,

src/app/cards/android-apps/android-apps.component.css

@@ -0,0 +1,20 @@
+.card {
+    border-radius: 10px;
+    height: 70%;
+    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+
+    cursor: pointer;
+
+    background: rgb(34, 193, 195);
+    background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
+}
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+}
+
+img {
+    height: 99%;
+}

src/app/cards/android-apps/android-apps.component.html

@@ -0,0 +1,7 @@
+<a href="https://marcusferl.de" class="custom-card">
+    <div class="card p-2 my-1" style="width: auto;">
+        <h3>Android Apps</h3>
+        <img src="https://marcusferl.de/wp-content/uploads/2022/12/android.png" alt="" class="card-img-bottom"
+            style="max-height: 720px;">
+    </div>
+</a>

src/app/cards/android-apps/android-apps.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AndroidAppsComponent } from './android-apps.component';
+
+describe('AndroidAppsComponent', () => {
+  let component: AndroidAppsComponent;
+  let fixture: ComponentFixture<AndroidAppsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AndroidAppsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AndroidAppsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cards/android-apps/android-apps.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-android-apps',
+  templateUrl: './android-apps.component.html',
+  styleUrls: ['./android-apps.component.css']
+})
+export class AndroidAppsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/cards/angular/angular.component.html

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

src/app/cards/angular/angular.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AngularComponent } from './angular.component';
+
+describe('AngularComponent', () => {
+  let component: AngularComponent;
+  let fixture: ComponentFixture<AngularComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AngularComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AngularComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cards/angular/angular.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-angular',
+  templateUrl: './angular.component.html',
+  styleUrls: ['./angular.component.css']
+})
+export class AngularComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/cards/cards.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardsComponent } from './cards.component';
+
+describe('CardsComponent', () => {
+  let component: CardsComponent;
+  let fixture: ComponentFixture<CardsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CardsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cards/cards.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cards',
+  templateUrl: './cards.component.html',
+  styleUrls: ['./cards.component.css']
+})
+export class CardsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/cards/csharp/csharp.component.css

@@ -0,0 +1,20 @@
+.card {
+    border-radius: 10px;
+
+    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+
+    cursor: pointer;
+
+    background: rgb(238, 174, 202);
+    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
+}
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+}
+
+img {
+    height: fit-content;
+}

src/app/cards/csharp/csharp.component.html

@@ -0,0 +1,9 @@
+<a href="#" class="custom-card">
+    <div class="card p-2 my-1 bg-danger" style="width: auto;">
+
+        <h5>C#</h5>
+        <hr>
+        <img src="https://marcusferl.de/wp-content/uploads/2022/12/pngegg.png" alt="" class="card-img-bottom">
+    </div>
+
+</a>

src/app/cards/csharp/csharp.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CsharpComponent } from './csharp.component';
+
+describe('CsharpComponent', () => {
+  let component: CsharpComponent;
+  let fixture: ComponentFixture<CsharpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CsharpComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CsharpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cards/csharp/csharp.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-csharp',
+  templateUrl: './csharp.component.html',
+  styleUrls: ['./csharp.component.css']
+})
+export class CsharpComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/cards/java/java.component.html

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

src/app/cards/java/java.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JavaComponent } from './java.component';
+
+describe('JavaComponent', () => {
+  let component: JavaComponent;
+  let fixture: ComponentFixture<JavaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ JavaComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(JavaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cards/java/java.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-java',
+  templateUrl: './java.component.html',
+  styleUrls: ['./java.component.css']
+})
+export class JavaComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/cards/python/python.component.css

@@ -0,0 +1,20 @@
+.card {
+    border-radius: 10px;
+
+    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
+    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
+
+    cursor: pointer;
+
+    background: rgb(63, 94, 251);
+    background: radial-gradient(circle, rgba(63, 94, 251, 1) 65%, rgba(245, 252, 70, 1) 100%);
+}
+
+.card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
+}
+
+img {
+    height: fit-content;
+}

src/app/cards/python/python.component.html

@@ -0,0 +1,9 @@
+<a href="#" class="custom-card">
+    <div class="card p-2 my-1 bg-danger" style="width: auto;">
+
+        <h5>Python</h5>
+        <hr>
+        <img src="https://marcusferl.de/wp-content/uploads/2022/12/python.png" alt="" class="card-img-bottom">
+    </div>
+
+</a>

src/app/cards/python/python.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PythonComponent } from './python.component';
+
+describe('PythonComponent', () => {
+  let component: PythonComponent;
+  let fixture: ComponentFixture<PythonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PythonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PythonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cards/python/python.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-python',
+  templateUrl: './python.component.html',
+  styleUrls: ['./python.component.css']
+})
+export class PythonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/nav-bar/nav-bar.component.css

@@ -1,8 +1,23 @@
 .nav-link {
-    border-bottom: 5px solid transparent;
+    border-bottom: 1px solid transparent;
 }
 
-.nav-link:hover {
+.navbar-custom {
-    border-bottom: 5px solid rgb(71, 71, 71);
+    border-bottom: 5px solid rgb(225, 213, 213);
-    font-size: large;
+    height: 78px;
+    padding: auto;
+
+}
+
+.navbar-brand {
+    font-size: 40px;
+}
+
+.item-font {
+    font-size: 30px;
+}
+
+.item-font:hover {
+    border-bottom: 5px solid rgb(71, 71, 71);
+    font-size: 33px;
 }

src/app/nav-bar/nav-bar.component.html

@@ -1,13 +1,13 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark navbar-custom">
     <div class="container-fluid">
-        <a href="#" class="navbar-brand">Marcus Ferl</a>
+        <a href="#" class="navbar-brand">Marcus<span style="color:red;">.</span></a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0 mx-lg-5">
-                <li class="nav-item dropdown">
+                <li class="nav-item dropdown item-font">
                     <a href="#" class="nav-link dropdown-toggle mx-4" id="navbarDropdown" role="button"
                         data-bs-toggle="dropdown" aria-expanded="false">Android Apps</a>
                     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
@@ -16,7 +16,7 @@
                         <li><a href="#" class="dropdown-item">Stein Schere Papier</a></li>
                     </ul>
                 </li>
-                <li class="nav-item dropdown">
+                <li class="nav-item dropdown item-font">
                     <a href="#" class="nav-link dropdown-toggle mx-4" id="navbarDropdown" role="button"
                         data-bs-toggle="dropdown" aria-expanded="false">C#</a>
                     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
@@ -28,7 +28,7 @@
                         <li><a href="#" class="dropdown-item">Morsecoder</a></li>
                     </ul>
                 </li>
-                <li class="nav-item dropdown">
+                <li class="nav-item dropdown item-font">
                     <a href="#" class="nav-link dropdown-toggle mx-4" id="navbarDropdown" role="button"
                         data-bs-toggle="dropdown" aria-expanded="false">Python</a>
                     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
@@ -37,7 +37,7 @@
                         <li><a href="#" class="dropdown-item">Blub</a></li>
                     </ul>
                 </li>
-                <li class="nav-item dropdown">
+                <li class="nav-item dropdown item-font">
                     <a href="#" class="nav-link dropdown-toggle mx-4" id="navbarDropdown" role="button"
                         data-bs-toggle="dropdown" aria-expanded="false">Angular</a>
                     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
@@ -47,7 +47,7 @@
                         <li><a href="#" class="dropdown-item">Artikelverwaltung</a></li>
                     </ul>
                 </li>
-                <li class="nav-item dropdown">
+                <li class="nav-item dropdown item-font">
                     <a href="#" class="nav-link dropdown-toggle mx-4" id="navbarDropdown" role="button"
                         data-bs-toggle="dropdown" aria-expanded="false">Java</a>
                     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */