From 4dfa4e08cb0f02119676ae35148db814bd1f41e6 Mon Sep 17 00:00:00 2001
From: Steve Ayerhart <steve@ayerh.art>
Date: Sun, 29 Nov 2020 20:33:57 -0500
Subject: [PATCH] about blurbs
---
public/steve.ayerh.art/about/index.html | 107 +++++++----
public/steve.ayerh.art/index.html | 2 +-
style/scss/perspective.scss | 225 +++++++++++++-----------
3 files changed, 194 insertions(+), 140 deletions(-)
diff --git a/public/steve.ayerh.art/about/index.html b/public/steve.ayerh.art/about/index.html
index 54d12a5..26413ae 100644
--- a/public/steve.ayerh.art/about/index.html
+++ b/public/steve.ayerh.art/about/index.html
@@ -1,42 +1,73 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <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=Open+Sans+Condensed:wght@300"/>
- <link rel="stylesheet" href="/style/perspective.css"/>
- <title>Steve Ayerhart</title>
- </head>
- <body>
- <header>
- <h1 class="name">
- <a class="name" href="https://steve.ayerh.art">steve</a>
- <a class="name" href="https://ayerh.art">ayerhart</a>
- </h1>
- <nav>
- <ul>
- <li><a href="#">blog</a></li>
- <li><a href="#">code</a></li>
- <li><a href="#">about</a></li>
- </ul>
- </nav>
- </header>
- <main>
- <section id="blurb">
- <h2>blurb</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 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>My wife <a href="https://lkayerhart.ist">Lee Katherine</a> and I currently live in New Hill North Carolina.</p>
- </section>
- <section id="contant">
- <h2>contact</h2>
- <p>You can mail me at <code>steve@ayerh.art</code></p>
- <p>My GPG key is <code>0xB6205BE680932292790F622B9475954DBBC6B924</code></p>
- </section>
- </main>
- </body>
+ <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="../style/perspective.css"/>
+ <title>Steve Ayerhart</title>
+ </head>
+ <body>
+ <header>
+ <h1 class="name">
+ <a class="name" href="https://steve.ayerh.art">steve</a>
+ <a class="name" href="https://ayerh.art">ayerhart</a>
+ </h1>
+ <nav>
+ <ul>
+ <li><a href="">blog</a></li>
+ <li><a href="https://src.steve.ayerh.art">code</a></li>
+ <li><a href="#">about</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main>
+ <section id="blurb">
+ <h2><span>blurb</span><hr/></h2>
+ <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 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>
+ </section>
+ <section id="programming">
+ <h2><span>programming</span><hr/></h2>
+ <p>Languages I currently work with:</p>
+ <ul>
+ <li>
+ <a href="https://schemers.org">Scheme</a>
+ <ul>
+ <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>
diff --git a/public/steve.ayerh.art/index.html b/public/steve.ayerh.art/index.html
index aa1519e..24b8399 100644
--- a/public/steve.ayerh.art/index.html
+++ b/public/steve.ayerh.art/index.html
@@ -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=Open+Sans+Condensed:wght@300"/>
- <link rel="stylesheet" href="/style/perspective.css"/>
+ <link rel="stylesheet" href="style/perspective.css"/>
<title>Steve Ayerhart</title>
</head>
<body>
diff --git a/style/scss/perspective.scss b/style/scss/perspective.scss
index dd4b8be..c0c400e 100644
--- a/style/scss/perspective.scss
+++ b/style/scss/perspective.scss
@@ -1,128 +1,151 @@
@font-face {
- font-family: 'Open Sans Condensed';
- font-weight: 300;
- font-display: swap;
- src: local('Open Sans Condensed');
+ font-family: "Open Sans Condensed";
+ font-weight: 300;
+ font-display: swap;
+ src: local("Open Sans Condensed");
}
@font-face {
- font-family: 'Alegreya Sans SC';
- font-weight: 900;
- font-weight: extra-bold;
- font-display: swap;
- src: local('Alegreya Sans Sc');
-}
-
-* {
- margin: 0;
- padding: 0;
+ font-family: "Alegreya Sans SC";
+ font-weight: 900;
+ font-weight: extra-bold;
+ font-display: swap;
+ src: local("Alegreya Sans Sc");
}
html {
- background-color: #f4f7f6;
- display: flex;
- justify-content: center;
- align-items: center;
+ background-color: #f4f7f6;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- main {
- max-width: 40em;
- padding: 1em;
+ main {
+ max-width: 40em;
+ padding: 1em;
+ }
+
+ section {
+ ul {
+ list-style-type: square;
}
- section h2 {
- margin: 1em 0;
- font-family: 'Open Sans Condensed', sans-serif;
- text-transform: uppercase;
- border-bottom: 1px solid #b43434;
+ p {
+ font-family: sans-serif;
+ line-height: 1.5em;
}
- code + p, p + p{
- margin: 1em 0;
+ a {
+ color: #b43434;
+ text-decoration: none;
}
- &.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);
- }
+ h2 {
+ display: flex;
+ margin: 1em 0;
+ font-family: "Open Sans Condensed", sans-serif;
+ text-transform: uppercase;
}
+
+ 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 {
- h1 {
- display: flex;
- justify-content: space-evenly;
- }
+ h1 {
+ display: flex;
+ justify-content: space-evenly;
+ }
- a.name {
- text-decoration: none;
- color: #666666;
- font-family: 'Alegreya Sans SC';
- font-size: 2em;
- filter: drop-shadow(1px 1px #333333);
+ a.name {
+ text-decoration: none;
+ color: #666666;
+ font-family: "Alegreya Sans SC";
+ font-size: 2em;
+ filter: drop-shadow(1px 1px #333333);
+ }
+ .name {
+ &:first-child {
+ padding-right: 0.25em;
}
- .name {
- &:first-child {
- padding-right: .25em;
- }
- &:last-child {
- padding-left: .25em;
- }
+ &:last-child {
+ padding-left: 0.25em;
}
-}
-
-nav, ul, li {
- margin: 0;
- padding: 0;
- display: inline;
+ }
}
nav {
- font-family: 'Open Sans Condensed', sans-serif;
- font-size: 2em;
+ font-family: "Open Sans Condensed", sans-serif;
+ font-size: 2em;
- ul {
- background-color: #b43434;
- display: flex;
- justify-content: space-around;
- }
- a {
- text-decoration: none;
- color: #333333;
- }
+ ul,
+ li {
+ margin: 0;
+ padding: 0;
+ display: inline;
+ }
- li {
- padding: 0 5px;
- &:hover {
- a {
- color: #f4f6f7;
- }
- }
+ ul {
+ background-color: #b43434;
+ display: flex;
+ justify-content: space-around;
+ }
+ a {
+ text-decoration: none;
+ color: #333333;
+ }
+
+ li {
+ padding: 0 5px;
+ &:hover {
+ a {
+ color: #f4f6f7;
+ }
}
+ }
}