✨ Add projects to resume

assets/scss/extra.scss

@@ -23,8 +23,80 @@ figure {
 ul.skills {
     display: grid;
     grid-gap: .25rem;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+
+#projects > .projects {
+    @media print {
+        display: grid;
+        grid-gap: .35rem;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     }
+    @media screen {
+        display: flex;
+
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+            width: 10px;
+            height: 10px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: black;
+            border-radius: 10px;
+        }
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+    }
+
+    .project {
+        h3 > a {
+            text-decoration: none;
+        }
+        @media print {
+            display: inline-block;
+            page-break-inside: avoid;
+        }
+        @media screen {
+            scroll-snap-align: start;
+            flex-shrink: 0;
+            width: 300px;
+            margin-right: 50px;
+            padding: 0 0.5rem;
+            border-radius: 10px;
+            transform-origin: center center;
+            transform: scale(1);
+            transition: transform 0.5s;
+            position: relative;
+            justify-content: center;
+            align-items: center;
+
+            @media (prefers-color-scheme: dark) {
+                background: $dark-background-secondary;
+            }
+
+            @media (prefers-color-scheme: light) {
+                background: $light-background-secondary;
+            }
+
+            [data-theme=dark] & {
+                background: $dark-background-secondary;
+            }
+
+            [data-theme=light] & {
+                background: $light-background-secondary;
+            }
+        }
+    }
+}
+
+section > h2 {
+    line-height: 1.0;
+}
 
 #theater-contact {
     display: grid;

content/web.md

@@ -15,11 +15,7 @@ Fort Bend, TX 77069
 
 <section id="summary">
 
-## Summary
+## Skills
-
-Web developer with broad experience in both large (educational and commercial) and small(commercial) websites. Designed custom web applications from the ground up, and modified existing open-source applications to meet specific needs. Effective communicator, with experience researching and writing content for educational websites.
-
-Skills include:
 
 - HTML
 - CSS
@@ -36,10 +32,8 @@ Skills include:
 - Yii
 - Wordpress
 - Git
-- Grunt
 - node.js
 - MongoDB
-- Apache
 - Linux
 - Docker
 - AWS
@@ -48,6 +42,64 @@ Skills include:
 
 </section>
 
+<section id="projects">
+
+## Open Source Projects
+
+<section class="projects">
+
+<section class="project">
+
+### [gin error middleware](https://pkg.go.dev/codeberg.org/danjones000/gin-error-handler)
+
+A middleware for go gin framework and wrapper functions to make handling errors easier and more idiomatic.
+
+</section>
+
+<section class="project">
+
+### [Responsable Errors](https://pkg.go.dev/codeberg.org/danjones000/responsable-errors)
+
+A small go library that provides errors that can be more useful in the context of a web app. The heart of gin error middleware.
+
+</section>
+
+<section class="project">
+
+### [http go status](https://codeberg.org/danjones000/http-go-status)
+
+Super simple web server that just returns the HTTP status you ask for. Useful for testing.
+
+</section>
+
+<section class="project">
+
+### [droplogger](https://gitlab.com/danjones000/droplogger)
+
+Python logging application especially suited for life-logging with IFTTT and Dropbox.
+
+</section>
+
+<section class="project">
+
+### [Object Spy](https://packagist.org/packages/danjones000/object-spy)
+
+PHP debugging library that makes it easy to inspect private properties and methods without using reflection.
+
+</section>
+
+<section class="project">
+
+### [strip-beats](https://codeberg.org/danjones000/strip-beats)
+
+go cli app for transforming a folder of music videos and music files, with semi-automatic tagging, and user-friendly TUI. *This is a work in progress. Not yet fully functional.*
+
+</section>
+
+</section>
+
+</section>
+
 <section id="workhistory">
 
 ## Work History
@@ -100,8 +152,10 @@ I have been developing websites for over twenty years. I'm primarily self-taught
   <span class="work-period"><time datetime="2015-11">November 2015</time> - <time datetime="2016-07">July 2016</time></span>
   
   Develop Magento-based eCommerce site <span class="tech">PHP, MySQL, Magento, XML, Javascript, jQuery</span>
+
   + Extend functionality of current site
   + Modify existing site plugins to better fit workflow of sales team.
+  {.noprint}
 - **Hubbard Radio** &ndash; [**WTOP**](https://wtop.com/)/[**Federal News Radio**](https://federalnewsradio.com/)   
   *Back-end web developer*   
   <span class="work-period"><time datetime="2010-07">July 2010</time> - <time datetime="2015-11">November 2015</time></span>