357 lines
15 KiB
Plaintext
357 lines
15 KiB
Plaintext
@page "/"
|
||
@inject IHttpClientFactory ClientFactory
|
||
|
||
@attribute [StreamRendering]
|
||
@rendermode InteractiveServer
|
||
|
||
<PageTitle>Home</PageTitle>
|
||
|
||
<div class="container d-none d-lg-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">
|
||
<div class="col-auto ">
|
||
<img class="card-img rounded-3" style="width: 18em;" src="https://i.pinimg.com/736x/54/63/ed/5463ed9471053712a76c0dd0b301a7ea.jpg" />
|
||
</div>
|
||
<div class="col ">
|
||
<!-- About Me-->
|
||
<div class="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 ">
|
||
<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 ">
|
||
<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: 20rem">
|
||
@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 ">
|
||
<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: 20rem">
|
||
@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>
|
||
|
||
<div class="row ">
|
||
<div class="col card border-0 rounded rounded-4 pt-3 pb-3">
|
||
<!-- Button Bay-->
|
||
<div class="row ">
|
||
<div class="d-grid gap-2 d-md-flex justify-content-md-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">Experience</div>
|
||
<div class="row card">
|
||
<div>Stuff</div>
|
||
</div>
|
||
}
|
||
else if (isProjects)
|
||
{
|
||
<div class="row justify-content-md-center fst-italic fs-1">Projects</div>
|
||
<div class="row card">
|
||
<div>Stuff</div>
|
||
</div>
|
||
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Desktop B: 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: 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>
|
||
|
||
|
||
|
||
<!-- Desktop C: Mobile View -->
|
||
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm pb-2">
|
||
<h1 class="fst-italic fw-light fs-1 font-monospace">Hello, World!</h1>
|
||
|
||
<div class="row">
|
||
<div class="card 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" />
|
||
|
||
<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" />
|
||
|
||
<div class="row mb-3 ms-2 me-2 ">
|
||
<div class="card p-2 ps-3 pe-3 border border-1 border-primary">
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
</div>
|
||
|