simplify homepage
This commit is contained in:
parent
7972f4d28b
commit
4fcb0e11b4
8 changed files with 71 additions and 143 deletions
|
@ -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;}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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
11
content/design/motarawneh/index.md
Normal 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
|
|
@ -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"]
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue