wip: redo home and work pages

This commit is contained in:
a 2024-05-26 01:02:46 -05:00
parent 527f3b7892
commit 2448d60f35
39 changed files with 867 additions and 1890 deletions

View file

@ -0,0 +1,88 @@
.content {
/* typography */
html {
--line-height: 1.6;
}
h1 {
font-size: 2.49em;
font-weight: bold;
}
h2 {
font-size: 2.07em;
font-weight: bold;
}
h3 {
font-size: 1.73em;
font-weight: bold;
}
h4 {
font-size: 1.44em;
font-weight: bold;
}
h5 {
font-size: 1.2em;
font-weight: bold;
}
h6 {
font-size: 1em;
font-weight: bold;
}
p {
line-height: var(--line-height);
}
h1, h2, h3, h4, h5, h6, p {
margin-block: 1rem;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
/* lists */
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
ol, ul {
margin-inline-start: 1em;
}
li {
margin-block: 0.5em;
line-height: var(--line-height);
}
/* content */
blockquote {
border-inline-start: 0.25em solid black;
padding-inline-start: 0.5em;
display: block;
margin-block: 1em;
line-height: 1.6;
p {
}
}
img {
max-width: 100%;
}
figure {
blockquote {
}
img {
display: block;
width: 100%;
}
figcaption {
padding: 0.5em;
font-style: italic;
line-height: 2;
}
}
}

View file

@ -1,7 +1,12 @@
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
min-height: calc(var(--vh, 1vh) * 100);
@ -13,14 +18,13 @@ main {flex-grow: 1;}
@media (min-width: 62em) {padding: 4em 0}
}
.container {
width: 100%;
max-width: var(--container-width);
max-width: var(--max-container-width);
margin: 0 auto;
padding: 0 1em;
padding: 0 1rem;
}
@media (min-width: $container-width + 2em) {
.container {
padding: 0;
}
@media (min-width: 60rem) {
.container {padding-inline: 2rem;}
}
@media (min-width: 1200px) {
.container {padding-inline: 3rem;}
}

View file

@ -1,17 +1,25 @@
@mixin box-shadow {
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11);
box-shadow: 0 1px 1px rgba(0,35,54,0.11),
0 2px 2px rgba(0,35,54,0.11),
0 4px 4px rgba(0,35,54,0.11),
0 6px 8px rgba(0,35,54,0.11),
0 8px 16px rgba(0,35,54,0.11);
}
@mixin box-shadow-top {
box-shadow: 0 -1px 1px rgba(0,35,54,0.11),
0 -2px 2px rgba(0,35,54,0.11),
0 -4px 4px rgba(0,35,54,0.11),
0 -6px 8px rgba(0,35,54,0.11),
0 -8px 16px rgba(0,35,54,0.11);
}
@mixin box-shadow-heavy {
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
0 4px 2px rgba(0,0,0,0.09),
0 8px 4px rgba(0,0,0,0.09),
0 16px 8px rgba(0,0,0,0.09),
0 32px 16px rgba(0,0,0,0.09);
box-shadow: 0 2px 1px rgba(0,35,54,0.09),
0 4px 2px rgba(0,35,54,0.09),
0 8px 4px rgba(0,35,54,0.09),
0 16px 8px rgba(0,35,54,0.09),
0 32px 16px rgba(0,35,54,0.09);
}
@mixin focus-outline {

View file

@ -1,44 +0,0 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

View file

@ -1,85 +0,0 @@
/* typography */
html {
--line-height: 1.6;
}
h1 {
font-size: 2.49em;
font-weight: bold;
}
h2 {
font-size: 2.07em;
font-weight: bold;
}
h3 {
font-size: 1.73em;
font-weight: bold;
}
h4 {
font-size: 1.44em;
font-weight: bold;
}
h5 {
font-size: 1.2em;
font-weight: bold;
}
h6 {
font-size: 1em;
font-weight: bold;
}
p {
line-height: var(--line-height);
}
h1, h2, h3, h4, h5, h6, p {
margin-block: 1rem;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
/* lists */
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
ol, ul {
margin-inline-start: 1em;
}
li {
margin-block: 0.5em;
line-height: var(--line-height);
}
/* content */
blockquote {
border-inline-start: 0.25em solid black;
padding-inline-start: 0.5em;
display: block;
margin-block: 1em;
line-height: 1.6;
p {
}
}
img {
max-width: 100%;
}
figure {
blockquote {
}
img {
display: block;
width: 100%;
}
figcaption {
padding: 0.5em;
font-style: italic;
line-height: 2;
}
}

View file

@ -1,19 +1,30 @@
$container-width: 60em;
$nav-height: 4em;
$header-height: 4em;
$max-container-width: 1600px;
:root {
--container-width: #{$container-width};
--nav-height: #{$nav-height};
--header-height: #{$header-height};
--link-color: rgb(0,96,255);
--link-visited: rgb(140, 74, 194);
--primary-accent: rgb(0,96,255);
--primary-accent-transparent: rgba(0,96,255,0.25);
--primary-accent-text: #fff;
--ui-background: #fff;
--ui-background-track: #aaa;
--ui-text: #212121;
--ui-text-muted: #777;
--ui-text-bold: #000;
--max-container-width: #{$max-container-width};
--color-background: hsl(210, 100%, 90%);
--color-text: hsl(210, 100%, 15%);
--color-highlight: hsl(210, 80%, 40%);
--color-highlight-weak: hsl(210, 80%, 80%);
--color-accent: hsl(150, 50%, 50%);
--color-card-background: hsl(210, 100%, 95%);
--color-card-text: var(--color-text);
--color-button-background: var(--color-highlight);
--color-button-text: white;
--color-button-hover-background: var(--color-highlight-weak);
--color-button-hover-text: var(--color-text);
--color-link: hsl(210, 100%, 50%);
--color-link-visited: hsl(270, 50%, 50%);
--transition-duration: 0.4s;
}
body {
background-color: var(--color-background);
color: var(--color-text);
font-family: sans-serif;
}

View file

@ -1,84 +0,0 @@
.button {
width: 100%;
@media (min-width: 33.75em) {
width: max-content;
}
font-size: clamp(1em,2vw,1em);
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 0.25em;
font-weight: 700;
gap: 1em;
&:link {
}
&:visited {
}
&:focus {
padding: 1em;
border-radius: 0.25em;
@include focus-outline;
}
&:hover {
}
&:active {
}
}
.button.primary {
background: var(--primary-accent);
color: var(--primary-accent-text);
&:link {
}
&:visited {
}
&:focus {
}
&:hover {
background: var(--primary-accent-transparent);
}
&:active {
}
}
.button.secondary {
background: white;
border: 2px solid var(--primary-accent);
color: var(--primary-accent);
&:link {
}
&:visited {
}
&:focus {
}
&:hover {
background: var(--primary-accent-transparent);
}
&:active {
}
}

View file

@ -1,107 +0,0 @@
.smartphone {
img {
width: 100%;
}
display: block;
position: relative;
max-width: 320px;
margin: auto;
border: 16px black solid;
border-top-width: 60px;
border-bottom-width: 80px;
border-radius: 36px;
background: black;
&:before {
content: '';
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #333;
border-radius: 10px;
}
&:after {
content: '';
display: block;
width: 20%;
aspect-ratio: 1;
position: absolute;
left: 50%;
bottom: -96px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
}
}
.laptop {
img {
width: 100%;
}
display: block;
width: 100%;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 12px;
background-color: black;
position: relative;
&:after {
content: '';
position: absolute;
width: calc(100% + 3em);
height: 7%;
left: -1.5em;
bottom: -9%;
background: #333;
border-radius: 0 0 100em 100em;
}
&:before {
content: '';
position: absolute;
width: 25%;
height: 2%;
left: 37.5%;
bottom: -4%;
background: #777;
z-index: 2;
}
margin-bottom: 3.7%;
}
.screenshot {
img {
width: 100%;
}
position: relative;
width: 100%;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&.pc {
img {padding: 1.1% 1.2%;}
margin-bottom: 21.25%;
&:after {
height: 140%;
background: url('/images/frames/pc.svg');
background-repeat: no-repeat;
}
}
&.macbook {
img {padding: 2.9% 11.75% 0;}
margin-bottom: 11.25%;
&:after {
height: 250%;
background: url('/images/frames/macbook.svg');
background-repeat: no-repeat;
}
}
}

View file

@ -1,119 +0,0 @@
#work #intro {
--headerHeight: 4em;
--navHeight: 4em;
color: #fff;
padding: 0;
display: flex;
flex: 1;
background-image: url('/images/backgrounds/ffflux1.png');
background-size: cover;
background-position: center;
.container {
display: grid;
grid-template-rows: auto auto 1fr;
position: relative;
padding: 1em;
background-image: url('/images/puzzlehead.svg');
background-size: contain;
background-position-x: right;
background-position-y: bottom;
background-repeat: no-repeat;
aspect-ratio: 1;
max-height: calc(100vh - var(--header-height) - var(--nav-height));
max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height));
@media (min-width: $container-width) {
max-height: calc(100vh - var(--header-height));
max-height: calc(var(--vh) * 100 - var(--header-height));
}
}
.tagline {
font-size: 1.5em;
font-weight: 700;
em {color: #76ff03;font-style: italic;}
margin-bottom: 0.5em;
line-height: 1.1;
}
.blurb {
font-size: 1.1em;
margin-bottom: 2em;
max-width: 38ch;
line-height: 1.4;
}
.button {
background: #06f;
color: white;
width: max-content;
svg {
width: 1.75em;
height: 1.75em;
margin: 0;
}
span {
display: none;
font-size: 1.25em;
}
border-radius: 100em;
@include box-shadow;
justify-self: start;
align-self: start;
position: absolute;
bottom: 1em;
right: 1em;
}
@media (max-width: $container-width) {
@media (min-height: 25em) {
.tagline {
font-size: clamp(1.5em,6vw,3em)
}
.blurb {
font-size: clamp(1.1em, 3vw, 1.25em)
}
}
@media (min-height: 31.25em) {
@media (min-width: 32em) {
.button {
position: revert;
span {display: block;}
padding: 1em 2em;
}
aspect-ratio: 7.7/7;
}
@media (min-width: 37.5em) {
aspect-ratio: 640 / 540
}
@media (min-width: 40em) {
aspect-ratio: 720 / 600
}
@media (min-width: 42.5em) {
aspect-ratio: 744 / 600
}
@media (min-width: 50em) {
aspect-ratio: 800 / 620
}
@media (min-width: 52.5em) {
aspect-ratio: 840 / 640
}
@media (min-width: 55em) {
aspect-ratio: 880 / 640
}
}
}
@media (min-width: $container-width) {
@media (min-height: 25em) {
.tagline {font-size: 3em}
.blurb {font-size: 1.25em}
.button {
position: revert;
span {display: block;}
padding: 1em 2em;
}
max-height: 46em;
}
@media (min-height: 40em) {
.tagline {margin-top: 1em;}
}
}
}

View file

@ -1,59 +0,0 @@
#praise {
--color: green;
.testimonials {
display: flex;
flex-flow: row wrap;
gap: 2em;
justify-content: center;
}
.testimonial {
display: grid;
grid-template-areas: "b b" "a n";
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 1em;
width: 18em;
}
.avatar {
grid-area: a;
margin-left: 1em;
width: 4em;
height: 4em;
border-radius: 100em;
background: white;
padding: 2px;
border: 2px solid var(--color);
img {width: 100%; height: 100%; border-radius: 100em;}
}
.name {
grid-area: n;
align-self: center;
}
.bubble {
grid-area: b;
background: var(--color);
color: white;
padding: 0.5em;
border: 0;
border-radius: 0.5em;
position: relative;
grid-column: span 2;
min-height: 80px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.4;
width: 100%;
}
.bubble:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 0.5em solid transparent;
border-top-color: var(--color);
bottom: -1em;
left:2.5em;
}
}

View file

@ -1,46 +0,0 @@
@mixin pullquote {
content: attr(data-pullquote);
font-size: 1em;
line-height: 1.4;
display: flex;
font-family: serif;
color: #555;
font-size: 1.25em;
}
@mixin left {
float: left;
max-width: 30ch;
text-align: left;
}
@mixin right {
float: right;
max-width: 30ch;
text-align: right;
}
.has-pullquote {
&.left:before {
@include pullquote;
margin-bottom: 1rem;
@media (min-width: 40rem) {
@include left;
}
@media (min-width: 80rem) {
margin-left: -9rem;
padding-right: 1em;
}
}
&.right:before {
@include pullquote;
margin-bottom: 1rem;
@media (min-width: 40rem) {
@include right;
}
@media (min-width: 80rem) {
margin-right: -9rem;
padding-left: 1em;
}
}
}

View file

@ -1,41 +0,0 @@
/* === ordered: true === */
#TableOfContents ol {
/*
each list gets a new counter
*/
counter-reset: item;
margin-inline-start: 0;
list-style: none;
}
#TableOfContents ol li:before {
/*
the counter is added as a pseudo-element,
and nested counters are joined by a dot
*/
content: counters(item, ".") " ";
counter-increment: item;
/* ensure the counters align visually */
font-family: monospace;
font-weight: bold;
margin-inline-end: 1em;
}
#TableOfContents > ol > li {
/*
top-level items wrap after the number,
in order to add some visual separation
*/
display: flex;
flex-flow: column;
}
/* === ordered: false === */
#TableOfContents ul {
list-style: none;
margin-left: 0;
}
#TableOfContents ul ul {
margin-left: 1em;
}

View file

@ -1,23 +0,0 @@
.terminal {
&:after {
content: '';
background: repeating-linear-gradient(
0deg,
rgba(black, 0.15),
rgba(black, 0.15) 1px,
transparent 2px,
transparent 4px
);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
position: relative;
background: radial-gradient(circle at bottom, #455a48, black, black);
text-shadow: 0 0 5px #C8C8C8;
color: rgb(143, 255, 143);
font-family: monospace;
}

View file

@ -1,28 +0,0 @@
#blog {
.list {
.container {
display: flex;
flex-flow: column;
gap: 3em;
}
.list-item {
&__title {
margin: 0;
margin-bottom: 0.5em;
}
&__meta {
display: flex;
flex-flow: row wrap;
gap: 1em;
font-size: 0.8em;
margin-top: 1em;
}
&__date {
margin: 0;
}
.tag:before {
content: '#';
}
}
}
}

View file

@ -1,282 +0,0 @@
#code {
overflow: hidden;
p {
line-height: 1.4;
font-size: 1.2em;
}
.title {
font-size: 2em;
font-weight: 700;
&:before {
font-size: 1em;
font-weight: 700;
color: #ddd;
position: absolute;
top: -1.25em;
left: 0em;
z-index: -1;
}
a {
position: absolute;
top: -1.25em;
width: 100%;
color: #ddd;
display: block;
}
position: relative;
margin-top: 2rem;
margin-bottom: 2rem;
}
.explainer {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
gap: 1em;
margin: 0 auto;
.image {
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
flex-shrink: 0;
border-radius: 100em;
}
i {
font-size: 2em;
}
}
#intro {
.tagline {
font-size: clamp(1.5em,6vw,3em);
font-weight: 700;
margin-bottom: 0.5em;
}
.blurb {}
}
#gitea {
margin-top: 4em;
svg {
width: 2em;
height: 2em;
}
.image {
background-color: #609926;
color: white;
}
}
#github {
margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image {
background: #1B1F23;
color: white
}
}
#liberapay {
margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image {
background: #F6C915;
color: white;
}
}
#patreon {
margin-top: 2em;
svg {
width: 2em;
height: 2em;
margin-left: 0.25em;
}
.image {
background: #f96753;
color: white;
}
}
#paypal {
margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image {
background: #002F85;
color: white;
}
}
#cashapp {
margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image {
background: #00D72E;
color: white;
}
}
#projects {
.title:before {content: '#projects';}
.container {
}
.project-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 3em;
margin-top: 4em;
}
.project {
text-decoration: none;
@include box-shadow;
border-radius: 0.25em;
overflow: hidden;
display: grid;
grid-template-areas: "cover" "title" "summary" "footer";
grid-template-rows: auto auto auto 1fr;
&:link {
color: var(--link-color);
}
&:visited {
color: var(--link-visited);
}
&:focus {
background: unset;
padding: unset;
border-radius: 0.25em;
@include focus-outline;
}
&:hover {
transform: scale(1.05);
@include box-shadow-heavy;
}
&:active {
}
&__image {
width: 100%;
height: auto;
grid-area: cover;
}
&__title {
font-weight: 700;
grid-area: title;
font-size: 1.5em;
margin: 1rem 1rem 0.5rem 1rem;
color: initial;
}
&__summary {
line-height: 1.4;
grid-area: summary;
max-width: 70ch;
margin: 0 1rem;
color: initial;
}
&__date, &__hint {
align-self: end;
justify-self: end;
padding: 1rem 1rem;
text-transform: uppercase;
font-weight: 500;
}
}
@media (min-width: 53em) {
.codecertbot-namecheap {
grid-column: span 3;
display: grid;
grid-template-areas: "cover title" "cover summary" "cover date";
grid-template-columns: 20em 1fr;
grid-template-rows: auto auto auto;
height: max-content;
}
}
}
#contributions {
.title:before {content: '#contributions';}
.container {
}
.contribution-list {
display: flex;
flex-flow: column;
gap: 2em;
margin-top: 3em;
}
.pr {
display: grid;
grid-template-areas: "icon title" "icon summary";
grid-template-columns: 3em 1fr;
&__link {
grid-area: title;
max-width: max-content;
}
&__icon {
grid-area: icon;
width: 2em;
height: 2em;
margin-top: -0.375em;
path {
fill: #9A6BEA;
}
}
&__title {
font-weight: 700;
font-size: 1.2em;
}
&__summary {
line-height: 1.4;
grid-area: summary;
max-width: 70ch;
}
}
.commit {
display: grid;
grid-template-areas: "icon title" ". summary";
grid-template-columns: 3em 1fr;
@media (min-width: 30em) {
grid-template-areas: "icon title . summary";
grid-template-columns: 3em auto 0.5rem 1fr;
}
align-items: center;
&__link {
grid-area: title;
max-width: max-content;
}
&__icon {
grid-area: icon;
width: 2em;
height: 2em;
margin-top: 0.325em;
path {
fill: #8B949E;
}
}
&__title {
font-weight: 700;
}
&__summary {
line-height: 1.4;
grid-area: summary;
max-width: 70ch;
}
}
}
#support {
.title:before {content: '#support';}
.container > p {
line-height: 1.4;
font-size: 1.2em;
}
}
b {font-weight: 700;}
}

View file

@ -1,290 +0,0 @@
#work {
overflow: hidden;
.title {
font-size: 2em;
font-weight: 700;
line-height: 1.2;
margin-top: 2rem;
margin-bottom: 2em;
&:before {
font-size: 1em;
font-weight: 700;
color: #ddd;
position: absolute;
top: -1em;
left: 0em;
z-index: -1;
}
position: relative;
a {
position: absolute;
left: 0;
top: -1em;
color: #ddd;
width: 100%;
}
}
#praise .title:before {
content: '#praise';
}
#process .title:before {
content: '#process';
}
#timeline .title:before {
content: '#timeline';
}
#hireme .title:before {
content: ''
}
#process {
.title {
strong {
color: #06f;
font-weight: 900;
}
em {
color: green;
font-style: italic;
}
br {
@media (max-width: 24.375em) {
display: none
}
}
}
.subtitle {
font-size: 1.6em;
margin-bottom: 1em;
}
.blurb {
font-size: 1.2em;
line-height: 1.4;
}
}
#interstitial {
padding: 3em 0;
@media (min-width: 35em) {
padding-top: 4em;
}
background: #eee;
box-shadow:
0px 4px 4px -4px inset rgba(0,0,0,0.5),
0px -4px 4px -4px inset rgba(0,0,0,0.5)
;
strong {
color: #06f;
font-weight: 900;
}
em {
color: green;
font-style: italic;
}
.container {
display: grid;
place-items: center;
text-align: center;
}
.title {
margin: 0;
margin-bottom: 0.7em;
}
.blurb {
font-size: 1.25em;
margin-bottom: 2em;
max-width: 45ch;
line-height: 1.4;
}
.button {
}
}
.timeline {
position: relative;
max-width: 60em;
margin: 0 auto;
&::before {
content: '?';
position: absolute;
bottom: -4rem;
left: 1.25em;
font-size: 2em;
font-weight: 900;
color: #ddd;
}
&::after {
content: '';
position: absolute;
width: 0.5rem;
background: #ddd;
top: -1.5rem;
bottom: -5rem;
left: 0.5rem;
z-index: -1;
border-radius: 100em;
}
&-item {
padding: 1em 0;
position: relative;
margin-bottom: 2em;
@media (min-width: 30em) {
display: grid;
grid-template-areas:
"dates title"
"at title"
"readmore summary"
;
grid-template-columns: 20ch 1fr;
grid-template-rows: auto auto auto;
}
margin-left: 2.5rem;
&::before {
content: " ";
position: absolute;
top: 0.75rem;
width: 2rem;
height: 2rem;
z-index: 1;
left: -3rem;
border-width: 1rem;
border-radius: 100em;
background-color: #ddd;
border: 0.25em solid #ddd;
}
&.worktrilogy::before {
background: url("/images/logos/trilogy.png");
background-size: cover;
}
&.workmastodon::before {
background: url("/images/logos/mastodon.png");
background-size: cover;
background-color: #2b90d9;
}
&.workpixelfed::before {
background: url("/images/logos/pixelfed.svg");
background-size: cover;
background-color: pink;
}
&.workgo-fed::before {
background: url("/images/logos/go-fed.png");
background-size: cover;
}
&.workeqin::before {
background: url("/images/logos/eqin.png");
background-size: cover;
}
&.workuab:before {
background: url("/images/logos/uab.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: white;
}
&__daterange {
margin-left: 0em;
flex-basis: 10ch;
grid-area: dates;
text-transform: uppercase;
}
&__at {
display: block;
margin-bottom: 0.5em;
}
&__title {
font-size: 1.4em;
font-weight: 700;
margin-bottom: 0.5em;
margin-top: 0.5em;
align-self: center;
grid-area: title;
@media (min-width: 30em) {
margin-top: -0.125em;
}
}
&__summary {
flex-basis: 30ch;
grid-area: summary;
line-height: 1.4;
margin-bottom: 0.5em;
}
&__readmore {
width: max-content;
height: min-content;
grid-area: readmore;
border-radius: 0.25em;
display: block;
}
}
.workeqin, .workuab, .workpixelfed {
.timeline-item__readmore {display: none;}
}
.you {
&:before {
background: green;
}
strong {
font-weight: 700;
color: green;
}
}
}
#cta {
.container {
display: flex;
flex-flow: column;
align-items: start;
}
.title {
font-size: 1.4em;
font-weight: 700;
margin-bottom: 1.4em;
&:before {content: ''}
}
.blurb {
line-height: 1.4;
margin-bottom: 1.4em;
strong {
font-weight: 700;
color: green;
}
}
.buttons {
margin-top: 1em;
display: grid;
grid-template-columns: 1fr;
width: 100%;
font-size: 1.25em;
@media (min-width: 33.75em) {
grid-template-columns: auto auto 1fr;
.button.resume {
grid-row: 2;
}
.button.email {
width: 100%;
grid-column: span 2;
}
}
@media (min-width: 43.25em) {
grid-template-columns: auto auto auto 1fr;
width: unset;
.button {
width: max-content;
}
.button.resume {
grid-row: unset;
}
.button.email {
width: max-content;
grid-column: span 1;
}
}
gap: 1em;
svg {
width: 1.25em;
height: 1.25em;
path {
fill: currentColor;
}
}
}
}
}

View file

@ -1,252 +1,183 @@
main.index {
flex-grow: 0;
text-transform: lowercase;
--padding-inline: 1rem;
--gap: 2rem;
--border-radius: 0.5rem;
display: grid;
gap: var(--gap, 1rem);
padding-inline: 0;
#hcard {
background: var(--color-card-background);
color: var(--color-card-text);
border-radius: var(--border-radius);
--avatar-size: 7.5rem;
> .section-title {
margin-block: 0;
padding-block: 1rem;
padding-inline: var(--padding-inline, 1rem);
}
> header {
background-image: url("/images/sunset.jpg");
background-size: cover;
background-position: center;
width: 100%;
max-width: var(--container-width, 60rem);
margin: 0 auto;
margin-bottom: 4rem;
@include box-shadow;
article:not(.h-card) {
padding: 1em;
> .title {
font-size: 1.5rem;
font-variant: small-caps;
}
.section-title {
font-size: 1.25rem;
}
}
height: 100%;
max-height: 20rem;
aspect-ratio: 2;
article#quotes {
position: relative;
.u-photo {
position: absolute;
top: calc(100% - var(--avatar-size) / 2);
left: var(--padding-inline, 1rem);
width: var(--avatar-size, 7.5rem);
height: var(--avatar-size, 7.5rem);
aspect-ratio: 1;
background: #ddd;
> .title {
border: 0.5rem solid #ddd;
box-sizing: border-box;
border-radius: 1rem;
}
margin-block-end: calc(var(--avatar-size) / 2);
}
.info {
padding-inline: var(--padding-inline, 1rem);
}
article#mastodon {
background: #3088d4;
color: white;
padding: 2em 1em;
a {
.p-name {
font-size: 1.5rem;
font-weight: bold;
margin-block-start: calc(var(--avatar-size) / 2 + 0.5rem);
margin-block-end: 0;
}
.u-uid {
font-family: monospace;
font-size: 1rem;
display: inline-block;
text-decoration: none;
background: white;
padding: 1rem;
color: black;
font-weight: bold;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.25);
}
.p-note {
margin-block: 1rem;
}
#contact {
margin-block: 3rem;
padding-inline: var(--padding-inline, 1rem);
> .section-title {
margin-block-start: 2rem;
margin-block-end: 1rem;
}
}
article#now {
background: white;
}
article#todo {
background: white;
#links {
padding-inline: var(--padding-inline, 1rem);
padding-block-end: 3rem;
}
@media (min-width: 40rem) {
display: grid;
grid-template-columns: repeat(12, 1fr);
#about {
grid-column: 1 / span 12;
display: grid;
grid-template-columns: 20rem 1fr;
width: 100%;
}
article.h-card {
#quotes {
padding-inline: var(--padding-inline, 1rem);
padding-block: 1rem;
margin-block-start: var(--gap, 1rem);
background: var(--color-card-background);
color: var(--color-card-text);
border-radius: var(--border-radius);
> .section-title {
margin-block-start: 0;
margin-block-end: 2rem;
}
}
.metadata {
padding-inline: 0.75em;
dt {
font-variant: small-caps;
font-weight: bold;
}
dd {
margin-inline-start: 0;
}
display: flex;
flex-flow: column;
gap: 1rem;
}
.quote {
margin-inline: 0;
blockquote {
margin: 0;
border-inline-start: 4px solid var(--color-primary-highlight);
padding-inline-start: 0.5rem;
}
cite {
padding-inline-start: calc(0.5rem + 4px);
&:before {
content: '';
}
}
}
#deeds {
grid-column: 1 / span 12;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--color-card-background);
color: var(--color-card-text);
border-radius: var(--border-radius);
padding-inline: var(--padding-inline, 1rem);
padding-block: 1rem;
}
article#mastodon {
grid-column: 1 / span 2;
display: grid;
grid-template-columns: 1fr auto auto auto 1fr;
gap: 1em;
svg {
grid-column: 2;
place-self: center;
#done {
> .section-title {
margin-block-start: 0;
margin-block-end: 1rem;
}
.title {
grid-column: 3 / span 2;
font-size: 2rem;
margin: 0;
place-self: center start;
}
p {
grid-column: 2 / span 2;
font-size: 1.25rem;
max-width: 35ch;
margin: 0;
place-self: center start;
}
a {
grid-column: 4;
grid-row: 2;
place-self: center start;
#mastodon {
img {
max-width: 100%;
}
}
article#now {
grid-column: 1 / span 1;
}
article#todo {
grid-column: 2 / span 1;
}
#updates {
background: var(--color-card-background);
color: var(--color-card-text);
border-radius: var(--border-radius);
padding-inline: var(--padding-inline, 1rem);
}
@media (min-width: 60rem) {
margin-top: 1rem;
#about {
--gap: 1rem;
padding-inline: 2rem;
grid-template-areas:
"info deeds"
"updates updates";
grid-template-columns: 20rem 1fr;
#info {
grid-area: info;
}
#deeds {
grid-area: deeds;
}
article#now {
padding: 2em;
height: 320px;
}
article#todo {
padding: 2em;
#updates {
grid-area: updates;
}
}
// @media (min-width: 100rem) {
// max-width: 100rem;
// display: grid;
// grid-template-columns: 60rem 40rem;
// margin-top: 2rem;
// #about {
// grid-column: 1;
// }
// #deeds {
// grid-column: 2;
// display: grid;
// grid-template-columns: 1fr;
// grid-template-rows: auto auto 1fr;
// }
// article#now {
// grid-column: 1;
// }
// article#todo {
// grid-column: 1;
// }
// }
figure.quote {
border: 0;
blockquote {
padding-inline-start: 0;
&:before {
inset-inline-start: 0;
@media (min-width: 1200px) {
padding-inline: 3rem;
grid-template-areas:
"info deeds updates";
grid-template-columns: 20rem 1fr 20rem;
}
}
}
#wiki {
max-width: 120em;
margin-inline: auto;
h1 {
margin-bottom: 0.25em;
font-family: serif;
border-bottom: 1px solid currentColor;
padding-bottom: 1rem;
}
h2 {
font-weight: normal;
border-bottom: 1px solid currentColor;
padding-bottom: 1rem;
font-family: serif;
}
#TableOfContents {
display: contents;
&::before {
content: "Contents";
font-weight: bold;
}
}
}
.h-card {
--border-radius: 0px;
border-radius: var(--border-radius, 10px);
background: #eee;
h2 {
text-align: center;
font-size: 1em;
margin: 0em;
padding: 1rem;
}
header {
aspect-ratio: 2;
background-image: url('/images/sunset.jpg');
background-size: cover;
background-position: center;
position: relative;
border-top-left-radius: var(--border-radius, 10px);
border-top-right-radius: var(--border-radius, 10px);
img {
border-radius: 12px;
background-color: #ddd;
padding: 10px;
width: 120px;
height: 120px;
position: absolute;
left: calc(50% - 60px);
top: calc(100% - 60px);
}
margin-bottom: 60px;
}
.info {
text-align: center;
p {
margin: 0;
line-height: 1;
}
.p-name {
font-weight: bold;
text-align: center;
font-size: 1.5rem;
line-height: 2rem;
}
.u-uid {
text-decoration: none;
font-family: monospace;
color: inherit;
font-size: 1.25em;
display: inline-block;
line-height: 24px;
}
.p-note {
margin-bottom: 1rem;
line-height: 1.5;
}
}
.metadata {
padding-block-end: 2rem;
display: grid;
gap: 1em;
.field {
display: grid;
place-items: start;
gap: 0.5em;
padding: 0 1em;
}
dt {
font-weight: bold;
font-variant: small-caps
}
dd {
}
}
}
}

View file

@ -1,136 +1,149 @@
.site-header {
z-index: 10;
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
text-transform: lowercase;
padding-block: 1rem;
.container {
height: 4rem;
display: grid;
place-items: center start;
grid-template-columns: 1fr auto;
}
.support {
--icon-size: 2rem;
svg {
font-size: var(--icon-size, 2rem);
}
span {
display: none;
}
padding: 1rem;
display: grid;
place-items: center;
background: var(--color-accent);
color: var(--color-text);
text-decoration: none;
&:hover {
background-color: var(--color-button-hover-background);
color: var(--color-button-hover-text);
}
border-radius: 0.75rem;
@media (min-width: 400px) {
span {display: unset;}
grid-template-columns: var(--icon-size, 1rem) auto;
width: unset;
gap: 1rem;
padding-inline: 1rem;
}
}
.site-masthead {
display: inline-flex;
gap: 1rem;
text-decoration: none;
color: inherit;
font-weight: bold;
img {
width: 3rem;
height: 3rem;
}
p {
margin: 0;
padding: 1rem;
border-radius: 0;
transition-duration: 0.4s;
}
&:hover {
p {
background-color: var(--color-highlight-weak);
color: var(--color-highlight);
border-radius: 100rem;
}
}
}
.site-nav {
--icon-size: 3rem;
--icon-size-active: 3rem;
--icon-size-hover: 3rem;
height: var(--nav-height, 4rem);
@include box-shadow-heavy;
padding-block-end: 0.5rem;
ul {
list-style: none;
padding-inline-start: 0;
margin-block: 0;
display: flex;
justify-content: space-around;
height: 100%;
}
li {
display: contents;
&.active {
font-weight: bold;
color: var(--color-highlight);
svg {
font-size: var(--icon-size-active, 2rem)
}
}
}
a {
text-decoration: none;
color: inherit;
&:link {
}
&:visited {
}
&:focus {
background: var(--primary-accent-transparent);
outline: none;
}
&:hover {
}
&:active {
}
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
background: var(--ui-background);
color: var(--ui-text);
}
.site-masthead {
display: flex;
flex-flow: row-reverse;
align-items: center;
padding: 1em 0;
gap: 1em;
flex: 1;
@media (min-width: $container-width) {
flex: unset;
}
}
.site-icon {
width: 2em;
height: 2em;
border-radius: 100em;
}
.site-title {
margin: 0;
line-height: 1;
font-size: 1em;
}
.site-nav {
flex-grow: 1;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
background: var(--ui-background);
color: var(--ui-text-muted);
z-index: 2;
ul {
list-style: none;
height: var(--nav-height);
max-width: $container-width;
margin: 0 auto;
display: flex;
justify-content: space-around;
li {
margin-block: 0;
flex: 1;
border-bottom: 4px solid var(--ui-background-track);
&.active {
color: var(--ui-text-bold);
border-bottom: 6px solid var(--primary-accent);
font-weight: 700;
}
a {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
height: 100%;
width: var(--nav-height);
transition-duration: var(--transition-duration);
svg {
width: 1em;
height: 1em;
transition-duration: var(--transition-duration);
padding: 0.0rem 0.5rem;
font-size: var(--icon-size, 2rem);
border-radius: 100rem;
}
&:link {
}
&:visited {
}
&:focus {
background: var(--primary-accent-transparent);
padding: unset;
border-radius: unset;
outline: none;
}
&:hover {
}
&:active {
color: var(--color-highlight);
svg {
font-size: var(--icon-size-hover, 2.5rem);
background-color: var(--color-highlight-weak);
}
}
}
background-color: var(--color-background);
color: var(--color-text);
position: fixed;
z-index: 10;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 -1px 3px rgba(0,0,0,0.12), 0 -1px 2px rgba(0,0,0,0.24);
}
box-shadow: 0px -2px 2px rgba(0,0,0,0.2);
@media (min-width: $container-width) {
@media (min-width: 768px) {
--nav-height: 4rem;
.site-nav {
position: unset;
bottom: unset;
left: unset;
flex-grow: unset;
width: 20em;
grid-area: nav;
display: inline-flex;
background: unset;
width: unset;
place-self: end;
box-shadow: unset;
padding-block-end: unset;
ul {gap: 1rem;}
}
.container {
grid-template-columns: auto 1fr auto;
grid-template-areas: "mast nav button";
gap: 1rem;
}
}
}
@media (min-width: $container-width) {
.site-header {
position: sticky;
top: 0;
}
body {
--nav-height: 5rem;
margin-bottom: var(--nav-height, 4rem);
}

View file

@ -1,27 +0,0 @@
figure.quote {
border: 1px solid currentColor;
padding: 1rem;
margin-block: 1rem;
font-family: serif;
position: relative;
blockquote {
border: 0;
margin-block-end: 0;
&:before {
content: '';
position: absolute;
inset-block-start: 0.25rem;
inset-inline-start: 0.5rem;
font-size: 2rem;
}
}
figcaption {
font-size: 0.8em;
cite {
&:before {
content: '';
}
}
}
}

View file

@ -1,99 +0,0 @@
.h-card.full {
--border-radius: 10px;
height: min-content;
border-radius: var(--border-radius, 10px);
background: #eee;
h2 {
text-align: center;
font-size: 1em;
margin: 0em;
padding: 1rem;
}
header {
aspect-ratio: 2;
background-image: url('/images/sunset.jpg');
background-size: cover;
background-position: center;
position: relative;
border-top-left-radius: var(--border-radius, 10px);
border-top-right-radius: var(--border-radius, 10px);
img {
border-radius: 12px;
background-color: #ddd;
padding: 10px;
width: 120px;
height: 120px;
position: absolute;
left: calc(50% - 60px);
top: calc(100% - 60px);
}
margin-bottom: 60px;
}
.info {
text-align: center;
p {
margin: 0;
}
.p-name {
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
.u-uid {
text-decoration: none;
font-family: monospace;
color: inherit;
font-size: 1rem;
}
.p-note {
margin-bottom: 1em;
}
}
.metadata {
padding-block-end: 2rem;
display: grid;
max-width: calc(33ch + 1em);
margin: 0 auto;
gap: 1em;
.field {
display: grid;
place-items: start;
gap: 0.5em;
padding: 0 1em;
}
dt {
font-weight: bold;
font-variant: small-caps
}
dd {
}
}
@media (min-width: 40em) {
display: grid;
grid-template-columns: 20em 1fr;
grid-template-areas:
"header meta"
"info meta";
header {
width: 20em;
grid-area: header;
border-top-right-radius: 0;
}
.info {
grid-area: info;
}
.metadata {
grid-area: meta;
padding-block-start: 2em;
max-width: unset;
width: 100%;
padding-left: 2em;
background: #e6e6e6;
border-top-right-radius: var(--border-radius, 10px);
border-bottom-right-radius: var(--border-radius, 10px);
}
max-width: 40em;
margin: 0 auto;
}
}

View file

@ -0,0 +1,202 @@
main.work {
text-transform: lowercase;
.button {
text-decoration: none;
padding: 1rem;
border-radius: 1rem;
display: inline-grid;
grid-template-columns: auto 1fr;
gap: 0.8rem;
place-items: center;
svg {
font-size: 1.5rem;
}
&.primary {
@include box-shadow;
background-color: var(--color-button-background);
color: var(--color-button-text);
&:hover {
@include box-shadow-heavy;
background-color: var(--color-button-hover-background);
}
}
&.secondary {
&:hover {
background-color: var(--color-button-hover-background);
}
}
}
#intro {
background:
url("/images/backgrounds/ffflux1.png") center / cover;
background-color: rgba(0,0,0,0.4);
background-blend-mode: hard-light;
color: var(--color-background);
.container {
background:
url("/images/puzzlehead.svg") center / cover;
padding-block: 2rem;
}
.tagline {
margin-block-start: 0;
margin-inline-end: 4rem;
em {
display: block;
}
margin-block-end: 1rem;
}
.blurb {
max-width: 40ch;
font-size: 1.2em;
margin-block-end: 2.5rem;
margin-inline-end: 4rem;
}
.tagline,
.blurb {
width: 15rem;
}
@media (min-width: 60rem) {
.tagline, .blurb {width: 40rem;}
.container {padding-block: 4rem;}
}
@media (min-width: 1200px) {
.container {
padding-block: 6rem;
}
}
}
#praise {
.title {
margin-block-end: 4rem;
text-align: center;
}
}
.testimonials {
display: flex;
flex-flow: row wrap;
gap: 4rem;
justify-content: center;
.testimonial {
display: grid;
grid-template-areas:
"bubble bubble"
"avatar name";
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
width: 20rem;
max-width: 90%;
place-items: center;
gap: 1rem;
.avatar {
border-radius: 100rem;
grid-area: avatar;
}
.name {
grid-area: name;
place-self: center start;
}
.bubble {
grid-area: bubble;
background: green;
color: white;
padding: 1rem;
margin: 0;
min-height: 6rem;
width: 100%;
display: grid;
place-items: center;
text-align: center;
border-radius: 1rem;
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 0;
border: 1rem solid transparent;
border-top-color: green;
border-bottom: 0;
bottom: -0.75rem;
left: 24px;
}
}
}
}
#interstitial {
background: var(--color-card-background);
padding-block: 4rem;
.container {
max-width: 38rem;
}
.title {
margin-block-start: 0;
}
}
.you {color: hsl(150, 100%, 20%);}
.me {color: hsl(210, 100%, 40%);}
.work-items {
--border-radius: 1rem;
display: grid;
gap: 2rem;
@media (min-width: 30rem) {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
align-items: stretch;
}
}
.work-item {
background-color: var(--color-card-background);
color: var(--color-card-text);
display: grid;
grid-template-areas:
"link"
"summary";
grid-template-rows: auto 1fr;
border-radius: var(--border-radius, 1rem);
aspect-ratio: 1;
&__link {
display: grid;
grid-template-areas:
"image"
"title";
grid-template-rows: 1fr auto;
grid-area: link;
}
&__image {
display: block;
width: 100%;
grid-area: image;
border-start-start-radius: var(--border-radius, 1rem);
border-start-end-radius: var(--border-radius, 1rem);
}
&__title {
grid-area: title;
padding-inline: 1rem;
margin-block-end: 0;
}
&__summary {
padding-inline: 1rem;
grid-area: summary;
place-self: start;
}
}
.your-item {
display: grid;
padding: 2rem;
border: 4px dashed green;
border-radius: var(--border-radius, 1rem);
aspect-ratio: 1;
place-items: center;
}
#hire-me {
.button {
span {
justify-self: start;
}
}
.email {
margin-block-end: 1rem;
}
}
}

View file

@ -1,56 +1,21 @@
@import "base/reset.scss";
@import "base/variables.scss";
@import "base/mixins.scss";
@import "base/sections.scss";
@import "base/text.scss";
@import "base/layout.scss";
@import "base/content.scss";
@import "base/links.scss";
@import "libraries/photoswipe.scss";
@import "components/pullquote.scss";
@import "components/button.scss";
@import "components/intro.scss";
@import "components/praise.scss";
@import "components/devices.scss";
@import "components/terminal.scss";
@import "layouts/partials/site-header.scss";
@import "layouts/partials/site-footer.scss";
@import "layouts/partials/breadcrumbs.scss";
@import "layouts/shortcodes/figquote.scss";
@import "layouts/shortcodes/hcard-full.scss";
@import "layouts/_default/single.scss";
@import "layouts/_default/list.scss";
@import "layouts/blog/single.scss";
@import "layouts/blog/list.scss";
@import "components/table-of-contents";
@import "layouts/index.scss";
@import "content/work.scss";
@import "content/code.scss";
@import "content/blog.scss";
@import "layouts/work/list.scss";
@import "layouts/blog/list.scss";
@media (min-width: 2500px) {
main {
overflow: hidden;
position: relative;
}
main:before {
content: '...what, you actually use your browser at this width? god, what a waste of space...';
position: fixed;
left: 5%;
bottom: 1em;
max-width: 40ch;
}
main:after {
content: 'although, i kinda want to create a website that actually makes use of it... one day, maybe?';
position: fixed;
right: 5%;
bottom: 1em;
max-width: 40ch;
}
}
@import "layouts/blog/single.scss";

View file

@ -0,0 +1,2 @@
+++
+++

View file

View file

@ -9,7 +9,9 @@ at = "Equality Initiative"
position = "Director of Technology"
tags = ["nonprofit"]
categories = ["Work"]
src = "/images/cover/eqin.jpg"
[[resources]]
name = "cover"
src = "cover.jpg"
+++
## Building and maintaining a website

View file

@ -7,8 +7,13 @@ start = "Aug 2019"
end = "Jan 2020"
at = "Mastodon"
position = "Information Architect / Documentation Specialist"
tags = ["mastodon", "documentation", "information architecture", "rest api"]
tags = ["mastodon", "documentation", "information architecture", "rest api", "technical writing"]
categories = ["Work"]
highlighted = true
weight = 10
[[resources]]
name = "cover"
src = "mastodocs.jpg"
+++
<main id="mastodon">
@ -443,15 +448,9 @@ categories = ["Work"]
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
<img src="mastodocs.jpg" alt="Mastodon documentation landing page" width=1280 height=720>
<div class="buttons">
<a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16>
<path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z" />
</svg>Check out the live
version</a>
<a href="mailto:a@trwnh.com" class="email primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g transform="matrix(1 0 0 -1 30.373 1252.3)">
<path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor" />
</g>
</svg>Email me a proposal</a>
<a href="mailto:a@trwnh.com" class="email primary button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="currentColor" d="M32.33 6a2 2 0 0 0-.41 0h-28a2 2 0 0 0-.53.08l14.45 14.39Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="m33.81 7.39l-14.56 14.5a2 2 0 0 1-2.82 0L2 7.5a2 2 0 0 0-.07.5v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-.12-.61M5.3 28H3.91v-1.43l7.27-7.21l1.41 1.41Zm26.61 0h-1.4l-7.29-7.23l1.41-1.41l7.27 7.21Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg><span>Email me a proposal</span></a>
<a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg><span>Check out the live
version</span></a>
</div>
</div>
</section>

View file

@ -1,4 +1,7 @@
#mastodon {
.container {
max-width: 960px;
}
overflow: hidden;
background: #16191f;
color: #9baec8;
@ -173,7 +176,7 @@
position: relative;
&:before {
position: absolute;
top: -1.75em;
top: -2.5em;
right: calc(50% - 3.25ch);
font-size: 2em;
font-weight: 900;
@ -228,6 +231,7 @@
}
.praise {
border: 0;
margin: 0;
background: #303643;
color: #d9e1e8;
font-size: 1.8em;
@ -336,9 +340,16 @@
}
.button {
width: 100%;
padding: 1rem;
text-decoration: none;
display: inline-grid;
grid-template-columns: auto 1fr;
gap: 0.8rem;
place-items: center;
flex-basis: 20em;
i {
margin-right: 1em;
border-radius: 1rem;
svg {
font-size: 2rem;
}
&.demo {
background: transparent;
@ -349,6 +360,11 @@
}
}
&.email {
background: #0060ff;
color: white;
&:hover {
background: #9baec8;
}
}
}
}

View file

@ -11,7 +11,7 @@ tags = ["pixelfed", "project management", "product management", "github issues",
categories = ["Work"]
[[resources]]
name = "cover"
src = "/images/cover/pixelfed.jpg"
src = "masterpost.jpg"
+++
## Overview

View file

@ -9,7 +9,11 @@ at = "Trilogy"
position = "Senior Technical Writer / Product Knowledge Curator"
tags = ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
category = "Work"
cover = "/images/cover/trilogy.png"
highlighted = true
weight = 20
[[resources]]
name = "cover"
src = "trilogy-full.png"
+++
<main id="trilogy">

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -9,4 +9,5 @@ at = "UAB"
position = "Graduated from The University of Alabama at Birmingham"
tags = []
categories = ["Work"]
draft = true
+++

View file

@ -19,36 +19,36 @@ series = "series"
[menu]
[[menu.main]]
identifier = "home"
pre = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=16 height=16><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"/></svg>'
name = "Home"
url = "/"
identifier = "about"
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>person</title><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"/></svg>'
name = "About"
pageRef = "/"
weight = 10
[[menu.main]]
identifier = "work"
pre = '<svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1 0 0 -1 37.966 1313.1)"> <path d="m640 1152h512v128h-512v-128zm1152-640v-480q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v480h672v-160q0-26 19-45t45-19h320q26 0 45 19t19 45v160h672zm-768 0v-128h-256v128h256zm768 480v-384h-1792v384q0 66 47 113t113 47h352v160q0 40 28 68t68 28h576q40 0 68-28t28-68v-160h352q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>'
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><title>briefcase</title><path fill="currentColor" fill-rule="evenodd" d="M11 4V3a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v1H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM9 2.5H7a.5.5 0 0 0-.5.5v1h3V3a.5.5 0 0 0-.5-.5M9 9a1 1 0 1 1-2 0a1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M3 11.83V12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-.17c-.313.11-.65.17-1 .17H4c-.35 0-.687-.06-1-.17"/></svg>'
name = "Work"
url = "/work/"
pageRef = "/work/"
weight = 20
[[menu.main]]
identifier = "code"
pre = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width=16 height=16><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>'
name = "Code"
url = "/code/"
weight = 30
# [[menu.main]]
# identifier = "services"
# pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M16.68 9.77a4.543 4.543 0 0 1-4.95.99l-5.41 6.52c-.99.99-2.59.99-3.58 0s-.99-2.59 0-3.57l6.52-5.42c-.68-1.65-.35-3.61.99-4.95c1.28-1.28 3.12-1.62 4.72-1.06l-2.89 2.89l2.82 2.82l2.86-2.87c.53 1.58.18 3.39-1.08 4.65M3.81 16.21c.4.39 1.04.39 1.43 0c.4-.4.4-1.04 0-1.43c-.39-.4-1.03-.4-1.43 0a1.02 1.02 0 0 0 0 1.43"/></svg>'
# name = "Services"
# pageRef = "/services/"
# weight = 30
#[[menu.main]]
#identifier = "design"
#pre = '<svg version="1.1" viewBox="0 -256 2000 2000" width=16 height=16 xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1 0 0 -1 37.966 1447.9)"> <path d="m1792 544v832q0 13-9.5 22.5t-22.5 9.5h-1600q-13 0-22.5-9.5t-9.5-22.5v-832q0-13 9.5-22.5t22.5-9.5h1600q13 0 22.5 9.5t9.5 22.5zm128 832v-1088q0-66-47-113t-113-47h-544q0-37 16-77.5t32-71 16-43.5q0-26-19-45t-45-19h-512q-26 0-45 19t-19 45q0 14 16 44t32 70 16 78h-544q-66 0-113 47t-47 113v1088q0 66 47 113t113 47h1600q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>'
#name = "Design"
#url = "/design/"
#weight = 40
[[menu.main]]
identifier = "wiki"
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><title>wikitext brackets</title><path fill="currentColor" d="M1 3v14h3v-2H3V5h1V3zm4 0v14h4v-2H7V5h2V3zm11 0v2h1v10h-1v2h3V3zm-5 0v2h2v10h-2v2h4V3z"/></svg>'
name = "Wiki"
pageRef = "/wiki/"
weight = 40
[[menu.main]]
identifier = "blog"
pre = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width=16 height=16><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>'
name = "Blog"
url = "/blog/"
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>article</title><g fill="currentColor"><path fill-rule="evenodd" d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 0 0 3 3h15a3 3 0 0 1-3-3V4.875C17.25 3.839 16.41 3 15.375 3zM12 9.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5zm-.75-2.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75M6 12.75a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75M6 6.75a.75.75 0 0 0-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-3A.75.75 0 0 0 9 6.75z" clip-rule="evenodd"/><path d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 0 1-3 0z"/></g></svg>'
name = "Posts"
pageRef = "/blog/"
weight = 50

View file

@ -1,16 +1,19 @@
{{ define "body" }}
{{ partial "site-header.html" . }}
<main class="index">
<section id="about">
<article class="h-card vcard" id="hcard">
<main class="index container">
<div id="about">
<section class="h-card vcard" id="hcard">
<h2 class="section-title">h-card</h2>
<header>
<img class="u-logo photo" width=120 height=120 src="/images/people/avatar.png" alt="">
<img class="u-logo u-photo logo photo" width=160 height=160 src="/images/people/avatar.png" alt="">
</header>
<div class="info">
<p class="p-name n"><span class="p-given-name given-name">Abdullah</span> <span class="p-family-name family-name">Tarawneh</span></p>
<a href="https://abdullahtarawneh.com" class="u-url u-uid url">abdullahtarawneh.com</a>
<p class="p-note note">More commonly known as <span class="p-nickname nickname" title="preferred name">a</span> or <span class="p-nickname nickname" title="preferred username">trwnh</span></p>
<a href="https://abdullahtarawneh.com" class="u-url u-uid url uid" rel="self">abdullahtarawneh.com</a>
<p class="p-note note">More commonly known as <span class="p-nickname nickname" title="preferred name">a</span> or <span class="p-nickname nickname" title="preferred username">trwnh</span>. <span class="p-gender-identity">Nonbinary</span> ace (<span class="p-pronouns"><span class="p-x-pronoun-nominative p-pronoun-nominative p-pronoun">they</span>/<span class="p-x-pronoun-oblique p-pronoun-oblique">them</span>)</p>
</div>
<section id="contact">
<h3 class="section-title">Contact me</h3>
<dl class="metadata">
<div class="field">
<dt>Email</dt>
@ -24,18 +27,33 @@
<div class="field">
<dt>Fediverse</dt>
<dd><a class="u-url" href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
<dd><a class="u-url url" href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
</div>
</dl>
</section>
<section id="links">
<h3 class="section-title">Other links</h3>
<dl class="metadata">
<div class="field">
<dt>Personal website</dt>
<dd><a class="u-url url" href="https://trwnh.com" rel="me">trwnh.com</a></dd>
</div>
<div class="field">
<dt>Personal website</dt>
<dd><a class="u-url" href="https://trwnh.com">trwnh.com</a></dd>
<dt>Personal code repos</dt>
<dd><a class="u-url url" href="https://git.trwnh.com" rel="me">git.trwnh.com</a></dd>
</div>
<div class="field">
<dt>Github</dt>
<dd><a class="u-url url" href="https://github.com/trwnh" rel="me">github.com/trwnh</a></dd>
</div>
</dl>
</article>
</section>
</section>
<article id="quotes">
<h1 class="title">Things people have said about me</h1>
<section id="quotes">
<h2 class="section-title">Things people have said about me</h2>
<figure class="quote">
<blockquote>
It's scary how much you know.
@ -60,36 +78,61 @@
</blockquote>
<figcaption><cite>a professional colleague</cite></figcaption>
</figure>
</article>
</section>
<section id="deeds">
<article id="mastodon">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 216.4144 232.00976">
<path fill="#fff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path>
<path fill="#3088d4" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"></path>
</svg>
<h1 class="title">Mastodon documentation <br />case study</h1>
</div>
<div id="deeds">
<section id="done">
<h2 class="section-title">Notable work</h2>
<section id="mastodon">
<h3 class="section-title">Mastodon documentation case study</h3>
<img src="/work/mastodon/mastodocs.jpg" alt="mastodon documentation">
<p>I reorganized and rewrote the docs for an open-source project with millions of users.</p>
<a href="/work/mastodon">Read more ></a>
</article>
<article id="now">
<h1 class="title">What I'm doing right now</h1>
</section>
</section>
<section id="doing">
<h2 class="section-title">Present involvement</h2>
<section id="socialweb">
<h2 class="section-title">social web so-called "expert"</h2>
<h3 class="section-title">social web so-called "expert"</h3>
<p>Member of the Social Web Community Group at the W3C. Writing a W3C SWICG report on <a href="https://swicg.github.io/activitypub-webfinger">ActivityPub and WebFinger</a>.</p>
<p>Also active on the <a href="https://socialhub.activitypub.rocks/u/trwnh/summary">SocialHub forum</a> for the ActivityPub community.</p>
</section>
</article>
<article id="todo">
<h1 class="title">What I want to do</h1>
</section>
<section id="todo">
<h2 class="section-title">Future directions</h2>
<section id="untitled-social-app">
<h2 class="section-title">untitled social app</h2>
<h3 class="section-title">untitled social app</h3>
<p>For the past few years, I've been developing a theoretical framework for unified social communications across various protocols. I'd like to collect my ideas into writings that will be published on this site.</p>
</section>
</article>
</section>
</div>
<div id="updates">
<section id="news">
<h2>Latest news</h2>
<p>June 2024: updated this website's layout</p>
</section>
<section id="activity">
<h2>Latest posts</h2>
<ul>
</ul>
</section>
<section id="changelog">
<h2>Latest changes</h2>
{{ range first 5 .Site.RegularPages.ByLastmod.Reverse }}
<p>{{ .Title }} was edited on {{ .Lastmod }} by commit {{.GitInfo.AbbreviatedHash}} - {{.GitInfo.Subject}}</p>
{{ end }}
</section>
</div>
</main>
<style>
body {background: #abc;}
</style>
{{ end }}

View file

@ -1,18 +1,27 @@
<header class="site-header">
<div class="container">
<a href="/" class="site-masthead">
<img class="site-icon" width=32 src="/images/people/avatar.png">
<p class="site-title">hi, i'm abdullah tarawneh.</p>
<a href="/" class="site-masthead" title="hi, i'm a.">
<img class="site-icon" width=32 src="/images/people/avatar.png" alt="">
<p class="site-title">hi, i'm a.</p>
</a>
<nav class="site-nav">
<a href="/contributions" class="support">
<svg xmlns="http://www.w3.org/2000/svg" width=1em height=1em viewBox="0 0 20 20" fill="currentColor">
<title>heart</title>
<path d="m9.653 16.915-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 0 1-.69.001l-.002-.001Z" />
</svg>
<span>support me</span></a>
<nav class="site-nav" aria-label="Main navigation">
<ul>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ $active := $currentPage.IsMenuCurrent "main" . }}
<li
{{- if or (and $currentPage.IsHome (eq .Identifier "home")) ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
{{- if $active }}
class="active"
{{ end }}>
<a href="{{ .URL | absLangURL }}">
<a href="{{ .URL | absLangURL }}" {{- if $active }}
aria-current="page"
{{ end }}>
{{ .Pre }}
<span>{{ .Name }}</span>
{{ .Post }}
@ -20,7 +29,6 @@
</li>
{{ end }}
</ul>
{{ partial "i18nlist.html" . }}
</nav>
</div>
</header>

View file

@ -1,20 +1,28 @@
{{ define "main" }}
<main id="work">
<header class="section" id="intro">
<main class="work">
<header id="intro">
<div class="container">
<h1 class="tagline">i can help you<br> <em>figure out the hard parts.</em></h1>
<p class="blurb">need something done? perhaps a website, some documentation, or simply advice on a project? i'm here for you.</p>
<a href="mailto:a@trwnh.com" class="primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg><span>email me</span></a>
<h1 class="tagline">I can help you <em>figure out the hard parts.</em></h1>
<p class="blurb">Need something done? Perhaps some documentation, a static website, or simply advice on a project? I'm here for you.</p>
<a href="mailto:a@trwnh.com" class="cta button primary">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><title>email envelope</title><path fill="currentColor" d="M32.33 6a2 2 0 0 0-.41 0h-28a2 2 0 0 0-.53.08l14.45 14.39Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="m33.81 7.39l-14.56 14.5a2 2 0 0 1-2.82 0L2 7.5a2 2 0 0 0-.07.5v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-.12-.61M5.3 28H3.91v-1.43l7.27-7.21l1.41 1.41Zm26.61 0h-1.4l-7.29-7.23l1.41-1.41l7.27 7.21Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg>
<span>Send a proposal</span>
</a>
</div>
</header>
<section id="services">
<div class="container">
<h2 class="title"></h2>
</div>
</section>
<section class="section" id="process">
<div class="container">
<h2 class="title"><a href="#process">#</a>a <strong>no-nonsense</strong> approach <br>to making things <em>make sense.</em></h2>
<h2 class="title">A <strong>no-nonsense</strong> approach to making things <em>make sense.</em></h2>
<section>
<h3 class="subtitle">
your needs come first.
<span class="you">Your</span> needs come first.
</h3>
<p class="blurb">we'll sit down and figure out <br>exactly what your problem is, <br>and what your requirements are.</p>
<p class="blurb">We'll sit down and figure out exactly what <span class="you">your</span> problem is, and what <span class="you">your</span> requirements are.</p>
</section>
<section>
<h3 class="subtitle">
@ -26,63 +34,69 @@
</section>
<section class="section" id="praise">
<div class="container">
<h2 class="title"><a href="#praise">#</a>what others have said:</h2>
<h2 class="title">What others have said:</h2>
<div class="testimonials">
<div class="testimonial">
{{ template "shortcodes/people/khalil.html" . }}
<p class="name">Khalil Saadiq,<br>former classmate</p>
<blockquote class="bubble">it's scary how much you know.</blockquote>
<blockquote class="bubble">It's scary how much you know.</blockquote>
</div>
<div class="testimonial">
{{ template "shortcodes/people/gargron.html" . }}
<p class="name">Eugen Rochko,<br>Mastodon developer</p>
<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
<blockquote class="bubble">Bless you for being here to work on the docs BTW. It's a big relief.</blockquote>
</div>
<div class="testimonial">
{{ template "shortcodes/people/dansup.html" . }}
<p class="name">Daniel Supernault,<br>Pixelfed developer</p>
<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
<blockquote class="bubble">I don't trust anyone as much as you to shape the direction of the project.</blockquote>
</div>
</div>
</div>
</section>
<section class="section" id="interstitial">
<div class="container">
<h2 class="title">i bet i can make <em class="you">you</em> feel the same way.</h2>
<p class="blurb">do you want a <strong>knowledgeable</strong> person you can <strong>trust</strong> to do the work <strong>right</strong>, as well? i'd love to add <em class="you">your</em> praise above.</p>
<a href="mailto:a@trwnh.com" class="email button primary"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg> Email me</a>
<h2 class="title">I bet i can make <em class="you">you</em> feel the same way.</h2>
<p class="blurb">Do you want a <span class="me">knowledgeable</span> person you can <span class="me">trust</span> to do the work <span class="me">right</span>, as well? I'd love to add <em class="you">your</em> praise above.</p>
<a href="mailto:a@trwnh.com" class="email cta button primary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><title>email envelope</title><path fill="currentColor" d="M32.33 6a2 2 0 0 0-.41 0h-28a2 2 0 0 0-.53.08l14.45 14.39Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="m33.81 7.39l-14.56 14.5a2 2 0 0 1-2.82 0L2 7.5a2 2 0 0 0-.07.5v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-.12-.61M5.3 28H3.91v-1.43l7.27-7.21l1.41 1.41Zm26.61 0h-1.4l-7.29-7.23l1.41-1.41l7.27 7.21Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg><span>Send a proposal</span></a>
</div>
</section>
<section class="section" id="timeline">
<section class="section" id="examples">
<div class="container">
<h2 class="title"><a href="#timeline">#</a>here's a timeline of work i've done.</h2>
<div class="timeline">
{{ range .Pages.ByDate }}
<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
<h3 class="timeline-item__title">{{ .Params.position }}</h3>
<p class="timeline-item__summary">{{.Summary}}</p>
<span class="timeline-item__daterange">
<datetime class="timeline-item__date">{{ .Params.start }}</datetime> <datetime class="timeline-item__date">{{ .Params.end }}</datetime>
</span>
<span class="timeline-item__at">at {{ .Params.at }}</span>
<a class="timeline-item__readmore button primary" href="{{ .Permalink }}">Read more...</a>
</article>
<h2 class="title">Here's some of my more notable work.</h2>
<div class="work-items">
{{ range .Pages }}
<section class="work-item {{ .Permalink | relURL | anchorize }}">
<a class="work-item__link" href="{{ .Permalink }}">
<h3 class="work-item__title">{{ .Title }}</h3>
{{ with .Resources.GetMatch "cover" }}
<img class="work-item__image" src="{{ .Permalink }}" alt="">
{{ end }}
<section class="you timeline-item" id="hireme">
<h3 class="timeline-item__title">You could be here.</h3>
<p class="timeline-item__summary">i'm currently <strong>available</strong> for work. let's get in touch.</p>
<span class="timeline-item__daterange">Today</span>
<span class="timeline-item__at">at your service</span>
</a>
<p class="work-item__summary">{{.Summary}}</p>
</section>
{{ end }}
<section class="your-item">
<div>
<h3 class="your-item__title">You could be here.</h3>
<p class="your-item__summary">I'm currently <strong>available</strong> for work. Let's get in touch.</p>
<a href="mailto:a@trwnh.com" class="email cta button primary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><title>email envelope</title><path fill="currentColor" d="M32.33 6a2 2 0 0 0-.41 0h-28a2 2 0 0 0-.53.08l14.45 14.39Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="m33.81 7.39l-14.56 14.5a2 2 0 0 1-2.82 0L2 7.5a2 2 0 0 0-.07.5v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-.12-.61M5.3 28H3.91v-1.43l7.27-7.21l1.41 1.41Zm26.61 0h-1.4l-7.29-7.23l1.41-1.41l7.27 7.21Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg><span>Send a proposal</span></a>
</div>
</section>
</div>
</div>
</section>
<section class="section" id="cta">
<section class="section" id="hire-me">
<div class="container">
<div class="buttons">
<a href="mailto:a@trwnh.com" class="email button primary"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg> Email me</a>
<a href="/resume" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=16 height=16><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H303.2c.9-4.5.8 3.6.8-22.4 0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6 0 26-.2 17.9.8 22.4H48V144h480v288zm-168-80h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm-168 96c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64z"/></svg> Résume (HTML)</a>
<a href="/resume/abdullah-tarawneh_resume.pdf" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width=16 height=16><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"/></svg> Résume (PDF)</a>
<h2>Got something more permanent in mind?</h2>
<p>I'm also open to remote work on a 1099 or W2. I'm particularly interested in software and API documentation / technical writing and information architecture!</p>
<a href="mailto:a@trwnh.com" class="email button primary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><title>email envelope</title><path fill="currentColor" d="M32.33 6a2 2 0 0 0-.41 0h-28a2 2 0 0 0-.53.08l14.45 14.39Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="m33.81 7.39l-14.56 14.5a2 2 0 0 1-2.82 0L2 7.5a2 2 0 0 0-.07.5v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-.12-.61M5.3 28H3.91v-1.43l7.27-7.21l1.41 1.41Zm26.61 0h-1.4l-7.29-7.23l1.41-1.41l7.27 7.21Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg><span>Offer me a job</span></a>
<div class="resume">
<a href="/resume" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>personal document</title><path fill="currentColor" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m8 18v-1c0-1.33-2.67-2-4-2s-4 .67-4 2v1zm-4-8a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2"/></svg><span>Résume (HTML)</span></a>
<a href="/resume/abdullah-tarawneh_resume.pdf" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>personal document</title><path fill="currentColor" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m8 18v-1c0-1.33-2.67-2-4-2s-4 .67-4 2v1zm-4-8a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2"/></svg><span>Résume (PDF)</span></a>
</div>
<div class="writing-samples">
<a href="/resume/abdullah-tarawneh_resume.pdf" class="writing-samples button secondary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>writing document</title><path fill="currentColor" d="M12 2v6a2 2 0 0 0 2 2h4.92c-.596.22-1.144.554-1.558.97l-6.05 6.092a2.8 2.8 0 0 0-.728 1.279l-.525 2.03A2.08 2.08 0 0 0 10.3 22H5.5A1.5 1.5 0 0 1 4 20.5v-17A1.5 1.5 0 0 1 5.5 2zm1.5.5V8a.5.5 0 0 0 .5.5h5.5zm-1.304 15.072l5.902-5.902a2.285 2.285 0 1 1 3.233 3.232l-5.903 5.902a2.7 2.7 0 0 1-1.247.707l-1.831.457a1.087 1.087 0 0 1-1.318-1.318l.457-1.83c.118-.473.362-.904.707-1.248"/></svg><span>Tech writing samples (PDF)</span></a>
</div>
</div>
</section>

Binary file not shown.

Binary file not shown.