sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

simplify homepage

Browse source
This commit is contained in:
a 2021-01-27 07:10:13 -06:00
parent 7972f4d28b
commit 4fcb0e11b4
8 changed files with 71 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/scss/index/cards.scss
View file

@ -1,23 +1,14 @@
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em,1fr));
gap: 2em;
grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
grid-gap: 2em;
}
.card {
background: white;
}
.card img {
.card__img {
width: 100%;
height: auto;
}
#process .card img {
height: 200px;
}
.card h3 {
margin: 1em 0;
font-weight: 700;
}
.card p {
margin-bottom: 1em;
line-height: 1.4;
}
.card__body {padding: 1em;}
.card__title {font-weight: 700; margin-bottom: 0.7em;}
.card__desc {line-height: 1.4;}

36
assets/scss/index/hero.scss
View file

@ -1,36 +0,0 @@
.hero .container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"img"
"txt"
"cta";
@media (min-width: 600px) {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"txt img"
"cta img";
}
gap: 1em;
}
.hero img {
grid-area: img;
width: 100%;
max-height: 160px;
@media (min-width: 600px) {max-height: unset;}
}
.hero .cta {
grid-area: cta;
align-self: start;
}
.hero .headline {
grid-area: txt;
font-size: clamp(1.4em, 7vw, 3em);
line-height: 1.2;
align-self: end;
@media (min-width: 600px) {
max-width: 11ch;
}
}

11
assets/scss/index/testimonials.scss
View file

@ -14,9 +14,9 @@
}
.avatar {
margin-left: 1em;
width: 2em;
height: 2em;
border-radius: 1em;
width: 4em;
height: 4em;
border-radius: 100em;
background: #212121;
}
.name {
@ -29,17 +29,18 @@
border-radius: 0.5em;
position: relative;
grid-column: span 2;
height: 80px;
min-height: 80px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.4;
}
.bubble:after {
content: '';
position: absolute;
top: 0;
left: 2em;
left: 3em;
width: 0;
height: 0;
border: 0.5em solid transparent;

2
assets/scss/main.scss
View file

@ -1,12 +1,10 @@
@import "base/reset.scss";
@import "base/links.scss";
@import "base/sections.scss";
@import "base/page.scss";
@import "base/list.scss";
@import "base/components.scss";
@import "index/index.scss";
@import "index/hero.scss";
@import "index/cards.scss";
@import "index/testimonials.scss";

2
content/code/certbot-namecheap/index.md
View file

@ -1,6 +1,6 @@
---
title: "Certbot DNS-01 hook for Namecheap"
summary: "A manual auth hook for Certbot, implementing the DNS-01 challenge with Namecheap as the provider. Written in Python."
summary: "A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains. Written in Python."
author: "Abdullah Tarawneh"
date: "2019-10-30"
tags: ["namecheap", "certbot", "dns-01", "python", "letsencrypt"]

11
content/design/motarawneh/index.md Normal file
View file

@ -0,0 +1,11 @@
---
title: Mo Tarawneh (motarawneh.org)
summary: A personal website for Mo Tarawneh, inaugural chairperson of the UN CRPD and twice-elected member.
author: "Abdullah Tarawneh"
date: "2020-03-17"
tags: ["website", "web", "responsive", "design"]
category: "Design"
cover: "/images/motarawneh.jpg"
---
## Overview

2
content/work/pixelfed/index.md
View file

@ -1,6 +1,6 @@
---
title: "Pixelfed team member"
summary: "Turning a one-person project into an organized effort."
summary: "After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort."
author: "Abdullah Tarawneh"
date: "2019-01-06"
tags: ["pixelfed", "project management", "product management", "github issues", "documentation"]

127
layouts/index.html
View file

@ -1,94 +1,57 @@
{{ define "main" }}
<main>
<section class="section hero">
<section class="section" id="about">
<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 out of chaos.</h1>
<a class="button cta" href="#projects">summary of my work</a>
</div>
</section>
<section class="section" id="process">
<div class="container">
<h2 class="section-heading">my process:</h2>
<h2 class="section-heading">what i've done:</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 class="card">
<img class="card__img" src="/images/mastodocs.jpg">
<div class="card__body">
<h3 class="card__title">information architecture and docs</h3>
<p class="card__desc">most notably, documentation for mastodon and pixelfed</p>
</div>
</div>
<div class="card">
<img class="card__img" src="/images/pixelfed.jpg">
<div class="card__body">
<h3 class="card__title">project and product management</h3>
<p class="card__desc">issue triage, design consultancy, and release planning</p>
</div>
</div>
<div class="card">
<img class="card__img" src="/images/namecheap.jpg">
<div class="card__body">
<h3 class="card__title">code snippets and contributions</h3>
<p class="card__desc">active in various open-source projects, as well as personal scripts</p>
</div>
</div>
<div class="card">
<img class="card__img" src="/images/go-fed.png">
<div class="card__body">
<h3 class="card__title">web design and development</h3>
<p class="card__desc">specializing in lightweight, statically-generated sites</p>
</div>
</div>
<div class="card">
<img class="card__img" src="/images/eqin.jpg">
<div class="card__body">
<h3 class="card__title">tech and system admininstration</h3>
<p class="card__desc">managing linux servers for nonprofits and myself</p>
</div>
</div>
<div class="card">
<img class="card__img" src="/images/birdsounds.jpg">
<div class="card__body">
<h3 class="card__title">skillful photography</h3>
<p class="card__desc">see <a href="https://birdsounds.media">birdsounds.media</a> for my portfolio of concert photos</p>
</div>
</div>
</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="/work/mastodon">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="/work/pixelfed">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>
<h2 class="section-heading">what others have said about me:</h2>
<div class="testimonials">
<div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/khalil.jpg">