weifer/Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic cards done

Browse Source
This commit is contained in:
marcusferl 2022-12-04 19:34:55 +01:00
parent de9e45da61
commit 0df04c7b10
7 changed files with 112 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/app.component.html
View File

@ -5,22 +5,7 @@
<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>
<app-cards></app-cards>
</div>
</div>

11
src/app/cards/about-me/about-me.component.html
View File

@ -1,15 +1,18 @@
<div class="card p-2 my-1" style="width: auto;">
<div class="row">
<div class="col-sm-10">
<h2 class="card-title">About me</h2>
</div>
<div class="col-sm-1">
<div class="col-2 mb-2">
<a href="https://marcusferl.de">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor"
class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</a>
</div>
<div class="col-10 d-flex justify-content-end">
<h1>About me</h1>
</div>
<hr>
</div>
<img src="https://marcusferl.de/wp-content/uploads/2021/01/edititsme.png" alt="" class="card-img-bottom">

20
src/app/cards/angular/angular.component.css
View File

@ -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(136, 136, 136);
background: radial-gradient(circle, rgba(136, 136, 136, 0.9472163865546218) 50%, rgba(255, 0, 0, 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;
}

19
src/app/cards/angular/angular.component.html
View File

@ -1 +1,18 @@
<p>angular works!</p>
<div class="card p-2 my-1" style="width: auto;">
<div class="row">
<div class="col-sm-10">
<h2 class="card-title">Android Apps</h2>
</div>
<div class="col-sm-1">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor"
class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</div>
<hr>
</div>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/angular.png" alt="" class="card-img-bottom"
style="max-height: 720px;">
</div>

24
src/app/cards/cards.component.html
View File

@ -0,0 +1,24 @@
<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 class="row p-3">
<div class="col-sm-6 align-self-center">
<app-angular></app-angular>
</div>
<div class="col-sm-6 align-self-center">
<app-java></app-java>
</div>
</div>

20
src/app/cards/java/java.component.css
View File

@ -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(98, 115, 240);
background: radial-gradient(circle, rgba(98, 115, 240, 1) 0%, rgba(227, 121, 28, 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;
}

19
src/app/cards/java/java.component.html
View File

@ -1 +1,18 @@
<p>java works!</p>
<div class="card p-2 my-1" style="width: auto;">
<div class="row">
<div class="col-sm-10">
<h2 class="card-title">Android Apps</h2>
</div>
<div class="col-sm-1">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="currentColor"
class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</div>
<hr>
</div>
<img src="https://marcusferl.de/wp-content/uploads/2022/12/java.png" alt="" class="card-img-bottom"
style="max-height: 720px;">
</div>