<script>
	import SparklingHighlight from '$lib/components/molecules/SparklingHighlight.svelte';
	import Socials from '$lib/components/molecules/Socials.svelte';
	import Image from '../atoms/Image.svelte';
</script>

<section id="about">
	<div class="info">
		<h2>
			Its about the <br />
			<SparklingHighlight color="secondary">Experience</SparklingHighlight>
		</h2>
		<p>
			Dynamic Marine Engineer with over a decade of experience in marine engineering <br /> <br />
			Passionate about DevOps and cybersecurity, with hands-on experience managing self-hosted services
			and cloud deployments.
			<a
				href="https://kuwaittimes.com/article/21804/kuwait/other-news/sheikh-fahad-al-yousef-honors-kuwait-hackathon-2024-winners/"
				>Winner of a nationwide hackathon</a
			>, demonstrating technical expertise and teamwork. Continuously learning and applying best
			practices in system automation and secure infrastructure management.
		</p>
		<div class="socials">
			<span>Socials:</span>
			<Socials />
		</div>
	</div>
	<div class="image">
		<Image src="/images/AvatarMaker400.png" alt="Avatar" />
	</div>
</section>

<style lang="scss">
	@import '$lib/scss/breakpoints.scss';

	#about {
		position: relative;
		display: grid;
		grid-template-columns: 500px 250px;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 50px;

		@include for-phone-only {
			grid-template-columns: 1fr;
			justify-items: center;
			gap: 20px;
		}

		.info {
			display: flex;
			flex-direction: column;
			gap: 10px;
			h2 {
				@include for-phone-only {
					text-align: center;
				}
			}

			p {
				@include for-phone-only {
					text-align: justify;
				}
			}

			@include for-phone-only {
				gap: 20px;
			}
		}

		.socials {
			display: flex;
			align-items: center;
			gap: 15px;

			@include for-phone-only {
				justify-content: center;
				margin-bottom: 10px;
				span {
					display: none;
				}
			}
		}

		.image {
			width: 220px;
			height: 220px;
			border-radius: 30%;
			overflow: hidden;
		}
	}
</style>
