Compare commits
4 Commits
9c6b86371b
...
3392e086b8
| Author | SHA1 | Date | |
|---|---|---|---|
|
3392e086b8 | ||
|
|
f638c29272 | ||
|
|
c95c1c591c | ||
|
|
244f8c7971 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1 @@
|
||||
**/target
|
||||
src/resume.html
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<div class="main_body"><p>This page has not yet been filled out. Sorry!</p></div>
|
||||
<div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
|
||||
<include src="includes/tailer.html" />
|
||||
</div>
|
||||
<div class="pane_spacer">
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<div class="main_body">
|
||||
<div class="body">
|
||||
<p>There are currently no acknowledgements</p>
|
||||
<p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
|
||||
<p>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<div class="main_body">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<h1 class="title">Blog</h1>
|
||||
<p class="date">Last Edited: 03 August, 2025</p>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_blog">
|
||||
<div class="blog_body">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<h1 class="title">Divergent Pathways</h1>
|
||||
<p class="date">Posted: 29 July, 2025</p>
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<div class="main_body">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<h1 class="title">Disclosure</h1>
|
||||
<p class="date">Last Edited: 01 August, 2025</p>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="layout_row">
|
||||
<div class="item website_security">
|
||||
<div class="item">
|
||||
<h2 class="title">Website Security</h2>
|
||||
<p>
|
||||
This website uses a number of security features, most of which
|
||||
@@ -218,7 +218,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item cookies">
|
||||
<div class="item">
|
||||
<h2 class="title">Cookies</h2>
|
||||
<p>
|
||||
This website only leaves cookies that are required for the
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>400</h1>
|
||||
<h2>Bad Request!</h2>
|
||||
<hr />
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>401</h1>
|
||||
<h2>Unauthorized!</h2>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>403</h1>
|
||||
<h2>Forbidden!</h2>
|
||||
<hr />
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>404</h1>
|
||||
<h2>Page not found!</h2>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>500</h1>
|
||||
<h2>Internal Server Error!</h2>
|
||||
<hr />
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>501</h1>
|
||||
<h2>Not Implemented!</h2>
|
||||
<hr />
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>502</h1>
|
||||
<h2>Bad Gateway!</h2>
|
||||
<hr />
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>503</h1>
|
||||
<h2>Service Unavailable!</h2>
|
||||
<hr />
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_error">
|
||||
<div class="error_body">
|
||||
<div class="body">
|
||||
<h1>504</h1>
|
||||
<h2>Gateway Timeout!</h2>
|
||||
<hr />
|
||||
|
||||
11
src/includes/_unused_menu_entries.html
Normal file
11
src/includes/_unused_menu_entries.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!-- Minecraft -->
|
||||
<li class="nav_dropdown">
|
||||
<div class="dropdown_header nav_item">
|
||||
<a class="nav_title" href="/minecraft/">Minecraft</a>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
|
||||
<a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
|
||||
</div>
|
||||
</li>
|
||||
@@ -1,33 +1,21 @@
|
||||
<ul class="nav_menu">
|
||||
<!-- Home -->
|
||||
<li class="nav_body">
|
||||
<li class="nav_item">
|
||||
<a class="nav_title" href="/">Home</a>
|
||||
</li>
|
||||
|
||||
<li class="nav_body">
|
||||
<li class="nav_item">
|
||||
<a class="nav_title" href="/blog/">Blog</a>
|
||||
</li>
|
||||
|
||||
<!-- Minecraft -->
|
||||
<li class="nav_dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<a class="nav_title" href="/minecraft/">Minecraft</a>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
<div class="dropdown_body">
|
||||
<a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
|
||||
<a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- About -->
|
||||
<li class="nav_body"><a class="nav_title" href="/about.html">About</a></li>
|
||||
<li class="nav_item"><a class="nav_title" href="/about.html">About</a></li>
|
||||
|
||||
<!-- Pronoun Pages -->
|
||||
<li class="nav_dropdown">
|
||||
<a class="dropdown_header nav_body" href="https://pronouns.page/@Cutieguwu">
|
||||
<a class="dropdown_header nav_item" href="https://pronouns.page/@Cutieguwu">
|
||||
<p class="nav_title">Pronoun Pages</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</a>
|
||||
@@ -39,7 +27,7 @@
|
||||
|
||||
<!-- External Links -->
|
||||
<li class="nav_dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<div class="dropdown_header nav_item">
|
||||
<p class="nav_title">External Links</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
@@ -54,7 +42,7 @@
|
||||
|
||||
<!-- Public Services -->
|
||||
<li class="nav_dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<div class="dropdown_header nav_item">
|
||||
<p class="nav_title">Public Services</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
@@ -65,7 +53,7 @@
|
||||
|
||||
<!-- Services -->
|
||||
<li class="nav_dropdown">
|
||||
<div class="dropdown_header nav_body">
|
||||
<div class="dropdown_header nav_item">
|
||||
<p class="nav_title">Services</p>
|
||||
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||||
</div>
|
||||
@@ -77,10 +65,10 @@
|
||||
<hr />
|
||||
|
||||
<!-- Website Disclosure -->
|
||||
<li class="nav_body">
|
||||
<li class="nav_item">
|
||||
<a class="nav_title" href="/disclosure.html">Disclosure</a>
|
||||
</li>
|
||||
<li class="nav_body">
|
||||
<li class="nav_item">
|
||||
<a class="nav_title" href="/acknowledgements.html">Acknowledgements</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<div class="main_body">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<h1 class="title">Home</h1>
|
||||
<p class="date">Last Edited: 03 August, 2025</p>
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
.chunk_list,
|
||||
.pane_main .main_body .chunk_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
/*
|
||||
All specificities to do with Chunk Lists are a disaster.
|
||||
|
||||
Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
|
||||
*/
|
||||
|
||||
.chunk_list {
|
||||
display: grid;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.chunk + .chunk {
|
||||
margin-top: var(--spacing-horizontal);
|
||||
}
|
||||
|
||||
.chunk {
|
||||
.header {
|
||||
width: inherit;
|
||||
|
||||
> .header {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 1fr min-content;
|
||||
@@ -24,10 +30,7 @@
|
||||
|
||||
text-align: start;
|
||||
|
||||
/*width: calc(100% - calc(var(--spacing-horizontal) * 2));*/
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
width: inherit;
|
||||
|
||||
.name,
|
||||
.subtitle,
|
||||
@@ -35,10 +38,6 @@
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: inline-block;
|
||||
|
||||
@@ -58,7 +57,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
> .body {
|
||||
padding: 0 calc(var(--spacing-horizontal) * 2);
|
||||
|
||||
ul {
|
||||
@@ -71,3 +70,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.chunk_list .chunk {
|
||||
> .header {
|
||||
column-gap: var(--spacing-horizontal);
|
||||
}
|
||||
|
||||
> .body {
|
||||
/* Collapse the L/R padding to maximize usable space */
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
|
||||
--spacing-horizontal: 0.75rem;
|
||||
--spacing-menu-gap: 1rem;
|
||||
--spacing-thicc: calc(var(--margin-pane) * 4);
|
||||
|
||||
--transition-fade: 0.4s ease-out;
|
||||
--transition-cut: none;
|
||||
@@ -109,9 +110,37 @@ ion-icon {
|
||||
/* Adds a margin otherwise for some reason. */
|
||||
margin: inherit;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-auto-flow: column dense;
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.viewport {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: none;
|
||||
|
||||
/* Compress spacings to maximize useable area. */
|
||||
padding: var(--spacing-horizontal);
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.pane_nav,
|
||||
.pane_spacer,
|
||||
.footer {
|
||||
position: static;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.pane_nav,
|
||||
.pane_main,
|
||||
.pane_blog,
|
||||
.pane_error,
|
||||
.pane_spacer {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.italic {
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
.layout_row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: var(--spacing-horizontal);
|
||||
|
||||
.item {
|
||||
margin: var(--spacing-horizontal);
|
||||
padding: calc(var(--spacing-horizontal) * 2);
|
||||
|
||||
background-color: var(--background-1);
|
||||
@@ -15,3 +14,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout_row + .layout_row {
|
||||
margin-top: var(--spacing-horizontal);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.layout_row {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@use "blog_recent_posts";
|
||||
|
||||
@use "page_disclosure";
|
||||
@use "page_resume";
|
||||
|
||||
@@ -3,5 +3,6 @@
|
||||
|
||||
.recent_posts .chunk .header {
|
||||
background-color: var(--background-1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,5 @@
|
||||
|
||||
.location_page {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,8 +20,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nav_body {
|
||||
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
|
||||
.nav_item {
|
||||
/*
|
||||
Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element.
|
||||
*/
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -30,8 +32,8 @@
|
||||
transition: var(--transition-fade);
|
||||
}
|
||||
|
||||
.nav_body:hover,
|
||||
.nav_dropdown:hover .nav_body {
|
||||
.nav_item:hover,
|
||||
.nav_dropdown:hover .nav_item {
|
||||
transform: var(--transform-scale-x);
|
||||
transition: var(--transition-cut);
|
||||
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
background-color: var(--background-2);
|
||||
|
||||
transition: var(--transition-fade);
|
||||
margin: 0;
|
||||
|
||||
ion-icon {
|
||||
width: var(--item-size);
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
margin: inherit;
|
||||
padding: 0 var(--spacing-horizontal);
|
||||
transition: var(--transition-fade);
|
||||
/*text-transform: uppercase;*/
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
.website_security,
|
||||
.cookies {
|
||||
max-width: 44%;
|
||||
}
|
||||
@@ -1,37 +1,49 @@
|
||||
.pane_details {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
.spacer_container {
|
||||
height: min-content !important;
|
||||
width: 100%;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer_contact {
|
||||
justify-content: start !important;
|
||||
|
||||
.contact_info .chunk .header {
|
||||
background-color: var(--background-1);
|
||||
|
||||
white-space: nowrap;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.about_me {
|
||||
padding: 0 var(--spacing-thicc) var(--spacing-horizontal);
|
||||
}
|
||||
|
||||
.early_history {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.work_history,
|
||||
.education {
|
||||
.chunk_list {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
}
|
||||
|
||||
.awards,
|
||||
.certifications,
|
||||
.education,
|
||||
.work_history {
|
||||
max-width: 44%;
|
||||
}
|
||||
|
||||
.software,
|
||||
.prog_languages {
|
||||
.prog_languages,
|
||||
.software {
|
||||
* {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.software {
|
||||
max-width: 55%;
|
||||
|
||||
.premiere_pro {
|
||||
color: var(--accent-purple);
|
||||
.software_row {
|
||||
grid-template-columns: 60% auto;
|
||||
}
|
||||
|
||||
.photoshop {
|
||||
color: var(--accent-blue);
|
||||
.software {
|
||||
.android {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.anubis {
|
||||
@@ -54,14 +66,22 @@
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.libreoffice {
|
||||
.ios {
|
||||
color: var(--white-0);
|
||||
}
|
||||
|
||||
.libreoffice {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.linux {
|
||||
color: var(--white-0);
|
||||
}
|
||||
|
||||
.macos {
|
||||
color: var(--white-0);
|
||||
}
|
||||
|
||||
.ms_office {
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
@@ -86,6 +106,14 @@
|
||||
color: var(--white-0);
|
||||
}
|
||||
|
||||
.photoshop {
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.premiere_pro {
|
||||
color: var(--accent-purple);
|
||||
}
|
||||
|
||||
.prusaslicer {
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
@@ -105,8 +133,6 @@
|
||||
}
|
||||
|
||||
.prog_languages {
|
||||
max-width: 30%;
|
||||
|
||||
.asciidoc {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
@@ -168,3 +194,14 @@
|
||||
|
||||
color: #1d63edff;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.awards,
|
||||
.certifications,
|
||||
.education,
|
||||
.prog_languages,
|
||||
.software,
|
||||
.work_history {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.blog_body {
|
||||
> .body {
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
padding-top: var(--spacing-horizontal);
|
||||
|
||||
.header {
|
||||
> .header {
|
||||
text-align: center;
|
||||
padding: var(--spacing-horizontal);
|
||||
width: min-content;
|
||||
@@ -38,11 +38,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
> .body {
|
||||
text-align: start;
|
||||
|
||||
padding: 0 calc(var(--margin-pane) * 4)
|
||||
calc(var(--margin-pane) * 4);
|
||||
padding: 0 var(--spacing-thicc) var(--spacing-thicc);
|
||||
|
||||
p {
|
||||
color: var(--white-1);
|
||||
@@ -50,3 +49,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.pane_blog {
|
||||
width: 100%;
|
||||
|
||||
.body > .body {
|
||||
padding: var(--spacing-horizontal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
margin: auto; /* center object */
|
||||
|
||||
.error_body,
|
||||
> .body,
|
||||
.tailer {
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
@@ -14,3 +14,12 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.pane_error {
|
||||
width: 100%;
|
||||
|
||||
margin-top: var(--margin-pane);
|
||||
margin-bottom: var(--margin-pane);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,17 @@
|
||||
@use "a_tailer";
|
||||
|
||||
.pane_main {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
|
||||
margin: var(--margin-pane);
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.main_body {
|
||||
> .body {
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--border-radius-leaf);
|
||||
padding: var(--spacing-horizontal);
|
||||
|
||||
.header {
|
||||
> .header {
|
||||
text-align: center;
|
||||
padding: var(--spacing-horizontal);
|
||||
width: min-content;
|
||||
|
||||
white-space: nowrap;
|
||||
width: max-content;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
@@ -38,7 +31,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
> .body {
|
||||
text-align: start;
|
||||
|
||||
p {
|
||||
@@ -47,3 +40,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.pane_main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,20 +5,25 @@
|
||||
|
||||
.pane_nav {
|
||||
margin: var(--margin-pane);
|
||||
padding: 0;
|
||||
|
||||
width: min-content;
|
||||
height: min-content;
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-template-rows: auto auto auto 1fr max-content;
|
||||
grid-template-rows: repeat(4, min-content);
|
||||
gap: var(--spacing-menu-gap);
|
||||
align-content: start;
|
||||
|
||||
position: sticky;
|
||||
top: var(--margin-pane);
|
||||
bottom: var(--margin-pane);
|
||||
left: 0;
|
||||
left: var(--margin-pane);
|
||||
|
||||
color: var(--accent-pink);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.pane_nav {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
.pane_spacer {
|
||||
margin: 0;
|
||||
padding: var(--margin-pane);
|
||||
margin: var(--margin-pane);
|
||||
|
||||
width: min-content;
|
||||
height: 100vh;
|
||||
height: calc(100vh - calc(var(--margin-pane) * 2));
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-flow: row dense;
|
||||
gap: var(--spacing-menu-gap);
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: var(--margin-pane);
|
||||
right: var(--margin-pane);
|
||||
|
||||
.spacer_container {
|
||||
margin: 0;
|
||||
padding: var(--spacing-horizontal);
|
||||
background-color: var(--background-2);
|
||||
height: 100%;
|
||||
@@ -31,3 +29,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.pane_spacer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
557
src/resume.html
Normal file
557
src/resume.html
Normal file
@@ -0,0 +1,557 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en-ca">
|
||||
<head>
|
||||
<title>Resume | Cutieguwu</title>
|
||||
<meta name="robots" content="noindex" />
|
||||
<include src="includes/meta.html" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewport">
|
||||
<nav class="pane_nav">
|
||||
<include src="includes/nav_logo.html" />
|
||||
<include src="includes/nav_menu.html" />
|
||||
<div class="location">
|
||||
<h4 class="location_header">You are here:</h4>
|
||||
<h5 class="location_page">Resume</h5>
|
||||
</div>
|
||||
<include src="includes/nav_quick_links.html" />
|
||||
</nav>
|
||||
<div class="pane_main">
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<h1 class="title">Olivia Brooks</h1>
|
||||
<p class="date">Last Edited: 08 August, 2025</p>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="about_me">
|
||||
<p>
|
||||
Hello, I'm Olivia Brooks. I am a passionate, hard-working, and
|
||||
dependable individual with an inate interest in sharing and
|
||||
expanding my knowledge and expertise.
|
||||
</p>
|
||||
<p>
|
||||
I have extensive experience in both leadership and non-leadership
|
||||
positions across a variety of contexts. This has allowed me to
|
||||
develop a wide range of skills which I draw upon daily to rapidly
|
||||
develop new understandings. This additionally gives me the capacity
|
||||
to interact and excel in unfamiliar situations and novel endeavours.
|
||||
</p>
|
||||
<p>
|
||||
I am always willing to lend a hand where I can, no matter the
|
||||
learning curve ahead.
|
||||
</p>
|
||||
<p>
|
||||
For the better part of a decade, I've specced, built, identified and
|
||||
removed bottlenecks, and breathed new life into both desktops and
|
||||
laptops. I have experience with all major operating systems
|
||||
including Windows, Linux, MacOS, Android, and iOS. My experience
|
||||
includes interaction with hardware and software from a variety of
|
||||
vendors, architectures, and ecosystems, big and niche.
|
||||
</p>
|
||||
<p>
|
||||
I sincerely appreciate your consideration of me as a candidate, and
|
||||
look forward to hearing from you.
|
||||
</p>
|
||||
</div>
|
||||
<!--
|
||||
Add a table of contents?... or just one disguised as a few shortcuts.
|
||||
Also make this look less long by making chunks into dropdowns.
|
||||
-->
|
||||
<div class="layout_row">
|
||||
<div class="item work_history">
|
||||
<h2 class="title">Work History</h2>
|
||||
<div class="chunk_list">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">OTHS Tech Crew</h3>
|
||||
<span class="subtitle"
|
||||
>September 2024 - June 2025</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>Project Manager</p>
|
||||
<ul>
|
||||
<li>
|
||||
First year that the crew was entirely
|
||||
student-led.
|
||||
</li>
|
||||
<li>Identified project scope and requirements.</li>
|
||||
<li>Ensured timely completion of tasks.</li>
|
||||
<li>
|
||||
Coordinated crew setup and take-down efforts.
|
||||
</li>
|
||||
<li>
|
||||
Effectively worked around live program changes
|
||||
and weather patterns.
|
||||
</li>
|
||||
<li>Additionally handled equipment maintenance.</li>
|
||||
<li>Acted as administrative liason.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Farmers' Market</h3>
|
||||
<span class="subtitle"
|
||||
>Wee Youngn' - 2020, Summer 2023</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>Volunteer - Various Roles</p>
|
||||
<ul>
|
||||
<li>
|
||||
Started as a young child attracting customers to
|
||||
a fudge stall by looking cute with divine,
|
||||
glorious red hair.
|
||||
</li>
|
||||
<li>Handled the sale of goods.</li>
|
||||
<li>
|
||||
Handled the preparation of farm-grown goods.
|
||||
</li>
|
||||
<li>Stocked the displays.</li>
|
||||
<li>
|
||||
Ran the Kids' Corner activities. (Summer 2023)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">MPS Audio-Visual Club</h3>
|
||||
<span class="subtitle">September 2018 - 2020</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>Supervisor</p>
|
||||
<ul>
|
||||
<li>Identified project scope and requirements.</li>
|
||||
<li>Ensured timely completion of tasks.</li>
|
||||
<li>
|
||||
Coordinated crew setup and take-down efforts.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Education -->
|
||||
<div class="item education">
|
||||
<h2 class="title">Education</h2>
|
||||
<div class="chunk_list">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Carleton University</h3>
|
||||
<span class="subtitle"
|
||||
>September 2025 to Present - Ottawa, ON</span
|
||||
>
|
||||
</div>
|
||||
<h3 class="status">IN PROGRESS</h3>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>Bachelor of Arts (Honours)</p>
|
||||
<ul>
|
||||
<li>Major in Psychology</li>
|
||||
<li>
|
||||
[Intended] Minor in Women's and Gender Studies
|
||||
</li>
|
||||
<li>
|
||||
Concentration in Social/Personality Psychology
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Osgoode Township High School</h3>
|
||||
<span class="subtitle"
|
||||
>September 2021 to 2025 - Ottawa, ON</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>Gr. 9 to Gr. 12</p>
|
||||
<ul>
|
||||
<li>French Immersion Studies</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Air Cadets, Squadron 742</h3>
|
||||
<span class="subtitle"
|
||||
>November 2019 to September 2022 - Ottawa,
|
||||
ON</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>Sergeant</p>
|
||||
<ul>
|
||||
<li>Drone Pilot Training Course (August 2022)</li>
|
||||
<li>Cadet Actitivy Program (August 2022)</li>
|
||||
<li>Poppy Drive (November 2021)</li>
|
||||
<li>Music (June - July 2021)</li>
|
||||
<li>Music (March 2021)</li>
|
||||
<li>Music (August 2020)</li>
|
||||
<li>Web Programming (April 2020)</li>
|
||||
<li>Advanced Cybertraining Course (August 2020)</li>
|
||||
<li>
|
||||
Cadet Band Member (September 2020 - February
|
||||
2022)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="early_history">
|
||||
Earlier history available by request.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_row">
|
||||
<!-- Awards -->
|
||||
<div class="item awards">
|
||||
<h2 class="title">Awards</h2>
|
||||
<div class="chunk_list">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Ontario Scholar</h3>
|
||||
<span class="subtitle"
|
||||
>Obtained an average of at least eighty percent
|
||||
in any six applicable Grade 12 courses.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Silver Medalist</h3>
|
||||
<span class="subtitle">Average over 90%</span>
|
||||
</div>
|
||||
<h3 class="status">x2</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Double Blue</h3>
|
||||
<span class="subtitle">80% or Greater Average</span>
|
||||
</div>
|
||||
<h3 class="status">x4</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">Subject Awards</h3>
|
||||
<span class="subtitle"
|
||||
>Greatest Achievement for the Academic
|
||||
Year</span
|
||||
>
|
||||
</div>
|
||||
<h3 class="status">x4</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="early_history">
|
||||
Queries about awards available by request.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Certifications -->
|
||||
<div class="item certifications">
|
||||
<h2 class="title">Certifications and Diplomas</h2>
|
||||
<div class="chunk_list">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<h3 class="name">Ontario Secondary School Diploma</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<h3 class="name">DELF</h3>
|
||||
<h3 class="status">Niveau B2</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<h3 class="name">Red Cross Swimming</h3>
|
||||
<h3 class="status">Level 10</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<h3 class="name">Canadian Firearms Safety Course</h3>
|
||||
<h3 class="status">PAL</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="early_history">
|
||||
Queries about certifications available by request.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_row software_row">
|
||||
<!-- Software and Prog. Languages -->
|
||||
<!-- Software -->
|
||||
<div class="item software">
|
||||
<h2 class="title">Software</h2>
|
||||
<div class="quick_links">
|
||||
<a href="">
|
||||
<ion-icon name="logo-android" class="android"></ion-icon>
|
||||
<p>Android</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="globe-outline" class="anubis"></ion-icon>
|
||||
<p>Anubis</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="cube-outline" class="blender"></ion-icon>
|
||||
<p>Blender</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="color-filter-outline"
|
||||
class="davinci_resolve"
|
||||
></ion-icon>
|
||||
<p>DaVinci Resolve</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-docker" class="docker"></ion-icon>
|
||||
<p>Docker</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="image-outline" class="gimp"></ion-icon>
|
||||
<p>GIMP</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="git-branch-outline" class="git"></ion-icon>
|
||||
<p>Git</p>
|
||||
</a>
|
||||
<a href="https://gitea.cutieguwu.ca">
|
||||
<ion-icon name="cafe-outline" class="gitea"></ion-icon>
|
||||
<p>Gitea</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-github" class="github"></ion-icon>
|
||||
<p>Github</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-apple" class="ios"></ion-icon>
|
||||
<p>iOS</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="document-outline"
|
||||
class="libreoffice"
|
||||
></ion-icon>
|
||||
<p>LibreOffice</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-tux" class="linux"></ion-icon>
|
||||
<p>Linux</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-apple" class="macos"></ion-icon>
|
||||
<p>MacOS</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="apps-outline" class="ms_office"></ion-icon>
|
||||
<p>MS Office</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-windows" class="ms_windows"></ion-icon>
|
||||
<p>MS Windows</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="musical-notes" class="musescore"></ion-icon>
|
||||
<p>MuseScore</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="apps-outline" class="nextcloud"></ion-icon>
|
||||
<p>Nextcloud</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="globe-outline" class="nginx"></ion-icon>
|
||||
<p>Nginx</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="aperture-outline" class="obs"></ion-icon>
|
||||
<p>OBS</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="image-outline" class="photoshop"></ion-icon>
|
||||
<p>Photoshop</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="film-outline"
|
||||
class="premiere_pro"
|
||||
></ion-icon>
|
||||
<p>Premiere Pro</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="layers-outline"
|
||||
class="prusaslicer"
|
||||
></ion-icon>
|
||||
<p>PrusaSlicer</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="keypad-outline"
|
||||
class="shopbot_control_software"
|
||||
></ion-icon>
|
||||
<p>ShopBot Control Software</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="play-skip-forward-outline"
|
||||
class="vectric_aspire"
|
||||
></ion-icon>
|
||||
<p>Vectric Aspire</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="document-attach-outline"
|
||||
class="zotero"
|
||||
></ion-icon>
|
||||
<p>Zotero</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Prog. Languages -->
|
||||
<div class="item prog_languages">
|
||||
<h2 class="title">Prog. Languages</h2>
|
||||
<div class="quick_links">
|
||||
<a href="">
|
||||
<ion-icon
|
||||
name="document-text-outline"
|
||||
class="asciidoc"
|
||||
></ion-icon>
|
||||
<p>AsciiDoc</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-css3" class="css"></ion-icon>
|
||||
<p>CSS</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-docker" class="docker"></ion-icon>
|
||||
<p>Docker Compose</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-html5" class="html"></ion-icon>
|
||||
<p>HTML</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="shapes-outline" class="json"></ion-icon>
|
||||
<p>JSON</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-markdown" class="markdown"></ion-icon>
|
||||
<p>Markdown</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="globe-outline" class="nginx"></ion-icon>
|
||||
<p>Nginx</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-python" class="python"></ion-icon>
|
||||
<p>Python</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="shapes-outline" class="ron"></ion-icon>
|
||||
<p>RON</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="cog-outline" class="rust"></ion-icon>
|
||||
<p>Rust</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="logo-sass" class="scss"></ion-icon>
|
||||
<p>SCSS</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="shapes-outline" class="toml"></ion-icon>
|
||||
<p>TOML</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="terminal-outline" class="shell"></ion-icon>
|
||||
<p>[Bash] Shell</p>
|
||||
</a>
|
||||
<a href="">
|
||||
<ion-icon name="shapes-outline" class="yaml"></ion-icon>
|
||||
<p>YAML</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<include src="includes/tailer.html" />
|
||||
</div>
|
||||
<div class="pane_spacer pane_details">
|
||||
<div class="spacer_container spacer_contact">
|
||||
<h2>Contact Info</h2>
|
||||
<div class="chunk_list contact_info">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">
|
||||
<a href="mailto:olivia.a.brooks77@gmail.com"> Email </a>
|
||||
</h3>
|
||||
<span class="subtitle">olivia.a.brooks77@gmail.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer_container spacer_contact">
|
||||
<h2>Spoken Languages</h2>
|
||||
<div class="chunk_list contact_info">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">English</h3>
|
||||
<span class="subtitle">Fluent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">French</h3>
|
||||
<span class="subtitle">DELF B2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer_container spacer_contact">
|
||||
<h2>References</h2>
|
||||
<div class="chunk_list contact_info">
|
||||
<div class="chunk">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3 class="name">By Request</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<include src="includes/footer.html" />
|
||||
<include src="includes/scripts.html" />
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user