diff --git a/src/components/Person.js b/src/components/Person.js
index f8e2b018..6a80cb0c 100644
--- a/src/components/Person.js
+++ b/src/components/Person.js
@@ -12,16 +12,18 @@ export default function Person({ person, currentTag }) {
return (
-

-
-
{`${url.host}${url.pathname}`}
+
{person.description}
diff --git a/src/components/header.js b/src/components/header.js
index a1257aa5..a431ca31 100644
--- a/src/components/header.js
+++ b/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 }) => (
diff --git a/src/components/layout.css b/src/components/layout.css
index b185225a..ec372367 100644
--- a/src/components/layout.css
+++ b/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;
}
diff --git a/src/data.js b/src/data.js
index f5aab2dd..bd226090 100644
--- a/src/data.js
+++ b/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',
],
},
{