vlw.se/public/assets/css/pages/about.css

/* # Overrides */

:root {
	--primer-color-accent: 148, 255, 21;
	--color-accent: rgb(var(--primer-color-accent));

	--color-go: rgb(0, 173, 216);
	--color-php: rgb(79, 93, 149);
	--color-css: rgb(86, 61, 124);
	--color-html: rgb(227, 76, 38);
	--color-shell: rgb(137, 224, 81);
	--color-python: rgb(53, 114, 165);
	--color-typescript: rgb(49, 120, 198);
	--color-javascript: rgb(241, 224, 90);
}

vv-shell {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
}

/* # Sections */

/* ## Divider */

vv-shell > hr {
	border-color: rgba(255, 255, 255, .1);
}

/* ## About */

section.about {
	display: flex;
	flex-direction: column;
	gap: calc(var(--padding) / 2);
}

section.about p:first-of-type:first-letter {
	font-size: 1.8rem;
	font-weight: bold;
	margin-right: .1rem;
	color: var(--color-accent);
}

section.about span.interests {
	-webkit-user-select: none;
	user-select: none;
	color: var(--color-accent);
	animation: interests-hue 5s infinite linear;
}

section.about p i:not(:hover) {
	opacity: .3;
}

/* ## Languages */

section.languages {
	margin: calc(var(--padding) / 1.5) 0;
}

section.languages stacked-bar-chart {
	gap: 3px;
	width: 100%;
	display: flex;
	border-radius: 100px;
	height: var(--padding);
	background-color: rgba(255, 255, 255, 0);
}

section.languages stacked-bar-chart:last-of-type {
	flex-direction: row-reverse;
}

section.languages stacked-bar-chart:hover chart-segment {
	opacity: .5;
}

section.languages stacked-bar-chart chart-segment {
	--border-corner-radius: 100px;

	transition: 150ms opacity;
	width: var(--size, 0%);
	min-width: 3%;
	height: 100%;
	color: white;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, .1);
	border-radius: 2px;
}

section.languages stacked-bar-chart a:nth-child(odd) chart-segment {
	background-color: rgba(255, 255, 255, .3);
}

/* ### Round corners */

section.languages stacked-bar-chart a:first-child chart-segment {
	border-top-right-radius: var(--padding);
	border-bottom-right-radius: var(--padding);
	border-top-left-radius: var(--border-corner-radius);
	border-bottom-left-radius: var(--border-corner-radius);
}

section.languages stacked-bar-chart a:last-child chart-segment {
	border-top-left-radius: var(--padding);
	border-bottom-left-radius: var(--padding);
	border-top-right-radius: var(--border-corner-radius);
	border-bottom-right-radius: var(--border-corner-radius);
}

section.languages stacked-bar-chart:last-of-type a:first-child chart-segment {
	border-top-left-radius: var(--padding);
	border-bottom-left-radius: var(--padding);
	border-top-right-radius: var(--border-corner-radius);
	border-bottom-right-radius: var(--border-corner-radius);
}

section.languages stacked-bar-chart:last-of-type a:last-child chart-segment {
	border-top-right-radius: var(--padding);
	border-bottom-right-radius: var(--padding);
	border-top-left-radius: var(--border-corner-radius);
	border-bottom-left-radius: var(--border-corner-radius);
}

/* ### Texts */

section.languages stacked-bar-chart chart-segment p {
	text-align: center;
	color: inherit;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
	text-overflow: ellipsis;
	padding: 0 3px;
}

section.languages stacked-bar-chart chart-segment[style="--size:0%;"] p span {
	display: none;
}

section.languages stacked-bar-chart chart-segment[style="--size:0%;"] p::before {
	content: "<1%";
	opacity: .5;
}

section.languages stacked-bar-chart chart-segment [data-hover] {
	display: none;
}

/* ### Colors */

section.languages stacked-bar-chart a chart-segment[data-lang="Go"] { background-color: var(--color-go); }
section.languages stacked-bar-chart a chart-segment[data-lang="PHP"] { background-color: var(--color-php); }
section.languages stacked-bar-chart a chart-segment[data-lang="CSS"] { background-color: var(--color-css); }
section.languages stacked-bar-chart a chart-segment[data-lang="HTML"] { background-color: var(--color-html); }
section.languages stacked-bar-chart a chart-segment[data-lang="Python"] { background-color: var(--color-python); }
section.languages stacked-bar-chart a chart-segment[data-lang="TypeScript"] { background-color: var(--color-typescript); }
section.languages stacked-bar-chart a chart-segment[data-lang="Shell"] { background-color: var(--color-shell); color: black; }
section.languages stacked-bar-chart a chart-segment[data-lang="JavaScript"] { background-color: var(--color-javascript); color: black; }

/* ### Legend */

section.languages languages-list {
	gap: calc(var(--padding) / 2);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: var(--padding) 0;
}

section.languages languages-list language-item {
	gap: 10px;
	display: flex;
	border-radius: 8px;
	align-items: center;
	fill: var(--color-php);
	padding: calc(var(--padding) / 1.5);
	border: solid 1px rgba(255, 255, 255, .1);
	background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(79, 93, 144, .2) 100%); 
}

section.languages languages-list language-item p.lang {
	font-size: 1.3em;
	font-weight: 900;
	color: var(--color-php);
}

section.languages languages-list language-item svg {
	width: 2em;
	margin-left: auto;
	transform: rotate(-90deg);
}

/* # Interests */

div.interests {
	--text-shadow-blur: 30px;
	
	transition: 300ms opacity;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-weight: bold;
	pointer-events: none;
	font-size: clamp(16px, 15vw, 50px);
	color: var(--color-accent);
	overflow: hidden;
	opacity: 0;
	z-index: 200;
}

div.interests.active {
	opacity: 1;
}

div.interests p {
	transition: 500ms transform cubic-bezier(.34,0,0,.99);
	position: absolute;
	text-shadow: 
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black;
}

@keyframes interests-hue {
	to {
		-webkit-filter: hue-rotate(360deg);
		filter: hue-rotate(360deg);
	}
}

/* Feature queries */

@media (hover: hover) {
	section.languages stacked-bar-chart chart-segment:hover {
		opacity: 1;
	}

	section.languages stacked-bar-chart chart-segment [data-hover] {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		transform: translate(0, 0);
		background-color: inherit;
		padding: 5px 10px;
		white-space: nowrap;
		pointer-events: none;
		border-radius: 6px;
		z-index: 2000;
		-webkit-backdrop-filter: brightness(.2) blur(20px);
		backdrop-filter: brightness(.2) blur(20px);
	}

	section.languages stacked-bar-chart chart-segment [data-hover].hovering {
		display: initial;
	}
}

/* Size queries */

@media (max-width: 900px) {
	section.languages languages-list  {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 650px) {
	section.languages languages-list  {
		grid-template-columns: 1fr;
	}
}