299 lines
9.7 KiB
HTML
299 lines
9.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<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>Abdullah Tarawneh, Information Architect</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
main {
|
||
|
|
width: 8.5in;
|
||
|
|
padding: 1in;
|
||
|
|
}
|
||
|
|
p {max-width: 80ch;}
|
||
|
|
#icons {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#praise {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
@media print {
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
main {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
#praise a {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.flex {
|
||
|
|
display: flex;
|
||
|
|
gap: 2.5rem;
|
||
|
|
}
|
||
|
|
.left3 > *:first-child {
|
||
|
|
flex-basis: 3in;
|
||
|
|
}
|
||
|
|
.left3 > *:last-child {
|
||
|
|
flex-basis: 75%;
|
||
|
|
}
|
||
|
|
.vs > * {
|
||
|
|
flex-basis: 50% !important;
|
||
|
|
}
|
||
|
|
#about .name {
|
||
|
|
margin: 0;
|
||
|
|
line-height: 1;
|
||
|
|
font-size: 1.6rem;
|
||
|
|
}
|
||
|
|
#about .title {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#contact {
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
#contact ul {
|
||
|
|
list-style: none;
|
||
|
|
padding-left: 0rem;
|
||
|
|
}
|
||
|
|
#contact li {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
#contact .icon {
|
||
|
|
width: 1rem;
|
||
|
|
height: 1rem;
|
||
|
|
}
|
||
|
|
.quote {
|
||
|
|
margin: 0;
|
||
|
|
font-style: italic;
|
||
|
|
font-family: serif;
|
||
|
|
}
|
||
|
|
#about .quote p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#about .summary {
|
||
|
|
line-height: 1.275;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#experience {
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
#experience h2 {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#mastodon .title {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#mastodon h4 {
|
||
|
|
margin: 1rem 0;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
#mastodon h5 {
|
||
|
|
margin: 0;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
#mastodon #user-flows ul {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
#mastodon #user-flows li {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
#mastodon #user-flows p {
|
||
|
|
margin: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#mastodon #site-map > ul {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row wrap;
|
||
|
|
padding-left: 1rem;
|
||
|
|
gap: 2rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
#mastodon #site-map > ul > li {
|
||
|
|
flex: 1;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="icons">
|
||
|
|
<svg id="home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||
|
|
<path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" />
|
||
|
|
</svg>
|
||
|
|
<svg id="mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||
|
|
<path fill-rule="evenodd" d="M2.106 6.447A2 2 0 001 8.237V16a2 2 0 002 2h14a2 2 0 002-2V8.236a2 2 0 00-1.106-1.789l-7-3.5a2 2 0 00-1.788 0l-7 3.5zm1.48 4.007a.75.75 0 00-.671 1.342l5.855 2.928a2.75 2.75 0 002.46 0l5.852-2.926a.75.75 0 10-.67-1.342l-5.853 2.926a1.25 1.25 0 01-1.118 0l-5.856-2.928z" clip-rule="evenodd" />
|
||
|
|
</svg>
|
||
|
|
<svg id="phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||
|
|
<path fill-rule="evenodd" d="M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.223a1.5 1.5 0 01-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 006.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 011.767-1.052l3.223.716A1.5 1.5 0 0118 15.352V16.5a1.5 1.5 0 01-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 012.43 8.326 13.019 13.019 0 012 5V3.5z" clip-rule="evenodd" />
|
||
|
|
</svg>
|
||
|
|
<svg id="web" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||
|
|
<path d="M16.555 5.412a8.028 8.028 0 00-3.503-2.81 14.899 14.899 0 011.663 4.472 8.547 8.547 0 001.84-1.662zM13.326 7.825a13.43 13.43 0 00-2.413-5.773 8.087 8.087 0 00-1.826 0 13.43 13.43 0 00-2.413 5.773A8.473 8.473 0 0010 8.5c1.18 0 2.304-.24 3.326-.675zM6.514 9.376A9.98 9.98 0 0010 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 01-.351 3.759A13.54 13.54 0 0110 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 01-.352-3.758zM5.285 7.074a14.9 14.9 0 011.663-4.471 8.028 8.028 0 00-3.503 2.81c.529.638 1.149 1.199 1.84 1.66zM17.334 6.798a7.973 7.973 0 01.614 4.115 13.47 13.47 0 01-3.178 1.72 15.093 15.093 0 00.174-3.939 10.043 10.043 0 002.39-1.896zM2.666 6.798a10.042 10.042 0 002.39 1.896 15.196 15.196 0 00.174 3.94 13.472 13.472 0 01-3.178-1.72 7.973 7.973 0 01.615-4.115zM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 01-1.72 3.178 8.099 8.099 0 01-1.826 0 13.47 13.47 0 01-1.72-3.178c.855.151 1.735.23 2.633.23zM14.357 14.357a14.912 14.912 0 01-1.305 3.04 8.027 8.027 0 004.345-4.345c-.953.542-1.971.981-3.04 1.305zM6.948 17.397a8.027 8.027 0 01-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 001.305 3.04z" />
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<main>
|
||
|
|
<header id="about" class="flex left3">
|
||
|
|
<div>
|
||
|
|
<h1 class="name">Abdullah Tarawneh</h1>
|
||
|
|
<p class="title">Information Architect</p>
|
||
|
|
<address id="contact">
|
||
|
|
<ul>
|
||
|
|
<li class="location">
|
||
|
|
<svg viewBox="0 0 24 24" class="icon">
|
||
|
|
<use xlink:href="#home"></use>
|
||
|
|
</svg>
|
||
|
|
<span>
|
||
|
|
Birmingham, AL
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
<li class="email">
|
||
|
|
<svg viewBox="0 0 24 24" class="icon">
|
||
|
|
<use xlink:href="#mail"></use>
|
||
|
|
</svg>
|
||
|
|
<span>
|
||
|
|
tarawneh.abdullah@gmail.com
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
<li class="phone">
|
||
|
|
<svg viewBox="0 0 24 24" class="icon">
|
||
|
|
<use xlink:href="#phone"></use>
|
||
|
|
</svg>
|
||
|
|
<span>
|
||
|
|
(205) 578-8890
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
<li class="website">
|
||
|
|
<svg viewBox="0 0 24 24" class="icon">
|
||
|
|
<use xlink:href="#web"></use>
|
||
|
|
</svg>
|
||
|
|
<span>
|
||
|
|
<a href="https://abdullahtarawneh.com">https://abdullahtarawneh.com</a>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</address>
|
||
|
|
<blockquote class="quote">
|
||
|
|
<p><q>You're the first person I've met that keeps a spreadsheet of their lightbulbs.</q></p>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="summary">Growing up with math, books, and computers from the age of 3, Abdullah has been hungry for knowledge almost their entire life, and they're always looking for new things to learn. Abdullah is driven to learn everything they can about everything there is, and to organize that information and that experience into logical and digestible frameworks. Abdullah spends most of their time thinking about how various things could be made better, constantly optimizing things in their mind -- although there's a good chance that they'll come up with something pretty good the first time around. Abdullah is willing to work with stakeholders and consumers alike to facilitate efficient and concise communication and understanding. Consider Abdullah today for your professional Information Architecture needs.</p>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<section id="experience">
|
||
|
|
<h2>Selected Experience</h2>
|
||
|
|
<section id="mastodon">
|
||
|
|
<header>
|
||
|
|
<h3 class="title">Documentation Revamp <span style="font-weight: normal">for Mastodon gGmbH <a href="https://abdullahtarawneh.com/work/mastodon">(https://abdullahtarawneh.com/work/mastodon)</a></span></h3>
|
||
|
|
</header>
|
||
|
|
<div>
|
||
|
|
<section id="user-flows">
|
||
|
|
<h4>User flows</h4>
|
||
|
|
<ul class="flex">
|
||
|
|
<li>
|
||
|
|
<h5>End users</h5>
|
||
|
|
<p>People who want to use the Mastodon software and learn about its features.</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h5>Admins</h5>
|
||
|
|
<p>People who want to install and manage a website powered by Mastodon.</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h5>Project contributors</h5>
|
||
|
|
<p>People who want to develop features and functionality for the Mastodon software.</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h5>Client developers</h5>
|
||
|
|
<p>People who want to use the Mastodon API to interact with the Mastodon software.</p>
|
||
|
|
</li>
|
||
|
|
</section>
|
||
|
|
<section id="site-map">
|
||
|
|
<h4>Site map and URL structure</h4>
|
||
|
|
<p>Content was organized hierarchically based on user flow and section, representing a user journey.</p>
|
||
|
|
<ul>
|
||
|
|
<li class="user">
|
||
|
|
<span>/user</span>
|
||
|
|
<ul>
|
||
|
|
<li>.../signup</li>
|
||
|
|
<li>.../profile</li>
|
||
|
|
<li>.../posting</li>
|
||
|
|
<li>.../network</li>
|
||
|
|
<li>.../moderating</li>
|
||
|
|
<li>.../discoverability</li>
|
||
|
|
<li>.../preferences</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="admin">
|
||
|
|
<span>/admin</span>
|
||
|
|
<ul>
|
||
|
|
<li>.../prerequisites</li>
|
||
|
|
<li>.../install</li>
|
||
|
|
<li>.../config</li>
|
||
|
|
<li>.../setup</li>
|
||
|
|
<li>.../moderating</li>
|
||
|
|
<li>.../backups</li>
|
||
|
|
<li>.../upgrading</li>
|
||
|
|
<li>.../migrating</li>
|
||
|
|
<li>.../scaling</li>
|
||
|
|
<li>.../troubleshooting</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="dev">
|
||
|
|
<span>/dev</span>
|
||
|
|
<ul>
|
||
|
|
<li>.../overview</li>
|
||
|
|
<li>.../setup</li>
|
||
|
|
<li>.../code</li>
|
||
|
|
<li>.../routes</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="client">
|
||
|
|
<span>/client</span>
|
||
|
|
<ul>
|
||
|
|
<li>.../intro</li>
|
||
|
|
<li>.../public</li>
|
||
|
|
<li>.../token</li>
|
||
|
|
<li>.../authorized</li>
|
||
|
|
<li>.../libraries</li>
|
||
|
|
<li>.../guidelines</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
<div class="flex">
|
||
|
|
<section id="wireframes">
|
||
|
|
<h4>Wireframes</h4>
|
||
|
|
<p>The Mastodon documentation is heavily content-driven, so the sidebar contains a section hierarchy, while the main content is in a second column.</p>
|
||
|
|
</section>
|
||
|
|
<section id="content-audit">
|
||
|
|
<h4>Content audit</h4>
|
||
|
|
<p>The existing content was split apart and reorganized under new sections. Major parts were rewritten. See the case study URL for more.</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<section id="praise">
|
||
|
|
<blockquote class="quote">
|
||
|
|
<p><q>Bless you for being here to work on the docs btw. It's a big relief.</q></p>
|
||
|
|
</blockquote>
|
||
|
|
<a href="abdullah-tarawneh_resume-ia.pdf">PDF (30.4KB)</a>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|