{{ define "main" }}
<main>
	<header class="site-header">
		<div class="container">
			<img class="site-icon" width=32 height=32 src="/static/images/avatar.jpg" aria-hidden="true">
			<h1 class='site-title'>abdullah<br>tarawneh</h1>
			<nav class="site-nav">
				<a href="" class="site-nav__item active"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
				<a href="" class="site-nav__item"><i class="fa fa-pencil" aria-hidden="true"></i>Blog</a>
				<a href="" class="site-nav__item"><i class="fa fa-at" aria-hidden="true"></i>Contact</a>
			</nav>
		</div>
	</header>
	<section class="section hero">
		<div class="container">
			<img src="/static/images/thought.svg" alt="Abstract illustration of a thought process" title="Abstract illustration of a thought process">
			<h2 class="headline">i make order<br>out of chaos.</h1>
			<a class="button cta" href="#projects">view my work</a>
		</div>
	</section>
	<section class="section" id="process">
		<div class="container">
			<h2 class="section-heading">my process:</h2>
			<div class="cards">
				<section class="card">
					<img src="/static/images/mindmap.svg">
					<h3>information</h3>
					<p>i plan out the details of the project.</p>
				</section>
				<section class="card">
					<img src="/static/images/analysis.svg">
					<h3>analysis</h3>
					<p>i break down info and make connections.</p>
				</section>
				<section class="card">
					<img src="/static/images/design.svg">
					<h3>design</h3>
					<p>i construct a framework for the project.</p>
				</section>
				<section class="card">
					<img src="/static/images/feedback.svg">
					<h3>feedback</h3>
					<p>i make sure to keep you in the picture.</p>
				</section>
				<section class="card">
					<img src="/static/images/tech.svg">
					<h3>implementation</h3>
					<p>i create the deliverables as discussed.</p>
				</section>
				<section class="card">
					<img src="/static/images/result.svg">
					<h3>results</h3>
					<p>i deliver the completed project to you.</p>
				</section>
			</div>
		</div>
	</section>
	<section class="section" id="projects">
		<div class="container">
			<h2 class="section-heading">here's what i've done.</h2>
			<div class="cards">
				<div class="card">
					<img src="/static/images/mastodocs.jpg">
					<h3>Mastodon<br>Documentation Revamp</h3>
					<p>Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it.</p>
					<a href="">Read more</a>
				</div>
				<div class="card">
					<img src="/static/images/pixelfed.jpg">
					<h3>Pixelfed<br>Project Management</h3>
					<p>After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort.</p>
					<a href="">Read more</a>
				</div>
				<div class="card">
					<img src="/static/images/namecheap.jpg" alt="">
					<h3>EFF Certbot<br>Namecheap Auth Hook</h3>
					<p>A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains.</p>
					<a href="https://github.com/trwnh/namecheap">View source code</a>
				</div>
				<div class="card">
					<img src="/static/images/motarawneh.jpg" alt="">
					<h3>Mo Tarawneh<br>(motarawneh.org)</h3>
					<p>A personal website for Mo Tarawneh, inaugural chairperson of the UN CRPD and twice-elected member.</p>
					<a href="https://motarawneh.com">View site</a>
				</div>
				<div class="card">
					<img src="/static/images/eqin.jpg" alt="">
					<h3>Equality Initiative<br>(equalityinitiative.org)</h3>
					<p>Nonprofit website designed for Equality Initiative in February 2014. Built with Wordpress and Divi.</p>
					<a href="https://sites.trwnh.com/equalityinitiative.org">View site archive</a>
				</div>
				<div class="card">
					<img src="/static/images/birdsounds.jpg" alt="">
					<h3>birdsounds<br>(birdsounds.media)</h3>
					<p>birdsounds.media is my concert photography showcase and portfolio website. Built using Koken.</p>
					<a href="https://birdsounds.media">View site</a>
				</div>
		</div>
	</section>
	<section class="section" id="praise">
		<div class="container">
			<h2 class="section-heading" style="max-width: 15ch; margin: 0 auto 1em; text-align: center;">what others have said about me:</h2>
			<div class="testimonials">
				<div class="testimonial">
					<img class="avatar" width=32 height=32 src="/static/images/khalil.jpg">
					<p class="name">Khalil Saadiq</p>
					<blockquote class="bubble">it's scary how much you know.</blockquote>
				</div>
				<div class="testimonial">
					<img class="avatar" width=32 height=32 src="/static/images/gargron.jpg">
					<p class="name">Eugen Rochko</p>
					<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
				</div>
				<div class="testimonial">
					<img class="avatar" width=32 height=32 src="/static/images/dansup.jpg">
					<p class="name">Daniel Supernault</p>
					<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
				</div>
			</div>
		</div>
	</section>
</main>
{{ end }}