diff --git a/assets/scss/base/reset.scss b/assets/scss/base/reset.scss new file mode 100644 index 0000000..5cebaa4 --- /dev/null +++ b/assets/scss/base/reset.scss @@ -0,0 +1,44 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/assets/scss/base/sections.scss b/assets/scss/base/sections.scss new file mode 100644 index 0000000..cf2b160 --- /dev/null +++ b/assets/scss/base/sections.scss @@ -0,0 +1,31 @@ +html { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + scroll-behavior: smooth; +} +body { + width: 100vw; + position: relative; +} +.section { + padding: 1em 0; + @media (min-width: 480px) {padding: 2em 0;} + @media (min-width: 960px) {padding: 4em 0;} +} +.container { + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 1em; +} + +.section-heading { + font-size: 1.2em; + font-weight: 400; + line-height: 1.2; + text-align: center; + max-width: 18ch; + margin: 0 auto; + margin-bottom: 4em; + padding-bottom: 1em; + border-bottom: 2px solid rgba(0,0,0,0.25) +} \ No newline at end of file diff --git a/assets/scss/base/typography.scss b/assets/scss/base/typography.scss new file mode 100644 index 0000000..50ee2f9 --- /dev/null +++ b/assets/scss/base/typography.scss @@ -0,0 +1,4 @@ +h1,h2,h3,h4,h5,h6 {line-height: 1.2} +p { + line-height: 1.4 +} \ No newline at end of file diff --git a/assets/scss/index/cards.scss b/assets/scss/index/cards.scss new file mode 100644 index 0000000..fd0a80a --- /dev/null +++ b/assets/scss/index/cards.scss @@ -0,0 +1,22 @@ +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15em,1fr)); + gap: 1em; +} +.card { + background: white; +} +.card img { + width: 100%; + height: auto; +} +#process .card img { + height: 200px; +} +.card h3 { + margin: 1em 0; + font-weight: 700; +} +.card p { + margin-bottom: 1em; +} \ No newline at end of file diff --git a/assets/scss/index/hero.scss b/assets/scss/index/hero.scss new file mode 100644 index 0000000..06e9aca --- /dev/null +++ b/assets/scss/index/hero.scss @@ -0,0 +1,29 @@ +.hero .container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + gap: 1em; +} +.hero img { + width: 100%; + grid-row: 1/3; +} +.headline { + font-size: clamp(1.4em, 7vw, 3em); + max-width: 11ch; + line-height: 1.2; + align-self: end; +} +.button { + background: #0060ff; + color: white; + width: max-content; + font-size: clamp(0.75em,2vw,1em); + padding: 0.75em; + display: flex; + justify-content: center; + text-decoration: none; + border-radius: 100em; + font-weight: 700; +} +.cta {grid-column: 1; grid-row: 2; align-self: start;} \ No newline at end of file diff --git a/assets/scss/index/testimonials.scss b/assets/scss/index/testimonials.scss new file mode 100644 index 0000000..8e9d350 --- /dev/null +++ b/assets/scss/index/testimonials.scss @@ -0,0 +1,50 @@ +.testimonials { + display: flex; + flex-flow: row wrap; + gap: 1em; + justify-content: center; +} +.testimonial { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + grid-gap: 1em; + margin-bottom: 1em; + flex-basis: 18em; +} +.avatar { + margin-left: 1em; + width: 2em; + height: 2em; + border-radius: 1em; + background: #212121; +} +.name { + align-self: center; +} +.bubble { + background-color: #212121; + color: white; + padding: 0.5em; + border-radius: 0.5em; + position: relative; + grid-column: span 2; + height: 80px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} +.bubble:after { + content: ''; + position: absolute; + top: 0; + left: 2em; + width: 0; + height: 0; + border: 0.5em solid transparent; + border-bottom-color: #212121; + border-top: 0; + margin-left: -0.5em; + margin-top: -0.5em; +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index ef5d9c7..03d4796 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,207 +1,10 @@ -/* base styles */ -* {margin: 0; padding: 0; box-sizing: border-box;} -html { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - scroll-behavior: smooth; -} -body { - width: 100vw; - position: relative; -} -/* layout */ -.section { - padding: 1em 0; -} -@media (min-width: 480px) { - .section {padding: 2em 0;} -} -@media (min-width: 900px) { - .section {padding: 4em 0;} -} -.container { - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 1em; -} -.section-heading { - font-size: 1.2em; - font-weight: 400; - line-height: 1.2; - text-align: center; - max-width: 18ch; - margin: 0 auto; - margin-bottom: 4em; - padding-bottom: 1em; - border-bottom: 2px solid rgba(0,0,0,0.25) -} -/* site header */ -.site-header { - padding: 0.5em 0; -} -.site-header .container { - display: grid; - grid-template-columns: auto 1fr; - gap: 1em; -} -.site-title { - font-size: 1em; - align-self: center; - font-weight: 400; - line-height: 1; -} -.site-nav { - position: fixed; - bottom: 0; - left: 0; - z-index: 2; - width: 100vw; - height: 4em; - background: #212121; - color: white; - display: grid; - grid-template-columns: repeat(3, 1fr); -} -.site-nav__item { - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - text-decoration: none; - color: inherit; - border-top: 4px solid rgba(255,255,255,0.5); -} -.site-nav__item.active { - border-top: 4px solid #0060ff; -} -body {margin-bottom: 4em;} -@media (min-width: 480px) { - .site-header .container { - grid-template-columns: auto 1fr auto; - } - .site-nav { - position: unset; - background: unset; - color: unset; - width: unset; - height: unset; - } - .site-nav__item.active { - background: unset; - color: #0060ff; - } - body {margin-bottom: 0} -} -/* hero section */ -.hero .container { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto auto; - gap: 1em; -} -.hero img { - width: 100%; - grid-row: 1/3; -} -.headline { - font-size: clamp(1.4em, 7vw, 3em); - max-width: 11ch; - line-height: 1.2; - align-self: end; -} -.button { - background: #0060ff; - color: white; - width: max-content; - font-size: clamp(0.75em,2vw,1em); - padding: 0.75em; - display: flex; - justify-content: center; - text-decoration: none; - border-radius: 100em; - font-weight: 700; -} -.cta {grid-column: 1; grid-row: 2; align-self: start;} +@import "base/reset.scss"; +@import "base/sections.scss"; +@import "base/typography.scss"; -/* praise and testimonials */ -.testimonials { - display: flex; - flex-flow: row wrap; - gap: 1em; - justify-content: center; -} -.testimonial { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto; - grid-gap: 1em; - margin-bottom: 1em; - flex-basis: 18em; -} -.avatar { - margin-left: 1em; - width: 2em; - height: 2em; - border-radius: 1em; - background: #212121; -} -.name { - align-self: center; -} -.bubble { - background-color: #212121; - color: white; - padding: 0.5em; - border-radius: 0.5em; - position: relative; - grid-column: span 2; - height: 80px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; -} -.bubble:after { - content: ''; - position: absolute; - top: 0; - left: 2em; - width: 0; - height: 0; - border: 0.5em solid transparent; - border-bottom-color: #212121; - border-top: 0; - margin-left: -0.5em; - margin-top: -0.5em; -} -/* skills */ -.skills { - list-style: none; - max-width: 18em; -} -.skill:before { - content: "+"; - margin-right: 0.5em; -} -/* process */ -.cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(15em,1fr)); - gap: 1em; -} -.card { - background: white; -} -.card img { - width: 100%; - height: auto; -} -#process .card img { - height: 200px; -} -.card h3 { - margin: 1em 0; -} -.card p { - margin-bottom: 1em; -} \ No newline at end of file +@import "index/hero.scss"; +@import "index/cards.scss"; +@import "index/testimonials.scss"; + +@import "partials/site-header.scss"; +@import "partials/site-footer.scss"; \ No newline at end of file diff --git a/assets/scss/partials/site-footer.scss b/assets/scss/partials/site-footer.scss new file mode 100644 index 0000000..7dcbfe3 --- /dev/null +++ b/assets/scss/partials/site-footer.scss @@ -0,0 +1,3 @@ +.site-footer { + hr {display: none;} +} \ No newline at end of file diff --git a/assets/scss/partials/site-header.scss b/assets/scss/partials/site-header.scss new file mode 100644 index 0000000..5c36c11 --- /dev/null +++ b/assets/scss/partials/site-header.scss @@ -0,0 +1,109 @@ +.site-header {background: #ddd; filter: drop-shadow(0px -1px 2px rgba(0,0,0,0.2))} +.site-header a {text-decoration: none; color: inherit;} +.site-title {font-weight: 700; font-size: 22px; line-height: 2em;} +.site-header .container {display: flex; flex-flow: row wrap;} +.site-nav {flex-basis: 100%; display: flex; flex-flow: column;} +.site-nav a {display: block; padding: 1em 0;} + + +.site-nav { + display: none; + @media (min-width: 600px) { + display: flex; + flex-basis: unset; + flex-flow: row; + ul { + display: flex; + } + a { + margin-left: 1em; + box-sizing: border-box; + } + } +} +.site-header { + position: fixed; bottom: 0; width: 100%; + z-index: 2; + @media (min-width: 600px) { + position: sticky; + bottom: unset; + top: 0; + a {height: 44px;} + a:hover {border-bottom: 2px solid #00a3ff;} + .container {justify-content: space-between; flex-flow: row wrap; height: 64px; align-items: center;} + } +} +body { + margin-bottom: 44px; + @media (min-width: 600px) {margin-bottom: unset;} +} +.hamburger-label::before {content:"Menu"; position: absolute; left: -3em; } +#hamburger:checked ~ .site-nav { + display: flex; +} +#hamburger { + transition: all 0.5s; + box-sizing: border-box; + display: none; +} +.hamburger-label { + transition: all 0.5s; + box-sizing: border-box; + cursor: pointer; + position: absolute; + z-index: 99; + height: 100%; + width: 100%; + top: 16px; + right: 15px; + height: 22px; + width: 22px; +} +.spinner { + transition: all 0.5s; + box-sizing: border-box; + position: absolute; + height: 3px; + width: 100%; + background-color: black; +} +.horizontal { + transition: all 0.5s; + box-sizing: border-box; + position: relative; + float: left; + margin-top: 3px; +} +.diagonal.part-1 { + position: relative; + transition: all 0.5s; + box-sizing: border-box; + float: left; +} +.diagonal.part-2 { + transition: all 0.5s; + box-sizing: border-box; + position: relative; + float: left; + margin-top: 3px; +} +#hamburger:checked ~ .hamburger-label > .horizontal { + transition: all 0.5s; + box-sizing: border-box; + opacity: 0; +} +#hamburger:checked ~ .hamburger-label > .diagonal.part-1 { + transition: all 0.5s; + box-sizing: border-box; + transform: rotate(135deg); + margin-top: 8px; +} +#hamburger:checked ~ .hamburger-label > .diagonal.part-2 { + transition: all 0.5s; + box-sizing: border-box; + transform: rotate(-135deg); + margin-top: -9px; +} +@media (min-width: 600px) { + #hamburger, .hamburger-label {display: none;} +} \ No newline at end of file diff --git a/config.toml b/config.toml index e4b7418..0e415a1 100644 --- a/config.toml +++ b/config.toml @@ -1,3 +1,6 @@ -baseURL = "http://example.org/" +baseURL = "https://abdullahtarawneh.com" languageCode = "en-us" -title = "My New Hugo Site" +title = "abdullah tarawneh" + +[markup.goldmark.renderer] +unsafe= true \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 66907b2..21fc245 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,19 +1,8 @@ {{ define "main" }}
-
-
- -

abdullah
tarawneh

- -
-
- Abstract illustration of a thought process + Abstract illustration of a thought process

i make order
out of chaos.

view my work
@@ -23,32 +12,32 @@

my process:

- +

information

i plan out the details of the project.

- +

analysis

i break down info and make connections.

- +

design

i construct a framework for the project.

- +

feedback

i make sure to keep you in the picture.

- +

implementation

i create the deliverables as discussed.

- +

results

i deliver the completed project to you.

@@ -60,37 +49,37 @@

here's what i've done.

- +

Mastodon
Documentation Revamp

Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it.

Read more
- +

Pixelfed
Project Management

After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort.

Read more
- +

EFF Certbot
Namecheap Auth Hook

A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains.

View source code
- +

Mo Tarawneh
(motarawneh.org)

A personal website for Mo Tarawneh, inaugural chairperson of the UN CRPD and twice-elected member.

View site
- +

Equality Initiative
(equalityinitiative.org)

Nonprofit website designed for Equality Initiative in February 2014. Built with Wordpress and Divi.

View site archive
- +

birdsounds
(birdsounds.media)

birdsounds.media is my concert photography showcase and portfolio website. Built using Koken.

View site @@ -102,17 +91,17 @@

what others have said about me:

- +

Khalil Saadiq

it's scary how much you know.
- +

Eugen Rochko

bless you for being here to work on the docs btw. it's a big relief.
- +

Daniel Supernault

i don't trust anyone as much as you to shape the direction of the project.
diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html index d1457b5..526d28c 100644 --- a/layouts/partials/site-footer.html +++ b/layouts/partials/site-footer.html @@ -1,11 +1,6 @@ \ No newline at end of file diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 81be2dc..9fd37d6 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -1,6 +1,6 @@
-

motarawneh

 +

{{ .Site.Title }}