Switch to 11ty and tailwind (#15)

* wip test some pages and redo color choices

* tweak to push preview to vercel

* use mobile spacing

* build css then html

* move files back to draft

package.json

@@ -5,7 +5,7 @@
   "description": "Portfolio website",
   "scripts": {
     "dev": "npm run watch",
-    "build": "cross-env NODE_ENV=production run-p build:css build:html",
+    "build": "cross-env NODE_ENV=production run-s build:css build:html",
     "build:css": "postcss src/_includes/css/styles.css -o src/css/styles.css",
     "build:html": "eleventy",
     "watch": "run-p watch:*",

src/_includes/_drafts/uses.md

@@ -0,0 +1,95 @@
+---
+title: Uses
+---
+
+My preferred software, tools, and gadgetry. Inspired by [Wes Bos](https://wesbos.com/uses) and [uses.tech](https://uses.tech/)
+
+Last updated: 9/1/2020
+
+<!-- TODO: add me to uses.tech site -->
+
+## Editor
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [Vim keybindings](https://github.com/VSCodeVim/Vim)
+- Usually some dark theme like [Dracula](https://draculatheme.com/)
+- [Fira Code font](https://github.com/tonsky/FiraCode)
+- [View settings](https://gist.github.com/zebapy/9eb62f25ed47ee5470b0f5993818b7b0#file-settings-json)
+- [View extensions](https://gist.github.com/zebapy/9eb62f25ed47ee5470b0f5993818b7b0#file-extensions-json)
+
+## Terminal tools and setup
+
+- zsh/[Oh my zsh](https://ohmyz.sh/)
+- [Tmux](https://github.com/tmux/tmux) when I need some serious terminal window management
+- [Brew](https://brew.sh/) on Mac
+- [Chocolately](https://chocolatey.org/) on windows for software management
+- On Windows, I use [WSL](https://docs.microsoft.com/en-us/windows/wsl/about) occasionally
+
+## Deploy
+
+1. [vercel](https://vercel.com/)
+2. [netlify](https://www.netlify.com/)
+3. [heroku](https://www.heroku.com/)
+
+## Design
+
+- [Figma](https://www.figma.com/) is 100% my jam. Previously was using [Sketch](https://www.sketch.com/) but Figma has totally overtaken them in the past year (2019) with their multi platform support (I use a Windows PC at home and a Mac at work), cloud sycning, great pricing, and more.
+- In ancient times, I designed MySpace layouts with Adobe Photoshop. Those were the days.
+
+## Laptop
+
+- I get whatever my work gives me for a Mac laptop
+- I do own a 13" 2015 mac book pro but the battery is shot so it is retired in my closet.
+
+## Desktop
+
+My first pc build was in 2011, and in 2019, I decided to overhaul my desktop experience.
+
+- Before
+- After
+
+- TODO: new specs/parts
+
+### Peripherals/other
+
+- LG 34GK950F-B 34" 21:9 WQHD Nano IPS Curved Monitor
+  - I struggled with choosing this. I wanted 140hz for gaming and high res for productivity. I paid a little too much for this at the time and pay have been better suited with 2 QHD monitors (I was trying out an HP 2560x1080)
+- Amazon Basics monitor arm
+- Hyperx Cloud wired **headset** (used to have a corsair wireless headset but the battery life depleted quickly, charging port had problems, and the plastic snapped. Never again.)
+- Logitech G Pro wireless **mouse**
+- Ducky one 2 mini **keyboard** with cherry brown switches
+- [aviator cable] from etsy
+- aftermarket keyboard case
+- 36" mousepad
+- Custom 7x3.5' wood desk top made from pine 6x8"s. Dark stain.
+- Fully Jarvis standing legs
+- undermount surge protector
+- undermount wire tray
+- Autonomous **chair**. Switched from a DX racer. The cushion was a downgrade but otherwise a solid chair.
+- Phillips hue lights. Annoyed with hub having to be connected with ethernet.
+- USB switch for swapping keyboard/mouse from mac to pc. Stickied to the back of my monitor
+
+## Other tools
+
+- Chrome browser for development.
+- Trello for project management for larger work or non code work. GitHub issues for code tasks usually.
+- I subscribe to Spotify and listen to a variety of music. I'm all aboard the lo-fi train lately.
+- Alfred mostly for an app starter, and occasional file finder
+- Rectangles app for window management on Mac
+- Bitwarden is my new password manager. I was using 1Password before but their device limit caused me to switch. I almost went with LastPass but BitWarden took it because pricing, nicer UI, and open source.
+- Dropbox for non word/spreadsheet files. I use Google Drive almost exclusively for those instead.
+- My notes are spread out -- due to experimenting with new note apps -- across Google Keep, Notion, and Trello. I want to make my own note app to sync with GitHub or Dropbox as markdown files.
+
+### Other hardware
+
+- Switched from iPhone 6+ to Pixel 2 XL. No turning back from vanilla (mostly) Android experience. As much as it stinks to give into the Google overlords, I wholly use their ecosystem (email, drive, calendar) so switching to Android made sense. I never used iCloud/iTunes, or any cross mac + iphone features.
+- Pixel Buds are my first wireless earbud experience and, frankly, I'm disappointed. Connection issues, stereo sound swaps, fit issues. Perhaps other wireless earbuds aren't so bad but I wanted the Pixel integration like touch functions. I still use a very old pair of wired Apple earbuds for a fallback.
+- PS4 (Favs: Last of Us, Uncharted, God of War, MGS, Horizon: Zero Dawn, RDR2, Beatsaber)
+
+## Made this site with
+
+- Tailwindcss
+- TODO: eleventy or nextjs
+- View source on GitHub
+- Hosted on Vercel
+- [Heroicons](https://heroicons.dev/)

src/_includes/css/markdown.css

@@ -7,8 +7,27 @@
     margin-bottom: 0;
   }
 
+  h2,
+  h3 {
+    @apply font-bold leading-tight;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  h2 {
+    @apply text-3xl;
+  }
+
+  h3 {
+    @apply text-xl;
+  }
+
   p {
-    @apply text-xl mb-4;
+    @apply text-xl mb-4 leading-relaxed;
+  }
+
+  li {
+    @apply text-lg mb-2 leading-relaxed;
   }
 
   ol {
@@ -22,14 +41,10 @@
   ol,
   ul {
     @apply mb-4 pl-4;
-  }
-
-  a {
-    @apply border-b border-black inline-block font-bold
-    transition-colors duration-100;
 
-    &:hover {
-      @apply bg-black text-yellow-400;
+    ol,
+    ul {
+      @apply ml-4 my-2;
     }
   }
 }

src/_includes/css/styles.css

@@ -28,11 +28,7 @@
   }
 }
 
+.markdown a,
 .link {
-  @apply border-b border-black inline-block font-bold
-    transition-colors duration-100;
-
-  &:hover {
-    @apply bg-black text-yellow-400;
-  }
+  @apply border-b border-purple-400 inline-block transition-colors duration-100 text-purple-500 font-bold hover:bg-purple-400 hover:text-gray-800;
 }

src/_includes/layouts/base.html

@@ -10,7 +10,7 @@
     <title>{{title}}{% if title %} - {% endif %}{{site.name}}</title>
     <link rel="stylesheet" href="/css/styles.css" />
   </head>
-  <body class="bg-yellow-400">
+  <body class="bg-gray-900 text-gray-400">
     <!-- {% include header.html %} -->
     <main class="container {% if markdown %}markdown{% endif %}">
       {{ content | safe }}

src/index.html

@@ -26,12 +26,10 @@
     url: /contact
 ---
 
-<div class="py-12 lg:py-64 container">
+<div class="py-8 lg:py-64 container">
   <img src="{{site.pic}}" alt="{{site.pic_alt}}" class="rounded-full mb-6" />
   <h1 class="title">{{site.name}}</h1>
-
-  <p class="intro">{{site.summary}}</p>
-
+  <p class="text-xl">{{site.summary}}</p>
   <ul>
     {% for item in roles %}
     <li>

tailwind.config.js

@@ -23,5 +23,8 @@ module.exports = {
   future: {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true
+  },
+  experimental: {
+    applyComplexClasses: true
   }
 };