---
import Card from "../elements/Card.astro";
import Line from "../elements/NetworkLine.astro";
---

<div id="Experience" class="h-fit">
    <div class="flex flex-col items-center">
        <div class="w-[90%] md:w-[600px]">
            <Line height="50px" />
            <Card primaryColor="#FFAC21">
                <div class="card-content px-4 py-4 md:px-8 md:py-8">
                    <div class="mb-3 flex w-full flex-col justify-start gap-1">
                        <h2 class="text-xl font-bold">
                            Diploma in Computer Science student
                        </h2>
                        <h3 class="font-bold">
                            @ Methodist College Kuala Lumpur
                        </h3>
                        <h3>Jan 2022 - June 2024</h3>
                    </div>
                    <hr class="mb-3 w-full" />
                    <h3 class="mb-1 text-lg font-bold">Achievements</h3>
                    <ul class="list-inside list-disc">
                        <li>
                            4-time Dean's List Award recipient (&gt;3.5 GPA)
                        </li>
                        <li>3.8 CGPA</li>
                        <li>President of Computer Programming Club</li>
                        <li>Vice President of Diploma Union</li>
                    </ul>
                </div>
            </Card>
        </div>
    </div>
</div>

<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;
        overflow: hidden;
    }
</style>