@page "/"
@inject IHttpClientFactory ClientFactory

@attribute [StreamRendering]
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<!-- View 1: Desktop View -->
<div class="container d-none d-lg-none d-xl-block mt-5 pt-3 pb-5 ps-5 pe-5 ">
    <h1 class="fst-italic fw-light fs-1 font-monospace">Hello, World!</h1>

    <!-- Start of Grid -->
    <div class="row mb-3">
        <!-- Profile Image -->
        <div class="col-auto ">
            <img class="card-img rounded-3" style="width: 18.1em;" src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg" />
        </div>
        <div class="col ">
            <!-- About Me-->
            <div class="d-inline-flex row card rounded fs-5 mb-3 p-2 ps-3 pe-3 border-0">
                I am a full-stack web developer with additional
                experience in Data Analysis and Visualization, as well as
                Simulation/VR development, and AI/ML programming.
                I am a friendly team worker with strong analytical, math
                and problem-solving skills that adapts well to an
                Agile/SCRUM environment and development lifecycle.
            </div> 

            <div class="row">
                <!-- School Experience -->
                <div class="col-auto ps-0">
                    <div class="card rounded p-2 ps-3 pe-3 border border-1 border-primary">
                        <p class="fs-6 fw-lighter card-subtitle p-0">September 2018 – March 2022</p>
                        <p class="fs-5 card-title m-0">B.S. in Computer Science</p>
                        <p class="fs-6 fw-lighter card-subtitle">Oregon State University</p>
                        <p class="fs-6 fw-lighter card-subtitle">Graduated Cum Laude</p>
                        <p class="fs-6 fw-lighter card-subtitle">Dean’s List: Fall 2020, Fall 2021</p>
                        <p class="fs-6 fw-lighter card-subtitle">Final GPA: 3.33</p>

                        @**@
                        <!-- Courses -->
                        <label class="text-decoration-underline fw-semibold">Courses</label>
                        <div class="overflow-auto" style="height: auto; max-height: 12rem">
                            <ul class="list-group list-group-flush">
                                @if (courses == null)
                                {
                                    <div>Loading...</div>
                                }
                                else
                                {
                                    <ul class="list-group list-group-flush">
                                        @foreach (var course in courses)
                                        {
                                            <li class="list-group-item">@course</li>
                                        }
                                    </ul>
                                }
                            </ul> 
                        </div>


                    </div>
@*                     <div class="ps-3 pe-3">
                        <ul class="list-group list-group-flush">
                            <li class="">Organized</li>
                            <li class="">Responsible</li>
                            <li class="">Meticulous</li>
                            <li class="">Analytical</li>
                            <li class="">Self-motivating</li>
                        </ul>
                    </div> *@
                </div>

                <!--Skills \ Languages-->
                <div class="col p-0 ">
                    <div class="bg-white rounded p-2 border border-1 border-primary" >
                        <div class="card-header">
                            <label class="text-decoration-underline fw-semibold">Skills \ Languages</label>
                            
                        </div>
                        <div class="overflow-auto" style="max-height: 20.1rem">
                            @if (skills == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                <ul class="list-group list-group-flush">
                                    @foreach (var skill in skills)
                                    {
                                        <li class="list-group-item">@skill</li>
                                    }
                                </ul>
                            }
                        </div>
                    </div>
                </div>

                <!-- Tools -->
                <div class="col pe-0">
                    <div class="bg-white rounded p-2 border border-1 border-primary">
                        <div class="card-header">
                            
                            <label class="text-decoration-underline fw-semibold">Tools</label>

                        </div>
                        <div class="overflow-auto" style="max-height: 20.1rem">
                            @if (tools == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                <ul class="list-group list-group-flush">
                                    @foreach (var tool in tools)
                                    {
                                        <li class="list-group-item">@tool</li>
                                    }
                                </ul>
                            }
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Experiences / Projects -->
    <div class="row ">
        <div class="col card border-0 rounded rounded-4 pt-3 pb-3">
            <!-- Button Bay-->
            <div class="row mt-2">
                <div class="d-grid gap-2 d-md-flex justify-content-around">
                    <button class="btn rounded-4 w-25 @(isExperience ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleExperience()">Experience</button>
                    <button class="btn rounded-4 w-25 @(isProjects ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleProjects()">Projects</button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    @if (isExperience)
                    {
                        <div class="row justify-content-md-center fst-italic fs-1 mb-2">
                            Experience
                        </div>
                        @if (experiences == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            @foreach (var experience in experiences)
                            {
                                <div class="row justify-content-md-center mb-3">
                                    <div class="card w-75 p-3 ps-4 pe-4 rounded">
                                        <p class="fs-6 fw-lighter card-subtitle p-0"> @experience.StartYear – @experience.EndYear</p>
                                        <p class="fs-5 card-title m-0">@experience.Title - @experience.Company</p>
                                        <p class="fs-6 fw-lighter card-text">@experience.Details</p>
                                    </div>
                                </div>
                            }
                        }

                    }
                    else if (isProjects)
                    {
                        <div class="row justify-content-md-center fst-italic fs-1 mb-2">Projects</div>

                        @if (projects == null)
                        {
                            <p>Loading projects...</p>
                        }
                        else
                        {
                            @foreach (var project in projects)
                            {
                                <div class="row justify-content-md-center mb-3">
                                    <div class="card w-75 p-3 ps-4 pe-4 rounded">
                
                                        <p class="fs-5 card-title m-0">@project.Title</p>

                                        @foreach (var desc in project.Descriptions)
                                        {
                                            <p class="fs-6 fw-lighter card-text">@((MarkupString)FormatDescription(desc))</p>
                                        }

                                        @if (project.Links?.Any() == true)
                                        {
                                            <div class="mt-2 align-self-end">
                                                @foreach (var link in project.Links)
                                                {
                                                    @switch (link.Type)
                                                    {
                                                        case "external":
                                                            <a class="me-2" href="@link.Url">@link.Label</a>
                                                            break;
                                                        case "internal":
                                                            <a class="mt-2 " href=""@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-code" viewBox="0 0 16 16">
                                                                  <path d="M6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0a.5.5 0 1 0-.708.708L10.293 8 8.646 9.646a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708z"/>
                                                                  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"/>
                                                                </svg>
                                                            </a>
                                                            break;
                                                        case "github":
                                                            <a class="mt-2" href="@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
                                                                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
                                                                </svg>
                                                            </a>
                                                            break;

                                                    }
                                                }
                                            </div>
                                        }
                                    </div>
                                </div>
                            }
                        }
                    
                    }
                </div>
            </div>
        </div>
    </div>

</div>

<!-- View 2: Smaller Desktop View -->
<div class="container d-none d-md-none d-xl-none d-lg-block mt-4 pt-3 pb-4 ">
    <div class="row">
    <h1 class="fst-italic fw-light fs-1 font-monospace ps-1">Hello, World!</h1>

    </div>
    <div class="row mb-3">
        <div class="col-auto ps-0">
            <img class="card-img rounded-3" style="width: 16.9em;" src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg" />
        </div>
        <div class="col ">
            <!-- About Me-->
            <div class="row card rounded fs-6 mb-3 p-2 ps-3 pe-3 border-0">
                I am a full-stack web developer with additional
                experience in Data Analysis and Visualization, as well as
                Simulation/VR development, and AI/ML programming.
                I am a friendly team worker with strong analytical, math
                and problem-solving skills that adapts well to an
                Agile/SCRUM environment and development lifecycle.
            </div> 

            <div class="row mt-3">
            <!-- School Experience -->
            <div class="col me-1">
                <div class="row bg-white rounded p-2 ps-3 pe-3 border border-1 border-primary">
                    <p class="fs-6 fw-lighter card-subtitle p-0">September 2018 – March 2022</p>
                    <p class="fs-5 card-title m-0 p-0">B.S. in Computer Science</p>
                    <p class="fs-6 fw-lighter card-subtitle p-0">Oregon State University</p>
                    <p class="fs-6 fw-lighter card-subtitle p-0">Graduated Cum Laude</p>
                    <p class="fs-6 fw-lighter card-subtitle p-0">Dean’s List: Fall 2020, Fall 2021</p>
                    <p class="fs-6 fw-lighter card-subtitle p-0">Final GPA: 3.33</p>

                    <!-- Courses -->
                    <label class="text-decoration-underline p-0">Courses</label>
                    <div class="overflow-auto p-0" style="max-height: 10rem">
                        <ul class="list-group list-group-flush">
                            @if (courses == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                <ul class="list-group list-group-flush">
                                    @foreach (var course in courses)
                                    {
                                        <li class="list-group-item">@course</li>
                                    }
                                </ul>
                            }
                        </ul>
                    </div>
                </div>
            </div>

        
            <div class="col ms-1">
                <!--Skills \ Languages-->
                <div class="row bg-white rounded p-2 border border-1 border-primary mb-2">
                    <div class="card-header">
                        <label class="text-decoration-underline">Skills \ Languages</label>

                    </div>
                    <div class="overflow-auto p-0" style="max-height: 8rem">
                        @if (skills == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            <ul class="list-group list-group-flush">
                                @foreach (var skill in skills)
                                {
                                    <li class="list-group-item">@skill</li>
                                }
                            </ul>
                        }
                    </div>
                </div>
                <!-- Tools -->
                <div class="row bg-white rounded p-2 border border-1 border-primary">
                    <div class="card-header">

                        <label class="text-decoration-underline">Tools</label>

                    </div>
                    <div class="overflow-auto p-0" style="max-height: 8rem">
                        @if (tools == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            <ul class="list-group list-group-flush">
                                @foreach (var tool in tools)
                                {
                                    <li class="list-group-item">@tool</li>
                                }
                            </ul>
                        }
                    </div>
                </div>
            </div>
        </div>

        </div>

        <!-- Experience / Projects -->
        <div>
            <div class="row mt-3">

            <div class="col card border-0 rounded rounded-4 pt-3 pb-3">
                <!-- Button Bay-->
                <div class="row mt-2">
                    <div class="d-grid gap-2 d-md-flex justify-content-around">
                        <button class="btn rounded-4 w-25 @(isExperience ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleExperience()">Experience</button>
                        <button class="btn rounded-4 w-25 @(isProjects ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleProjects()">Projects</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @if (isExperience)
                        {
                            <div class="row justify-content-md-center fst-italic fs-1 mb-2">
                                Experience
                            </div>
                            @if (experiences == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                @foreach (var experience in experiences)
                                {
                                    <div class="row justify-content-md-center mb-3">
                                        <div class="card w-75 p-3 ps-4 pe-4 rounded">
                                            <p class="fs-6 fw-lighter card-subtitle p-0"> @experience.StartYear – @experience.EndYear</p>
                                            <p class="fs-5 card-title m-0">@experience.Title - @experience.Company</p>
                                            <p class="fs-6 fw-lighter card-text">@experience.Details</p>
                                        </div>
                                    </div>
                                }
                                }

                            }
                            else if (isProjects)
                            {
                                <div class="row justify-content-md-center fst-italic fs-1 mb-2">Projects</div>

                        @if (projects == null)
                        {
                            <p>Loading projects...</p>
                        }
                        else
                        {
                            @foreach (var project in projects)
                            {
                                <div class="row justify-content-md-center mb-3">
                                    <div class="card w-75 p-3 ps-4 pe-4 rounded">
                
                                        <p class="fs-5 card-title m-0">@project.Title</p>

                                        @foreach (var desc in project.Descriptions)
                                        {
                                            <p class="fs-6 fw-lighter card-text">@((MarkupString)FormatDescription(desc))</p>
                                        }

                                        @if (project.Links?.Any() == true)
                                        {
                                            <div class="mt-2 align-self-end">
                                                @foreach (var link in project.Links)
                                                {
                                                    @switch (link.Type)
                                                    {
                                                        case "external":
                                                            <a class="me-2" href="@link.Url">@link.Label</a>
                                                            break;
                                                        case "internal":
                                                            <a class="mt-2 " href=""@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-code" viewBox="0 0 16 16">
                                                                  <path d="M6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0a.5.5 0 1 0-.708.708L10.293 8 8.646 9.646a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708z"/>
                                                                  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"/>
                                                                </svg>
                                                            </a>
                                                            break;
                                                        case "github":
                                                            <a class="mt-2" href="@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
                                                                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
                                                                </svg>
                                                            </a>
                                                            break;

                                                    }
                                                }
                                            </div>
                                        }
                                    </div>
                                </div>
                            }
                        }
                            }
                        </div>
                </div>
            </div>
        </div>
        </div>


    </div>
</div>

<!-- View 3: Tablet View -->
<div class="container d-none d-md-block d-lg-none mt-4 pt-3 pb-4 ">
    <h1 class="fst-italic fw-light fs-1 font-monospace">Hello, World!</h1>

    <div class="row">
        <div class="card rounded p-3 border-0">
            <div class="clearfix">
                <img src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg"
                     class="mobile-profile float-start me-3 mb-2"
                     style="width: 10em;
                            height: 10em;
                            object-fit: cover;
                            border-radius: 0.5rem;" />

                <p class="fs-6 mb-0">
                    I am a full-stack web developer with additional experience in Data Analysis and Visualization,
                    as well as Simulation/ VR development, and AI/ ML programming. I am a friendly team worker with
                    strong analytical, math and problem-solving skills that adapts well to an Agile/SCRUM environment
                    and development lifecycle.
                </p>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <!-- School Experience -->
        <div class="col me-1">
            <div class="row bg-white rounded p-2 ps-3 pe-3 border border-1 border-primary">
                <p class="fs-6 fw-lighter card-subtitle p-0">September 2018 – March 2022</p>
                <p class="fs-5 card-title m-0 p-0">B.S. in Computer Science</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Oregon State University</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Graduated Cum Laude</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Dean’s List: Fall 2020, Fall 2021</p>
                <p class="fs-6 fw-lighter card-subtitle p-0">Final GPA: 3.33</p>

                <!-- Courses -->
                <label class="text-decoration-underline p-0">Courses</label>
                <div class="overflow-auto p-0" style="max-height: 9.8rem">
                    <ul class="list-group list-group-flush">
                        @if (courses == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            <ul class="list-group list-group-flush">
                                @foreach (var course in courses)
                                {
                                    <li class="list-group-item">@course</li>
                                }
                            </ul>
                        }
                    </ul>
                </div>
            </div
        </div>

        
        <div class="col ms-1">
            <!--Skills \ Languages-->
            <div class="row bg-white rounded p-2 border border-1 border-primary mb-2">
                <div class="card-header">
                    <label class="text-decoration-underline">Skills \ Languages</label>

                </div>
                <div class="overflow-auto p-0" style="max-height: 8rem">
                    @if (skills == null)
                    {
                        <div>Loading...</div>
                    }
                    else
                    {
                        <ul class="list-group list-group-flush">
                            @foreach (var skill in skills)
                            {
                                <li class="list-group-item">@skill</li>
                            }
                        </ul>
                    }
                </div>
            </div>
            <!-- Tools -->
            <div class="row bg-white rounded p-2 border border-1 border-primary">
                <div class="card-header">

                    <label class="text-decoration-underline">Tools</label>

                </div>
                <div class="overflow-auto p-0" style="max-height: 8rem">
                    @if (tools == null)
                    {
                        <div>Loading...</div>
                    }
                    else
                    {
                        <ul class="list-group list-group-flush">
                            @foreach (var tool in tools)
                            {
                                <li class="list-group-item">@tool</li>
                            }
                        </ul>
                    }
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="row mt-3">

        <div class="col card border-0 rounded rounded-4 pt-3 pb-3">
            <!-- Button Bay-->
            <div class="row mt-2">
                <div class="d-grid gap-2 d-md-flex justify-content-around">
                    <button class="btn rounded-4 w-25 @(isExperience ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleExperience()">Experience</button>
                    <button class="btn rounded-4 w-25 @(isProjects ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleProjects()">Projects</button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    @if (isExperience)
                    {
                        <div class="row justify-content-md-center fst-italic fs-1 mb-2">
                            Experience
                        </div>
                        @if (experiences == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            @foreach (var experience in experiences)
                            {
                                <div class="row justify-content-md-center mb-3">
                                    <div class="card w-75 p-3 ps-4 pe-4 rounded">
                                        <p class="fs-6 fw-lighter card-subtitle p-0"> @experience.StartYear – @experience.EndYear</p>
                                        <p class="fs-5 card-title m-0">@experience.Title - @experience.Company</p>
                                        <p class="fs-6 fw-lighter card-text">@experience.Details</p>
                                    </div>
                                </div>
                            }
                        }

                    }
                    else if (isProjects)
                    {
                       <div class="row justify-content-md-center fst-italic fs-1 mb-2">Projects</div>

                        @if (projects == null)
                        {
                            <p>Loading projects...</p>
                        }
                        else
                        {
                            @foreach (var project in projects)
                            {
                                <div class="row justify-content-md-center mb-3">
                                    <div class="card w-75 p-3 ps-4 pe-4 rounded">
                
                                        <p class="fs-5 card-title m-0">@project.Title</p>

                                        @foreach (var desc in project.Descriptions)
                                        {
                                            <p class="fs-6 fw-lighter card-text">@((MarkupString)FormatDescription(desc))</p>
                                        }

                                        @if (project.Links?.Any() == true)
                                        {
                                            <div class="mt-2 align-self-end">
                                                @foreach (var link in project.Links)
                                                {
                                                    @switch (link.Type)
                                                    {
                                                        case "external":
                                                            <a class="me-2" href="@link.Url">@link.Label</a>
                                                            break;
                                                        case "internal":
                                                            <a class="mt-2 " href=""@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-code" viewBox="0 0 16 16">
                                                                  <path d="M6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0a.5.5 0 1 0-.708.708L10.293 8 8.646 9.646a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708z"/>
                                                                  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"/>
                                                                </svg>
                                                            </a>
                                                            break;
                                                        case "github":
                                                            <a class="mt-2" href="@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
                                                                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
                                                                </svg>
                                                            </a>
                                                            break;

                                                    }
                                                }
                                            </div>
                                        }
                                    </div>
                                </div>
                            }
                        }
                    
                    }
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

<!-- View 4: Mobile View -->
<div class="container card rounded border-0 d-block d-md-none mx-auto mt-4 mb-3">
    <h1 class="fst-italic fw-light fs-1 font-monospace pt-2">Hello, World!</h1>

    <div class="row">
        <div class="card border-0">
            <div class="clearfix">
                <img src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg"
                     class="mobile-profile float-start me-3 mb-2" />

                <p class="fs-6 mb-0">
                    I am a full-stack web developer with additional experience in Data Analysis and Visualization,
                    as well as Simulation/ VR development, and AI/ ML programming. I am a friendly team worker with
                    strong analytical, math and problem-solving skills that adapts well to an Agile/SCRUM environment
                    and development lifecycle.
                </p>
            </div>
        </div>
    </div>

@*     <div class="row mb-3 bg-info rounded rounded-5 pt-1 pb-1">
        <p class="fw-lighter fs-6 text-nowrap p-0 m-auto text-center text-white">
            Organized • Responsible • Meticulous • Analytical • Self-motivating
        </p>
    </div> *@
    
    <hr class="text-primary" />

    <!-- Education -->
    <div class="row mb-3 ms-2 me-2 ">
        <div class="card p-2 ps-3 pe-3 border border-1 border-primary rounded rounded-1">
            <p class="fs-6 fw-lighter card-subtitle m-0">September 2018 – March 2022</p>
            <p class="fs-4 card-title m-0">B.S. in Computer Science</p>
            <p class="fs-6 fw-lighter card-subtitle">Oregon State University</p>
            <p class="fs-6 fw-lighter card-subtitle">Graduated Cum Laude</p>
            <p class="fs-6 fw-lighter card-subtitle">Dean’s List: Fall 2020, Fall 2021</p>
            <p class="fs-6 fw-lighter card-subtitle">Final GPA: 3.33</p>
        </div>
    </div>

    <!-- Skills \ Languages -->
    <div class="row mb-3 ms-2 me-2">
        <div class="bg-primary-subtle rounded p-2 border-0">
            <div class="card-header text-bg-primary text-light fs-3">
                Skills \ Languages
            </div>
            <div class="overflow-auto" style="max-height: 15rem">
                @if (skills == null)
                            {
                                <div>Loading...</div>
                            }
                            else
                            {
                                <ul class="list-group list-group-flush">
                                    @foreach (var skill in skills)
                                    {
                                        <li class="list-group-item">@skill</li>
                                    }
                                </ul>
                            }
            </div>
        </div>
    </div>

    <!-- Technology -->
    <div class="row mb-3 ms-2 me-2">
        <div class="bg-primary-subtle rounded p-2 border-0">
            <div class="card-header text-bg-primary text-light fs-3">
                Technology
            </div>
            <div class="overflow-auto" style="max-height: 15rem">
                @if (tools == null)
                {
                    <div>Loading...</div>
                }
                else
                {
                    <ul class="list-group list-group-flush">
                        @foreach (var tool in tools)
                        {
                            <li class="list-group-item">@tool</li>
                        }
                    </ul>
                }
            </div>
        </div>
    </div>

    <!-- Experience \ Projects -->
    <div class="row mb-3 ms-2 me-2">
        <div class="col card border-0 rounded rounded-4 pt-3 ">
            <!-- Button Bay-->
            <div class="row mt-2">
                <div class="d-flex justify-content-evenly">
                    <button class="btn rounded-4 flex-fill  @(isExperience ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleExperience()">Experience</button>
                    <button class="btn rounded-4 flex-fill  @(isProjects ? "btn-primary" : "btn-outline-primary")" type="button" @onclick="() => ToggleProjects()">Projects</button>
                </div>
            </div>
             @if (isExperience)
                {
                    <div class="row justify-content-center fst-italic fs-1 mt-2">
                        Experience
                    </div>
                    @if (experiences == null)
                    {
                        <div>Loading...</div>
                    }
                    else
                    {
                         <div class="overflow-auto" style="max-height: 16rem">

                            <ul class="list-group list-group-flush">
                                @foreach (var experience in experiences)
                                {
                                    <div class=" justify-content-md-center">
                                        <div class="card p-3 ps-4 pe-4 rounded">
                                            <p class="fs-6 fw-lighter card-subtitle p-0"> @experience.StartYear – @experience.EndYear</p>
                                            <p class="fs-5 card-title m-0">@experience.Title - @experience.Company</p>
                                            <p class="fs-6 fw-lighter card-text">@experience.Details</p>
                                        </div>
                                    </div>
                                }
                            </ul>
                        </div>
                    }

                }
                else if (isProjects)
                {
                    <div class="row justify-content-center fst-italic fs-1 mt-2">Projects</div>

                    <div class="overflow-auto" style="max-height: 16rem">

                        <ul class="list-group list-group-flush">
                            @foreach (var project in projects)
                            {
                                <div class="justify-content-center">
                                    <div class="card p-3 ps-4 pe-4 rounded">
                
                                        <p class="fs-5 card-title m-0">@project.Title</p>

                                        @foreach (var desc in project.Descriptions)
                                        {
                                            <p class="fs-6 fw-lighter card-text">@((MarkupString)FormatDescription(desc))</p>
                                        }

                                        @if (project.Links?.Any() == true)
                                        {
                                            <div class="mt-2 align-self-end">
                                                @foreach (var link in project.Links)
                                                {
                                                    @switch (link.Type)
                                                    {
                                                        case "external":
                                                            <a class="me-2" href="@link.Url">@link.Label</a>
                                                            break;
                                                        case "internal":
                                                            <a class="mt-2 " href=""@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-code" viewBox="0 0 16 16">
                                                                  <path d="M6.646 5.646a.5.5 0 1 1 .708.708L5.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0a.5.5 0 1 0-.708.708L10.293 8 8.646 9.646a.5.5 0 0 0 .708.708l2-2a.5.5 0 0 0 0-.708z"/>
                                                                  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1"/>
                                                                </svg>
                                                            </a>
                                                            break;
                                                        case "github":
                                                            <a class="mt-2" href="@link.Url">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
                                                                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
                                                                </svg>
                                                            </a>
                                                            break;

                                                    }
                                                }
                                            </div>
                                        }
                                    </div>
                                </div>
                            }
                                
                        
                        </ul>
                    </div>
                    
                }
        </div>
    </div>
   

</div>