1 line
5.9 KiB
CSS
1 line
5.9 KiB
CSS
.vague-icon{align-items:center;display:inline-flex;justify-content:center;padding:8px;position:relative}.vague-icon:before{background:linear-gradient(90deg,var(--color-primary-3) .04%,var(--color-primary) 46.04%);border-radius:50%;content:"";filter:blur(5px);height:50%;left:50%;opacity:.7;overflow:visible;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:50%}@keyframes avatar{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}40%,50%{opacity:.2;transform:translate(-50%,-50%) scale(1)}to{opacity:0}}.resume{height:100%;overflow-y:auto;position:relative}.resume .header{margin:0 auto;max-width:860px;padding:24px 24px 0;position:relative}.resume .header:before{background:linear-gradient(var(--color-primary) 0,var(--color-primary) 100%);border-radius:50%;content:"";filter:blur(80px);height:360px;left:50%;opacity:.2;pointer-events:none;position:absolute;top:2%;transform:translateX(-50%);width:360px}.resume .header h3{background:linear-gradient(to right,var(--color-primary),var(--color-font));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:40px;font-weight:700;text-align:center}.resume .header .about-me p{color:var(--color-font-2);font-weight:400;line-height:1.5;text-align:center}.resume .header figure{background-image:linear-gradient(to right bottom,var(--color-primary),var(--color-primary-4));border-radius:50%;height:96px;margin:2rem auto;padding:4px;position:relative;width:96px}.resume .header figure .aperture{border:1px solid;border-radius:50%;content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.resume .header figure .aperture:first-of-type{animation:avatar 3.4s ease .5s infinite normal backwards;border-color:var(--color-primary);height:128px;width:128px}.resume .header figure .aperture:nth-of-type(2){animation:avatar 3.9s ease .5s infinite normal backwards;border-color:var(--color-primary-1);height:160px;width:160px}.resume .header figure .aperture:nth-of-type(3){animation:avatar 4.4s ease .5s infinite normal backwards;border-color:var(--color-primary-2);height:192px;width:192px}.resume .header figure img{border-radius:50%;width:100%}.resume .header>ul{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;list-style:none;margin:0;padding:0}.resume .header>ul li{align-items:center;display:flex;margin-bottom:2rem}.resume .header>ul li>span svg{height:20px;width:20px}.resume .header>ul li>div{display:flex;flex:1;flex-direction:column;justify-content:space-between;padding-left:1rem}.resume .header>ul li>div p{color:var(--color-font-2);font-size:12px;line-height:1;margin:0;text-transform:uppercase}.resume .header>ul li>div h4{color:var(--color-font);font-size:14px;font-weight:400;margin:0;padding-top:.5rem}.resume .header .social{display:flex;gap:12px;justify-content:center;padding:2rem 0 4rem}.resume .header .social a{border-radius:var(--radius-base,4px);color:var(--color-font-2);display:inline-flex;height:32px;padding:4px;transition:all .3s ease;width:32px}.resume .header .social a:hover{background:var(--color-bg-3)}.resume>.content{margin:0 auto;max-width:860px;padding:24px 12px}.resume>.content>h2{font-family:linear;font-size:2rem;font-weight:600;margin-bottom:2rem;margin-top:0}.resume>.content>h2 span{position:relative}.resume>.content>h2 span:before{background:var(--color-primary);border-radius:.5rem;bottom:-1.0625rem;content:"";height:.3125rem;left:0;position:absolute;width:50%;z-index:1}.resume>.content .portfolio-title{margin:2rem 0 4rem;text-align:center}.resume>.content .portfolio-title span:before{left:50%;transform:translateX(-50%)}.resume>.content .skill{list-style:disc;padding-bottom:4rem;padding-left:24px}.resume>.content .skill li{color:var(--color-font-2);line-height:2}.resume>.content ul{list-style:none;margin:0;padding:0 0 1rem}.resume>.content ul:last-of-type{padding-bottom:0}.resume>.content ul .title{align-items:center;display:flex;margin-bottom:2.5rem}.resume>.content ul .title>span{z-index:10}.resume>.content ul .title>span:after{background:var(--color-border-2);bottom:-2.5rem;content:"";left:49%;position:absolute;top:100%;transform:translateX(-47%);width:1px;z-index:1}.resume>.content ul .title>span svg{color:var(--color-font-1);height:20px;width:20px}.resume>.content ul .title h4{flex:1;font-size:1.5rem;font-weight:600;line-height:1.3;margin:0;padding-left:1rem}.resume>.content ul .item{border-left:1px solid var(--color-border-2);margin-left:17px;padding:0 0 4rem 2rem;position:relative;z-index:10}.resume>.content ul .item:last-of-type{border-left:0}.resume>.content ul .item:before{background:var(--color-primary);border-radius:50%;box-shadow:0 0 0 .25rem var(--color-bg-3);content:"";height:.6rem;left:-.3rem;position:absolute;top:.3rem;width:.6rem}.resume>.content ul .item .name{align-items:center;color:var(--color-font);display:flex;font-size:1rem;margin:0}.resume>.content ul .item .name>label{display:inline-block;height:20px;margin-right:12px;vertical-align:middle;width:20px}.resume>.content ul .item .period{color:var(--color-font-2);font-size:15px;font-weight:400;line-height:1;padding-top:1rem}.resume>.content ul .item .content{color:var(--color-font-2);margin:0;padding:0 0 1rem}.resume>.content ul .item .desc{color:var(--color-font-2);line-height:1.5;margin:0;padding:.5rem 0 1rem}.resume>.content ul .item .list{list-style:square;padding-left:24px}.resume>.content ul .item .list li{line-height:2;margin-bottom:1rem}.resume>.content .project .name{background:linear-gradient(45deg,var(--color-bg-3),transparent);border-radius:var(--radius-base,4px) 0 0 var(--radius-base,4px);padding:.5rem;transform:translateY(-.6rem)}.resume>.content .portfolio .card{padding:24px}.resume>.content .portfolio .card .title{align-items:center;display:flex;font-size:16px;gap:12px}.resume>.content .portfolio .card .title svg{color:var(--color-font-1);height:28px;width:28px}.resume>.content .portfolio .card span{color:var(--color-font)}.resume>.content .portfolio .card .desc{color:var(--color-font-2);line-height:1.5;margin:0;padding-top:12px} |