michi.vonah/website-v3
1
0
Fork 0
mirror of https://github.com/michivonah/website-v3.git synced 2025-12-22 21:36:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

begin projects section

Browse source
This commit is contained in:
Michi 2025-03-10 20:55:31 +01:00
parent 92098c8ebf
commit 03ff2ec08f
7 changed files with 251 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
static/assets/projects/curve.svg Normal file
View 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(&quot;#SvgjsMask1010&quot;)" 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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
static/assets/projects/sprinkle.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

167
static/style.css
View file

@ -254,4 +254,169 @@ nav.small img{
40%{
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;
}
}