sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

WIP: styled links and buttons and cards

Browse source
This commit is contained in:
a 2021-12-28 08:52:13 -06:00
parent fdbb9b822e
commit 8143834ec5
18 changed files with 490 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
assets/scss/base/links.scss
View file

@ -1,32 +1,30 @@
a:link, a {
a:visited { transition: all 0.1s ease-out;
color: inherit; @media (prefers-reduced-motion) {
text-decoration-color: #0060ff; transition: none;
transition:
text-decoration-thickness 200ms ease-out,
text-underline-offset 200ms ease-out,
text-decoration-color 200ms ease-out,
color 200ms ease-out
;
} }
&:link {
a:hover, a:focus, a:active { color: var(--link-color);
text-decoration-color: #0060ff; text-decoration-thickness: .125rem;
}
a:link {text-underline-offset: -0.075em;}
a:hover {text-underline-offset: -0.375em;}
@supports (text-decoration-thickness: 1em) {
a:link {
text-decoration-thickness: 0.125em;
text-underline-offset: 0.125em; text-underline-offset: 0.125em;
text-decoration-skip-ink: none; text-decoration-skip-ink: none;
} }
&:visited {
color: var(--link-visited);
}
&:focus {
outline: none;
background: var(--primary-accent);
color: var(--primary-accent-text);
padding: 4px;
border-radius: 2px;
text-decoration: none;
}
&:hover {
text-decoration-thickness: 0.25em;
text-underline-offset: 0.25em;
}
&:active {
a:hover {
color: white;
text-decoration-thickness: 1.125em;
text-underline-offset: -0.875em;
} }
} }

21
assets/scss/base/list.scss
View file

@ -8,6 +8,27 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
&__link {
display: block;
&:focus {
background: unset;
padding: unset;
@include focus-outline;
&:link {
color: var(--link-color);
}
&:visited {
color: var(--link-visited);
}
}
&:hover {
}
&:active {
}
}
&__image { &__image {
width: 100%; width: 100%;
height: auto; height: auto;

14
assets/scss/base/mixins.scss
View file

@ -5,3 +5,17 @@
0 6px 8px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11); 0 8px 16px rgba(0,0,0,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);
}
@mixin focus-outline {
outline: solid;
outline-color: var(--primary-accent);
outline-offset: 4px;
}

10
assets/scss/base/variables.scss
View file

@ -6,11 +6,13 @@ $header-height: 4em;
--container-width: #{$container-width}; --container-width: #{$container-width};
--nav-height: #{$nav-height}; --nav-height: #{$nav-height};
--header-height: #{$header-height}; --header-height: #{$header-height};
--link-color: #06f; --link-color: rgb(0,96,255);
--link-visited: rgb(147, 85, 197); --link-visited: rgb(140, 74, 194);
--primary-accent: #06f; --primary-accent: rgb(0,96,255);
--primary-accent-transparent: rgba(0,96,255,0.25);
--primary-accent-text: #fff;
--ui-background: #fff; --ui-background: #fff;
--ui-background-track: #ddd; --ui-background-track: #aaa;
--ui-text: #212121; --ui-text: #212121;
--ui-text-muted: #777; --ui-text-muted: #777;
--ui-text-bold: #000; --ui-text-bold: #000;

65
assets/scss/components/button.scss
View file

@ -1,4 +1,4 @@
.button, .button:link, .button:visited { .button {
width: 100%; width: 100%;
@media (min-width: 33.75em) { @media (min-width: 33.75em) {
width: max-content; width: max-content;
@ -12,14 +12,73 @@
border-radius: 0.25em; border-radius: 0.25em;
font-weight: 700; font-weight: 700;
gap: 1em; gap: 1em;
&:link {
}
&:visited {
}
&:focus {
padding: 1em;
border-radius: 0.25em;
@include focus-outline;
}
&:hover {
}
&:active {
}
} }
.button.primary { .button.primary {
background: var(--primary-accent); background: var(--primary-accent);
color: white; color: var(--primary-accent-text);
&:link {
}
&:visited {
}
&:focus {
}
&:hover {
}
&:active {
}
} }
.button.secondary { .button.secondary {
background: white; background: white;
border: 2px solid var(--primary-accent); border: 2px solid var(--primary-accent);
color: #06f; color: var(--primary-accent);
&:link {
}
&:visited {
}
&:focus {
}
&:hover {
background: var(--primary-accent-transparent);
}
&:active {
}
} }

15
assets/scss/components/intro.scss
View file

@ -1,4 +1,4 @@
#intro { #work #intro {
--headerHeight: 4em; --headerHeight: 4em;
--navHeight: 4em; --navHeight: 4em;
background-color: rgb(80, 102, 124); background-color: rgb(80, 102, 124);
@ -44,8 +44,15 @@
background: #06f; background: #06f;
color: white; color: white;
width: max-content; width: max-content;
i {margin: 0;} svg {
span {display: none;} width: 1.75em;
height: 1.75em;
margin: 0;
}
span {
display: none;
font-size: 1.25em;
}
border-radius: 100em; border-radius: 100em;
@include box-shadow; @include box-shadow;
justify-self: start; justify-self: start;
@ -103,7 +110,7 @@
} }
max-height: 46em; max-height: 46em;
} }
@media (min-height: 48em) { @media (min-height: 40em) {
.tagline {margin-top: 1em;} .tagline {margin-top: 1em;}
} }
} }

2
assets/scss/components/links.scss
View file

@ -1,2 +0,0 @@
a:link {color: var(--link-color);}
a:visited {color: var(--link-visited);}

3
assets/scss/components/praise.scss
View file

@ -1,7 +1,4 @@
#praise { #praise {
.title:before {
content: 'praise';
}
.testimonials { .testimonials {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;

88
assets/scss/content/code.scss
View file

@ -4,21 +4,25 @@
line-height: 1.4; line-height: 1.4;
font-size: 1.2em; font-size: 1.2em;
} }
.page-header {
.title:before {content: 'code';}
}
.title { .title {
font-size: 2em; font-size: 2em;
font-weight: 700; font-weight: 700;
&:before { &:before {
font-size: 3em; font-size: 1em;
font-weight: 700; font-weight: 700;
color: #ddd; color: #ddd;
position: absolute; position: absolute;
top: -0.425em; top: -1em;
left: -0.15em; left: 0em;
z-index: -1; z-index: -1;
} }
a {
position: absolute;
top: -1em;
color: #ddd;
display: block;
width: 100%;
}
position: relative; position: relative;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -45,7 +49,10 @@
} }
#gitea { #gitea {
margin-top: 4em; margin-top: 4em;
i {margin-left: 0em; margin-top: 0.0625em} svg {
width: 2em;
height: 2em;
}
.image { .image {
background-color: #609926; background-color: #609926;
color: white; color: white;
@ -53,13 +60,21 @@
} }
#github { #github {
margin-top: 2em; margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image { .image {
background: black; background: #1B1F23;
color: white color: white
} }
} }
#liberapay { #liberapay {
margin-top: 2em; margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image { .image {
background: #F6C915; background: #F6C915;
color: white; color: white;
@ -67,14 +82,22 @@
} }
#patreon { #patreon {
margin-top: 2em; margin-top: 2em;
i {margin-left: 0.125em;} svg {
width: 2em;
height: 2em;
margin-left: 0.25em;
}
.image { .image {
background: #F23F4A; background: #f96753;
color: white; color: white;
} }
} }
#paypal { #paypal {
margin-top: 2em; margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image { .image {
background: #002F85; background: #002F85;
color: white; color: white;
@ -82,13 +105,17 @@
} }
#cashapp { #cashapp {
margin-top: 2em; margin-top: 2em;
svg {
width: 2em;
height: 2em;
}
.image { .image {
background: #00D72E; background: #00D72E;
color: white; color: white;
} }
} }
#projects { #projects {
.title:before {content: 'projects';} .title:before {content: '#projects';}
.container { .container {
} }
@ -99,14 +126,33 @@
margin-top: 4em; margin-top: 4em;
} }
.project { .project {
text-decoration: none;
@include box-shadow; @include box-shadow;
border-radius: 0.25em; border-radius: 0.25em;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-areas: "cover" "title" "summary" "footer"; grid-template-areas: "cover" "title" "summary" "footer";
grid-template-rows: auto auto auto 1fr; grid-template-rows: auto auto auto 1fr;
&__link { &:link {
display: contents; 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 { &__image {
width: 100%; width: 100%;
@ -147,7 +193,7 @@
} }
} }
#contributions { #contributions {
.title:before {content: 'contributions';} .title:before {content: '#contributions';}
.container { .container {
} }
@ -178,6 +224,12 @@
font-weight: 700; font-weight: 700;
grid-area: title; grid-area: title;
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: 0.125em;
text-decoration-offset: 0.125em;
&:hover {
text-decoration-thickness: 0.25em;
text-decoration-offset: 0.25em;
}
font-size: 1.2em; font-size: 1.2em;
} }
&__summary { &__summary {
@ -212,6 +264,12 @@
grid-area: title; grid-area: title;
text-decoration: underline; text-decoration: underline;
font-size: 1.2em; font-size: 1.2em;
text-decoration-thickness: 0.125em;
text-decoration-offset: 0.125em;
&:hover {
text-decoration-thickness: 0.25em;
text-decoration-offset: 0.25em;
}
} }
&__summary { &__summary {
line-height: 1.4; line-height: 1.4;
@ -221,7 +279,7 @@
} }
} }
#support { #support {
.title:before {content: 'support';} .title:before {content: '#support';}
.container > p { .container > p {
line-height: 1.4; line-height: 1.4;
font-size: 1.2em; font-size: 1.2em;

138
assets/scss/content/work.scss
View file

@ -3,41 +3,119 @@
.title { .title {
font-size: 2em; font-size: 2em;
font-weight: 700; font-weight: 700;
line-height: 1.2;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2em; margin-bottom: 2em;
&:before { &:before {
font-size: 3em; font-size: 1em;
font-weight: 700; font-weight: 700;
color: #ddd; color: #ddd;
position: absolute; position: absolute;
top: -0.425em; top: -1em;
left: -0.15em; left: 0em;
z-index: -1; z-index: -1;
} }
position: relative; 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 { #timeline .title:before {
content: 'timeline'; content: '#timeline';
} }
#hireme .title:before { #hireme .title:before {
content: '' 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 { .timeline {
position: relative; position: relative;
max-width: 60em; max-width: 60em;
margin: 0 auto; margin: 0 auto;
&::before { &::before {
content: 'TODAY'; content: '?';
position: absolute; position: absolute;
bottom: -4rem; bottom: -4rem;
left: 1.25em; left: 1.25em;
font-size: 2em;
font-weight: 900;
color: #ddd;
} }
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 0.5rem; width: 0.5rem;
background: #ddd; background: #ddd;
top: 0rem; top: -1.5rem;
bottom: -5rem; bottom: -5rem;
left: 0.5rem; left: 0.5rem;
z-index: -1; z-index: -1;
@ -56,7 +134,6 @@
; ;
grid-template-columns: 20ch 1fr; grid-template-columns: 20ch 1fr;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
padding-top: 1.5em;
} }
margin-left: 2.5rem; margin-left: 2.5rem;
&::before { &::before {
@ -69,7 +146,7 @@
left: -3rem; left: -3rem;
border-width: 1rem; border-width: 1rem;
border-radius: 100em; border-radius: 100em;
background-color: #06f; background-color: #ddd;
border: 0.25em solid #ddd; border: 0.25em solid #ddd;
} }
&.worktrilogy::before { &.worktrilogy::before {
@ -115,7 +192,7 @@
font-weight: 700; font-weight: 700;
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-top: 0.5em; margin-top: 0.5em;
align-self: center;
grid-area: title; grid-area: title;
@media (min-width: 30em) { @media (min-width: 30em) {
margin-top: -0.125em; margin-top: -0.125em;
@ -131,10 +208,6 @@
width: max-content; width: max-content;
height: min-content; height: min-content;
grid-area: readmore; grid-area: readmore;
background: #06f;
padding: 0.5em 1em;
color: white;
text-decoration: none;
border-radius: 0.25em; border-radius: 0.25em;
display: block; display: block;
} }
@ -142,8 +215,17 @@
.workeqin, .workuab, .workpixelfed { .workeqin, .workuab, .workpixelfed {
.timeline-item__readmore {display: none;} .timeline-item__readmore {display: none;}
} }
.you {
&:before {
background: green;
} }
.cta { strong {
font-weight: 700;
color: green;
}
}
}
#cta {
.container { .container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -170,13 +252,37 @@
width: 100%; width: 100%;
font-size: 1.25em; font-size: 1.25em;
@media (min-width: 33.75em) { @media (min-width: 33.75em) {
grid-template-columns: 1fr 1fr 1fr; 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; width: unset;
.button { .button {
width: unset; width: max-content;
}
.button.resume {
grid-row: unset;
}
.button.email {
width: max-content;
grid-column: span 1;
} }
} }
gap: 1em; gap: 1em;
svg {
width: 1.25em;
height: 1.25em;
path {
fill: currentColor;
}
}
} }
} }
} }

23
assets/scss/main.scss
View file

@ -5,10 +5,10 @@
@import "base/page.scss"; @import "base/page.scss";
@import "base/list.scss"; @import "base/list.scss";
@import "base/links.scss";
//@import "base/paper.scss"; //@import "base/paper.scss";
@import "libraries/photoswipe.scss"; @import "libraries/photoswipe.scss";
@import "components/links.scss";
@import "components/pullquote.scss"; @import "components/pullquote.scss";
@import "components/button.scss"; @import "components/button.scss";
@import "components/h-card.scss"; @import "components/h-card.scss";
@ -27,3 +27,24 @@
@import "partials/site-header.scss"; @import "partials/site-header.scss";
@import "partials/site-footer.scss"; @import "partials/site-footer.scss";
@import "partials/breadcrumbs.scss"; @import "partials/breadcrumbs.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;
}
}

20
assets/scss/partials/site-footer.scss
View file

@ -92,23 +92,3 @@
} }
} }
} }
@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;
}
}

53
assets/scss/partials/site-header.scss
View file

@ -1,6 +1,30 @@
.site-header { .site-header {
z-index: 10; z-index: 10;
a {text-decoration: none; color: inherit;} a {
text-decoration: none;
color: inherit;
&:link {
}
&:visited {
}
&:focus {
background: var(--primary-accent-transparent);
padding: unset;
border-radius: unset;
}
&:hover {
}
&:active {
}
}
.container { .container {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -63,10 +87,35 @@
justify-content: center; justify-content: center;
height: 100%; height: 100%;
span {padding: 0.25em;} span {padding: 0.25em;}
svg {
width: 1em;
height: 1em;
} }
} &:link {
} }
&:visited {
}
&:focus {
background: var(--primary-accent-transparent);
padding: unset;
border-radius: unset;
}
&:hover {
}
&:active {
}
}
}
}
box-shadow: 0px -2px 2px rgba(0,0,0,0.2);
@media (min-width: $container-width) { @media (min-width: $container-width) {
position: unset; position: unset;
bottom: unset; bottom: unset;

10
config.toml
View file

@ -14,35 +14,35 @@ category = "category"
[[menu.main]] [[menu.main]]
identifier = "" identifier = ""
pre = "<i class='fa fa-home' aria-hidden='true'></i>" 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" name = "Home"
url = "/" url = "/"
weight = 10 weight = 10
[[menu.main]] [[menu.main]]
identifier = "work" identifier = "work"
pre = "<i class='fa fa-briefcase' aria-hidden='true'></i>" pre = '<?xml version="1.0" encoding="UTF-8"?> <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>'
name = "Work" name = "Work"
url = "/work/" url = "/work/"
weight = 20 weight = 20
[[menu.main]] [[menu.main]]
identifier = "code" identifier = "code"
pre = "<i class='fa fa-code' aria-hidden='true'></i>" 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" name = "Code"
url = "/code/" url = "/code/"
weight = 30 weight = 30
#[[menu.main]] #[[menu.main]]
#identifier = "design" #identifier = "design"
#pre = "<i class='fa fa-desktop' aria-hidden='true'></i>" #pre = '<?xml version="1.0" encoding="UTF-8"?> <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" #name = "Design"
#url = "/design/" #url = "/design/"
#weight = 40 #weight = 40
[[menu.main]] [[menu.main]]
identifier = "blog" identifier = "blog"
pre = "<i class='fa fa-pencil' aria-hidden='true'></i>" 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" name = "Blog"
url = "/blog/" url = "/blog/"
weight = 50 weight = 50

4
content/work/mastodon/index.html
View file

@ -398,9 +398,9 @@ cover: "/images/cover/mastodocs.jpg"
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2> <h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
<img src="/images/cover/mastodocs.png" alt="Mastodon documentation landing page"> <img src="/images/cover/mastodocs.png" alt="Mastodon documentation landing page">
<div class="buttons"> <div class="buttons">
<a href="https://docs.joinmastodon.org" class="demo button"><i class="fa fa-globe"></i>Check out the live <a href="https://docs.joinmastodon.org" class="demo 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> version</a>
<a href="mailto:a@trwnh.com" class="email button primary"><i class="fa fa-envelope"></i>Email me a proposal</a> <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 proposal</a>
</div> </div>
</div> </div>
</section> </section>

38
layouts/code/list.html
View file

@ -5,14 +5,18 @@
<h1 class="title">check out some of the code i've written.</h1> <h1 class="title">check out some of the code i've written.</h1>
<div id="gitea" class="explainer"> <div id="gitea" class="explainer">
<div class="image"> <div class="image">
<i class="fa fa-gitea"></i> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 2240 1792">
<path fill="currentColor" d="M365.814 256.033c-80.77-.23-174.758 28.37-247.533 93.332C45.507 414.33-5.459 515.927.468 659.21c9.228 223.095 116.556 347.02 241.385 413.903 121.864 65.293 259.55 77.271 341.309 79.467 6.075 22.373 20.605 53.19 41.24 88.794 22.617 39.021 52.476 83.218 86.237 125.355 67.52 84.276 149.666 161.198 224.778 169.267h614.778c96.394-7.216 183.852-91.338 258.812-210.925 74.96-119.587 137.637-275.74 182.444-431.18 44.808-155.44 71.718-310.045 74.6-426.875 1.44-58.414-3.015-107.346-14.834-142.878-5.91-17.766-13.683-32.287-24.042-42.774-10.36-10.486-23.609-16.672-38.437-17.01l-.311-.006h-.313c-337.54 17.872-537.496 26.865-708.892 28.377V682.72l-53.502-26.574-.356-363.22c-196.715-.1-369.84-10.354-698.87-28.58l-.184-.009-.185-.002c-40.235-.43-97.974-8.164-160.312-8.342zm22.4 172.51c3.664 0 7.49 0 11.265.1 21.927 217.03 57.703 349.276 127.414 541.945-88.094-12.62-168.73-34.048-230.92-77.682-65.365-45.861-111.249-115.832-125.726-228.654-7.647-59.598 2.08-119.8 37.762-164.15 33.452-41.58 90.067-70.34 180.205-71.54zm729.623 214.068c13.174.1 26.557 3.011 39.24 9.174l63.954 31.074-45.88 93.968a57.354 57.354 0 0 0-20.566 3.315 57.354 57.354 0 0 0-34.542 73.388 57.354 57.354 0 0 0 9.503 16.703l-79.045 161.895a57.354 57.354 0 0 0-19.008 3.32 57.354 57.354 0 0 0-34.538 73.389 57.354 57.354 0 0 0 73.387 34.54 57.354 57.354 0 0 0 34.541-73.388 57.354 57.354 0 0 0-13.468-21.105l77.029-157.766a57.354 57.354 0 0 0 24.99-3.049 57.354 57.354 0 0 0 18.224-10.699c30.01 14.23 53.952 25.373 71.541 35.162 26.351 14.668 35.672 24.346 38.496 35.014 2.824 10.667-.312 30.978-15.185 66.703-11.338 27.233-28.654 62.702-51.112 108.785a57.354 57.354 0 0 0-21.47 3.308 57.354 57.354 0 0 0-34.54 73.39 57.354 57.354 0 0 0 73.388 34.539 57.354 57.354 0 0 0 34.54-73.388 57.354 57.354 0 0 0-11.722-19.289c22.242-45.59 39.623-81.153 51.765-110.32 16.026-38.496 24.462-67.304 17.119-95.043-7.345-27.74-29.958-45.76-59.774-62.355-19.75-10.992-43.966-22.274-73.47-36.23a57.354 57.354 0 0 0-3.262-22.964 57.354 57.354 0 0 0-12.43-20.025l45.172-92.515 249.678 121.316c45.096 21.911 63.76 75.857 41.848 120.954l-171.672 353.314c-21.912 45.096-75.856 63.761-120.952 41.849l-353.315-171.673c-45.096-21.912-63.76-75.855-41.848-120.952l171.672-353.316c15.75-32.413 48.046-51.172 81.712-51.023z"/>
</svg>
</div> </div>
<p>I host my own code with <a href="https://git.trwnh.com">Gitea</a>. currently, i host the source code for <p>I host my own code with <a href="https://git.trwnh.com">Gitea</a>. currently, i host the source code for
some websites i've built, including this one.</p> some websites i've built, including this one.</p>
</div> </div>
<div id="github" class="explainer"> <div id="github" class="explainer">
<div class="image"> <div class="image">
<i class="fa fa-github"></i> <svg width="16" height="16" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"/>
</svg>
</div> </div>
<p>i also have a <a href="https://github.com/trwnh">Github</a> account. i mainly use this account to <p>i also have a <a href="https://github.com/trwnh">Github</a> account. i mainly use this account to
contribute to open-source projects using pull requests instead of sending patch files via email.</p> contribute to open-source projects using pull requests instead of sending patch files via email.</p>
@ -21,12 +25,11 @@
</header> </header>
<section class="section" id="projects"> <section class="section" id="projects">
<div class="container"> <div class="container">
<h2 class="title">Original projects</h2> <h2 class="title"><a href="#projects">#</a>Original projects</h2>
<section class="project-list"> <section class="project-list">
{{ range .Pages }} {{ range .Pages }}
{{ if not (in .Params.tags "pull request") }} {{ if not (in .Params.tags "pull request") }}
<a class="project__link" href="{{ .Permalink }}"> <a class="project {{ .Permalink | relURL | anchorize }}" href="{{ .Permalink }}">
<article class="project {{ .Permalink | relURL | anchorize }}">
{{ with .Params.cover }} {{ with .Params.cover }}
<img width=280 class="project__image" src="{{.}}"> <img width=280 class="project__image" src="{{.}}">
@ -37,7 +40,6 @@
<!--datetime class="project__date">{{ .Date.Format "January 2, 2006" }}</datetime--> <!--datetime class="project__date">{{ .Date.Format "January 2, 2006" }}</datetime-->
<span class="project__hint">Read more</span> <span class="project__hint">Read more</span>
</article>
</a> </a>
{{ end }} {{ end }}
{{ end }} {{ end }}
@ -46,7 +48,7 @@
</section> </section>
<section class="section" id="contributions"> <section class="section" id="contributions">
<div class="container"> <div class="container">
<h2 class="title">Contributions to other projects</h2> <h2 class="title"><a href="#contributions">#</a>Contributions to other projects</h2>
<section class="contribution-list"> <section class="contribution-list">
{{ range where .Pages ".Params.tags" "intersect" (slice "pull request") }} {{ range where .Pages ".Params.tags" "intersect" (slice "pull request") }}
<article class="pr {{ .Permalink | relURL | anchorize }}"> <article class="pr {{ .Permalink | relURL | anchorize }}">
@ -91,32 +93,44 @@
</section> </section>
<section class="section" id="support"> <section class="section" id="support">
<div class="container"> <div class="container">
<h2 class="title">Support me.</h2> <h2 class="title"><a href="#support">#</a>Support me.</h2>
<p>If you appreciate any of what I've done, please send me money. Your contributions and generosity will <p>If you appreciate any of what I've done, please send me money. Your contributions and generosity will
directly fund my creative efforts, which would otherwise go unpaid. The more I receive, the more time I can directly fund my creative efforts, which would otherwise go unpaid. The more I receive, the more time I can
justifiably devote to continuing to do what I do.</p> justifiably devote to continuing to do what I do.</p>
<div id="liberapay" class="explainer"> <div id="liberapay" class="explainer">
<div class="image"> <div class="image">
<i class="fa fa-liberapay"></i> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width=16 height=16><g transform="translate(-78.37-208.06)" fill="currentColor"><path d="m104.28 271.1c-3.571 0-6.373-.466-8.41-1.396-2.037-.93-3.495-2.199-4.375-3.809-.88-1.609-1.308-3.457-1.282-5.544.025-2.086.313-4.311.868-6.675l9.579-40.05 11.69-1.81-10.484 43.44c-.202.905-.314 1.735-.339 2.489-.026.754.113 1.421.415 1.999.302.579.817 1.044 1.546 1.395.729.353 1.747.579 3.055.679l-2.263 9.278"/><path d="m146.52 246.14c0 3.671-.604 7.03-1.811 10.07-1.207 3.043-2.879 5.669-5.01 7.881-2.138 2.213-4.702 3.935-7.693 5.167-2.992 1.231-6.248 1.848-9.767 1.848-1.71 0-3.42-.151-5.129-.453l-3.394 13.651h-11.162l12.52-52.19c2.01-.603 4.311-1.143 6.901-1.622 2.589-.477 5.393-.716 8.41-.716 2.815 0 5.242.428 7.278 1.282 2.037.855 3.708 2.024 5.02 3.507 1.307 1.484 2.274 3.219 2.904 5.205.627 1.987.942 4.11.942 6.373m-27.378 15.461c.854.202 1.91.302 3.167.302 1.961 0 3.746-.364 5.355-1.094 1.609-.728 2.979-1.747 4.111-3.055 1.131-1.307 2.01-2.877 2.64-4.714.628-1.835.943-3.858.943-6.071 0-2.161-.479-3.998-1.433-5.506-.956-1.508-2.615-2.263-4.978-2.263-1.61 0-3.118.151-4.525.453l-5.28 21.948"/></g></svg>
</div> </div>
<p>Recurring or one-time donation via Liberapay: <a <p>Recurring or one-time donation via Liberapay: <a
href="https://liberapay.com/trwnh">liberapay.com/trwnh</a></p> href="https://liberapay.com/trwnh">liberapay.com/trwnh</a></p>
</div> </div>
<div id="patreon" class="explainer"> <div id="patreon" class="explainer">
<div class="image"> <div class="image">
<i class="fa fa-patreon"></i> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width=16 height=16>
<path
fill="currentColor"
d="M108.8135992 26.06720125c-26.468266 0-48.00213212 21.53066613-48.00213212 47.99733213 0 26.38653268 21.53386613 47.85426547 48.00213213 47.85426547 26.38639937 0 47.8530655-21.4677328 47.8530655-47.85426547 0-26.466666-21.46666613-47.99733213-47.85306547-47.99733213"
/>
<path
fill="currentColor"
d="M23.333335 153.93333178V26.0666679h23.46666576v127.8666639z"
/>
</svg>
</div> </div>
<p>Monthly patronage on Patreon: <a href="https://patreon.com/trwnh">patreon.com/trwnh</a></p> <p>Monthly patronage on Patreon: <a href="https://patreon.com/trwnh">patreon.com/trwnh</a></p>
</div> </div>
<div id="paypal" class="explainer"> <div id="paypal" class="explainer">
<div class="image"> <div class="image">
<i class="fa fa-paypal"></i> <svg width=16 height=16 viewBox="0 0 1536 1728" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M1519 646c13 60 10 129-4 204-65 330-284 444-565 444h-44c-34 0-62 25-68 59l-4 19-55 346-2 15c-7 34-35 59-69 59H457c-28 0-46-23-42-51 18-112 35-224 53-336s36-223 54-335c3-24 19-37 43-37 40 0 80-1 131 0 72 1 155-3 236-21 108-24 206-68 287-144 73-68 122-152 155-246 15-44 27-88 35-133 2-12 5-10 12-5 55 41 86 96 98 162zm-172-282c0 82-19 160-46 236-52 151-150 259-302 315-81 29-166 41-252 42-60 1-120 0-180 0-65 0-106 32-118 96-14 76-69 430-85 530-1 7-4 10-12 10H57c-30 0-52-26-48-55L241 67c6-38 40-67 79-67h598c43 0 142 19 209 45 142 55 220 167 220 319z"/>
</svg>
</div> </div>
<p>For direct, one-time contributions, you can use Paypal with my email address <b>a@trwnh.com</b></p> <p>For direct, one-time contributions, you can use Paypal with my email address <b>a@trwnh.com</b></p>
</div> </div>
<div id="cashapp" class="explainer"> <div id="cashapp" class="explainer">
<div class="image"> <div class="image">
<i class="fa fa-dollar"></i> <svg xmlns="http://www.w3.org/2000/svg" class="app-icon" width=16 height=16 viewBox="8 8 48 48"><path d="M42.47 23.8c.5.5 1.33.5 1.8-.0l2.5-2.6c.53-.5.5-1.4-.06-1.94a19.73 19.73 0 0 0-6.72-3.84l.79-3.8c.17-.83-.45-1.61-1.28-1.61h-4.84a1.32 1.32 0 0 0-1.28 1.06l-.7 3.38c-6.44.33-11.9 3.6-11.9 10.3 0 5.8 4.51 8.29 9.28 10 4.51 1.72 6.9 2.36 6.9 4.78 0 2.49-2.38 3.95-5.9 3.95-3.2 0-6.56-1.07-9.16-3.68a1.3 1.3 0 0 0-1.84-.0l-2.7 2.7a1.36 1.36 0 0 0 .0 1.92c2.1 2.07 4.76 3.57 7.792 4.4l-.74 3.57c-.17.83.44 1.6 1.27 1.61l4.85.04a1.32 1.32 0 0 0 1.3-1.06l.7-3.39C40.28 49.07 45 44.8 45 38.57c0-5.74-4.7-8.16-10.4-10.13-3.26-1.21-6.08-2.04-6.08-4.53 0-2.42 2.63-3.38 5.27-3.38 3.36 0 6.59 1.39 8.7 3.29z" fill="currentColor"/></svg>
</div> </div>
<p>You can also use Cashapp if you'd prefer: <a href="https://cash.me/$trwnh">$trwnh</a></p> <p>You can also use Cashapp if you'd prefer: <a href="https://cash.me/$trwnh">$trwnh</a></p>
</div> </div>

54
layouts/work/list.html
View file

@ -4,12 +4,29 @@
<div class="container"> <div class="container">
<h1 class="tagline">i can help you<br> <em>figure out the hard parts.</em></h1> <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> <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"><i class="fa fa-envelope fa-2x"></i><span>email me</span></a> <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>
</div> </div>
</header> </header>
<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>
<section>
<h3 class="subtitle">
your 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>
</section>
<section>
<h3 class="subtitle">
</h3>
<p class="blurb"></p>
</section>
</div>
</section>
<section class="section" id="praise"> <section class="section" id="praise">
<div class="container"> <div class="container">
<h2 class="title">what others have said:</h2> <h2 class="title"><a href="#praise">#</a>what others have said:</h2>
<div class="testimonials"> <div class="testimonials">
<div class="testimonial"> <div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/people/khalil.jpg"> <img class="avatar" width=32 height=32 src="/images/people/khalil.jpg">
@ -29,9 +46,16 @@
</div> </div>
</div> </div>
</section> </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>
</div>
</section>
<section class="section" id="timeline"> <section class="section" id="timeline">
<div class="container"> <div class="container">
<h2 class="title">here's a timeline of work i've done.</h2> <h2 class="title"><a href="#timeline">#</a>here's a timeline of work i've done.</h2>
<div class="timeline"> <div class="timeline">
{{ range .Pages.ByDate }} {{ range .Pages.ByDate }}
<article class="timeline-item {{ .Permalink | relURL | anchorize }}"> <article class="timeline-item {{ .Permalink | relURL | anchorize }}">
@ -41,21 +65,25 @@
<span class="timeline-item__at">at {{ .Params.at }}</span> <span class="timeline-item__at">at {{ .Params.at }}</span>
<h3 class="timeline-item__title">{{ .Params.position }}</h3> <h3 class="timeline-item__title">{{ .Params.position }}</h3>
<p class="timeline-item__summary">{{.Summary}}</p> <p class="timeline-item__summary">{{.Summary}}</p>
<a class="timeline-item__readmore" href="{{ .Permalink }}">Read more...</a> <a class="timeline-item__readmore button primary" href="{{ .Permalink }}">Read more...</a>
</article> </article>
{{ end }} {{ end }}
</div> <section class="you timeline-item" id="hireme">
<section class="cta section" id="hireme"> <span class="timeline-item__daterange">Today</span>
<div class=""> <span class="timeline-item__at">at your service</span>
<h3 class="title">you could be here.</h3> <h3 class="timeline-item__title">You could be here.</h3>
<p class="blurb">i'm currently <strong>available</strong> for work. let's get in touch.</p> <p class="timeline-item__summary">i'm currently <strong>available</strong> for work. let's get in touch.</p>
<div class="buttons"> </section>
<a href="mailto:a@trwnh.com" class="email button primary"><i class="fa fa-envelope"></i>Email me</a>
<a href="https://resume.abdullahtarawneh.com" class="resume button secondary"><i class="fa fa-id-card-o"></i> Résume (HTML)</a>
<a href="https://resume.abdullahtarawneh.com/resume.pdf" class="resume button secondary"><i class="fa fa-download"></i> Résume (PDF)</a>
</div> </div>
</div> </div>
</section> </section>
<section class="section" id="cta">
<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="https://resume.abdullahtarawneh.com" 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="https://resume.abdullahtarawneh.com/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>
</div>
</div> </div>
</section> </section>
</main> </main>

10
static/images/puzzlehead.svg
View file

@ -25,9 +25,9 @@
showgrid="false" showgrid="false"
units="px" units="px"
width="1920px" width="1920px"
inkscape:zoom="0.45254834" inkscape:zoom="1.8101934"
inkscape:cx="1334.664" inkscape:cx="1878.2524"
inkscape:cy="541.37863" inkscape:cy="553.53203"
inkscape:window-width="2560" inkscape:window-width="2560"
inkscape:window-height="1568" inkscape:window-height="1568"
inkscape:window-x="0" inkscape:window-x="0"
@ -81,12 +81,12 @@
sodipodi:nodetypes="ccccc" /> sodipodi:nodetypes="ccccc" />
<path <path
style="fill:#15498b;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" style="fill:#15498b;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 440.2189,140.00482 540.31092,111.66601 540.47174,99.732383 437.79277,129.67172 Z" d="m 440.2189,140.00482 39.23111,-11.43414 10.51093,-14.02583 -52.16817,15.12687 z"
id="path11041" id="path11041"
sodipodi:nodetypes="ccccc" /> sodipodi:nodetypes="ccccc" />
<path <path
style="fill:#153e71;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" style="fill:#153e71;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 429.35405,98.496523 8.72274,32.465497 102.40403,-29.62323 -0.70363,-32.171823 z" d="m 429.35405,98.496523 8.72274,32.465497 51.88415,-16.41717 -9.4186,-29.177767 z"
id="path11505" id="path11505"
sodipodi:nodetypes="ccccc" /> sodipodi:nodetypes="ccccc" />
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB