more improvements, copy, layout

_data/navigation.json

@@ -8,7 +8,7 @@
     "url": "/repos/"
   },
   {
-    "title": "Work",
+    "title": "Career",
     "url": "/work/"
   },
   {

_includes/pinned.njk

@@ -3,10 +3,10 @@
 <main class="max-w-7xl mx-auto px-2">
   <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div class="p-2 bg-base/75 shadow rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
-      <h1 class="text-yellow mt-2 mb-8 text-3xl tracking-tight sm:text-4xl">
+      <h1 class="mt-2 mb-8 text-4xl tracking-tight">
-        {{ title }}
+        {{ title | markdown | safe }}
       </h1>
-      <div class="mt-3">
+      <div class="mt-3 max-w-2xl">
         {{ content | safe }}
       </div>
     </div>
@@ -15,13 +15,11 @@
       {%- for content in collections.pinned | reverse -%}
         <div>
           <div>
-            <a href="/{{ content.data.tags[0] }}/" class="inline-block outline-link">
+            <a href="/{{ content.data.tags[0] }}/" class="transition-colors inline-block outline-link underline inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:text-sky hover:bg-base">
-              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:underline">
+              {{ content.data.tags[0] | capitalize }}
-                {{ content.data.tags[0] | capitalize }}
-              </span>
             </a>
           </div>
-          <a href="{{ content.url }}" class="block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue active:border-blue rounded">
+          <a href="{{ content.url }}" class="transition block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
             <h3 class="relative bg-overlay2 h-20 overflow-hidden rounded-tl rounded-tr text-xl text-base">
               <span class="absolute z-10 inset-3">{{ content.data.title }}</span>
               <img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />

index.md

@@ -1,12 +1,14 @@
 ---
 layout: pinned.njk
-title: Ava Gaiety W.
+title: Ava **Gaiety** W.
 description: Portfolio containing work experience, code, volunteering and more!
 eleventyExcludeFromCollections: true
 ---
 
-> 🐕 Someone taught a dog to code and now it's everyone's ~~problem~~ fortune 💻 (_[Fae](https://pronoun.monster/fae/faer/faer/femme/femmeself)/[She](https://pronoun.monster/she/her/her/hers/herself)_)
+> 🐕 Someone taught a dog to code and now it's everyone's ~~problem~~ fortune 💻
+>
+> ([Fae/Femme/Faer](https://pronoun.monster/fae/faer/faer/femme/femmeself) or [She/Her](https://pronoun.monster/she/her/her/hers/herself))
 
-My work varies significantly including [open source engineering samples](/repos), to [summaries of projects done during my career](/work), and [conference talks and volunteer work](/community).
+Peek at my [open source engineering _(OSS)_ samples](/repos), or [work projects](/work), or [conference talks, and volunteer work](/community).
 
-Design examples are scattered throughout but here are some cherry-picked ones: [Rendia](/work/eyemaginations/), [The SEED](/community/theseed/), [Oncue](/work/oncue/), [Static Site Generation](/repos/11ty/), and this very site. [Art can be found in my gallery](https://gaiety.gallery/).
+Design examples are scattered throughout, but here are a few: [Rendia](/work/eyemaginations/), [The SEED](/community/theseed/), [Oncue](/work/oncue/), [Static Site Generation](/repos/11ty/), and this very site. [Art can be found in my gallery](https://gaiety.gallery/).