RythonDev/src/pages/what-i-do.astro

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

<Layout
	title="What I Do"
	description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
>
	<NavBar />
	<div id="what-i-do" class="mt-10 pb-20 pt-20">
		<WhatIDoComponent />

		<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
			<Card primaryColor="#19a7ce">
				<div class="card-content">
					<h2
						id="web-dev"
						class="animate-gradient text-2xl font-bold"
					>
						Web Development
					</h2>
					<hr class="mb-3 mt-3 w-full" />
					<div class="mb-5">
						<h3 class="text-xl font-bold">Websites</h3>
						<p class="mt-1 text-left">
							I am beyond just a programmer; I'm a developer who
							can turn your vision into a clickable product.
							Through custom designs, intuitive user experiences,
							and special attention to detail, I can bring your
							brand to life online.
						</p>
					</div>
					<div class="mb-5">
						<h3 class="text-xl font-bold">Web Apps</h3>
						<p class="mt-1 text-left">
							With a growing dislike against tools with premium
							features stuck behind a subscription service, I
							design and craft solutions that solves problems and
							improves my workflow.
						</p>
					</div>
					<div>
						<h3 class="text-xl font-bold">Widgets</h3>
						<p class="mt-1 text-left">
							Leveraging my web development skills, I built stream
							widgets to level up livestreams on Twitch and
							YouTube. Easy to use and customize, my work have
							been used by 100+ Twitch streamers!
						</p>
					</div>
				</div>
			</Card>
			<Line height="50px" />
			<Card primaryColor="#a1eebd">
				<div class="card-content">
					<h2
						id="data-science"
						class="animate-gradient text-2xl font-bold"
					>
						Data Science
					</h2>
					<hr class="mb-3 mt-3 w-full" />
					<div class="mb-5">
						<h3 class="text-xl font-bold">
							Data Analysis and Visualization
						</h3>
						<p class="mt-1 text-left">
							Translating numbers into works of art that inform,
							inspire, and guide decision-making. I can create
							visually compelling narratives that turn dry
							statistics into captivating stories.
						</p>
					</div>
					<div class="mb-5">
						<h3 class="text-xl font-bold">
							Statistics and Probability
						</h3>
						<p class="mt-1 text-left">
							Every number tells a story, but it takes the
							language of statistics and probability to truly
							understand it. Our world is full of data, but it's
							only through powerful tools that we can transform it
							into meaningful insights and actionable
							intelligence.
						</p>
					</div>
					<div>
						<h3 class="text-xl font-bold">Machine Learning</h3>
						<p class="mt-1 text-left">
							Machine learning isn't just about mimicking human
							intelligence, it's about surpassing it. We push the
							boundaries of what's possible, collaborating with
							code to solve problems beyond human capabilities.
						</p>
					</div>
				</div>
			</Card>
			<Line height="50px" />
			<Card primaryColor="#9D76C1">
				<div class="card-content">
					<h2
						id="content-creation"
						class="animate-gradient text-2xl font-bold"
					>
						Content Creation
					</h2>
					<hr class="mb-3 mt-3 w-full" />
					<div class="mb-5">
						<h3 class="text-xl font-bold">Streaming</h3>
						<p class="mt-1 text-left">
							Streaming isn't just about entertainment, it's about
							building a brand that resonates and inspires.
							Streaming allows me to engage with viewers in real
							time, developing their trust and allows me to build
							a community of like-minded people.
						</p>
					</div>
					<div class="mb-5">
						<h3 class="text-xl font-bold">Video Marketing</h3>
						<p class="mt-1 text-left">
							In this world where brand marketing centres around
							short videos (Instagram reels, Tiktok videos,
							YouTube shorts...), I aim to craft and produce
							videos that will engage with your targeted audience
							while maintaining a brand friendly identity.
						</p>
					</div>
					<div>
						<h3 class="text-xl font-bold">Personality</h3>
						<p class="mt-1 text-left">
							I believe content should be an adventure, not a
							formula. My livestreams revolve around unscripted
							interactions, quirky challenges, and raw emotional
							moments. It's messy, it's exhilarating, and it's
							uniquely me.
						</p>
					</div>
				</div>
			</Card>
		</div>
	</div>
	<Footer />
</Layout>

<style>
	.card-content {
		display: flex;
		flex-direction: column;
		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;
		padding: 2rem;
		overflow: hidden;
	}

	#web-dev {
		background: linear-gradient(
			90deg,
			#afd3e2 0%,
			#19a7ce 45%,
			#a5d7e8 100%
		);

		background-size: 300%;

		background-clip: text;
		-webkit-background-clip: text;

		-webkit-text-fill-color: transparent;
	}

	#data-science {
		background: linear-gradient(
			90deg,
			#a1eebd 0%,
			#7bd3ea 45%,
			#f6f7c4 100%
		);

		background-size: 300%;

		background-clip: text;
		-webkit-background-clip: text;

		-webkit-text-fill-color: transparent;
	}

	#content-creation {
		background: linear-gradient(90deg, #d09dff 40%, #ff6868 90%);

		background-size: 300%;

		background-clip: text;
		-webkit-background-clip: text;

		-webkit-text-fill-color: transparent;
	}
</style>