@ -0,0 +1,17 @@ |
||||
--- |
||||
awards: |
||||
- id: perfy |
||||
image: jobs/google/bazel.png |
||||
role: Google (Bazel) |
||||
name: Bronze Perfy |
||||
description: Part of tooling team for Google-wide migration |
||||
- id: python-readability |
||||
image: jobs/google/google.png |
||||
role: Google |
||||
name: py-readability |
||||
description: High-quality, well-structured Python code |
||||
- id: deans-list |
||||
image: education/rpi.jpg |
||||
role: RPI |
||||
name: Dean's List |
||||
description: Had consistently high GPA for each semester |
@ -0,0 +1,27 @@ |
||||
--- |
||||
methods: |
||||
- id: us-phone |
||||
name: US phone number |
||||
text: "+1-000-000-0000" |
||||
link: tel:+01- |
||||
img: contacts/us.svg |
||||
- id: jp-phone |
||||
name: JP phone number |
||||
text: "+81-00-0000-0000" |
||||
link: tel:+81- |
||||
img: contacts/japan.svg |
||||
- id: address |
||||
name: Permanent address |
||||
text: Manhattan, NY, USA |
||||
link: https://goo.gl/maps/vPM5FrX9ut7fjQ1MA |
||||
img: contacts/home.svg |
||||
- id: resume |
||||
name: Full resume website |
||||
text: resume.reya.zone |
||||
link: https://resume.reya.zone |
||||
img: contacts/www.svg |
||||
- id: github |
||||
name: Github username |
||||
text: programmablereya |
||||
link: https://github.com/programmablereya |
||||
img: contacts/github.png |
@ -0,0 +1,20 @@ |
||||
--- |
||||
programs: |
||||
- id: rpi |
||||
startDate: 2007-08-15 # approximate date, I don't remember that far back |
||||
endDate: 2011-05-15 # approximate date, who knows |
||||
name: Dual B.S. (Computer & Systems Engineering, Computer Science) |
||||
institution: Rensselaer Polytechnic Institute |
||||
image: education/rpi.jpg |
||||
- id: tefl_ita |
||||
startDate: 2019-08-12 |
||||
endDate: 2019-10-21 |
||||
name: Teaching English as a Foreign Language (partial) |
||||
institution: International TEFL Academy |
||||
image: education/tefl_ita.png |
||||
- id: regis |
||||
startDate: 2003-09-15 # again how the heck should I know |
||||
endDate: 2007-06-15 # this was like ages and ages ago |
||||
name: high school diploma |
||||
institution: Regis High School |
||||
image: education/regis.jpeg |
@ -0,0 +1,76 @@ |
||||
--- |
||||
roles: |
||||
- id: bazel-configurability |
||||
image: jobs/google/bazel.png |
||||
name: Software Engineer # III |
||||
team: Bazel Configurability |
||||
company: Google |
||||
startDate: 2016-07-15 # vague guess - this was around when I would have |
||||
# started getting to work on reviewing configurability |
||||
# changes and getting up to speed on this team |
||||
endDate: 2019-10-04 # dead on, this was my last day at Google |
||||
shortDescription: | |
||||
Just buckets of trimming. |
||||
description: | |
||||
Let's see here. |
||||
What did I do on Configurability? |
||||
Besides _endless_ amounts of **trimming**? |
||||
achievements: |
||||
- id: trimming |
||||
description: | |
||||
I did _endless_ amounts of **trimming**. |
||||
- id: other |
||||
description: | |
||||
I did other stuff, **too**. |
||||
- id: bazel-release |
||||
image: jobs/google/bazel-old.png |
||||
name: Software Engineer in Test # II |
||||
team: Bazel Release Process |
||||
company: Google |
||||
startDate: 2013-09-15 # rough guess, since I was still working on Wallet in |
||||
# Q3 2013, but had fully transitioned to Bazel by |
||||
# Q3 2014 - but it hadn't gotten cold yet |
||||
endDate: 2017-06-15 # did I truly ever stop working on the release process? |
||||
# however, this is around when it stopped being my job |
||||
description: "The long version is, I did so much freaking junk on this thing." |
||||
shortDescription: "The short version is, a lot." |
||||
achievements: |
||||
- id: mentor |
||||
description: | |
||||
I taught Florian the secrets of releases. |
||||
- id: teach |
||||
description: | |
||||
I taught everyone else how to be sheriff. |
||||
- id: bazel-android |
||||
image: jobs/google/bazel-old.png |
||||
name: Software Engineer # II |
||||
team: Bazel Android Support |
||||
company: Google |
||||
startDate: 2013-09-15 # same as Bazel Release Process |
||||
endDate: 2016-11-15 # vague guess - this is around when my focus shifted to |
||||
# configurability full-time, since before that I was |
||||
# doing configurability as a side job and Android as a |
||||
# primary job |
||||
description: null |
||||
- id: google-tooling |
||||
image: jobs/google/google.png |
||||
name: Software Engineer in Test # II |
||||
team: Internal Tooling |
||||
company: Google |
||||
startDate: 2013-02-15 # rough guess, since Jon mentioned my work on the tool |
||||
# in Q3 2013 |
||||
# which was after I started the UI work in Summer |
||||
# which was after I'd been invited to start working on |
||||
# the project around midway through Q1 |
||||
endDate: 2017-12-18 # dead on, this is the day I got a peer bonus for |
||||
# helping with turning this down |
||||
description: null |
||||
- id: wallet-testing |
||||
image: jobs/google/wallet.jpg |
||||
name: Software Engineer in Test # II |
||||
team: Wallet Web Frontend |
||||
company: Google |
||||
startDate: 2011-07-18 # dead on, this was my start date |
||||
endDate: 2013-09-15 # same as with the Bazel Release Process start date, |
||||
# since they're the same day |
||||
description: null |
@ -1,10 +0,0 @@ |
||||
{ |
||||
"title": "Marissa Staib | Resume", |
||||
"description": "Skills, education, and experience for Marissa Staib in software." |
||||
"url": "https://resume.reya.zone", |
||||
"cardimage_path": "/img/edupatilla-mari-image.png", |
||||
"contact": { |
||||
"email": "mari.soft@reya.zone", |
||||
"twitter": "GossipyReya" |
||||
} |
||||
} |
@ -0,0 +1,6 @@ |
||||
--- |
||||
title: Marissa Staib |
||||
description: Skills, education, and experience for Marissa Staib in software. |
||||
url: https://resume.reya.zone |
||||
cardimage_path: "/img/snaximation-mari.png" |
||||
twitter: GossipyReya |
@ -0,0 +1,66 @@ |
||||
--- |
||||
proficiency: |
||||
- label: Beginner (0 of 5) |
||||
image: proficiency/0_beginner.svg |
||||
- label: Novice (1 of 5) |
||||
image: proficiency/1_novice.svg |
||||
- label: Intermediate (2 of 5) |
||||
image: proficiency/2_intermediate.svg |
||||
- label: Experienced (3 of 5) |
||||
image: proficiency/3_experienced.svg |
||||
- label: Adept (4 of 5) |
||||
image: proficiency/4_adept.svg |
||||
- label: Advanced (5 of 5) |
||||
image: proficiency/5_advanced.svg |
||||
- label: Expert (6 of 5) |
||||
image: proficiency/6_expert.svg |
||||
categories: |
||||
- id: code |
||||
title: Code Languages |
||||
skills: |
||||
- id: python |
||||
proficiency: 6 |
||||
name: Python |
||||
img: skills/code/python.svg |
||||
- id: java |
||||
proficiency: 6 |
||||
name: Java |
||||
img: skills/code/java.svg |
||||
- id: javascript |
||||
proficiency: 5 |
||||
name: JavaScript |
||||
img: skills/code/js.svg |
||||
- id: typescript |
||||
proficiency: 4 |
||||
name: TypeScript |
||||
img: skills/code/typescript.png |
||||
- id: html5 |
||||
proficiency: 3 |
||||
name: HTML5+CSS3 |
||||
img: skills/code/html5.svg |
||||
- id: kotlin |
||||
proficiency: 1 |
||||
name: Kotlin |
||||
img: skills/code/kotlin.svg |
||||
- id: golang |
||||
proficiency: 0 |
||||
name: Go |
||||
img: skills/code/golang.svg |
||||
- id: libraries |
||||
title: Libraries/Tools |
||||
skills: |
||||
- id: react |
||||
proficiency: 2 |
||||
name: React |
||||
img: skills/libraries/react.svg |
||||
- id: languages |
||||
title: Languages |
||||
skills: |
||||
- id: english |
||||
proficiency: 6 |
||||
name: US English |
||||
img: skills/languages/us.svg |
||||
- id: japanese |
||||
proficiency: 2 |
||||
name: Japanese |
||||
img: skills/languages/japan.svg |
@ -0,0 +1,447 @@ |
||||
@import url('https://fonts.googleapis.com/css?family=Cinzel:700|Montserrat:700|Noto+Sans+JP:300|Nunito+Sans:400,800&display=swap'); |
||||
|
||||
body { |
||||
margin: 0; |
||||
} |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
:root { |
||||
font-size: 13px; |
||||
line-height: 1.3; |
||||
} |
||||
|
||||
header { |
||||
white-space: nowrap; |
||||
text-overflow: clip; |
||||
} |
||||
|
||||
p, h1, h2, h3, ul { |
||||
margin: 0; |
||||
font-size: inherit; |
||||
list-style: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
body { |
||||
font-family: 'Nunito Sans', 'Arial', sans-serif; |
||||
} |
||||
|
||||
header { |
||||
position: relative; |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
align-items: flex-start; |
||||
text-shadow: white 1px 1px 2px, white -1px 1px 2px, white 1px -1px 2px, white -1px -1px 2px; |
||||
background-color: white; |
||||
background-image: linear-gradient(to right, white 40%, transparent 60%), linear-gradient(to bottom, transparent 80%, white), url("/img/edupatilla-mari.png"); |
||||
background-size: auto, auto, auto 300%; |
||||
background-position: center center, center center, right 30%; |
||||
background-repeat: no-repeat, no-repeat, no-repeat; |
||||
} |
||||
|
||||
header h1 { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
align-items: baseline; |
||||
font-family: 'Montserrat', 'Noto Sans JP', 'Verdana', sans-serif; |
||||
font-weight: bold; |
||||
font-size: 2.5rem; |
||||
letter-spacing: 0.05em; |
||||
order: 2; |
||||
} |
||||
|
||||
header h2 { |
||||
background-image: linear-gradient(to bottom, white, transparent 10%); |
||||
font-weight: bold; |
||||
letter-spacing: 0.1em; |
||||
position: relative; |
||||
font-size: 1rem; |
||||
width: 12rem; |
||||
left: 1rem; |
||||
border-top: 1px solid black; |
||||
order: 3; |
||||
} |
||||
|
||||
section h2 { |
||||
font-family: 'Cinzel', serif; |
||||
font-weight: bold; |
||||
font-size: 1.375rem; |
||||
font-variant: small-caps; |
||||
} |
||||
|
||||
section h3 { |
||||
font-family: 'Cinzel', serif; |
||||
font-weight: bold; |
||||
font-size: 1.2rem; |
||||
font-variant: small-caps; |
||||
} |
||||
|
||||
header rt { |
||||
/* font-family: 'Noto Sans JP', sans-serif; */ |
||||
font-weight: bold; |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.section-header { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
justify-content: space-between; |
||||
align-items: baseline; |
||||
} |
||||
|
||||
#content { |
||||
position: relative; |
||||
overflow: hidden; |
||||
margin-top: 10px; |
||||
border-top: 1px solid black; |
||||
padding-top: 10px; |
||||
} |
||||
|
||||
#content > .divider { |
||||
position: absolute; |
||||
left: calc(12.25rem - 1px); |
||||
top: 0; |
||||
bottom: 0; |
||||
width: 1px; |
||||
border-right: 1px solid black; |
||||
} |
||||
|
||||
#content > .left { |
||||
width: 12rem; |
||||
float: left; |
||||
clear: left; |
||||
padding-right: 0.625rem; |
||||
} |
||||
|
||||
#content > .right { |
||||
width: calc(100% - 12rem); |
||||
float: right; |
||||
clear: right; |
||||
padding-left: 0.625rem; |
||||
} |
||||
|
||||
.contacts { |
||||
padding-left: 0.3rem; |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.contact { |
||||
display: block; |
||||
margin-left: 0.75rem; |
||||
} |
||||
|
||||
.contacts .container { |
||||
display: block; |
||||
font-size: 0.9rem; |
||||
position: relative; |
||||
line-height: 1.6rem; |
||||
height: 1.6rem; |
||||
text-align: left; |
||||
width: 10.5rem; |
||||
padding-left: 2rem; |
||||
color: inherit; |
||||
text-decoration: none; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.contact { |
||||
margin-top: 0.25rem; |
||||
} |
||||
|
||||
.contact .icon { |
||||
position: absolute; |
||||
height: 1.5rem; |
||||
width: 1.5rem; |
||||
left: 0.1rem; |
||||
top: 0.05rem; |
||||
} |
||||
|
||||
.skill-category, .skills { |
||||
padding-left: 0.5rem; |
||||
} |
||||
|
||||
.skills { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.skill { |
||||
display: block; |
||||
position: relative; |
||||
line-height: 1.4rem; |
||||
padding-top: 0.1rem; |
||||
padding-bottom: 0.1rem; |
||||
padding-left: 1.7rem; |
||||
padding-right: 1.7rem; |
||||
font-size: 0.9rem; |
||||
width: 10rem; |
||||
overflow: hidden; |
||||
margin-left: 0.25rem; |
||||
margin-top: 0.05rem; |
||||
} |
||||
|
||||
.skill .icon { |
||||
position: absolute; |
||||
height: 1.4rem; |
||||
width: 1.4rem; |
||||
top: 0.1rem; |
||||
left: 0.1rem; |
||||
} |
||||
|
||||
.skill .proficiency { |
||||
position: absolute; |
||||
height: 1.4rem; |
||||
width: 7rem; |
||||
top: 0; |
||||
left: 2.7rem; |
||||
} |
||||
|
||||
.programs { |
||||
padding-left: 1.25rem; |
||||
display: flex; |
||||
flex-flow: column wrap; |
||||
align-items: stretch; |
||||
} |
||||
|
||||
.program { |
||||
display: flex; |
||||
flex-flow: column; |
||||
font-size: 0.8rem; |
||||
position: relative; |
||||
padding-left: 2.7rem; |
||||
min-height: 2.4rem; |
||||
color: inherit; |
||||
text-decoration: none; |
||||
overflow: hidden; |
||||
align-content: stretch; |
||||
} |
||||
.program:not(.first-child) { |
||||
margin-top: 0.25rem; |
||||
} |
||||
.program .institution { |
||||
font-size: 1rem; |
||||
font-weight: bold; |
||||
flex: none; |
||||
} |
||||
.program .date { |
||||
display: block; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: auto; |
||||
text-align: right; |
||||
} |
||||
.program .name { |
||||
font-style: italic; |
||||
flex: none; |
||||
} |
||||
.program .notes { |
||||
flex: none; |
||||
} |
||||
|
||||
.program .icon { |
||||
position: absolute; |
||||
height: 2.4rem; |
||||
width: 2.4rem; |
||||
left: 0; |
||||
top: 0; |
||||
} |
||||
|
||||
.roles { |
||||
padding-left: 1.25rem; |
||||
} |
||||
|
||||
.role { |
||||
display: flex; |
||||
flex-flow: column; |
||||
justify-content: center; |
||||
margin-bottom: 0.5rem; |
||||
position: relative; |
||||
padding-left: 3.1rem; |
||||
min-height: 3rem; |
||||
} |
||||
|
||||
.role .firstline { |
||||
/* display: flex; |
||||
flex-flow: row wrap; |
||||
justify-content: space-between; |
||||
align-items: baseline; */ |
||||
flex: 1 1 100%; |
||||
} |
||||
|
||||
.role .firstline .name { |
||||
display: inline; |
||||
} |
||||
|
||||
#page:not(.showing-all) .role.minimized:not(.showing-all) .header { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
justify-content: flex-start; |
||||
align-items: baseline; |
||||
} |
||||
|
||||
.role .icon { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 3rem; |
||||
height: 3rem; |
||||
} |
||||
|
||||
#page:not(.showing-all) .role.minimized:not(.showing-all) .icon { |
||||
margin-right: 0.25rem; |
||||
} |
||||
|
||||
#page:not(.showing-all) .role.minimized:not(.showing-all) .name { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
#page:not(.showing-all) .role.minimized:not(.showing-all) .description, |
||||
#page:not(.showing-all) .role.minimized:not(.showing-all) .achievement { |
||||
font-size: 0.9rem; |
||||
} |
||||
|
||||
.role .details, .role .details .date { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
align-items: baseline; |
||||
font-family: 'Nunito Sans', 'Arial', sans-serif; |
||||
font-size: 0.8rem; |
||||
font-style: italic; |
||||
font-variant: normal; |
||||
font-weight: normal; |
||||
flex: 1 0 auto; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.role .details .date { |
||||
justify-content: flex-end; |
||||
padding-left: 0.1rem; |
||||
padding-right: 0.1rem; |
||||
} |
||||
|
||||
.role .details .team, .role .details .company, .role .details .date .start, .role .details .date .end { |
||||
display: inline-block; |
||||
flex: none; |
||||
} |
||||
|
||||
.role .achievements { |
||||
list-style: disc; |
||||
padding-left: 1.5em; |
||||
} |
||||
|
||||
.awards { |
||||
padding-left: 0.625rem; |
||||
} |
||||
|
||||
.award { |
||||
position: relative; |
||||
padding-left: 2.1rem; |
||||
display: flex; |
||||
flex-flow: column; |
||||
font-size: 0.8rem; |
||||
} |
||||
|
||||
.award { |
||||
margin-top: 0.25rem; |
||||
} |
||||
|
||||
.award .icon { |
||||
position: absolute; |
||||
height: 2rem; |
||||
width: 2rem; |
||||
left: 0; |
||||
top: 0; |
||||
} |
||||
|
||||
.award .name { |
||||
font-weight: bold; |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.award .team { |
||||
font-style: italic; |
||||
font-size: 0.7rem; |
||||
} |
||||
|
||||
/* |
||||
* .highlight-container: marker for an element which can have its children |
||||
* shown or hidden. Should never be nested more than two deep (#page and one |
||||
* more element between #page and any elements affected by this) - could be |
||||
* modified to support such a thing, but no need yet |
||||
* |
||||
* .highlight: a highlight-only view of some element, typically a shorter |
||||
* version of a full-length text containing only the highlights |
||||
* .show-all: button to make the current highlight container show its |
||||
* contained lowlights and hide its highlights |
||||
* |
||||
* elements with these classes are visible only when neither #page nor their |
||||
* surrounding container is showing all, thus hidden if either #page or their |
||||
* surrounding container is showing all: |
||||
* visible = not(#page.showing-all or surrounding-container.showing-all) |
||||
* visible = not(#page.showing-all) and not(surrounding-container.showing-all) |
||||
* hidden = not visible |
||||
* hidden = not(not(#page.showing-all or surrounding-container.showing-all)) |
||||
* hidden = #page.showing-all or surrounding-container.showing-all |
||||
* |
||||
* As #page is itself a highlight container which surrounds everything, this |
||||
* is simplified to just ".highlight-container.showing-all". |
||||
* |
||||
* .lowlight: an element or view of an element which will likely be |
||||
* uninteresting to whoever the current highlighted version is for |
||||
* |
||||
* elements with this class are visible only when either #page or their |
||||
* surrounding container is showing all, thus hidden if both #page and their |
||||
* surrounding container are _not_ showing all: |
||||
* visible = #page.showing-all or surrounding-container.showing-all |
||||
* hidden = not visible |
||||
* hidden = not(#page.showing-all or surrounding-container.showing-all) |
||||
* hidden = not(#page.showing-all) and not(surrounding-container.showing-all) |
||||
* |
||||
* .show-highlights: button to make the current highlight container hide its |
||||
* contained lowlights and show its highlights |
||||
* |
||||
* elements with this class are visible only when their surrounding container |
||||
* and _not_ #page is showing all. This is because when #page is showing all, |
||||
* the .show-highlights for individual sections have no effect. Thus they are |
||||
* hidden if the page is showing all or if the surrounding container is not |
||||
* showing all: |
||||
* visible = not(#page.showing-all) and surrouding-container.showing-all |
||||
* hidden = not visible |
||||
* hidden = not(not(#page.showing-all) and surrounding-container.showing-all) |
||||
* hidden = #page.showing-all or not(surrounding-container.showing-all) |
||||
* |
||||
* Since the buttons are not inside an inner container, we add an alternative |
||||
* for the buttons which only consults whether #page is not showing all. |
||||
*/ |
||||
.highlight-container.showing-all .highlight, |
||||
.highlight-container.showing-all .show-all, |
||||
#page.highlight-container:not(.showing-all) .highlight-container:not(.showing-all) .lowlight, |
||||
#page.highlight-container:not(.showing-all) header .buttons .lowlight, |
||||
#page.highlight-container:not(.showing-all) header .buttons .show-highlights, |
||||
#page.highlight-container:not(.showing-all) .highlight-container:not(.showing-all) .show-highlights, |
||||
#page.highlight-container.showing-all .highlight-container .show-highlights { |
||||
display: none; |
||||
} |
||||
|
||||
.highlight-icon { |
||||
float: right; |
||||
opacity: 0.6; |
||||
height: 1rem; |
||||
width: 1rem; |
||||
} |
||||
|
||||
.highlight-icon:hover { |
||||
opacity: 1.0; |
||||
} |
||||
|
||||
.highlight-container.showing-all .highlight-icon { |
||||
display: none; |
||||
} |
@ -0,0 +1,5 @@ |
||||
@media only print { |
||||
footer, .buttons, .show-all, .show-highlights, #print, .highlight-icon { |
||||
display: none; |
||||
} |
||||
} |
@ -0,0 +1,109 @@ |
||||
/* Too small for big margins */ |
||||
@media only screen and (max-width: 700px) and (min-width: 571px) { |
||||
main { |
||||
padding: 0 calc((100% - 550px) / 2) 72px calc((100vw - 550px) / 2); |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 570px) { |
||||
main { |
||||
padding: 0 10px 72px 10px; |
||||
} |
||||
#print { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
/* Too small to display the full name, so hide last name and put the |
||||
* dates in the education and experience sections on their own lines */ |
||||
@media only screen and (max-width: 550px) { |
||||
.lastname { |
||||
display: none; |
||||
} |
||||
|
||||
.program .date { |
||||
position: static; |
||||
text-align: inherit; |
||||
} |
||||
} |
||||
|
||||
/* Too small to display both names, so shorten first name to "Mari" |
||||
* Also, please get a new phone, or resize the window */ |
||||
@media only screen and (max-width: 400px) { |
||||
.fullname { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
/* Large desktop only - full size columns and empty space */ |
||||
@media only screen and (min-width: 1120px) { |
||||
main, footer { |
||||
width: 1120px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
|
||||
@media only screen and (min-width: 1100px) { |
||||
:root { |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
|
||||
@media only screen and (min-width: 900px) and (max-width:1099px) { |
||||
:root { |
||||
font-size: calc(13px + (100vw - 900px) * 7 / 200) |
||||
} |
||||
} |
||||
|
||||
/* Not large desktop - no empty space on the sides */ |
||||
@media only screen and (max-width: 1119px) { |
||||
main { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
/* Smaller than desktop - no columns */ |
||||
@media only screen and (max-width: 815px) { |
||||
#content .divider { |
||||
display: none; |
||||
} |
||||
|
||||
#content > .left { |
||||
width: auto; |
||||
float: none; |
||||
clear: none; |
||||
padding-right: 0; |
||||
} |
||||
|
||||
#content > .right { |
||||
width: auto; |
||||
float: none; |
||||
clear: none; |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
|
||||
/* Phone or tablet only - single column, no empty space */ |
||||
@media only screen and (max-width: 960px) { |
||||
} |
||||
|
||||
/* Tablet or desktop only */ |
||||
@media only screen and (min-width: 700px) { |
||||
} |
||||
|
||||
/* Phone only */ |
||||
@media only screen and (max-width: 699px) { |
||||
} |
||||
|
||||
/* Large phone only */ |
||||
@media only screen and (min-width: 500px) and (max-width: 699px) { |
||||
} |
||||
|
||||
/* Large phone, tablet, or desktop only */ |
||||
@media only screen and (min-width: 500px) { |
||||
} |
||||
|
||||
/* Small phone only */ |
||||
@media only screen and (max-width: 499px) { |
||||
} |
@ -0,0 +1,109 @@ |
||||
@media only screen { |
||||
body { |
||||
background-color: #5e5e5e; |
||||
margin: 0; |
||||
} |
||||
|
||||
main { |
||||
padding: 0 72px 72px 72px; |
||||
background-color: white; |
||||
margin: 0; |
||||
border: 1px solid gray; |
||||
box-shadow: 2px 5px 3px rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
footer { |
||||
display: block; |
||||
font-size: smaller; |
||||
color: white; |
||||
padding: 10px; |
||||
text-shadow: black 1px 1px 1px, black -1px 1px 1px, black 1px -1px 1px, black -1px -1px 1px; |
||||
} |
||||
|
||||
footer a:link, footer a:visited { |
||||
color: #4ec6f5; |
||||
font-weight: bold; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
footer a:hover, footer a:focus { |
||||
color: #87deff; |
||||
} |
||||
|
||||
footer a:active { |
||||
color: #3d86fc; |
||||
} |
||||
|
||||
header .buttons { |
||||
order: 1; |
||||
width: 40%; |
||||
margin-bottom: 0.5rem; |
||||
display: flex; |
||||
flex-flow: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
header .buttons * { |
||||
background-color: transparent; |
||||
background-size: contain; |
||||
border: 0; |
||||
padding: 0; |
||||
margin: 0; |
||||
flex: 1 0 0; |
||||
font-size: 1rem; |
||||
line-height: 2; |
||||
} |
||||
|
||||
header .buttons #print { |
||||
flex: 5 0 0; |
||||
} |
||||
|
||||
header .buttons .show-highlights, header .buttons .show-all { |
||||
flex: 10 0 0; |
||||
} |
||||
|
||||
.show-all, .show-highlights, #print { |
||||
border: 0; |
||||
padding: 0; |
||||
margin: 0; |
||||
background-color: transparent; |
||||
background-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.05) 80%, transparent 100%); |
||||
cursor: pointer; |
||||
line-height: 2; |
||||
} |
||||
|
||||
.show-all:hover, .show-highlights:hover, #print:hover, |
||||
.show-all:focus, .show-highlights:focus, #print:focus { |
||||
background-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 100, 0.1) 20%, rgba(0, 0, 100, 0.2) 30%, rgba(0, 0, 100, 0.2) 70%, rgba(0, 0, 100, 0.1) 80%, transparent 100%); |
||||
} |
||||
|
||||
.show-all:active, .show-highlights:active, #print:active { |
||||
background-image: linear-gradient(to right, transparent 0%, rgba(0, 100, 200, 0.1) 20%, rgba(0, 100, 200, 0.2) 30%, rgba(0, 100, 200, 0.2) 70%, rgba(0, 100, 200, 0.1) 80%, transparent 100%); |
||||
} |
||||
|
||||
section .highlight-container .show-all, section .highlight-container .show-highlights { |
||||
margin-top: 0.25rem; |
||||
display: block; |
||||
width: 100%; |
||||
font-size: 0.7rem; |
||||
height: 1.5rem; |
||||
transition: margin-top 0.25s step-start, height 0.25s step-start, opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s; |
||||
} |
||||
|
||||
section .highlight-container:not(:hover) .show-all:not(:focus), section .highlight-container:not(:hover) .show-highlights:not(:focus) { |
||||
margin-top: 0; |
||||
height: 0; |
||||
opacity: 0; |
||||
transform: scaleY(0); |
||||
transition: margin-top 0.25s step-end, height 0.25s step-end, opacity 0.25s ease, transform 0.25s ease; |
||||
} |
||||
|
||||
.lowlight:not(.lowlight-no-gradient) { |
||||
background-image: linear-gradient(to left top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.1) 50%, transparent 90%); |
||||
} |
||||
|
||||
.show-highlights img, .show-all img, #print img { |
||||
height: 1em; |
||||
width: 1em; |
||||
} |
||||
} |
@ -0,0 +1,43 @@ |
||||
(function(window, document) { |
||||
function findClosestParentMatching(child, selector) { |
||||
if (!child) { |
||||
return null; |
||||
} else if (child.matches(selector)) { |
||||
return child; |
||||
} else { |
||||
return findClosestParentMatching(child.parentElement, selector); |
||||
} |
||||
} |
||||
|
||||
function showAll(button) { |
||||
parent = findClosestParentMatching(button, ".highlight-container"); |
||||
if (!parent) { |
||||
return; |
||||
} |
||||
|
||||
parent.classList.add("showing-all"); |
||||
} |
||||
|
||||
function showHighlights(button) { |
||||
parent = findClosestParentMatching(button, ".highlight-container"); |
||||
if (!parent) { |
||||
return; |
||||
} |
||||
|
||||
parent.classList.remove("showing-all"); |
||||
} |
||||
|
||||
function print() { |
||||
window.print(); |
||||
} |
||||
|
||||
document.addEventListener("click", function(event) { |
||||
if (event.target.matches(".show-all, .show-all *")) { |
||||
showAll(event.target); |
||||
} else if (event.target.matches(".show-highlights, .show-highlights *")) { |
||||
showHighlights(event.target); |
||||
} else if (event.target.matches("#print, #print *")) { |
||||
print(); |
||||
} |
||||
}); |
||||
})(window, document); |
@ -0,0 +1,8 @@ |
||||
Built with <a href="https://www.11ty.io/">Eleventy</a> and served from |
||||
<a href="{{ pkg.repository.url }}">Github</a> via |
||||
<a href="https://www.netlify.com/">Netlify</a>. |
||||
Favicon by <a href="https://twitter.com/snaximation">@snaximation</a>. |
||||
Banner image by <a href="https://twitter.com/edupatilla">@edupatilla</a>. |
||||
Printer, Spotlight, Home, US flag, Japanese flag, and WWW icons made by |
||||
<a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> |
||||
from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> |
@ -0,0 +1,18 @@ |
||||
{# Uses page variable: filter.awards #} |
||||
{# Uses data store: awards.awards #} |
||||
{% set awardsFilter = filter.awards if filter and filter.awards else "all" %} |
||||
{% set awardsFiltered = awards.awards | identifyHighlights(awardsFilter) %} |
||||
|
||||
<div class="highlight-container"> |
||||
<div class="section-header"> |
||||
<h2>Awards</h2> |
||||
{% if awardsFiltered | hasLowlights %} |
||||
{% include "components/resume/highlight-icon.njk" %} |
||||
{% endif %} |
||||
</div> |
||||
<ul class="awards"> |
||||
{% for award in awardsFiltered %} |
||||
{% include "components/resume/award.njk" %} |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
@ -0,0 +1,10 @@ |
||||
<li class="award{% if not award.highlight %} lowlight{% endif %}"> |
||||
{% if award.image %} |
||||
<img src="/img/{{ award.image }}" class="icon" aria-hidden="true" /> |
||||
{% endif %} |
||||
<span class="team">{{ award.role }}</span> |
||||
<span class="name">{{ award.name }}</span> |
||||
{% if award.description %} |
||||
<span class="description">{{ award.description }}</span> |
||||
{% endif %} |
||||
</li> |
@ -0,0 +1,18 @@ |
||||
{# Uses page variable: filter.contact #} |
||||
{# Uses data store: contact.methods #} |
||||
{% set contactFilter = filter.contact if filter and filter.contact else "all" %} |
||||
{% set contactsFiltered = contact.methods | identifyHighlights(contactFilter) %} |
||||
|
||||
<div class="highlight-container"> |
||||
<div class="section-header"> |
||||
<h2>Contact</h2> |
||||
{% if contactsFiltered | hasLowlights %} |
||||
{% include "components/resume/highlight-icon.njk" %} |
||||
{% endif %} |
||||
</div> |
||||
<ul class="contacts"> |
||||
{% for contact in contactsFiltered %} |
||||
{% include "components/resume/contact.njk" %} |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
@ -0,0 +1,12 @@ |
||||
{# Uses loop variable: contact #} |
||||
|
||||
<li title="{{ contact.name }}" class="contact{% if not contact.link %} container{% endif %}{% if not contact.highlight %} lowlight{% endif %}"> |
||||
{% if contact.link %} |
||||
<a class="container" href="{{ contact.link }}" rel="nofollow"> |
||||
{% endif %} |
||||
<img src="/img/{{ contact.img }}" alt="{{ contact.name }}" class="icon"/> |
||||
<span class="text">{{ contact.text }}</span> |
||||
{% if contact.link %} |
||||
</a> |
||||
{% endif %} |
||||
</li> |
@ -0,0 +1,18 @@ |
||||
{# Uses page variable: filter.education #} |
||||
{# Uses data store: education.programs #} |
||||
{% set educationFilter = filter.education if filter and filter.education else "all" %} |
||||
{% set educationFiltered = education.programs | identifyHighlights(educationFilter) %} |
||||
|
||||
<div class="highlight-container"> |
||||
<div class="section-header"> |
||||
<h2>Education</h2> |
||||
{% if educationFiltered | hasLowlights %} |
||||
{% include "components/resume/highlight-icon.njk" %} |
||||
{% endif %} |
||||
</div> |
||||
<ul class="programs"> |
||||
{% for program in educationFiltered %} |
||||
{% include "components/resume/education.njk" %} |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
@ -0,0 +1,13 @@ |
||||
{# Uses loop variable: program #} |
||||
|
||||
<li class="program{% if not program.highlight %} lowlight{% endif %}"> |
||||
{% if program.image %} |
||||
<img src="/img/{{ program.image }}" class="icon" aria-hidden="true" /> |
||||
{% endif %} |
||||
<span class="institution">{{ program.institution }}</span> |
||||
<span class="name">{{ program.name }}</span> |
||||
{% if program.notes %} |
||||
<span class="notes">{{ program.notes }}</span> |
||||
{% endif %} |
||||
<span class="date">{{ program.endDate | monthAndYear }}</span> |
||||
</li> |
@ -0,0 +1,40 @@ |
||||
{# uses loop variable role #} |
||||
|
||||
<article class="role highlight-container{% if not role.highlight %} minimized{% endif %}"> |
||||
<div class="header"> |
||||
{% if role.image %}<img src="/img/{{ role.image }}" class="icon" aria-hidden="true" />{% endif %} |
||||
<div class="firstline"> |
||||
<h3 class="name"> |
||||
{{ role.name }} |
||||
</h3> |
||||
{% if ((not role.highlight) and role.shortDescription) or role.achievements | hasLowlights %} |
||||
{% include "components/resume/highlight-icon.njk" %} |
||||
{% endif %} |
||||
</div> |
||||
<span class="details"> |
||||
{% if role.team %}<span class="team">on {{ role.team }} </span>{% endif %} |
||||
{% if role.company %}<span class="company">at {{ role.company }} </span>{% endif %} |
||||
<span class="date"> |
||||
{% if role.startDate %}<span class="start"> from {{ role.startDate | monthAndYear }}</span>{% endif %} |
||||
{% if role.endDate %}<span class="end"> until {{ role.endDate | monthAndYear }}</span>{% endif %} |
||||
</span> |
||||
</span> |
||||
</div> |
||||
{% if role.description %} |
||||
<div class="description{% if (not role.highlight) and role.shortDescription %} lowlight{% endif %}"> |
||||
{{ role.description | md | safe }} |
||||
</div> |
||||
{% endif %} |
||||
{% if (not role.highlight) and role.shortDescription %} |
||||
<div class="description highlight"> |
||||
{{ role.shortDescription | md | safe }} |
||||
</div> |
||||
{% endif %} |
||||
{% if role.achievements %} |
||||
<ul class="achievements"> |
||||
{% for achievement in role.achievements %} |
||||
<li{% if not achievement.highlight %} class="lowlight"{% endif %}>{{achievement.description | md | safe }}</li> |
||||
{% endfor %} |
||||
</ul> |
||||
{% endif %} |
||||
</article> |
@ -0,0 +1,13 @@ |
||||
{# uses page variable filter.experience #} |
||||
{# uses data store experience.roles #} |
||||
{% set experienceFilter = filter.experience if filter and filter.experience else "all" %} |
||||
{% set experienceRolesFiltered = experience.roles | identifyHighlightsRecursive(experienceFilter, "achievements") %} |
||||
|
||||
<div class="section-header"> |
||||
<h2>Experience</h2> |
||||
</div> |
||||
<div class="roles"> |
||||
{% for role in experienceRolesFiltered %} |
||||
{% include "components/resume/experience-role.njk" %} |
||||
{% endfor %} |
||||
</div> |
@ -0,0 +1,23 @@ |
||||
<h1 aria-label="Marissa Staib"> |
||||
<ruby id="firstname"> |
||||
<rb id="firstname">Mari</rb> |
||||
<rp>(</rp><rt lang="jp">マリ</rt><rp>)</rp> |
||||
</ruby> |
||||
<ruby class="fullname"> |
||||
<rb>ssa</rb> |
||||
<rp>(</rp><rt lang="jp">ッサ</rt><rp>)</rp> |
||||
</ruby> |
||||
|
||||
<ruby class="lastname"> |
||||
<rb>Staib</rb> |
||||
<rp>(</rp><rt lang="jp">ステーブ</rt><rp>)</rp> |
||||
</ruby> |
||||
</h1> |
||||
<h2>software engineer</h2> |
||||
<div class="buttons"> |
||||
<button id="print"> |
||||
<img src="/img/print.svg" aria-hidden="true"> |
||||
Print |
||||
</button> |
||||
{% include "components/resume/show-hide-toggle.njk" %} |
||||
</div> |
@ -0,0 +1,5 @@ |
||||
<img |
||||
class="highlight-icon" |
||||
src="/img/spotlights.svg" |
||||
alt="Showing highlights only. Click Show All (in the header) to show additional (but likely irrelevant) data." |
||||
title="Showing highlights only. Click Show All (in the header) to show additional (but likely irrelevant) data." /> |
@ -0,0 +1,12 @@ |
||||
<button class="show-all" |
||||
aria-label="Show all. (Showing highlights only. Click to show additional (but likely irrelevant) data.)" |
||||
title="Showing highlights only. Click to show additional (but likely irrelevant) data."> |
||||
<img src="/img/spotlights.svg" aria-hidden="true" /> |
||||
Show all |
||||
</button> |
||||
<button class="show-highlights" |
||||
aria-label="Show highlights only. (Showing all data. Click to show only relevant data.)" |
||||
title="Showing all data. Click to show only relevant data."> |
||||
<img src="/img/spotlights-dark.svg" aria-hidden="true" /> |
||||
Show highlights only |
||||
</button> |
@ -0,0 +1,16 @@ |
||||
{# Uses page variable: filter.skills #} |
||||
{# Uses data store: skills.categories #} |
||||
{% set skillFilter = filter.skills if filter and filter.skills else "all" %} |
||||
{% set skillCategoriesFiltered = skills.categories | identifyHighlightsRecursive(skillFilter, "skills") %} |
||||
|
||||
<div class="highlight-container"> |
||||
<div class="section-header"> |
||||
<h2>Skills</h2> |
||||
{% if skillCategoriesFiltered | hasLowlightsRecursive("skills") %} |
||||
{% include "components/resume/highlight-icon.njk" %} |
||||
{% endif %} |
||||
</div> |
||||
{% for category in skillCategoriesFiltered %} |
||||
{% include "components/resume/skill-subcategory.njk" %} |
||||
{% endfor %} |
||||
</div> |
@ -0,0 +1,10 @@ |
||||
{# Uses loop variable: category #} |
||||
|
||||
<section class="skill-category{% if not category.highlight %} lowlight lowlight-no-gradient{% endif %}"> |
||||
<h3{% if not category.highlight %} class="lowlight"{% endif %}>{{ category.title }}</h3> |
||||
<ul class="skills"> |
||||
{% for skill in category.skills %} |
||||
{% include "components/resume/skill.njk" %} |
||||
{% endfor %} |
||||
</ul> |
||||
</section> |
@ -0,0 +1,12 @@ |
||||
{# Uses loop variable: skill #} |
||||
{# Uses data store: skills.proficiency #} |
||||
|
||||
<li class="skill{% if not skill.highlight %} lowlight{% endif %}" title="{{ skills.proficiency[skill.proficiency].label }}"> |
||||
{% if skill.img %} |
||||
<img src="/img/{{ skill.img }}" class="icon" aria-hidden="true" /> |
||||
{% endif %} |
||||
<img src="/img/{{ skills.proficiency[skill.proficiency].image }}" |
||||
class="proficiency" |
||||
aria-label="{{ skills.proficiency[skill.proficiency].label }}" /> |
||||
<span class="name">{{ skill.name }}</span> |
||||
</li> |
@ -1,5 +1,5 @@ |
||||
<meta property="twitter:card" content="summary" /> |
||||
<meta property="twitter:site" content="@{{ metadata.contact.twitter }}" /> |
||||
<meta property="twitter:site" content="@{{ metadata.twitter }}" /> |
||||
<meta property="twitter:title" content="{{ metadata.title }}" /> |
||||
<meta property="twitter:description" content="{{ metadata.description }}" /> |
||||
<meta property="twitter:image" content="{{ metadata.url }}{{ metadata.cardimage_path }}" /> |
||||
|
@ -0,0 +1,37 @@ |
||||
--- |
||||
layout: layouts/base.njk |
||||
--- |
||||
|
||||
<div id="resume"> |
||||
<header> |
||||
{% include "components/resume/header.njk" %} |
||||
</header> |
||||
|
||||
<div id="content"> |
||||
<div class="divider"></div> |
||||
<section id="contact" class="left"> |
||||
{% include "components/resume/contact-section.njk" %} |
||||
</section> |
||||
|
||||
<section id="education" class="right"> |
||||
{% include "components/resume/education-section.njk" %} |
||||
</section> |
||||
|
||||
<section id="about" class="right"> |
||||
<h2>About</h2> |
||||
{{ layoutContent | safe }} |
||||
</section> |
||||
|
||||
<section id="skills" class="left"> |
||||
{% include "components/resume/skill-section.njk" %} |
||||
</section> |
||||
|
||||
<section id="experience" class="right"> |
||||
{% include "components/resume/experience-section.njk" %} |
||||
</section> |
||||
|
||||
<section id="awards" class="left"> |
||||
{% include "components/resume/award-section.njk" %} |
||||
</section> |
||||
</div> |
||||
</div> |
@ -0,0 +1,21 @@ |
||||
--- |
||||
layout: layouts/resume.njk |
||||
filter: |
||||
contact: |
||||
- us-phone |
||||
education: |
||||
- rpi |
||||
skills: |
||||
code: |
||||
- all |
||||
- "-python" |
||||
languages: all |
||||
experience: |
||||
"-all": false |
||||
"bazel-configurability": |
||||
- other |
||||
awards: |
||||
- perfy |
||||
--- |
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet aliquam id diam maecenas ultricies mi. Ut porttitor leo a diam. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Leo vel orci porta non pulvinar. Enim nunc faucibus a pellentesque sit amet porttitor eget. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Amet volutpat consequat mauris nunc congue. Quam adipiscing vitae proin sagittis nisl. Faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Aliquam nulla facilisi cras fermentum odio eu feugiat. Sed adipiscing diam donec adipiscing tristique. Sed odio morbi quis commodo odio. |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 791 B |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 635 B |
After Width: | Height: | Size: 758 B |
After Width: | Height: | Size: 876 B |
After Width: | Height: | Size: 1000 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 791 B |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 365 B |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,29 @@ |
||||
--- |
||||
layout: layouts/resume.njk |
||||
filter: |
||||
contact: |
||||
- us-phone |
||||
- address |
||||
- github |
||||
education: |
||||
- rpi |
||||
- tefl_ita |
||||
skills: |
||||
code: |
||||
- java |
||||
- javascript |
||||
- typescript |
||||
- html5 |
||||
languages: all |
||||
experience: |
||||
"-all": false |
||||
"bazel-configurability": |
||||
- other |
||||
awards: |
||||
- perfy |
||||
- deans-list |
||||
--- |
||||
|
||||
This is where my description of the highlights for this role would go. If I had one! |
||||
|
||||
This is just a test resume to work out some last kinks in the accessibility parts of the design. |