mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
63 lines
2.2 KiB
Text
63 lines
2.2 KiB
Text
---
|
|
import Card from "../components/Card.astro";
|
|
---
|
|
|
|
<div class="w-full h-fit flex justify-center items-center flex-col">
|
|
<div class="h-[1px] w-1/3 bg-[#404040] mb-5"></div>
|
|
<h1 class="text-center text-5xl mb-10">What I Do</h1>
|
|
<div
|
|
class="grid grid-cols-1 w-[400px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
|
|
>
|
|
<Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
|
|
<div class="card-content">
|
|
<h2 class="font-bold text-xl text-center">Web Development</h2>
|
|
<hr class="w-full" />
|
|
<p class="text-center">
|
|
I like to code things for the web, particularly on the
|
|
frontend. I enjoy bringing ideas to life in the browser.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
|
|
<div class="card-content">
|
|
<h2 class="font-bold text-xl text-center">Data Science</h2>
|
|
<hr class="w-full" />
|
|
<p class="text-center">
|
|
I possess knowledge of data science and machine learning,
|
|
particularly interested in Computer Vision.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
|
|
<div class="card-content">
|
|
<h2 class="font-bold text-xl text-center">Content Creation</h2>
|
|
<hr class="w-full" />
|
|
<p class="text-center">
|
|
I am experienced in streaming on Twitch, experienced in
|
|
customizing settings in OBS, and aim to improve my video
|
|
editing skills.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</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;
|
|
padding: 2rem 2rem;
|
|
border-radius: 1.25rem;
|
|
overflow: hidden;
|
|
min-width: 210px;
|
|
}
|
|
</style>
|