eh ready to show off
This commit is contained in:
parent
e116e65a95
commit
00f34f7db7
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
**/public
|
||||
**/_gen
|
||||
|
|
@ -3,13 +3,16 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
main {flex-grow: 1;}
|
||||
.section {
|
||||
padding: 1em 0;
|
||||
@media (min-width: 480px) {padding: 2em 0;}
|
||||
@media (min-width: 960px) {padding: 4em 0;}
|
||||
padding: 2em 0;
|
||||
@media (min-width: 600px) {padding: 3em 0}
|
||||
@media (min-width: 62em) {padding: 4em 0}
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
.site-footer {
|
||||
background: #333;
|
||||
color: white;
|
||||
hr {display: none;}
|
||||
.container {padding: 2em 1em;}
|
||||
dt {font-weight: 700;}
|
||||
dd {margin-bottom: 0.5em;}
|
||||
a {color: inherit;}
|
||||
}
|
||||
|
|
@ -1,109 +1,8 @@
|
|||
.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;}
|
||||
a {text-decoration: none; color: inherit;}
|
||||
.container {}
|
||||
}
|
||||
|
||||
.site-masthead {display: flex; gap: 1em; align-items: center;}
|
||||
.site-icon {width: 44px; height: 44px; border-radius: 100em;}
|
||||
.site-title {}
|
||||
|
|
|
|||
24
config.toml
24
config.toml
|
|
@ -4,3 +4,27 @@ title = "abdullah tarawneh"
|
|||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe= true
|
||||
|
||||
[menu]
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "home"
|
||||
pre = "<i class='fa fa-home' aria-hidden='true'></i>"
|
||||
name = "Home"
|
||||
url = "/"
|
||||
weight = 10
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "blog"
|
||||
pre = "<i class='fa fa-pencil' aria-hidden='true'></i>"
|
||||
name = "Blog"
|
||||
url = "/blog/"
|
||||
weight = 20
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "contact"
|
||||
pre = "<i class='fa fa-address-card' aria-hidden='true'></i>"
|
||||
name = "Contact"
|
||||
url = "/contact/"
|
||||
weight = 30
|
||||
|
||||
|
|
|
|||
0
content/blog/_index.md
Normal file
0
content/blog/_index.md
Normal file
4
content/contact/_index.md
Normal file
4
content/contact/_index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Contact"
|
||||
---
|
||||
|
||||
|
|
@ -108,5 +108,12 @@
|
|||
</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="/resume" class="cta button">view resume</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<footer class="site-footer">
|
||||
<hr>
|
||||
<div class="container">
|
||||
CC Public Domain
|
||||
<dl style="max-width: max-content; margin: 0 auto;">
|
||||
<dt>Email</dt>
|
||||
<dd>a@trwnh.com</dd>
|
||||
<dt>Jabber</dt>
|
||||
<dd>a@trwnh.com</dd>
|
||||
<dt>Fediverse</dt>
|
||||
<dd><a href="https://mastodon.social/@trwnh" rel="me">mastodon.social/@trwnh</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,22 +1,25 @@
|
|||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="site-title"><h1>{{ .Site.Title }}</h1></a>
|
||||
<input type="checkbox" name="hamburger" id="hamburger">
|
||||
<label for="hamburger" class="hamburger-label">
|
||||
<div class="spinner diagonal part-1"></div>
|
||||
<div class="spinner horizontal"></div>
|
||||
<div class="spinner diagonal part-2"></div>
|
||||
</label>
|
||||
<a href="/" class="site-masthead">
|
||||
<img class="site-icon" src="/images/avatar.png">
|
||||
<h1 class="site-title">abdullah tarawneh, freelance creative and consultant.</h1>
|
||||
</a>
|
||||
<!--
|
||||
<nav class="site-nav">
|
||||
<ul>
|
||||
{{- $currentPage := . -}}
|
||||
{{ range .Site.Menus.main -}}
|
||||
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
|
||||
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
|
||||
<a href="{{ .URL | absLangURL }}">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
{{ .Post }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{ partial "i18nlist.html" . }}
|
||||
</nav>
|
||||
-->
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -1 +1 @@
|
|||
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}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){.section{padding:2em 0}}@media(min-width:960px){.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,.25)}h1,h2,h3,h4,h5,h6{line-height:1.2}p{line-height:1.4}.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:#fff;width:max-content;font-size:clamp(0.75em,2vw,1em);padding:.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}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1em}.card{background:#fff}.card img{width:100%;height:auto}#process .card img{height:200px}.card h3{margin:1em 0;font-weight:700}.card p{margin-bottom:1em}.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:#fff;padding:.5em;border-radius:.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:.5em solid transparent;border-bottom-color:#212121;border-top:0;margin-left:-.5em;margin-top:-.5em}.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){.site-nav{display:flex;flex-basis:unset;flex-flow:row}.site-nav ul{display:flex}.site-nav a{margin-left:1em;box-sizing:border-box}}.site-header{position:fixed;bottom:0;width:100%;z-index:2}@media(min-width:600px){.site-header{position:sticky;bottom:unset;top:0}.site-header a{height:44px}.site-header a:hover{border-bottom:2px solid #00a3ff}.site-header .container{justify-content:space-between;flex-flow:row wrap;height:64px;align-items:center}}body{margin-bottom:44px}@media(min-width:600px){body{margin-bottom:unset}}.hamburger-label::before{content:"Menu";position:absolute;left:-3em}#hamburger:checked~.site-nav{display:flex}#hamburger{transition:all .5s;box-sizing:border-box;display:none}.hamburger-label{transition:all .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 .5s;box-sizing:border-box;position:absolute;height:3px;width:100%;background-color:#000}.horizontal{transition:all .5s;box-sizing:border-box;position:relative;float:left;margin-top:3px}.diagonal.part-1{position:relative;transition:all .5s;box-sizing:border-box;float:left}.diagonal.part-2{transition:all .5s;box-sizing:border-box;position:relative;float:left;margin-top:3px}#hamburger:checked~.hamburger-label>.horizontal{transition:all .5s;box-sizing:border-box;opacity:0}#hamburger:checked~.hamburger-label>.diagonal.part-1{transition:all .5s;box-sizing:border-box;transform:rotate(135deg);margin-top:8px}#hamburger:checked~.hamburger-label>.diagonal.part-2{transition:all .5s;box-sizing:border-box;transform:rotate(-135deg);margin-top:-9px}@media(min-width:600px){#hamburger,.hamburger-label{display:none}}.site-footer hr{display:none}
|
||||
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}html{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;scroll-behavior:smooth}body{display:flex;flex-flow:column;min-height:100vh;position:relative}main{flex-grow:1}.section{padding:2em 0}@media(min-width:600px){.section{padding:3em 0}}@media(min-width:62em){.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,.25)}h1,h2,h3,h4,h5,h6{line-height:1.2}p{line-height:1.4}.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:#fff;width:max-content;font-size:clamp(0.75em,2vw,1em);padding:.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}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1em}.card{background:#fff}.card img{width:100%;height:auto}#process .card img{height:200px}.card h3{margin:1em 0;font-weight:700}.card p{margin-bottom:1em}.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:#fff;padding:.5em;border-radius:.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:.5em solid transparent;border-bottom-color:#212121;border-top:0;margin-left:-.5em;margin-top:-.5em}.site-header a{text-decoration:none;color:inherit}.site-masthead{display:flex;gap:1em;align-items:center}.site-icon{width:44px;height:44px;border-radius:100em}.site-footer{background:#333;color:#fff}.site-footer hr{display:none}.site-footer .container{padding:2em 1em}.site-footer dt{font-weight:700}.site-footer dd{margin-bottom:.5em}.site-footer a{color:inherit}
|
||||
|
|
@ -1 +1 @@
|
|||
{"Target":"scss/main.min.432c5720f6da561756119efb67db5c1d2c32e4aafb655f93d83c5b3b0aab7ecb.css","MediaType":"text/css","Data":{"Integrity":"sha256-QyxXIPbaVhdWEZ77Z9tcHSwy5Kr7ZV+T2DxbOwqrfss="}}
|
||||
{"Target":"scss/main.min.95089ef85e19636fd55cb64500712284e5a674f127ae539030f77b9e8d70aca1.css","MediaType":"text/css","Data":{"Integrity":"sha256-lQie+F4ZY2/VXLZFAHEihOWmdPEnrlOQMPd7no1wrKE="}}
|
||||
Loading…
Reference in a new issue