---
import Layout from "../layouts/Layout.astro";
import Card from "../components/elements/Card.astro";
import Footer from "../components/sections/FooterComponent.astro";
---

<Layout title="Socials" description="Check out Ryan's socials">
	<div class="mx-auto my-10 max-w-full w-[90%] md:w-1/2">
		<Card primaryColor="aquamarine">
			<div class="card-content md:px-8 md:py-8 px-4 py-4">
				<h1 class="font-bold text-3xl text-center">
					Frequently Asked Questions
				</h1>
				<hr class="my-2" />
				<!-- Who are you? -->
				<h2 class="font-bold text-xl">Who are you?</h2>
				<p>
					I'm Ryan, I am a software developer and a coworking & study
					streamer.
					<br />
					<br />
					See my website <a
						target="_blank"
						href="https://rython.dev/"
						class="text-blue-400 underline">here</a
					> to learn more about me, including my software development portfolio
					and my content creation projects.
				</p>
				<hr class="my-2" />
				<h2 class="font-bold text-xl">
					Where are you from? What languages do you speak?
				</h2>
				<p>
					I'm born and raised in Malaysia, studying in Australia. I
					speak English, Mandarin Chinese, and some Malay. I can read
					both traditional and simplified Chinese characters.
				</p>
				<hr class="my-2" />
				<!-- How to pronounce? -->
				<h2 class="font-bold text-xl">
					How to pronounce your username?
				</h2>
				<p>
					Try to pronounce Python, and then replace the "Py" with
					"Ry". You can also call me "Ry" or "Ryan" if you prefer.
				</p>
				<hr class="my-2" />
				<!-- What is a coworking stream? -->
				<h2 class="font-bold text-xl">What is a coworking stream?</h2>
				<p>
					That question is answered <a
						target="_blank"
						class="text-blue-400 underline"
						href="https://coworking-guide.vercel.app/get-started/introduction#what-are-coworking-streams"
						>here</a
					>.
				</p>
				<hr class="my-2" />
				<!-- What is a coworking stream? -->
				<h2 class="font-bold text-xl">
					Why are you muted? Why aren't you reading chat?
				</h2>
				<p>
					During work time, I am muted and not reading chat to focus
					on my work. I will try to catch up on chat during break
					time.
				</p>
				<hr class="my-2" />
				<!-- What is a coworking stream? -->
				<h2 class="font-bold text-xl">Is that a keychron?</h2>
				<p>No. It's an Epomaker GK64x modded with black switches.</p>
				<hr class="my-2" />
			</div>
		</Card>
		<Footer />
	</div>
	<style>
		.card-content {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			background-image: radial-gradient(
				rgba(255, 255, 255, 0.1) 1px,
				transparent 1px
			);
			background-position: 50% 50%;
			background-size: 1.1rem 1.1rem;
			border-radius: 1.25rem;
			overflow: hidden;
		}
	</style>
</Layout>