abdullahtarawneh.com/assets/scss/index/index.scss

#index {
	.title {
		font-size: 1.75em;
		font-weight: 700;
		line-height: 1.2;
		&:before {
			font-size: 3em;
			font-weight: 700;
			color: #ddd;
			position: absolute;
			top: -0.5em;
			left: -0.25em;
			z-index: -1;
		}
		position: relative;
		margin-bottom: 2em;

	}
	.subtitle {
		font-size: 1.5em;
		line-height: 1.2;
		margin-bottom: 0.5em;
		margin-top: 2em;
	}
	#intro {
		line-height: 1.2;
		.tagline {
			font-size: 1.5em;
			font-weight: 700;
			em {color: #06f;font-style: italic;}
		}
		.blurb {
			margin-top: 1em;
			font-size: 1.2em;
		}
	}
	#about {
		.title:before {
			content: 'about';
		}
		.blurb {
			line-height: 1.4;
			font-size: 1.1em;
		}
	}
	#skills {
		.container {
			display: grid;
			grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
			gap: 2em;
		}
		.title {grid-column: 1 / -1;}
		.title:before {
			content: 'skills';
		}
		.card {
			display: grid;
			grid-template-areas: "img" "title" "desc";
			grid-template-rows: auto auto 1fr;
			&__title {
				grid-area: title;
				font-weight: 700;
				font-size: 1.1em;
				line-height: 1.2;
				margin: 0.5em 0;
			}
			&__desc {
				grid-area: desc;
				line-height: 1.4;
			}
			&__img {
				width: 100%;
				aspect-ratio: 16/9;
				object-fit: contain;
				grid-area: img;
				border-radius: 1em;
			}
			&.sysadm .card__img {padding: 1em;}
		}
	}
	#praise {
		.title:before {
			content: 'praise';
		}
		.testimonials {
			display: flex;
			flex-flow: row wrap;
			gap: 2em;
			justify-content: center;
		}
		.testimonial {
			display: grid;
			grid-template-areas: "b b" "a n";
			grid-template-columns: auto 1fr;
			grid-template-rows: auto auto;
			gap: 1em;
			width: 18em;
		}
		.avatar {
			grid-area: a;
			margin-left: 1em;
			width: 4em;
			height: 4em;
			border-radius: 100em;
			background: #212121;
		}
		.name {
			grid-area: n;
			align-self: center;
		}
		.bubble {
			grid-area: b;
			background: #212121;
			color: white;
			padding: 0.5em;
			border-radius: 0.5em;
			position: relative;
			grid-column: span 2;
			min-height: 80px;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			line-height: 1.4;
			width: 100%;
		}
		.bubble:after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border: 0.5em solid transparent;
			border-top-color: #212121;
			bottom: -1em;
			left:2.5em;
		}
	}
	#contact {
		.title:before {
			content: 'contact';
		}
	}
}