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

<div class="w-full h-fit pt-20">
    <h1 class="text-center text-5xl">Skills</h1>
    <div class="flex flex-col items-center">
        <div class="w-[90%] md:w-[600px] pt-10">
            <Card primaryColor="#9EDDFF" bgColor="#282828" scaleOnHover={false}>
                <div class="card-content">
                    <div class="flex flex-col justify-left w-full">
                        <h2 class="font-bold text-2xl">Web Development</h2>
                    </div>
                    <hr class="w-full" />
                    <p class="text-left lg:text-justify">
                        I started my web development journey by building
                        websites and widgets using vanilla HTML, CSS, Javascript
                        and Express. As I learnt more about the fundamentals of
                        web development, I delved into frameworks such as
                        Svelte, React and Astro.
                    </p>
                    <div class="w-full flex flex-row flex-wrap justify-start">
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-orange-700
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            HTML
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-blue-700
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            CSS
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Javascript
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            TypeScript
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            PHP
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Express
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-orange-500
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Svelte
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-[#00D8FF] hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            React
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-green-500 hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Vue
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Astro
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            TailwindCSS
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-[#8500C7]
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Vite
                        </div>
                    </div>
                </div>
            </Card>
            <Line height="50px" />
            <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={false}>
                <div class="card-content">
                    <div class="flex flex-col justify-left w-full">
                        <h2 class="font-bold text-2xl">Data Science</h2>
                    </div>
                    <hr class="w-full" />
                    <p class="text-left lg:text-justify">
                        My first exposure to data science was through learning
                        Computer Vision. I learn how to use OpenCV in Python to
                        open a webcam and detect faces. Later on, I took a
                        Diploma course that is focused in data science, where I
                        learnt how to do the fundamentals of data science such
                        as extracting, transforming and loading data, as well as
                        data visualisation.
                    </p>
                    <div class="w-full flex flex-row flex-wrap justify-start">
                        <div
                            class="w-fit text-white bg-gray-500 hover:text-white hover:bg-blue-700
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Python
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-cyan-500
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            R
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-green-600
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            OpenCV
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-blue-500 hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            SAS
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-orange-700
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            MySQL
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-blue-800
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Pandas
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-green-700
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            Selenium
                        </div>
                        <div
                            class="w-fit text-white bg-gray-500 hover:bg-gray-200 hover:text-black
                                rounded-full px-3 py-1 mr-1 my-1
                                transition-colors duration-300"
                        >
                            BeautifulSoup4
                        </div>
                    </div>
                </div>
            </Card>
        </div>
    </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-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 0.5rem;
        border-radius: 1.25rem;
        overflow: hidden;
    }
</style>