Layout updates

src/components/Person.js

@@ -12,16 +12,18 @@ export default function Person({ person, currentTag }) {
   return (
     <div className="person">
       <div className="personInner">
-        <img width="50" src={img} alt={person.name} />
+        <header className="personHeader">
-        <h3>
+          <img width="50" height="50" src={img} alt={person.name} />
-          <a href={person.url} target="_blank" rel="noopener noreferrer">
+          <h3>
-            {person.name} {person.emoji}
+            <a href={person.url} target="_blank" rel="noopener noreferrer">
-          </a>
+              {person.name} {person.emoji}
-        </h3>
+            </a>
-        <a
+          </h3>
-          className="displayLink"
+          <a
-          href={person.url}
+            className="displayLink"
-        >{`${url.host}${url.pathname}`}</a>
+            href={person.url}
+          >{`${url.host}${url.pathname}`}</a>
+        </header>
         <p>{person.description}</p>
 
         <ul className="tags">

src/components/header.js

@@ -1,15 +1,20 @@
 import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Helmet from 'react-helmet';
 
 const Header = ({ siteTitle }) => (
   <header className="header">
+    <Helmet>
+      <title>{siteTitle}</title>
+    </Helmet>
     <div>
       <h1>
         <Link to="/">/uses</Link>
       </h1>
       <p>
-        A list of <code>/uses</code> pages detailing developer setups.
+        A list of <code>/uses</code> pages detailing developer setups, gear,
+        software and configs.
       </p>
     </div>
   </header>

src/components/layout.css

@@ -38,6 +38,10 @@ a {
   font-style: italic;
 }
 
+code {
+  background: var(--lightblue);
+}
+
 .site {
   max-width: 1900px;
   margin: 5rem;
@@ -61,7 +65,7 @@ main {
 
 .people {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   grid-gap: 5rem;
 }
 
@@ -85,6 +89,19 @@ main {
   font-size: 1.2rem;
 }
 
+.personHeader {
+  display: grid;
+  grid-template-rows:auto auto;
+  grid-template-columns: auto 1fr;
+  grid-gap: 0 1rem;
+}
+
+.personHeader img {
+  grid-row: 1 / -1;
+  background: var(--lightblue);
+  font-size: 1rem;
+}
+
 .name {
   display: block;
 }

src/data.js

@@ -22,7 +22,7 @@ const pages = [
 
     // Dev Tags: Engineer, Developer, Designer, Front End, Back End, Full Stack,
     // Other: Tags: Entrepreneur, Teacher, Podcaster, YouTuber, Blogger, Speaker,
-    // Language Tags: JavaScript, PHP, Rails, Ruby, TypeScript...
+    // Language Tags: JavaScript, PHP, Rails, Ruby, TypeScript, React, Vue, Node
     tags: [
       'Developer',
       'Full Stack',
@@ -30,6 +30,8 @@ const pages = [
       'Teacher',
       'YouTuber',
       'JavaScript',
+      'React',
+      'Node',
     ],
   },
   {