{{ define "main" }}
<main>
	<section class="section hero">
		<div class="container">
			<img src="/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="/images/mindmap.svg">
					<h3>information</h3>
					<p>i plan out the details of the project.</p>
				</section>
				<section class="card">
					<img src="/images/analysis.svg">
					<h3>analysis</h3>
					<p>i break down info and make connections.</p>
				</section>
				<section class="card">
					<img src="/images/design.svg">
					<h3>design</h3>
					<p>i construct a framework for the project.</p>
				</section>
				<section class="card">
					<img src="/images/feedback.svg">
					<h3>feedback</h3>
					<p>i make sure to keep you in the picture.</p>
				</section>
				<section class="card">
					<img src="/images/tech.svg">
					<h3>implementation</h3>
					<p>i create the deliverables as discussed.</p>
				</section>
				<section class="card">
					<img src="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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>
	<section class="section" id="contact">
		<div class="container">
			<h2 class="section-heading" style="font-weight: 700">let's talk.</h2>
			<p style="max-width: 65ch; margin: 0 auto;">if you'd like me to do something for you, then the best way to get in touch with me is to email a@trwnh.com with your proposal. i am currently open for hiring as well.</p>
			<a href="https://resume.abdullahtarawneh.com" class="cta button" style="margin: 1em auto;">view resume</a>
		</div>
	</section>
</main>
{{ end }}