2023-03-19 17:50:43 +00:00
<!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;
2024-09-26 15:56:20 +00:00
background: url(./.assets/images/sunset-square-bg-blue.min.jpg);
2023-03-19 17:50:43 +00:00
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 >
2024-09-26 15:56:20 +00:00
< source srcset = "./.assets/images/sunset-square-bg-blue.min.avif" type = "image/avif" >
< img src = "./.assets/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" >
2023-03-19 17:50:43 +00:00
< / 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 >
< / body >
< / html >
