diff --git a/assets/images/android-chrome-192x192.png b/assets/images/android-chrome-192x192.png
new file mode 100644
index 0000000..a685766
Binary files /dev/null and b/assets/images/android-chrome-192x192.png differ
diff --git a/assets/images/android-chrome-512x512.png b/assets/images/android-chrome-512x512.png
new file mode 100644
index 0000000..4d4ce1a
Binary files /dev/null and b/assets/images/android-chrome-512x512.png differ
diff --git a/assets/images/apple-touch-icon.png b/assets/images/apple-touch-icon.png
new file mode 100644
index 0000000..74ad7a2
Binary files /dev/null and b/assets/images/apple-touch-icon.png differ
diff --git a/assets/images/favicon-16x16.png b/assets/images/favicon-16x16.png
new file mode 100644
index 0000000..3c67878
Binary files /dev/null and b/assets/images/favicon-16x16.png differ
diff --git a/assets/images/favicon-32x32.png b/assets/images/favicon-32x32.png
new file mode 100644
index 0000000..e879489
Binary files /dev/null and b/assets/images/favicon-32x32.png differ
diff --git a/assets/images/site.webmanifest b/assets/images/site.webmanifest
new file mode 100644
index 0000000..42144a1
--- /dev/null
+++ b/assets/images/site.webmanifest
@@ -0,0 +1,18 @@
+{
+    "name":"The Pictographer’s Shop",
+    "short_name":"Pictographer",
+    "description":"Professional website of John D. Corbett"
+    "icons":
+    [{"src":
+      "assets/android-chrome-192x192.png", 
+      "sizes":"192x192",
+      "type":"image/png"},
+     {"src":
+      "assets/android-chrome-512x512.png",
+      "sizes":"512x512",
+      "type":"image/png"}],
+    "theme_color":"#ffffff",
+    "background_color":"#ffffff",
+    "display":"standalone",
+    "categories":"business"
+}
diff --git a/assets/styles/top.css b/assets/styles/top.css
new file mode 100644
index 0000000..a7c9483
--- /dev/null
+++ b/assets/styles/top.css
@@ -0,0 +1,52 @@
+* { font-family: Arial, Tahoma, Helvetica; }
+
+body { margin: 1em }
+
+.top {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+
+img {
+    max-width: 100%;
+}
+
+.image {
+    width: 4em;
+    height: 4em;
+    /* border-color: green; border-style: solid; border-width: 1px;*/
+}
+
+.thumb {
+    width: 8em;
+    height: 8em;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.text {
+    padding-left: 1em;
+    /*border-color: green; border-style: solid; border-width: 1px;*/
+}
+
+.content {
+    display: grid;
+    grid-template-columns: 5em minmax(20ch, 80ch);
+}
+
+p, ol, ul, li {
+    grid-column: 2/2;
+    margin-top: 0;
+}
+
+p {
+    margin-bottom: 1em;
+}
+
+ol, ul {
+    margin-bottom: 0em;
+}
+
+/* ul { border-color: green; border-style: solid; border-width: 1px; padding-bottom: 10em; } */
+/* li { border-color: purple; border-style: solid; border-width: 1px; padding-bottom: 10em;} */
diff --git a/assets/styles/top.css~ b/assets/styles/top.css~
new file mode 100644
index 0000000..5ddccd8
--- /dev/null
+++ b/assets/styles/top.css~
@@ -0,0 +1,28 @@
+* { font-family: Arial, Tahoma, Helvetica; }
+
+body { margin: 1em }
+
+.top {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+
+img {
+    max-width: 100%;
+}
+
+.image {
+    width: 4em;
+    height: 4em;
+    /* border-color: green; border-style: solid; border-width: 1px;*/
+}
+
+.text {
+    padding-left: 1em;
+    /*border-color: green; border-style: solid; border-width: 1px;*/
+}
+
+.content {
+    padding-left: 5em;
+}
diff --git a/halftone.markdown b/halftone.markdown
new file mode 100644
index 0000000..579ac4a
--- /dev/null
+++ b/halftone.markdown
@@ -0,0 +1,44 @@
+---
+layout: page
+title: Halftone Tutorial
+permalink: /halftone/
+---
+
+# Halftone Tutorial
+
+Color printing frequently uses fewer colors of ink than there are
+colors in the source image. Halftones are often used to fool the eye
+into seeing a broader range of colors. Similar to shading in drawing,
+halftones create the appearance of varying tones by varying the size
+of dots or lines of ink.
+
+For most of us, this is a historical curiousity or an obscure
+technical detail, but Pop Artist Roy Lichtenstein celebrated the lowly
+halftone by making the dots large. With the advent of PhotoShop, it
+became possible for someone without specialized equipment to
+experiment with halftones and various other special effects in persuit
+of cool images and techniques.
+
+My company logo was one result of my experimentation with image
+filters. I've recreated my logo using Gimp so anyone can play along
+without expensive software.
+
+The logo is generated algorithmically without drawing a thing.
+1. | Fill a square canvas with light gray | 
+![Solid gray field](assets/gray-square.png){: width='100'} |
+
+1. | Convert the light gray to dots using the "Newsprint" filter |
+[![Polkadots at a 45° angle](assets/polkadots.png){: width='100'}](assets/polkadots.png) |
+
+1. | Use the "Spherize" filter to create the Op Art illusion of depth |
+[![Dots distorted into a sphere](assets/raw-spherize.png){: width='100'}](assets/raw-spherize.png) |
+
+1. | Use a circular selection inverted to remove the background from the sphere | 
+[![Dot sphere isolated from the background dots](assets/black-dot-sphere.png){: width='100'}](assets/black-dot-sphere.png) |
+
+1. | Adjust the color, size, and format of the image for its intended use |
+[![Op art sphere](assets/green-dot-sphere.png){: width='100'}](assets/green-dot-sphere.png) |
+
+There is plenty of fun to be had starting from solid colors, gradients, or noise and applying various distortion filters.
+
+[![Sphere of stripes](assets/stripe-sphere.png){: width='100'}](assets/stripe-sphere.png) [![Whirl applied to a grid](assets/whirl-and-pinch.png){: width='100'}](assets/whirl-and-pinch.png) [![Diagonal linear gradient](assets/diagonal-gradient.png){: width='100'}](assets/diagonal-gradient.png) [![Convex stripes from halftoning a linear gradient](assets/convex-stripes.png){: width='100'}](assets/convex-stripes.png) [![Wavy stripes](assets/convex-stripes-waves.png){: width='100'}](assets/convex-stripes-waves.png) [![Wavy stripes](assets/fractal-trace.png){: width='100'}](assets/fractal-trace.png)
diff --git a/halftone/assets/black-dot-sphere.png b/halftone/assets/black-dot-sphere.png
new file mode 100644
index 0000000..7d833aa
Binary files /dev/null and b/halftone/assets/black-dot-sphere.png differ
diff --git a/halftone/assets/convex-stripes-waves.png b/halftone/assets/convex-stripes-waves.png
new file mode 100644
index 0000000..7f67ed5
Binary files /dev/null and b/halftone/assets/convex-stripes-waves.png differ
diff --git a/halftone/assets/convex-stripes.png b/halftone/assets/convex-stripes.png
new file mode 100644
index 0000000..f24fc49
Binary files /dev/null and b/halftone/assets/convex-stripes.png differ
diff --git a/halftone/assets/diagonal-gradient.png b/halftone/assets/diagonal-gradient.png
new file mode 100644
index 0000000..9c2a62e
Binary files /dev/null and b/halftone/assets/diagonal-gradient.png differ
diff --git a/halftone/assets/fractal-trace.png b/halftone/assets/fractal-trace.png
new file mode 100644
index 0000000..0566992
Binary files /dev/null and b/halftone/assets/fractal-trace.png differ
diff --git a/halftone/assets/gray-square.png b/halftone/assets/gray-square.png
new file mode 100644
index 0000000..b1f8831
Binary files /dev/null and b/halftone/assets/gray-square.png differ
diff --git a/halftone/assets/green-dot-sphere.png b/halftone/assets/green-dot-sphere.png
new file mode 100644
index 0000000..0604c1a
Binary files /dev/null and b/halftone/assets/green-dot-sphere.png differ
diff --git a/halftone/assets/polkadots.png b/halftone/assets/polkadots.png
new file mode 100644
index 0000000..c8ce10f
Binary files /dev/null and b/halftone/assets/polkadots.png differ
diff --git a/halftone/assets/raw-spherize.png b/halftone/assets/raw-spherize.png
new file mode 100644
index 0000000..c3f3f38
Binary files /dev/null and b/halftone/assets/raw-spherize.png differ
diff --git a/halftone/assets/stripe-sphere.png b/halftone/assets/stripe-sphere.png
new file mode 100644
index 0000000..4b14611
Binary files /dev/null and b/halftone/assets/stripe-sphere.png differ
diff --git a/halftone/assets/whirl-and-pinch.png b/halftone/assets/whirl-and-pinch.png
new file mode 100644
index 0000000..7c84704
Binary files /dev/null and b/halftone/assets/whirl-and-pinch.png differ