842 lines
43 KiB
Plaintext
842 lines
43 KiB
Plaintext
@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>
|
||
|