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

implement contact me section

Browse source
This commit is contained in:
Michi 2025-03-11 21:09:37 +01:00
parent 112f84b1ca
commit a8753d42b2
6 changed files with 123 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

91
static/style.css
View file

@ -192,6 +192,20 @@ nav.small img{
letter-spacing: -0.6rem;
}
@media screen and (max-width:310px){
.hero h1{
font-size: 4rem;
letter-spacing: -0.4rem;
}
}
@media screen and (max-width:180px){
.hero h1{
font-size: 2.5rem;
letter-spacing: -0.3rem;
}
}
.hero h1 span{
display: inline-block;
animation: wave 2s ease-in-out infinite;
@ -420,7 +434,84 @@ nav.small img{
}
}
/* CONTACT */
.contact{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
height: 100dvh;
background-image: url("assets/hero/bg_animated_4.svg");
background-size: cover;
background-repeat: repeat-x;
background-position: center;
}
.contact h1{
margin: inherit 20px;
font-size: clamp(1.5rem, 10vw, 6rem);
word-break: break-word;
overflow: hidden;
border-right: 0.15em solid var(--primary);
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference){ /* Only runs when user did not disable animations */
.typewriter-animation{
animation: typing 2s steps(32, end), caret .75s step-end infinite; /* Typewriter effect: https://css-tricks.com/snippets/css/typewriter-effect/ */
}
}
@keyframes typing{
0%{
width: 0;
}
100%{
width: 100%;
}
}
@keyframes caret {
0%, 100%{
border-color: transparent;
}
50%{
border-color: var(--primary);
}
}
.contact div{
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
align-items: center;
}
@media screen and (max-width:330px){
.contact div{
flex-direction: column;
}
}
.contact a{
margin: 10px;
font-size: 3rem;
color: var(--color);
text-decoration: none;
transition: var(--baseTransition);
}
.contact a:hover{
margin: 10px 20px;
color: var(--color);
text-decoration: none;
transform: scale(1.8);
}
/* SCROLL TOP */
.scroll-top{