1 line
6.4 KiB
CSS
1 line
6.4 KiB
CSS
|
.magic-cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,300px);justify-content:center}.magic-cards:hover .card:after{opacity:1}.magic-cards .card{background-color:var(--color-border);border-radius:10px;color:var(--color-font);cursor:pointer;display:flex;flex-direction:column;height:220px;position:relative;width:300px}.magic-cards .card:hover:before{opacity:1}.magic-cards .card:after,.magic-cards .card:before{background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),hsla(0,0%,100%,.06),transparent 40%);z-index:3}.magic-cards .card:after,.magic-cards .card:before{border-radius:inherit;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .5s;width:100%}.magic-cards .card:after{background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),hsla(0,0%,100%,.4),transparent 40%);z-index:1}.magic-cards .card>.card-content{background-color:var(--color-bg-2);border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;inset:1px;padding:10px;position:absolute;z-index:2}.magic-cards .card .card-image{align-items:center;display:flex;height:140px;justify-content:center;overflow:hidden}.magic-cards .card .card-info-wrapper{flex:1}main{border:0!important}.resume{background-size:22.5px 22.5px;height:100%;overflow-y:auto;position:relative}.resume aside{border-right:1px solid var(--color-border);bottom:0;position:fixed;top:0;width:260px}.resume aside .base{padding:24px}.resume aside .base figure{background:var(--color-bg-3);border-radius:32px;height:128px;margin:0 auto;width:128px}.resume aside .base figure img{border-radius:32px;width:100%}.resume aside .base h3{font-size:24px;font-weight:500;margin:2rem 0;text-align:center;text-transform:capitalize}.resume aside .base .badge{text-align:center}.resume aside .base .badge>span{background:var(--color-bg-3);border-radius:var(--radius);color:var(--color-font);padding:.5rem 1rem}.resume aside .base .seperation{background-image:linear-gradient(to right,transparent,var(--color-border),transparent);height:1px;margin:2.5rem 0}.resume aside .base>ul{list-style:none;margin:0;padding:0}.resume aside .base>ul li{align-items:center;display:flex;margin-bottom:2rem}.resume 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 aside .base>ul li .icon svg{height:20px;width:20px}.resume aside .base>ul li>div{display:flex;flex:1;flex-direction:column;justify-content:space-between;padding-left:1rem}.resume aside .base>ul li>div p{color:var(--color-font-2);font-size:12px;line-height:1;margin:0;text-transform:uppercase}.resume aside .base>ul li>div h4{color:var(--color-font);font-size:14px;font-weight:400;margin:0;padding-top:.5rem}.resume aside .base .social{column-gap:12px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr}.resume 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 aside .base .social a:hover{background:var(--color-bg-3)}.resume main{border:1px solid var(--color-border);border-radius:var(--radius);margin:0 auto;max-width:960px;padding:24px 24px 24px 260px}.resume main>h2{font-family:linear;font-size:2rem;font-weight:600;margin-bottom:2rem;margin-top:0}.resume main>h2 span{position:relative}.resume main>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 main .portfolio-title{margin:2rem 0 4rem;text-align:center}.resume main .portfolio-title span:before{left:50%;transform:translateX(-50%)}.resume main .about-me p{color:var(--color-font-2);font-weight:400;line-height:1.5}.resume main .skill{list-style:disc;padding-bottom:3rem;padding-left:16px}.resume main .skill li{color:var(--color-font-2);font-weight:300;line-height:1.5}.resume main ul{list-style:none;margin:0;padding:0 0 1rem}.resume main ul:last-of-type{padding-bottom:0}.resume main ul .title{align-items:cente
|