sites
/
trwnh.com
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

anything worth doing is worth doing poorly

This commit is contained in:
a 2023-03-19 12:50:43 -05:00
parent af64cb4cbd
commit b3bba5b954
3 changed files with 421 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
index.old.html → index.2021.html
View File

205
index.2022.html Normal file
View File

@ -0,0 +1,205 @@
<!doctype html>
<html lang="en">
<head>
<!-- meta ---------------------------------------------------------->
<meta charset="utf-8">
<title>~trwnh</title>
<meta name="description" content="a photographer, designer, and all-around creative. this is their personal landing page.">
<meta name="author" content="trwnh">
<meta name="keywords" content="trwnh, abdullah, tarawneh, designer, designers, design, designs, photographer, photographers, photography, photos, photo, programmer, programming, creative, tech, technology, science, scientist, computer, computers, cs, bme, biomedical, engineer, consultant, consultancy, analysis, hoover, birmingham, alabama, al">
<meta name="theme-color" content="#212121">
<link rel="icon" sizes="400x400" href="icon.png">
<link rel="me" href="mailto:a@trwnh.com">
<link rel="me" href="https://mastodon.social/@trwnh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- /meta --------------------------------------------------------->
<!-- default styling ----------------------------------------------->
<style>
/* do some resets */
* {margin: 0; padding: 0; box-sizing: border-box}
html {font-family: -apple-system, BlinkMacSystemFont,
"Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI", sans-serif}
/* typography */
header h1 {font-size: clamp(1.5rem, 10vw, 3rem); line-height: 1.333}
header p {font-size: clamp(1em, 5vw, 1.5rem); line-height: 1.5; max-width: 32ch}
h2 {font-size: 1.5rem; line-height: 1.333; margin-bottom: 1rem; max-width: 35ch}
p {font-size: 1rem; line-height: 1.5}
/* layout */
body {margin: auto; min-height: 100vh}
section, footer {margin-top: 2.5rem}
footer {padding-bottom: 1rem; display: flex; justify-content: center}
.container {padding: 0 1rem; height: 100%;}
header {position: relative;}
header .container {position: absolute; bottom: 0; width: 100%; height: fit-content}
header img {width: 100vw; height: 100vw; max-width: 100%; max-height: 600px; object-fit: cover; object-position: bottom}
header h1 {grid-row: 2}
header p {grid-row: 3}
dl {display: grid; grid-template-columns: 6.5rem 1fr}
dt {grid-column: 1; font-weight: 700; line-height: 1.5}
dd {grid-column: 2; line-height: 1.5; display: flex; justify-content: end}
dd a {display: block; max-width: max-content}
dt, dd {margin-top: 0.5rem}
dl p {grid-column: span 2; max-width: 18rem}
.links {display: flex; flex-flow: column; gap: 1rem}
.links a {display: flex; max-width: max-content; gap: 1rem}
.links span {font-size: 1rem; line-height: 2; display: block}
#gaming .links {flex-flow: row}
#gaming .links span {flex-grow: 1; text-align: right}
/* coloring */
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background: url(./images/sunset-square-bg-blue.min.jpg);
background-size: cover; background-repeat: no-repeat;
background-position: center;
filter: blur(1rem);
opacity: 0.5;
z-index: -1
}
html {background-color: #212121}
body, header, section {background-color: #1D1B20; color: white}
a {color: #64b5f6}
a:visited {color: #d1c4e9}
img {color: white}
/* responsive */
@media (min-width: 30rem) {
#gaming .container {display: flex; justify-content: space-between}
#gaming .links span {flex-grow: unset}
#gaming h2 {margin-bottom: 0}
}
@media (min-width: 35rem) {
.container {padding: 0 2rem}
}
@media (min-width: 40rem) {
.container {padding: 0 3rem}
body {margin: 0 auto; width: 40rem}
}
@media (max-height: 30rem) and (min-aspect-ratio: 1) {
header img {width: 100vw; height: 100vh; object-position: center}
header .container {bottom: 1rem}
}
</style>
<!-- end default styling ------------------------------------------->
</head>
<body>
<main>
<header id="top" class="section">
<picture>
<source srcset="./images/sunset-square-bg-blue.min.avif" type="image/avif">
<img src="./images/sunset-square-bg-blue.min.jpg" alt="a picture i took of a sunset, but hue-shifted to be blue and purple" width="200" height="200">
</picture>
<div class="container">
<h1>hi, i'm a.</h1>
<p>i have approximate knowledge of many things. perpetual student. (nb/ace/they)</p>
</div>
</header>
<section id="contact" class="section">
<div class="container">
<h2>let's be friends.</h2>
<dl>
<dt>Chat (XMPP)</dt>
<dd><a href="xmpp:a@trwnh.com">a@trwnh.com</a></dd>
<p>send your message and don't worry about whether i add you as a contact. please turn OMEMO off.</p>
<dt>Mail (SMTP)</dt>
<dd><a href="mailto:a@trwnh.com">a@trwnh.com</a></dd>
<dt>Social (AP)</dt>
<dd><a href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
</dl>
</div>
</section>
<section id="gaming" class="section">
<div class="container">
<h2>sometimes i game.</h2>
<div class="links">
<a href="https://twitch.tv/triggerofsol">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="1 -3 1001 1144" width="32" height="32"><path d="M907 605 740 772H490L347 903V772H144V93h763v512zM49-3 1 188v834h215v119h107l119-119h191l369-369V-3H49z"></path><path d="M395 559h93V280h-93v279zm255 0h94V280h-94v279z"></path></svg>
</a>
<a href="https://www.youtube.com/channel/UCucHgl6cYb4G4THaXtw8PHA">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235 165" width="32" height="32"><path fill="currentColor" d="M93 118V48l62 35zm137-92c-3-10-11-18-21-21-18-5-92-5-92-5S44 0 26 5C16 8 8 16 5 26 0 44 0 83 0 83s0 38 5 57c3 10 11 18 21 20 18 5 91 5 91 5s74 0 92-5c10-2 18-10 21-20 5-19 5-57 5-57s0-39-5-57"></path></svg>
</a>
<a href="https://steamcommunity.com/id/triggerofsol">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 259" width="32" height="32"><path fill="currentColor" d="M128 0C60 0 5 52 0 119l69 29a36 36 0 0 1 22-7l31-44v-1c0-27 21-49 48-49s48 22 48 49-21 49-48 49h-1l-44 31a37 37 0 0 1-36 39c-17 0-32-13-35-30L4 165c16 54 65 94 124 94 71 0 128-58 128-130C256 58 199 0 128 0ZM80 196l-15-6a27 27 0 0 0 49-2 28 28 0 0 0-14-36c-7-2-14-2-20 0l16 7c10 4 15 16 11 26-5 11-16 16-27 11ZM202 96c0-18-14-32-32-32s-32 14-32 32 14 33 32 33 32-15 32-33Zm-56 0c0-14 11-24 24-24 14 0 24 10 24 24 0 13-10 24-24 24-13 0-24-11-24-24Z"></path></svg>
</a>
<span>triggerofsol</span>
</div>
</div>
</section>
<section id="concerts" class="section">
<div class="container">
<h2>i like going to concerts.</h2>
<div class="links">
<a href="https://birdsounds.media">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="57 19 101 178" width="32" height="32" style="fill:currentColor"><path d="M741 366v173a70 70 0 0 0-69 17c-26 26-29 64-8 86 10 9 22 14 36 14 18 0 36-8 49-21a72 72 0 0 0 22-49V446l19 21c32 29 26 67 10 90l25 16c24-35 29-89-14-128-26-24-40-51-40-79zm46 114a13 13 0 0 0-13 13 13 13 0 0 0 13 13 13 13 0 0 0 13-13 13 13 0 0 0-13-13z" transform="translate(-200 -137) scale(.42587)"/><path d="m92 151-18 3-8 11c7-1 13 1 13 1l-17 8c-5 14-5 23-5 23s18-9 31-21c30-25 39-57 39-57l-11 7s1 4-5 11c-6 8-14-2-21 3l-9 7c7 1 11 4 11 4z"/></svg>
<span>view photos at birdsounds.media</span>
</a>
<a href="https://www.youtube.com/channel/UClJEUj0aSYHy-vcd9TW30Fw">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235 165" width="32" height="32"><path fill="currentColor" d="M93 118V48l62 35zm137-92c-3-10-11-18-21-21-18-5-92-5-92-5S44 0 26 5C16 8 8 16 5 26 0 44 0 83 0 83s0 38 5 57c3 10 11 18 21 20 18 5 91 5 91 5s74 0 92-5c10-2 18-10 21-20 5-19 5-57 5-57s0-39-5-57"></path></svg>
<span>watch footage at obvious_humor</span>
</a>
<a href="https://society6.com/trwnh">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="32" height="32"><path fill="currentColor" d="M25 2a23 23 0 1 0 0 46 23 23 0 0 0 0-46zm13 10 1 1-3 1-3 2-4 6s2-2 6-2c7 0 5 7 4 9-1 3-5 6-9 6-3 0-6-1-7-5-1 3-2 5-8 5l-6-1-1-2c0-2 1-2 2-2 3 0 4 4 4 4s3 0 3-3-7-3-7-7 4-5 7-5c4 0 6 2 6 2 3-7 12-9 15-9zm-20 8s-3 0-3 3c0 2 5 2 7 5v-4h-1c-3 0-3-4-3-4zm13 3c-2 0-4 2-4 6 0 3 2 5 3 5 2 0 3-3 4-5 0-4-1-6-3-6z"/></svg>
<span>buy prints at society6.com/trwnh</span>
</a>
</div>
</div>
</section>
<section id="work" class="section">
<div class="container">
<h2>i also contribute to open source software and work on the web.</h2>
<div class="links">
<a href="https://abdullahtarawneh.com">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="73 50 1055 1100" width="32" height="32"><path fill="currentColor" d="M683 905a604 604 0 0 1-87 123 604 604 0 0 1-141-262c65-9 130-12 195-9l-16-74h-35c-54 0-107 3-159 10a760 760 0 0 1-3-206 1210 1210 0 0 0 318 1 672 672 0 0 1 5 120l72 38a860 860 0 0 0-4-170c67-13 132-31 197-55a451 451 0 0 1-6 326l65 35A527 527 0 0 0 607 50h-8a534 534 0 0 0-22 0 527 527 0 0 0 22 1053h14c38-1 76-6 112-15l-42-183zm310-551c-58 21-118 38-178 50a801 801 0 0 0-121-270 455 455 0 0 1 299 220zM596 127c31 37 109 140 145 289-96 12-193 12-290-1a735 735 0 0 1 145-288zm-99 8c-40 59-91 150-119 268-58-12-116-28-173-49a455 455 0 0 1 292-219zM146 577c0-55 10-108 28-156 62 23 126 41 191 54a754 754 0 0 0 2 230c-62 13-123 30-183 52-25-55-38-116-38-180zm73 245c53-19 108-34 163-45 27 107 72 187 109 240a455 455 0 0 1-272-195z"/><path fill="currentColor" d="M1128 877 689 641l107 478 84-127 117 158 100-74-117-158z"/></svg>
<span>hire me as a consultant</span>
</a>
</div>
</div>
</section>
<section id="support" class="section">
<div class="container">
<h2>consider supporting me?</h2>
<div class="links">
<a href="https://liberapay.com/trwnh">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 210" height="32" width="32"><path fill="currentColor" d="M21 0C11 0 0 10 0 21v168c0 13 11 21 21 21h168c13 0 21-8 21-21V21c0-11-8-21-21-21zm79 34-19 84v8l3 3h5l-2 18-16-3-11-8v-21l19-76Zm34 34 16 3a26 26 0 0 1 13 18l2 11-2 18-11 16-13 10a47 47 0 0 1-29 3l-8 26H81l24-100a126 126 0 0 1 29-5zm-11 19-10 42 8 2 10-2 6-6 5-10 2-11-2-10-11-5z"/></svg>
<span>sponsor me weekly/monthly</span>
</a>
<a href="https://patreon.com/trwnh">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="23 26 133 128" width="32" height="32" fill="currentColor"><path d="M109 26a48 48 0 1 0 0 96 48 48 0 0 0 0-96"/><path d="M23 154V26h24v128z"/></svg>
<span>become a patron</span>
</a>
<a href="https://paypal.me/trwnh">
<svg viewBox="0 0 1792 1792" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M1647 646q18 84-4 204-87 444-565 444h-44q-25 0-44 16.5t-24 42.5l-4 19-55 346-2 15q-5 26-24.5 42.5t-44.5 16.5h-251q-21 0-33-15t-9-36q9-56 26.5-168t26.5-168 27-167.5 27-167.5q5-37 43-37h131q133 2 236-21 175-39 287-144 102-95 155-246 24-70 35-133 1-6 2.5-7.5t3.5-1 6 3.5q79 59 98 162zm-172-282q0 107-46 236-80 233-302 315-113 40-252 42 0 1-90 1l-90-1q-100 0-118 96-2 8-85 530-1 10-12 10h-295q-22 0-36.5-16.5t-11.5-38.5l232-1471q5-29 27.5-48t51.5-19h598q34 0 97.5 13t111.5 32q107 41 163.5 123t56.5 196z" fill="currentColor"/></svg>
<span>tip me with a one-time payment</span>
</a>
<a href="https://amzn.to/2rydvvC">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="-352 -291 801 679" width="32" height="32" fill="currentColor"><path d="M262 134c-17-22-35-41-35-83V-90c0-60 5-115-40-156-35-34-93-45-138-45-87 0-184 32-204 138-2 12 6 18 13 19l89 10c8-1 14-9 16-17 8-37 39-54 73-54 19 0 41 7 52 23 13 19 11 44 11 66v12C46-88-23-85-73-63c-57 25-98 74-98 148 0 94 60 141 137 141 65 0 101-15 151-66 17 24 22 36 53 61 6 3 15 3 21-3v1l70-60c8-7 7-16 1-25zM82 94c-15 25-38 41-64 41-35 0-55-27-55-66 0-77 70-91 136-91v20c0 35 1 64-17 96z"/><path d="M371 288a586 586 0 0 1-720-52c-8-7 0-17 9-11a796 796 0 0 0 698 43c15-6 28 10 13 20z"/><path d="M408 247c-12-15-74-7-103-4-8 1-10-6-2-12 50-35 132-25 142-13s-3 94-50 134c-7 6-14 3-10-5 10-27 34-86 23-100z"/></svg>
<span>buy with my affiliate link</span>
</a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<a href="#top">back to top</a>
</div>
</footer>
<script type="text/javascript">
var sc_project=10574713;
var sc_invisible=1;
var sc_security="b5296783";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/10574713/0/b5296783/1/" alt="Web
Analytics"></a></div></noscript>
</body>
</html>

401
index.html
View File

@ -1,205 +1,236 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta ---------------------------------------------------------->
<meta charset="utf-8">
<title>~trwnh</title>
<meta name="description" content="a photographer, designer, and all-around creative. this is their personal landing page.">
<meta name="author" content="trwnh">
<meta name="keywords" content="trwnh, abdullah, tarawneh, designer, designers, design, designs, photographer, photographers, photography, photos, photo, programmer, programming, creative, tech, technology, science, scientist, computer, computers, cs, bme, biomedical, engineer, consultant, consultancy, analysis, hoover, birmingham, alabama, al">
<meta name="theme-color" content="#212121">
<link rel="icon" sizes="400x400" href="icon.png">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>~a</title>
<meta name="description" content="a's domain">
<meta name="author" content="a (a@trwnh.com)">
<link rel="me" href="mailto:a@trwnh.com">
<link rel="me" href="https://mastodon.social/@trwnh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- /meta --------------------------------------------------------->
<!-- default styling ----------------------------------------------->
<link rel="me" href="https://abdullahtarawneh.com">
<style>
/* do some resets */
* {margin: 0; padding: 0; box-sizing: border-box}
html {font-family: -apple-system, BlinkMacSystemFont,
"Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI", sans-serif}
/* typography */
header h1 {font-size: clamp(1.5rem, 10vw, 3rem); line-height: 1.333}
header p {font-size: clamp(1em, 5vw, 1.5rem); line-height: 1.5; max-width: 32ch}
h2 {font-size: 1.5rem; line-height: 1.333; margin-bottom: 1rem; max-width: 35ch}
p {font-size: 1rem; line-height: 1.5}
/* layout */
body {margin: auto; min-height: 100vh}
section, footer {margin-top: 2.5rem}
footer {padding-bottom: 1rem; display: flex; justify-content: center}
.container {padding: 0 1rem; height: 100%;}
header {position: relative;}
header .container {position: absolute; bottom: 0; width: 100%; height: fit-content}
header img {width: 100vw; height: 100vw; max-width: 100%; max-height: 600px; object-fit: cover; object-position: bottom}
header h1 {grid-row: 2}
header p {grid-row: 3}
dl {display: grid; grid-template-columns: 6.5rem 1fr}
dt {grid-column: 1; font-weight: 700; line-height: 1.5}
dd {grid-column: 2; line-height: 1.5; display: flex; justify-content: end}
dd a {display: block; max-width: max-content}
dt, dd {margin-top: 0.5rem}
dl p {grid-column: span 2; max-width: 18rem}
.links {display: flex; flex-flow: column; gap: 1rem}
.links a {display: flex; max-width: max-content; gap: 1rem}
.links span {font-size: 1rem; line-height: 2; display: block}
#gaming .links {flex-flow: row}
#gaming .links span {flex-grow: 1; text-align: right}
/* coloring */
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background: url(./images/sunset-square-bg-blue.min.jpg);
background-size: cover; background-repeat: no-repeat;
background-position: center;
filter: blur(1rem);
opacity: 0.5;
z-index: -1
html {line-height: 1.711}
body {max-inline-size: 80ch; padding: 1rem; box-sizing: border-box}
/* color scheme */
html {
--color-fg: black;
--color-bg: white;
--color-link: rgb(25, 125, 220);
--color-visited: rgb(105, 85, 215);
}
html {background-color: #212121}
body, header, section {background-color: #1D1B20; color: white}
a {color: #64b5f6}
a:visited {color: #d1c4e9}
img {color: white}
/* responsive */
@media (min-width: 30rem) {
#gaming .container {display: flex; justify-content: space-between}
#gaming .links span {flex-grow: unset}
#gaming h2 {margin-bottom: 0}
}
@media (min-width: 35rem) {
.container {padding: 0 2rem}
}
@media (min-width: 40rem) {
.container {padding: 0 3rem}
body {margin: 0 auto; width: 40rem}
}
@media (max-height: 30rem) and (min-aspect-ratio: 1) {
header img {width: 100vw; height: 100vh; object-position: center}
header .container {bottom: 1rem}
@media (prefers-color-scheme: dark) {
html {
--color-fg: rgb(235, 235, 220);
--color-bg: rgb(19, 19, 30);
--color-link: rgb(77, 177, 235);
--color-visited: rgb(160, 120, 240);
}
}
html {background: var(--color-bg); color: var(--color-fg);}
a:link {color: var(--color-link)}
a:visited {color: var(--color-visited)}
aside {opacity: 0.8; font-size: 0.8em;}
/* basic element styling */
blockquote {border-inline-start: 2px solid currentColor; margin-inline-start: 0; padding-inline-start: 1rem}
figure {padding: 1rem; margin-inline: 0; border: 1px solid currentColor}
figure blockquote {line-height: 1.4; font-family: serif; border: 0;}
/* float a lil quotey before the quote */
figure {position: relative;}
figure blockquote:before {content: '“'; position: absolute; inset-block-start: 0.25rem; inset-inline-start: 0.5rem; font-size: 2rem;}
/* style the contact section */
dt {font-weight: bold}
dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-block-start: 0; margin-block-end: 1rem;}
</style>
<!-- end default styling ------------------------------------------->
</head>
<body>
<main>
<header id="top" class="section">
<picture>
<source srcset="./images/sunset-square-bg-blue.min.avif" type="image/avif">
<img src="./images/sunset-square-bg-blue.min.jpg" alt="a picture i took of a sunset, but hue-shifted to be blue and purple" width="200" height="200">
</picture>
<div class="container">
<h1>hi, i'm a.</h1>
<p>i have approximate knowledge of many things. perpetual student. (nb/ace/they)</p>
</div>
<main class="h-card">
<header>
<h1>~<span class="p-nickname p-name">a</span></h1>
<p class="p-note">i have approximate knowledge of many things. perpetual student. (<span class="p-gender-identity">nb</span>/ace/they)</p>
</header>
<section id="contact" class="section">
<div class="container">
<h2>let's be friends.</h2>
<dl>
<dt>Chat (XMPP)</dt>
<dd><a href="xmpp:a@trwnh.com">a@trwnh.com</a></dd>
<p>send your message and don't worry about whether i add you as a contact. please turn OMEMO off.</p>
<dt>Mail (SMTP)</dt>
<dd><a href="mailto:a@trwnh.com">a@trwnh.com</a></dd>
<dt>Social (AP)</dt>
<dd><a href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
</dl>
</div>
<section id="contact">
<h2>contact me</h2>
<dl>
<dt>Chat (XMPP)</dt>
<dd><a href="xmpp:a@trwnh.com" rel="me" class="u-impp">a@trwnh.com</a></dd>
<dt>Mail (SMTP)</dt>
<dd><a href="mailto:a@trwnh.com" rel="me" class="u-email">a@trwnh.com</a></dd>
<dt>Social (ActivityPub)</dt>
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="u-url">mastodon.social/@trwnh</a></dd>
</dl>
</section>
<section id="gaming" class="section">
<div class="container">
<h2>sometimes i game.</h2>
<div class="links">
<a href="https://twitch.tv/triggerofsol">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="1 -3 1001 1144" width="32" height="32"><path d="M907 605 740 772H490L347 903V772H144V93h763v512zM49-3 1 188v834h215v119h107l119-119h191l369-369V-3H49z"></path><path d="M395 559h93V280h-93v279zm255 0h94V280h-94v279z"></path></svg>
<section id="soup">
<h2>loosely categorized soup</h2>
<h3>general stuff</h3>
<p>you can probably find me around the web with the username "<span class="p-name p-nickname">trwnh</span>". it comes from my fleshform's legal name, "<span class="p-name"><span class="p-given-name">abdullah</span> <span class="p-family-name">tarawneh</span></span>"; just take the vowels out of the family name. 2014 they was so hipster. although nowadays "i" mostly just go by "a". historically i've had a really tough time with identity, so this is the best we're gonna get i guess.
</p>
<aside>
<p>
(sidenote: i am apparently not the only person to arrive at these five consonants in a row. in particular, trwnh on twitter is not me; someone claimed my username after i deleted twitter in 2018. not that i really care about twitter anymore. depending on how things go in the near-mid future, everyone else might not care either.)
</p>
</aside>
<h3>concert/music/band stuff</h3>
<p>i've used the names "<span class="p-nickname">obvious_humor</span>"/"<span class="p-nickname">obvioushumor</span>" for my vaguely music/band fandom stuff, and "<span class="p-nickname">birdsounds</span>" for more creative stuff like my concert photography. both names are references to lyrics by <a href="https://circasurvive.com">Circa Survive</a>, one of my favorite bands.</p>
<figure>
<blockquote>
Make your move, obvious humor<br>
Desperate and respiratory plight<br>
Always on, dressed to impress<br>
I'll be the last one to find out why<br>
Time takes its toll on us (this changes everything)<br>
And I'd be a liar if I denied you at all<br>
Oh, now that I know<br>
This changes everything<br>
I've been trading ideas with intriguing men, and I<br>
I perceive an honest solution to all of your pride<br>
[...]<br>
I'm going home, but my own way<br>
Going home on my own<br>
I'm going home, but my own way<br>
Going home on my own
</blockquote>
<figcaption>
<a href="https://circasurvive.bandcamp.com/track/the-great-golden-baby">
<cite>Circa Survive, "The Great Golden Baby" -- Juturna (2005)</cite>
</a>
<a href="https://www.youtube.com/channel/UCucHgl6cYb4G4THaXtw8PHA">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235 165" width="32" height="32"><path fill="currentColor" d="M93 118V48l62 35zm137-92c-3-10-11-18-21-21-18-5-92-5-92-5S44 0 26 5C16 8 8 16 5 26 0 44 0 83 0 83s0 38 5 57c3 10 11 18 21 20 18 5 91 5 91 5s74 0 92-5c10-2 18-10 21-20 5-19 5-57 5-57s0-39-5-57"></path></svg>
</figcaption>
</figure>
<figure>
<blockquote>
And it remains the only meaningful mistake<br>
But you won't let go, you don't know how to<br>
And every morning I begin my dreams when I'm awake<br>
Empty bird sounds are reminders<br>
You're not awake at all
</blockquote>
<figcaption>
<a href="https://circasurvive.bandcamp.com/track/bird-sounds">
<cite>Circa Survive, "Bird Sounds" -- Violent Waves (2012)</cite>
</a>
<a href="https://steamcommunity.com/id/triggerofsol">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 259" width="32" height="32"><path fill="currentColor" d="M128 0C60 0 5 52 0 119l69 29a36 36 0 0 1 22-7l31-44v-1c0-27 21-49 48-49s48 22 48 49-21 49-48 49h-1l-44 31a37 37 0 0 1-36 39c-17 0-32-13-35-30L4 165c16 54 65 94 124 94 71 0 128-58 128-130C256 58 199 0 128 0ZM80 196l-15-6a27 27 0 0 0 49-2 28 28 0 0 0-14-36c-7-2-14-2-20 0l16 7c10 4 15 16 11 26-5 11-16 16-27 11ZM202 96c0-18-14-32-32-32s-32 14-32 32 14 33 32 33 32-15 32-33Zm-56 0c0-14 11-24 24-24 14 0 24 10 24 24 0 13-10 24-24 24-13 0-24-11-24-24Z"></path></svg>
</a>
<span>triggerofsol</span>
</div>
</div>
</figcaption>
</figure>
<h4>links to some of my concert/music/band stuff</h4>
<ul>
<li>
<a href="https://birdsounds.media" rel="me" class="u-url">birdsounds.media</a> -- my concert photography.
</li>
<li>
<a href="https://www.youtube.com/@obvious_humor" rel="me" class="u-url">youtube.com/@obvious_humor</a> -- my concert videos. (also my de facto main youtube channel, but my youtube presence is really messy)
</li>
<li>
<a href="https://society6.com/trwnh" rel="me" class="u-url">society6.com/trwnh</a> -- on-demand custom merch printing service for my concert photos. (i haven't uploaded all my good photos there but there are a few. ask me if you'd like to buy a print of one of my other photos, and i can upload it.)
</li>
</ul>
<h3>gameing</h3>
<p>most of my "gamer" stuff is under the name triggerofsol. the name came from boktai; in the first boktai game "boktai: the sun is in your hands", if you 100% s-rank and get all items you get "the highest title of the delegate of Sol the solar will -- Trigger of Sol". idk the boktai games are kinda quirky and left an impact on me during my formative years. vampires, norse mythology, magitek, post-apocalyptic absurdism, lotta good stuff in those games.</p>
<figure>
<blockquote>
<p>"So you're the Trigger of Sol? How embarrassing..."</p>
</blockquote>
<figcaption>Sunflower Girl Zazie, in response to Solar Boy Django losing his Solar Gun "Gun del Sol" at the start of <cite>Boktai 2</cite> and being unable to defeat a low-level skeleton</figcaption>
</figure>
<h4>links to gameing stuff</h4>
<ul>
<li>
<a href="https://twitch.tv/triggerofsol" rel="me" class="u-url">twitch.tv/triggerofsol</a> -- retro video game streams. (de facto defunct)
</li>
<li>
i guess you can also add me on <a href="https://steamcommunity.com/id/triggerofsol" rel="me" class="u-url">steam (triggerofsol)</a> if you need to or want to?
</li>
</ul>
<h3>i am consumed by a desire for learning</h3>
<p>varied interests here. i went to college for biomedical engineering and computer science. i took cs for """fun""" but i suppose it ended up sorta working out, because i don't really plan to do anything bme-related in my academic or professional life.</p>
<p>particular areas of (current) interest:</p>
<ul>
<li>the Web. not just the World Wide Web, but also the Semantic Web, Linked Data Web, Social Web, and all that jazz.</li>
<li>communication. protocols, paradigms, and so on. one of the things i've been working on recently-ish is a sort of "grand unified communications theory", where i take a look at the existing open protocols and map them onto the pure abstract paradigms of communication -- publishing, subscribing, discussing, messaging.</li>
<li>identifiers, particularly how to deal with root authority and delegation. resolving those identifiers in a decentralized and persistent way is something i wish i could find a solution to.</li>
<li>i'm learning a lot more about concepts like the actor model, message passing, object capabilities, verifiable claims, distributed systems, trust and authority, and way more.</li>
<li>...but i also can do web dev and web design and stuff like that if i really had to. i don't really have anything noteworthy to show for it though.</li>
</ul>
<h4>look at this computer stuff</h4>
<ul>
<li>
<a href="https://git.trwnh.com" rel="me" class="u-url">git.trwnh.com</a> -- personal stuff goes here
</li>
<li>
<a href="https://github.com/trwnh" rel="me" class="u-url">github.com/trwnh</a> -- this is where pretty much everyone is forced to collaborate due to network effects, so that's where you can find my contributions i guess
</li>
<li>
<a href="https://socialhub.activitypub.rocks/u/trwnh">SocialHub</a> -- this is the forum where ActivityPub and the fediverse get discussed a lot
</li>
</ul>
</section>
<section id="concerts" class="section">
<div class="container">
<h2>i like going to concerts.</h2>
<div class="links">
<a href="https://birdsounds.media">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="57 19 101 178" width="32" height="32" style="fill:currentColor"><path d="M741 366v173a70 70 0 0 0-69 17c-26 26-29 64-8 86 10 9 22 14 36 14 18 0 36-8 49-21a72 72 0 0 0 22-49V446l19 21c32 29 26 67 10 90l25 16c24-35 29-89-14-128-26-24-40-51-40-79zm46 114a13 13 0 0 0-13 13 13 13 0 0 0 13 13 13 13 0 0 0 13-13 13 13 0 0 0-13-13z" transform="translate(-200 -137) scale(.42587)"/><path d="m92 151-18 3-8 11c7-1 13 1 13 1l-17 8c-5 14-5 23-5 23s18-9 31-21c30-25 39-57 39-57l-11 7s1 4-5 11c-6 8-14-2-21 3l-9 7c7 1 11 4 11 4z"/></svg>
<span>view photos at birdsounds.media</span>
</a>
<a href="https://www.youtube.com/channel/UClJEUj0aSYHy-vcd9TW30Fw">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235 165" width="32" height="32"><path fill="currentColor" d="M93 118V48l62 35zm137-92c-3-10-11-18-21-21-18-5-92-5-92-5S44 0 26 5C16 8 8 16 5 26 0 44 0 83 0 83s0 38 5 57c3 10 11 18 21 20 18 5 91 5 91 5s74 0 92-5c10-2 18-10 21-20 5-19 5-57 5-57s0-39-5-57"></path></svg>
<span>watch footage at obvious_humor</span>
</a>
<a href="https://society6.com/trwnh">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="32" height="32"><path fill="currentColor" d="M25 2a23 23 0 1 0 0 46 23 23 0 0 0 0-46zm13 10 1 1-3 1-3 2-4 6s2-2 6-2c7 0 5 7 4 9-1 3-5 6-9 6-3 0-6-1-7-5-1 3-2 5-8 5l-6-1-1-2c0-2 1-2 2-2 3 0 4 4 4 4s3 0 3-3-7-3-7-7 4-5 7-5c4 0 6 2 6 2 3-7 12-9 15-9zm-20 8s-3 0-3 3c0 2 5 2 7 5v-4h-1c-3 0-3-4-3-4zm13 3c-2 0-4 2-4 6 0 3 2 5 3 5 2 0 3-3 4-5 0-4-1-6-3-6z"/></svg>
<span>buy prints at society6.com/trwnh</span>
</a>
</div>
</div>
<section id="support">
<h2>support me</h2>
<p>look, i'm gonna level with ya. i need money to live. most of the stuff i do is what you might consider "socially useful" but also "generally unprofitable". given our capitalist society, my "value" is judged by the latter criteria rather than the former. you can skip past this section but consider maybe don't.</p>
<h3>ways to support me</h3>
<p>in order of most effective to least effective:</p>
<h4>donate directly</h4>
<p>here's how this one works: you can just give me money. i'll keep doing the stuff i do. this option is good if you already think the stuff i do is cool and worthwhile and valuable without me needing to convince you.</p>
<ul>
<li>you can back me on <a href="https://liberapay.com/trwnh" rel="me" class="u-url">liberapay.com/trwnh</a> via bank, card, stripe or paypal. liberapay is a bit weird with how it processes payments, but you generally have an option to do "automatic renewal" or "manual renewal". you can do manual renewal and then cancel the subscription if you want to do a one-time payment.</li>
<li>you can also donate via <a href="https://paypal.me/obvioushumor">paypal: tarawneh.abdullah@gmail.com</a> if you prefer paypal for some reason. i'm not sure if that paypal.me link charges extra fees, so you might need to do it manually, and if so, make sure to select "friends and family" instead of "business".</li>
</ul>
<h4>hire me to do something for you</h4>
<p>i can explain things and i can do websites. generally, i'm really really really good at thinking things through and analyzing them. i put stuff up on <a href="https://abdullahtarawneh.com" rel="me" class="u-url">abdullahtarawneh.com</a> last year and i kinda stalled due to a lot going on in my life and not much going on marketably. but maybe check out the following pages:</p>
<ul>
<li>
<a href="https://abdullahtarawneh.com/work">Work</a> -- the landing page i made that was intended to get people to hire me or contract me. not really happy with it at the moment, but still worth looking at.
</li>
<li>
<a href="https://abdullahtarawneh.com/work/mastodon">Mastodon Documentation</a> -- in particular, this one is something i'm way more proud of. take a look y'all.
</li>
</ul>
<h4>buy something from amazon and tell em i sent ya</h4>
<p>can't say this is something i recommend doing, EXCEPT IF you were already going to buy something from amazon. the more expensive the better, since it's percentage-based. but don't go buying things using this referral link just because of me, y'hear?</p>
<p><a href="https://amzn.to/2rydvvC">https://amzn.to/2rydvvC</a></p>
<p>my pitch is basically this: if you can't avoid amazon and you're going to buy something from them regardless, then at least use my link so that they pay me a bit of the revenue and so that it slightly reduces their profits.</p>
</section>
<section id="work" class="section">
<div class="container">
<h2>i also contribute to open source software and work on the web.</h2>
<div class="links">
<a href="https://abdullahtarawneh.com">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="73 50 1055 1100" width="32" height="32"><path fill="currentColor" d="M683 905a604 604 0 0 1-87 123 604 604 0 0 1-141-262c65-9 130-12 195-9l-16-74h-35c-54 0-107 3-159 10a760 760 0 0 1-3-206 1210 1210 0 0 0 318 1 672 672 0 0 1 5 120l72 38a860 860 0 0 0-4-170c67-13 132-31 197-55a451 451 0 0 1-6 326l65 35A527 527 0 0 0 607 50h-8a534 534 0 0 0-22 0 527 527 0 0 0 22 1053h14c38-1 76-6 112-15l-42-183zm310-551c-58 21-118 38-178 50a801 801 0 0 0-121-270 455 455 0 0 1 299 220zM596 127c31 37 109 140 145 289-96 12-193 12-290-1a735 735 0 0 1 145-288zm-99 8c-40 59-91 150-119 268-58-12-116-28-173-49a455 455 0 0 1 292-219zM146 577c0-55 10-108 28-156 62 23 126 41 191 54a754 754 0 0 0 2 230c-62 13-123 30-183 52-25-55-38-116-38-180zm73 245c53-19 108-34 163-45 27 107 72 187 109 240a455 455 0 0 1-272-195z"/><path fill="currentColor" d="M1128 877 689 641l107 478 84-127 117 158 100-74-117-158z"/></svg>
<span>hire me as a consultant</span>
</a>
</div>
</div>
<section id="faq">
<h2>some questions you might have</h2>
<h3>"yo why is this website so plain"</h3>
<p>i used to have a <a href="/index.2022.html">nicer-looking</a> one-pager on here. at some point i decided i'd rather actually update my website with actual information instead of worrying about fitting things into some grand design. and for a one-pager, using a static site generator like hugo, which i usually use for this sort of thing... well, that's overkill, isn't it? i'd rather just dump some html in a text file and call it a day. maybe a touch of css, for legibility and a lil flair.</p>
<p>this style of website has other advantages too, y'know. it's lightweight and performs well on pretty much any device. and it respects people's defaults. some people like to change their fonts or font sizes, and i don't wanna get in the way of that. it's just text, after all. you should be able to read it on your own terms.</p>
<p>in any case, the main takeaway here is that anything worth doing is also worth doing poorly. it's better to actually do the thing instead of dreaming about how to perfect the thing and ending up with nothing at all.</p>
</section>
<section id="support" class="section">
<div class="container">
<h2>consider supporting me?</h2>
<div class="links">
<a href="https://liberapay.com/trwnh">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 210" height="32" width="32"><path fill="currentColor" d="M21 0C11 0 0 10 0 21v168c0 13 11 21 21 21h168c13 0 21-8 21-21V21c0-11-8-21-21-21zm79 34-19 84v8l3 3h5l-2 18-16-3-11-8v-21l19-76Zm34 34 16 3a26 26 0 0 1 13 18l2 11-2 18-11 16-13 10a47 47 0 0 1-29 3l-8 26H81l24-100a126 126 0 0 1 29-5zm-11 19-10 42 8 2 10-2 6-6 5-10 2-11-2-10-11-5z"/></svg>
<span>sponsor me weekly/monthly</span>
</a>
<a href="https://patreon.com/trwnh">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="23 26 133 128" width="32" height="32" fill="currentColor"><path d="M109 26a48 48 0 1 0 0 96 48 48 0 0 0 0-96"/><path d="M23 154V26h24v128z"/></svg>
<span>become a patron</span>
</a>
<a href="https://paypal.me/trwnh">
<svg viewBox="0 0 1792 1792" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M1647 646q18 84-4 204-87 444-565 444h-44q-25 0-44 16.5t-24 42.5l-4 19-55 346-2 15q-5 26-24.5 42.5t-44.5 16.5h-251q-21 0-33-15t-9-36q9-56 26.5-168t26.5-168 27-167.5 27-167.5q5-37 43-37h131q133 2 236-21 175-39 287-144 102-95 155-246 24-70 35-133 1-6 2.5-7.5t3.5-1 6 3.5q79 59 98 162zm-172-282q0 107-46 236-80 233-302 315-113 40-252 42 0 1-90 1l-90-1q-100 0-118 96-2 8-85 530-1 10-12 10h-295q-22 0-36.5-16.5t-11.5-38.5l232-1471q5-29 27.5-48t51.5-19h598q34 0 97.5 13t111.5 32q107 41 163.5 123t56.5 196z" fill="currentColor"/></svg>
<span>tip me with a one-time payment</span>
</a>
<a href="https://amzn.to/2rydvvC">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="-352 -291 801 679" width="32" height="32" fill="currentColor"><path d="M262 134c-17-22-35-41-35-83V-90c0-60 5-115-40-156-35-34-93-45-138-45-87 0-184 32-204 138-2 12 6 18 13 19l89 10c8-1 14-9 16-17 8-37 39-54 73-54 19 0 41 7 52 23 13 19 11 44 11 66v12C46-88-23-85-73-63c-57 25-98 74-98 148 0 94 60 141 137 141 65 0 101-15 151-66 17 24 22 36 53 61 6 3 15 3 21-3v1l70-60c8-7 7-16 1-25zM82 94c-15 25-38 41-64 41-35 0-55-27-55-66 0-77 70-91 136-91v20c0 35 1 64-17 96z"/><path d="M371 288a586 586 0 0 1-720-52c-8-7 0-17 9-11a796 796 0 0 0 698 43c15-6 28 10 13 20z"/><path d="M408 247c-12-15-74-7-103-4-8 1-10-6-2-12 50-35 132-25 142-13s-3 94-50 134c-7 6-14 3-10-5 10-27 34-86 23-100z"/></svg>
<span>buy with my affiliate link</span>
</a>
</div>
</div>
<section id="quotes">
<h2>things people have said about me</h2>
<ul>
<li>
<q>it's scary how much you know.</q>
</li>
<li>
<q>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</q>
</li>
<li>
<q>VERY MUCH not garbage [...] a worthwhile human</q>
</li>
<li>
<q>honestly, i trust your judgement more than i trust my own.</q>
</li>
</ul>
</section>
<section id="more">
<h2>done here? check out some other things if you want</h2>
<ul>
<li>
<a href="https://wiki.trwnh.com" rel="me" class="u-url">wiki.trwnh.com</a> -- a place to dump my thoughts
</li>
<li>
<a href="https://obvious-humor.com" rel="me" class="u-url">tumblr</a> -- i kinda don't use this anymore but idk where else to put this link on this page :x
</li>
<li>
no seriously <a href="#support">i need money</a> aaaa
</li>
</ul>
</section>
</main>
<footer>
<div class="container">
<a href="#top">back to top</a>
</div>
</footer>
<script type="text/javascript">
var sc_project=10574713;
var sc_invisible=1;
var sc_security="b5296783";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/10574713/0/b5296783/1/" alt="Web
Analytics"></a></div></noscript>
</body>
</html>
</html>