Add resume.

This commit is contained in:
Cutieguwu
2025-08-08 14:26:10 -04:00
parent 244f8c7971
commit c95c1c591c
4 changed files with 651 additions and 29 deletions

View File

@@ -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 {

View File

@@ -1,37 +1,49 @@
.early_history {
align-self: center;
}
.pane_details {
display: flex !important;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
.work_history,
.education {
.chunk_list {
flex-direction: column-reverse !important;
.spacer_container {
height: min-content !important;
width: 100%;
padding-top: 0 !important;
}
}
.awards,
.certifications,
.education,
.work_history {
max-width: 44%;
.spacer_contact {
justify-content: start !important;
.contact_info .chunk .header {
background-color: var(--background-1);
white-space: nowrap;
text-align: justify;
}
}
.software,
.prog_languages {
.about_me {
padding: 0 var(--spacing-thicc) var(--spacing-horizontal);
}
.early_history {
justify-self: center;
}
.prog_languages,
.software {
* {
margin: 0.5rem;
}
}
.software_row {
grid-template-columns: 60% auto;
}
.software {
max-width: 55%;
.premiere_pro {
color: var(--accent-purple);
}
.photoshop {
color: var(--accent-blue);
.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%;
}
}

557
src/resume.html Normal file
View 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>