standardize component structure more
parent
880cfbeb74
commit
7e3dc4ace4
@ -0,0 +1,85 @@
|
||||
import InfoBar from "~/components/InfoBar/"
|
||||
|
||||
import styles from '~/styles/pay-transparency.module.css'
|
||||
|
||||
export default function PayTransparency() {
|
||||
return (
|
||||
<>
|
||||
<h1 className="pageTitle">
|
||||
Pay Transparency
|
||||
</h1>
|
||||
<main className="mainColumn">
|
||||
<InfoBar text="Last updated: May 2023" />
|
||||
<p>
|
||||
This page lists the title and pay rate of every job we have held
|
||||
since university graduation, and is inspired by{' '}
|
||||
<a target="_blank" href="https://rin.systems/pay-transparency/">Rin's pay transparency</a>
|
||||
{' '}page. That page is what inspired us to make this one, and we hope the
|
||||
idea continues to spread, as the more people know what common compensation is
|
||||
across the industry, the more we can all benefit.
|
||||
</p>
|
||||
|
||||
<div className={styles.horizOverflow}>
|
||||
<div className={styles.table}>
|
||||
<span className={styles.heading}>Role</span>
|
||||
<span className={styles.heading}>Start</span>
|
||||
<span className={styles.heading}>End</span>
|
||||
<span className={styles.heading}>Rate / Salary</span>
|
||||
|
||||
<span className={styles.position}>Software Developer</span>
|
||||
<span>Jan 2020</span>
|
||||
<span>Sept 2020</span>
|
||||
<span>$35 USD / hour</span>
|
||||
|
||||
<span className={styles.position}>Software Engineer</span>
|
||||
<span>Jan 2021</span>
|
||||
<span>Sept 2021</span>
|
||||
<span>$90,000 USD / year
|
||||
<em>*</em>
|
||||
</span>
|
||||
|
||||
<span className={styles.position}>Software Engineer</span>
|
||||
<span>Sept 2021</span>
|
||||
<span>Oct 2022</span>
|
||||
<span>$100,800 USD / year
|
||||
<em>*</em>
|
||||
</span>
|
||||
|
||||
<span className={styles.position}>Software Engineer</span>
|
||||
<span>Oct 2021</span>
|
||||
<span>Jan 2022</span>
|
||||
<span>$105,840 USD / year
|
||||
<em>*</em>
|
||||
</span>
|
||||
|
||||
<span className={styles.position}>Senior Software Engineer</span>
|
||||
<span>Jan 2022</span>
|
||||
<span>May 2022</span>
|
||||
<span>$121,716 USD / year
|
||||
<em>*</em>
|
||||
</span>
|
||||
|
||||
<span className={styles.position}>Senior Software Engineer</span>
|
||||
<span>June 2022</span>
|
||||
<span>March 2023</span>
|
||||
<span>$158,000 USD / year
|
||||
<em>**</em>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
All positions listed here included health, dental, and vision insurance.
|
||||
</p>
|
||||
<p>
|
||||
The positions listed with <em>*</em> came with
|
||||
a retirement account.
|
||||
</p>
|
||||
<p>
|
||||
The position listed with <em>**</em> came with
|
||||
stock options and a retirement account.
|
||||
</p>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
export default function Posts() {
|
||||
return (
|
||||
<>
|
||||
<h1 className="pageTitle">
|
||||
Posts
|
||||
</h1>
|
||||
<main className="mainColumn">
|
||||
<p>This will have posts here eventually we promise</p>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
.infobar {
|
||||
margin: calc(-1 * var(--text-padding));
|
||||
margin-bottom: var(--text-padding);
|
||||
padding: var(--text-padding);
|
||||
background: var(--main-background);
|
||||
height: var(--header-bar-height);
|
||||
width: var(--main-width);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px var(--text-dimmed);
|
||||
}
|
||||
|
||||
.infobar.sideNote {
|
||||
color: var(--text-dimmed);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.infobar.postMeta {
|
||||
color: var(--text-dimmed);
|
||||
}
|
||||
|
||||
.infobar.postMeta .author {
|
||||
color: var(--text-medium);
|
||||
}
|
||||
|
||||
.infobar.postMeta .date {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.infobar + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
import { ReactNode } from 'react'
|
||||
import styles from './InfoBar.module.css'
|
||||
|
||||
interface ArbitraryChildrenProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
interface SideNoteProps {
|
||||
text: string
|
||||
}
|
||||
|
||||
interface PostInfoPros {
|
||||
publishedDate: Date,
|
||||
authorName: string
|
||||
}
|
||||
|
||||
interface SystemMemberInfoProps {
|
||||
memberName: string,
|
||||
memberAvatar: string
|
||||
}
|
||||
|
||||
type InfobarProps = (
|
||||
ArbitraryChildrenProps
|
||||
| SideNoteProps
|
||||
| PostInfoPros
|
||||
| SystemMemberInfoProps
|
||||
)
|
||||
|
||||
export default function InfoBar(props: InfobarProps) {
|
||||
if ('text' in props) {
|
||||
return (
|
||||
<aside className={`${styles.infobar} ${styles.sideNote}`}>
|
||||
{props.text}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
if ('authorName' in props) {
|
||||
return (
|
||||
<aside className={`${styles.infobar} ${styles.postMeta}`}>
|
||||
<span>
|
||||
by <span className={styles.author}>{props.authorName}</span>;{' '}
|
||||
<span className={styles.date}>published {props.publishedDate.toLocaleDateString()}</span>
|
||||
</span>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
if ('memberName' in props) {
|
||||
return (
|
||||
<aside className={`${styles.infobar} ${styles.sideNote}`}>
|
||||
{props.memberName}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
if ('children' in props) {
|
||||
return (
|
||||
<aside className={styles.infobar}>
|
||||
{props.children}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
throw new Error('Unknown infobar type')
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<span>Website by Ashelyn Rose</span>
|
||||
<span>Website by ashelyn rose</span>
|
||||
<a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
|
||||
<a href="/pay-transparency">Pay Transparency</a>
|
||||
</footer>
|
||||
@ -0,0 +1,25 @@
|
||||
.horizOverflow {
|
||||
margin: 0 calc(-1 * var(--text-padding));
|
||||
width: calc(100% + 2 * var(--text-padding));
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
position: relative;
|
||||
font-size: .9em;
|
||||
padding: 0 var(--text-padding);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
column-gap: calc(.5 * var(--text-padding));
|
||||
}
|
||||
|
||||
.table .heading {
|
||||
color: var(--text-bright);
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.table > span:not(.position):not(.heading) {
|
||||
color: var(--text-dimmed);
|
||||
}
|
||||
Loading…
Reference in New Issue