<div class="col-8 offset-2 mb-5 mt-4">
    <div class="p-4 mb-4 rounded-3 context-main context-main-bg">
        <div class="container text-center">
            <div class="jumbotron text-center pb-5">
                <p class="fs-4">
                    There are too many stories to tell them all on one site. Feel free to explore a few of those stories below.
                </p>
                <div class="col-4 offset-4 mb-3">
                    <select class="form-control dropdown-big" id="postSelector">
                        {LOOP}
                            <option value="{post}">{option}</option>
                        {/LOOP}
                    </select>
                </div>
                <button id="goToPost" class="btn btn-primary btn-lg">Learn More</button>
            </div>
            <p>
                Thanks for taking the time to learn more about me! Forgive the implied redundancy, but my name is Joey Kimsey, and I professionally describe myself as a web developer. On this site you will find a few 
                brief writings on my career and personal life as well as links to various projects and other services. At this time I don't find much value in the social media platforms. While I do have them, they serve 
                more as a reservation in my name than an active party.
            </p>
            <p>
                I would love to change the landscape of social media, but alas, I feel we need to give up "free" for "fees" lest we become the product.
            </p>
            <p>
                I live on inbox-zero, and for anyone willing to suffer my google assistant on the first call, I'm always available by phone. With that said, I do not make my personal email or phone number publicly 
                available on this site. If anything here peaks your interest, or you just want to talk more about a project, feel free to contact me here and I should respond relatively quickly.
            </p>
        </div>
    </div>
</div>

<div class="card context-main context-main-bg col-8 offset-2 mb-5">
    <div class="row g-0 px-3">
        <div class="col-md-4">
            <div id="carousel-career" class="carousel slide carousel-fade m-3" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/ba.png" class="img-fluid" alt="Black Airplane" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/emeals.png" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/springbot.png" class="img-fluid" alt="Springbot" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/ione.png" class="img-fluid" alt="IgnitionOne" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carousel-career" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon text-dark" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carousel-career" data-bs-slide="next">
                    <span class="carousel-control-next-icon text-dark" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        <div class="col-md-8 d-flex justify-content-center align-items-center">
            <div class="card-body">
                <h4 class="card-title text-center">
                    <a href="/resume" class="text-decoration-none">
                        My Career
                    </a>
                </h4>
                <p class="card-text">
                    From IPB to ChatGPT and everything in-between; I have worked with, and on, many platforms. What I would refer to as my "professional experience" spans 7 years but my experience 
                    in this field spans another decade at least. Learn more when you view my Resume. It can be viewed, downloaded, and expounded upon via my blog. Feel free to explore and follow up with any questions.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="card context-main context-main-bg col-8 offset-2 mb-5">
    <div class="row g-0 px-3">
        <div class="col-md-8 d-flex justify-content-center align-items-center">
            <div class="card-body">
                <h4 class="card-title text-center">
                    <a href="/portfolio" class="text-decoration-none">
                        My Products
                    </a>
                </h4>
                <p class="card-text">
                    One of the downfalls I have as a developer is failing to save my failures. (trust me, its less philosophical than it sounds) Many times when I finish projects, or call it quits, the code is 
                    either resigned to its life in production where I would prefer it not to be publicly available, or It goes to the big backup disk in the sky. When you factor in my immense respect 
                    for lawyers and the whimsically worded writs they have me sign; I am left with limited examples to share. Fortunately I have some long running project examples which are available for download and review.
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <div id="carousel-products" class="carousel slide carousel-fade m-3" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/AAA_M_Additions.png" class="img-fluid" alt="AAA M+ Additions" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/bedrock.jpg" class="img-fluid" alt="Bedrock" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/canary.jpg" class="img-fluid" alt="Canary" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/houdini.jpg" class="img-fluid" alt="Houdini" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/hermes.jpg" class="img-fluid" alt="Houdini" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carousel-products" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon text-dark" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carousel-products" data-bs-slide="next">
                    <span class="carousel-control-next-icon text-dark" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card context-main context-main-bg col-8 offset-2 mb-5">
    <div class="row g-0 px-3">
        <div class="col-md-4">
            <div id="carousel-projects" class="carousel slide carousel-fade m-3" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/tte.png" class="img-fluid" alt="TableTopElite" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/ttp.jpg" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                    <div class="carousel-item d-flex justify-content-center align-items-center" style="height: 250px;">
                        <img src="{ROOT_URL}images/atb.jpg" class="img-fluid" alt="eMeals" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carousel-projects" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon text-dark" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carousel-projects" data-bs-slide="next">
                    <span class="carousel-control-next-icon text-dark" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        <div class="col-md-8 d-flex justify-content-center align-items-center">
            <div class="card-body">
                <h4 class="card-title text-center">
                    <a href="/wip" class="text-decoration-none">
                        My Projects
                    </a>
                </h4>
                <p class="card-text">
                    At any given time I have at least a half dozen projects in various stages of completion. As most could attest; interests peak and 
                    wain as moods and times change. Here you can find a brief overview of the various projects I am devoting some level of attention to. 
                    Not guaranteed acuate, and not guaranteed complete, but you're here anyways, so take a peak behind the homepage 
                </p>
            </div>
        </div>
    </div>
</div>

<div class="card context-main context-main-bg col-8 offset-2 mb-5">
    <div class="row g-0 px-3">
        <div class="col-md-8 d-flex justify-content-center align-items-center">
            <div class="card-body">
                <h4 class="card-title text-center">
                    Contact Me
                </h4>
                <p class="card-text">
                    While I do not make my phone number or email available, you can still reach out about anything using my contact form here.
                </p>
                <div class="text-center">
                    <a class="btn btn-outline-primary btn-lg" href="/contact" role="button">Contact Me</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 p-3">
            <img class="img-fluid" src="/images/vacation.jpg" alt="still-working">
        </div>
    </div>
</div>
