diff --git a/data/socialmedia.yml b/data/socialmedia.yml new file mode 100644 index 0000000..0030823 --- /dev/null +++ b/data/socialmedia.yml @@ -0,0 +1,16 @@ +- name: Instagram + link: https://instagram.com/michivonah + icon: ai-instagram-fill + +- name: LinkedIn + link: https://in.michivonah.ch + icon: ai-linkedin-box-fill + +- name: GitHub + link: https://github.com/michivonah + icon: ai-github-fill + +- name: Mail + link: mailto:info@michivonah.ch + icon: ai-envelope + diff --git a/data/tags.yml b/data/tags.yml new file mode 100644 index 0000000..7f498cc --- /dev/null +++ b/data/tags.yml @@ -0,0 +1,19 @@ +- title: Blogpost + slug: blogpost + icon: ai-newspaper + checked: True + +- title: YouTube + slug: youtube + icon: ai-youtube-fill + checked: True + +- title: GitHub + slug: github + icon: ai-github-fill + checked: False + +- title: Sonstiges + slug: other + icon: ai-paper + checked: True diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index bebc332..dbfbff3 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,6 +8,8 @@
{{ block "main" . }} {{ end }} + + {{ partial "projects.html" . }}
diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html new file mode 100644 index 0000000..6e80cfc --- /dev/null +++ b/layouts/partials/projects.html @@ -0,0 +1,46 @@ +
+

Projekte

+
+ {{ range .Site.Data.tags }} +
+ + +
+ {{ end }} +
+ +
+
+
+

+
+
+ +

Mein Fazit: 1 Jahr mit dem Europa-Park ResortPass

+

14.01.2025

+
+
+ +
+
+

+
+
+ +

Mein Fazit: 1 Jahr mit dem Europa-Park ResortPass

+

14.01.2025

+
+
+ +
+
+

+
+
+ +

Mein Fazit: 1 Jahr mit dem Europa-Park ResortPass

+

14.01.2025

+
+
+
+
\ No newline at end of file diff --git a/static/assets/projects/curve.svg b/static/assets/projects/curve.svg new file mode 100644 index 0000000..01e8ddf --- /dev/null +++ b/static/assets/projects/curve.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/projects/sprinkle.svg b/static/assets/projects/sprinkle.svg new file mode 100644 index 0000000..e061bb3 --- /dev/null +++ b/static/assets/projects/sprinkle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/style.css b/static/style.css index b93fd77..f9ded67 100644 --- a/static/style.css +++ b/static/style.css @@ -254,4 +254,169 @@ nav.small img{ 40%{ transform: translateY(10%); } - } \ No newline at end of file +} + +/* PROJECTS */ +.projects{ + text-align: center; +} + +.tag-filter{ + display: flex; + flex-direction: row; + justify-content: center; + align-content: flex-start; + align-items: baseline; + flex-wrap: wrap; + user-select: none; +} + +.tag{ + background: var(--color); + color: var(--primary); + margin: 10px 5px; + padding: 5px 16px; + border-radius: var(--baseRadius); + transition: var(--baseTransition); + border: 1px solid var(--primary); +} + +.tag input{ + display: none; +} + +.tag:has(:checked){ + background: var(--primary); + color: var(--color); +} + +.project-list{ + padding: 20px 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: stretch; + align-items: stretch; +} + +/* Card animation: https://uiverse.io/suleymanlaarabidev/perfect-husky-88 */ +.project-card{ + width: 30%; + min-width: 300px; + min-height: 250px; + margin: 20px 10px; + padding: 0 10px; + background-image: url(https://blog.michivonah.ch/content/images/size/w1200/2024/12/ResortPass-Review--1-.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-radius: var(--baseRadius); + transition: var(--baseTransition); + box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705); +} + +@media (pointer: fine){ + .project-card:hover{ + background: var(--primary); + background-image: url("assets/projects/sprinkle.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705); + cursor: pointer; + } + + .card-first{ + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: var(--baseTransition); + opacity: 1; + } + + .project-card:hover .card-first{ + height: 0; + opacity: 0; + } + + .card-second{ + width: 100%; + height: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: var(--baseTransition); + opacity: 0; + font-size: 0; + transform: rotate(90deg) scale(-1); + } + + .project-card:hover .card-second{ + height: 100%; + opacity: 1; + font-size: 1rem; + transform: rotate(0deg); + } + + .project-card:hover .card-second h2{ + font-size: 1.2rem; + } + + .project-card:hover .card-second p{ + font-size: 1.1rem; + font-weight: 600; + } + + .project-card:hover .card-second i{ + font-size: 2.5rem; + } +} + +@media (pointer: coarse) or (pointer: none){ + .project-card{ + background: var(--primary); + background-image: url("assets/projects/sprinkle.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705); + } + + .card-first{ + display: none; + } + + .card-second{ + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: var(--baseTransition); + + height: 100%; + opacity: 1; + font-size: 1rem; + transform: rotate(0deg); + } + + .project-card .card-second h2{ + font-size: 1.2rem; + } + + .project-card .card-second p{ + font-size: 1.1rem; + font-weight: 600; + } + + .project-card .card-second i{ + font-size: 2.5rem; + } +} +