about blurbs

main
Steve Ayerhart 2020-11-29 20:33:57 -05:00
parent 353b0321ce
commit 4dfa4e08cb
No known key found for this signature in database
GPG Key ID: 5C815FDF3A00B8BA
3 changed files with 194 additions and 140 deletions

View File

@ -1,42 +1,73 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300"/>
<link rel="stylesheet" href="/style/perspective.css"/> <link rel="stylesheet" href="../style/perspective.css"/>
<title>Steve Ayerhart</title> <title>Steve Ayerhart</title>
</head> </head>
<body> <body>
<header> <header>
<h1 class="name"> <h1 class="name">
<a class="name" href="https://steve.ayerh.art">steve</a> <a class="name" href="https://steve.ayerh.art">steve</a>
<a class="name" href="https://ayerh.art">ayerhart</a> <a class="name" href="https://ayerh.art">ayerhart</a>
</h1> </h1>
<nav> <nav>
<ul> <ul>
<li><a href="#">blog</a></li> <li><a href="">blog</a></li>
<li><a href="#">code</a></li> <li><a href="https://src.steve.ayerh.art">code</a></li>
<li><a href="#">about</a></li> <li><a href="#">about</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<main> <main>
<section id="blurb"> <section id="blurb">
<h2>blurb</h2> <h2><span>blurb</span><hr/></h2>
<p>I'm a software developer from Erie, Pennsylvania. During the day I assume the role of a "fullstack" web developer. I mostly write C# and Javascript now. I have written with Ruby, Python, and PHP professionally as well.</p> <p>I'm a software developer living in <a href="https://www.openstreetmap.org/#map=13/35.6654/-78.9503">New Hill, North Carolina</a>.</p>
<p>I spend most of my waking hours in front of a computer. When I'm not working I enjoy writing and contributing to free software. I also enjoy playing some computers games as well.</p> <p>I spend most of my waking hours in front of a computer. When I'm not working as a "fullstack" web developer, I enjoy writing and contributing to free software.</p>
<p>My wife <a href="https://lkayerhart.ist">Lee Katherine</a> and I live with our <a href="https://lkayerhart.ist/meet-the-family">four rescue dogs</a>.</p>
<p>My wife <a href="https://lkayerhart.ist">Lee Katherine</a> and I currently live in New Hill North Carolina.</p> </section>
</section> <section id="programming">
<section id="contant"> <h2><span>programming</span><hr/></h2>
<h2>contact</h2> <p>Languages I currently work with:</p>
<p>You can mail me at <code>steve@ayerh.art</code></p> <ul>
<p>My GPG key is <code>0xB6205BE680932292790F622B9475954DBBC6B924</code></p> <li>
</section> <a href="https://schemers.org">Scheme</a>
</main> <ul>
</body> <li><a href="https://www.gnu.org/software/guile">Guile</a></li>
<li><a href="https://racket-lang.org">Racket</a></li>
</ul>
</li>
<li><a href="https://factorcode.org">Factor</a></li>
<li><a href="https://csharp.net">C#</a></li>
<li><a href="https://wikipedia.org/wiki/JavaScript">JavaScript</a></li>
<li><a href="https://typescriptlang.org">Typescript</a></li>
</ul>
<p>Langauges I've worked with:</p>
<ul>
<li><a href="https://www.gnu.org/software/gnu-c-manual">C</a></li>
<li><a href="https://isocpp.org">C++</a></li>
<li><a href="https://php.net">PHP</a></li>
<li><a href="https://www.ruby-lang.org">Ruby</a></li>
<li><a href="https://python.org">Python</a></li>
<li><a href="https://erlang.org">Erlang</a></li>
</ul>
</section>
<section id="contact">
<h2><span>contact</span><hr/></h2>
<dl>
<dt>email</dt>
<dd><code><a href="mailto:steve@ayerh.art">steve@ayerh.art</code></a></dd>
<dt>gpg</dt>
<dd><code><a href="https://steve.ayerh.art/public.key">0xb6205be680932292790f622b9475954dbbc6b924</code></a></dd>
<dt>irc</dt>
<dd>sayerhart on <a href="http://freenode.net">Freenode</a></dd>
</dl>
</section>
</main>
</body>
</html> </html>

View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300"/>
<link rel="stylesheet" href="/style/perspective.css"/> <link rel="stylesheet" href="style/perspective.css"/>
<title>Steve Ayerhart</title> <title>Steve Ayerhart</title>
</head> </head>
<body> <body>

View File

@ -1,128 +1,151 @@
@font-face { @font-face {
font-family: 'Open Sans Condensed'; font-family: "Open Sans Condensed";
font-weight: 300; font-weight: 300;
font-display: swap; font-display: swap;
src: local('Open Sans Condensed'); src: local("Open Sans Condensed");
} }
@font-face { @font-face {
font-family: 'Alegreya Sans SC'; font-family: "Alegreya Sans SC";
font-weight: 900; font-weight: 900;
font-weight: extra-bold; font-weight: extra-bold;
font-display: swap; font-display: swap;
src: local('Alegreya Sans Sc'); src: local("Alegreya Sans Sc");
}
* {
margin: 0;
padding: 0;
} }
html { html {
background-color: #f4f7f6; background-color: #f4f7f6;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
main { main {
max-width: 40em; max-width: 40em;
padding: 1em; padding: 1em;
}
section {
ul {
list-style-type: square;
} }
section h2 { p {
margin: 1em 0; font-family: sans-serif;
font-family: 'Open Sans Condensed', sans-serif; line-height: 1.5em;
text-transform: uppercase;
border-bottom: 1px solid #b43434;
} }
code + p, p + p{ a {
margin: 1em 0; color: #b43434;
text-decoration: none;
} }
&.perspective { h2 {
min-height: 100vh; display: flex;
overflow: hidden; margin: 1em 0;
font-family: "Open Sans Condensed", sans-serif;
body { text-transform: uppercase;
position: relative;
bottom: 5em;
}
div.name {
text-decoration: none;
color: #666666;
font-family: 'Alegreya Sans SC';
filter: drop-shadow(1px 1px #333333);
text-transform: uppercase;
font-size: 5em;
font-weight: 900;
transform: skew(60deg, -30deg);
position: relative;
&:first-child {
right: 1em;
}
&:last-child {
left: 1em;
}
}
div.nav {
transform: skew(0deg, -30deg);
}
} }
hr {
color: #b43434;
background-color: #b43434;
flex-basis: 100%;
align-self: center;
margin-left: 0.5em;
height: 1px;
border: 0;
}
}
code + p,
p + p {
margin: 1em 0;
}
&.perspective {
min-height: 100vh;
overflow: hidden;
body {
position: relative;
bottom: 5em;
}
div.name {
text-decoration: none;
color: #666666;
font-family: "Alegreya Sans SC";
filter: drop-shadow(1px 1px #333333);
text-transform: uppercase;
font-size: 5em;
font-weight: 900;
transform: skew(60deg, -30deg);
position: relative;
&:first-child {
right: 1em;
}
&:last-child {
left: 1em;
}
}
div.nav {
transform: skew(0deg, -30deg);
}
}
} }
header { header {
h1 { h1 {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
a.name { a.name {
text-decoration: none; text-decoration: none;
color: #666666; color: #666666;
font-family: 'Alegreya Sans SC'; font-family: "Alegreya Sans SC";
font-size: 2em; font-size: 2em;
filter: drop-shadow(1px 1px #333333); filter: drop-shadow(1px 1px #333333);
}
.name {
&:first-child {
padding-right: 0.25em;
} }
.name { &:last-child {
&:first-child { padding-left: 0.25em;
padding-right: .25em;
}
&:last-child {
padding-left: .25em;
}
} }
} }
nav, ul, li {
margin: 0;
padding: 0;
display: inline;
} }
nav { nav {
font-family: 'Open Sans Condensed', sans-serif; font-family: "Open Sans Condensed", sans-serif;
font-size: 2em; font-size: 2em;
ul { ul,
background-color: #b43434; li {
display: flex; margin: 0;
justify-content: space-around; padding: 0;
} display: inline;
a { }
text-decoration: none;
color: #333333;
}
li { ul {
padding: 0 5px; background-color: #b43434;
&:hover { display: flex;
a { justify-content: space-around;
color: #f4f6f7; }
} a {
} text-decoration: none;
color: #333333;
}
li {
padding: 0 5px;
&:hover {
a {
color: #f4f6f7;
}
} }
}
} }