mirror of
https://github.com/michivonah/website-v3.git
synced 2025-12-22 21:36:28 +01:00
begin projects section
This commit is contained in:
parent
92098c8ebf
commit
03ff2ec08f
7 changed files with 251 additions and 1 deletions
16
data/socialmedia.yml
Normal file
16
data/socialmedia.yml
Normal file
|
|
@ -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
|
||||||
|
|
||||||
19
data/tags.yml
Normal file
19
data/tags.yml
Normal file
|
|
@ -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
|
||||||
|
|
@ -8,6 +8,8 @@
|
||||||
<div class="inner-width">
|
<div class="inner-width">
|
||||||
{{ block "main" . }}
|
{{ block "main" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
{{ partial "projects.html" . }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
46
layouts/partials/projects.html
Normal file
46
layouts/partials/projects.html
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<div id="projects" class="projects">
|
||||||
|
<h1>Projekte</h1>
|
||||||
|
<div class="tag-filter">
|
||||||
|
{{ range .Site.Data.tags }}
|
||||||
|
<div class="tag">
|
||||||
|
<input class="tag-checkbox" id="tag-{{ .slug }}" value="{{ .slug }}" type="checkbox" {{ if .checked }} checked {{ end }}>
|
||||||
|
<label class="tag-label" for="tag-{{ .slug }}" >{{ .title }}</label>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-list">
|
||||||
|
<div class="project-card">
|
||||||
|
<div class="card-first">
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
<div class="card-second">
|
||||||
|
<i class="ai-newspaper"></i>
|
||||||
|
<h2>Mein Fazit: 1 Jahr mit dem Europa-Park ResortPass</h2>
|
||||||
|
<p>14.01.2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-card">
|
||||||
|
<div class="card-first">
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
<div class="card-second">
|
||||||
|
<i class="ai-newspaper"></i>
|
||||||
|
<h2>Mein Fazit: 1 Jahr mit dem Europa-Park ResortPass</h2>
|
||||||
|
<p>14.01.2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-card">
|
||||||
|
<div class="card-first">
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
<div class="card-second">
|
||||||
|
<i class="ai-newspaper"></i>
|
||||||
|
<h2>Mein Fazit: 1 Jahr mit dem Europa-Park ResortPass</h2>
|
||||||
|
<p>14.01.2025</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
1
static/assets/projects/curve.svg
Normal file
1
static/assets/projects/curve.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1920" height="1080" preserveAspectRatio="none" viewBox="0 0 1920 1080"><g mask="url("#SvgjsMask1010")" fill="none"><path d="M1234.77 1181.65C1351.57 1156.91 1262.98 890.63 1581.08 852.82 1899.19 815.01 2071.69 447.72 2273.71 431.62" stroke="rgba(255, 255, 255, 0.4)" stroke-width="2"></path><path d="M934.38 1128.27C1121.22 1111.31 1191.52 757.21 1565.82 722.75 1940.13 688.29 2009.81 329.85 2197.27 312.35" stroke="rgba(255, 255, 255, 0.4)" stroke-width="2"></path><path d="M866.3 1142.41C1084.19 1049.66 1112.93 381.41 1414.05 369.59 1715.16 357.77 1809.29 632.39 1961.79 639.59" stroke="rgba(255, 255, 255, 0.4)" stroke-width="2"></path><path d="M71.71 1215.87C314.22 1212.88 497.64 952.22 1000.84 936.85 1504.03 921.48 1667 455.32 1929.96 440.05" stroke="rgba(255, 255, 255, 0.4)" stroke-width="2"></path><path d="M1182.8 1178.83C1319.92 1110.42 1173.24 740.42 1512.76 662.28 1852.28 584.14 1972.2 220.37 2172.68 197.88" stroke="rgba(255, 255, 255, 0.4)" stroke-width="2"></path></g><defs><mask id="SvgjsMask1010"><rect width="1920" height="1080" fill="#ffffff"></rect></mask></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
static/assets/projects/sprinkle.svg
Normal file
1
static/assets/projects/sprinkle.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
165
static/style.css
165
static/style.css
|
|
@ -254,4 +254,169 @@ nav.small img{
|
||||||
40%{
|
40%{
|
||||||
transform: translateY(10%);
|
transform: translateY(10%);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue