206 lines
12 KiB
HTML
206 lines
12 KiB
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">
|
|
<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>
|