1 line
6.4 KiB
CSS
1 line
6.4 KiB
CSS
.bg-linear-grow{min-height:100vh;overflow-x:hidden;overflow-y:hidden;position:fixed;width:100%}.bg-linear-grow .ball{--delay:0s;--size:0.4;--speed:20s;animation:loop var(--speed) infinite linear;animation-delay:var(--delay);aspect-ratio:1;background:linear-gradient(259.53deg,#0a3fff 6.53%,#f55f0a 95.34%);border-radius:50%;filter:blur(10vw);left:0;opacity:.6;position:absolute;top:0;transform-origin:50% 50%;width:calc(150%*var(--size))}@keyframes loop{0%{transform:translate3D(0,51%,0) rotate(0deg)}5%{transform:translate3D(8%,31%,0) rotate(18deg)}10%{transform:translate3D(22%,13%,0) rotate(36deg)}15%{transform:translate3D(40%,2%,0) rotate(54deg)}20%{transform:translate3D(46%,21%,0) rotate(72deg)}25%{transform:translate3D(50%,47%,0) rotate(90deg)}30%{transform:translate3D(53%,80%,0) rotate(108deg)}35%{transform:translate3D(59%,98%,0) rotate(125deg)}40%{transform:translate3D(84%,89%,0) rotate(144deg)}45%{transform:translate3D(92%,68%,0) rotate(162deg)}50%{transform:translate3D(99%,47%,0) rotate(180deg)}55%{transform:translate3D(97%,21%,0) rotate(198deg)}60%{transform:translate3D(80%,7%,0) rotate(216deg)}65%{transform:translate3D(68%,25%,0) rotate(234deg)}70%{transform:translate3D(59%,41%,0) rotate(251deg)}75%{transform:translate3D(50%,63%,0) rotate(270deg)}80%{transform:translate3D(38%,78%,0) rotate(288deg)}85%{transform:translate3D(21%,92%,0) rotate(306deg)}90%{transform:translate3D(3%,79%,0) rotate(324deg)}to{transform:translate3D(0,51%,0) rotate(1turn)}}.resume{background:linear-gradient(90deg,var(--color-bg) 21px,transparent 3%) 50%,linear-gradient(var(--color-bg) 21px,transparent 4%) 50%,var(--color-font-3);background-size:22.5px 22.5px;height:100%;overflow-y:auto;padding:60px 0 24px;position:relative}.resume .container{column-gap:24px;display:grid;grid-template-columns:1fr 4fr;margin:0 auto;max-width:960px;padding:0 24px}.resume .container aside .base{background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px}.resume .container aside .base figure{background:var(--color-bg-3);border-radius:32px;margin:0}.resume .container aside .base figure img{border-radius:32px;width:100%}.resume .container aside .base h3{font-size:24px;font-weight:500;margin:2rem 0;text-align:center;text-transform:capitalize}.resume .container aside .base .badge{text-align:center}.resume .container aside .base .badge>span{background:var(--color-bg-3);border-radius:var(--radius);color:var(--color-font);padding:.5rem 1rem}.resume .container aside .base .seperation{background:var(--color-border);height:1px;margin:2.5rem 0}.resume .container aside .base>ul{list-style:none;margin:0;padding:0}.resume .container aside .base>ul li{align-items:center;display:flex;margin-bottom:2rem}.resume .container aside .base>ul li .icon{align-items:center;border-radius:var(--radius);color:var(--color-primary);display:inline-flex;height:36px;justify-content:center;padding:8px;width:36px}.resume .container aside .base>ul li .icon svg{height:20px;width:20px}.resume .container aside .base>ul li>div{display:flex;flex:1;flex-direction:column;justify-content:space-between;padding-left:1rem}.resume .container aside .base>ul li>div p{color:var(--color-font-2);font-size:12px;line-height:1;margin:0;text-transform:uppercase}.resume .container aside .base>ul li>div h4{color:var(--color-font);font-size:14px;font-weight:400;margin:0;padding-top:.5rem}.resume .container aside .base .social{column-gap:12px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr}.resume .container aside .base .social a{border-radius:var(--radius);color:var(--color-font-2);display:inline-flex;height:32px;padding:4px;transition:all .3s ease;width:32px}.resume .container aside .base .social a:hover{background:var(--color-bg-3)}.resume .container main{background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px}.resume .container main>h2{font-family:linear;font-size:2rem;font-weight:600;margin-bottom:2rem;margin-top:0;position:relative}.resume .container main>h2:before{background:var(--color-primary);border-radius:.5rem;bottom:-1.0625rem;content:"";height:.3125rem;left:0;position:absolute;width:2.5rem;z-index:1}.resume .container main .about-me p{color:var(--color-font-2);font-weight:400;line-height:1.5}.resume .container main .skill{list-style:disc;padding-bottom:3rem;padding-left:16px}.resume .container main .skill li{color:var(--color-font-2);font-weight:300;line-height:2}.resume .container main ul{list-style:none;margin:0;padding:0 0 1rem}.resume .container main ul:last-of-type{padding-bottom:0}.resume .container main ul .title{align-items:center;display:flex;margin-bottom:2.5rem}.resume .container main ul .title>span{align-items:center;border-radius:var(--radius);color:var(--color-primary);display:inline-flex;height:36px;justify-content:center;position:relative;width:36px;z-index:10}.resume .container main ul .title>span:after{background:var(--color-border);bottom:-2.5rem;content:"";left:49%;position:absolute;top:100%;transform:translateX(-47%);width:1px;z-index:1}.resume .container main ul .title>span svg{height:20px;width:20px}.resume .container main ul .title h4{flex:1;font-size:1.5rem;font-weight:600;line-height:1.3;margin:0;padding-left:1rem}.resume .container main ul .item{border-left:1px solid var(--color-border);margin-left:17px;padding-bottom:2rem;padding-left:2.5rem;position:relative;z-index:10}.resume .container main ul .item:last-of-type{border-left:0}.resume .container main ul .item:before{background:var(--color-primary);border-radius:50%;box-shadow:0 0 0 .25rem var(--color-primary-4);content:"";height:.5625rem;left:-.3125rem;position:absolute;top:.0625rem;width:.5625rem}.resume .container main ul .item .name{font-size:1rem;margin:0}.resume .container main ul .item .name>label{display:inline-block;height:20px;margin-right:12px;vertical-align:middle;width:20px}.resume .container main ul .item .period{color:var(--color-font-2);font-size:15px;font-weight:400;line-height:1;padding-top:1rem}.resume .container main ul .item .content{color:var(--color-font-2);margin:0;padding:0 0 1rem}.resume .container main ul .item .desc{color:var(--color-font-2);line-height:1.2;margin:0;padding:.5rem 0 1rem}.resume .container main ul .item .list{list-style:decimal;padding-left:16px}.resume .container main ul .item .list li{line-height:1.5;margin-bottom:.5rem}.resume .container main .project .name{background:linear-gradient(45deg,var(--color-primary-2),transparent);border-radius:var(--radius) 0 0 var(--radius);padding:2px;transform:translateY(-6px)} |