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">
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "projects.html" . }}
|
||||
</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
|
|
@ -255,3 +255,168 @@ nav.small img{
|
|||
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