/** # MODULE TRACE 
======================================================================
 * Detected 1 files that call this module. The files are listed below:
======================================================================
 * `import` Statement Found in [HomepageComponent.tsx] => file:///d:\GitHub\personal_site\app\(components)\HomepageComponent.tsx
==== MODULE TRACE END ==== */

"use client";

import React from "react";

export default function AboutSection() {
    return (
        <div
            className="max-w-6xl w-full flex flex-col items-center pb-40 generic-scroll page-section"
            id="about-section"
        >
            <div className="h-44"></div>

            <div className="flex flex-col xl:flex-row w-full gap-8">
                <div className="w-full xl:w-[40%]"></div>

                <div className="w-full xl:w-[60%] px-4 md:px-6 py-2">
                    <section className="flex flex-col items-start gap-4">
                        <h2 className="mb-0">About Me</h2>

                        <span className="text-[24px]">
                            To explain the full extent of my skills and
                            abilities is now impractical. I've delved into the
                            deep waters of tech and racked up multiple skills
                            and abilities. To keep it simple, whichever stack is
                            at hand, I've either had some experience with it, or
                            I'll pick it up in a few weeks.
                        </span>

                        <hr className="w-full my-8" />

                        <h3 className="m-0">_Code Ben</h3>
                        <span className="text-[24px]">
                            Software engineering is natural to me as a trained
                            engineer. Web/server architecture and design is
                            where I really thrive. Using tried and trusted
                            technologies, while keeping a keen eye on stability
                            and performance, I'm able to create the perfect
                            balance between bleeding edge and stability.
                        </span>

                        <hr className="w-full my-8" />

                        <h3 className="m-0">Graphic Design</h3>
                        <span className="text-[24px]">
                            After spending about 5 years in the design industry,
                            I've picked up a few vital concepts about UI/UX
                            design. My design path still sips into my developer
                            life: and it boosts my overall expertise. Some of my
                            designs can be found on my{" "}
                            <a
                                href="https://99designs.com/profiles/tben"
                                target="_blank"
                            >
                                99designs
                            </a>{" "}
                            profile.
                        </span>

                        <hr className="w-full my-8" />

                        <a href="/about" className="button outlined">
                            Learn More About Me
                        </a>
                    </section>
                </div>
            </div>
        </div>
    );
}