more content, and all entries are periodicals

Author: drjonnicholson

package.json

@@ -138,56 +138,60 @@
     "afterword": null,
     "content": [
       {
-        "text": "HTML5 and web technologies, focussing on W3C standards",
+        "text": "HTML5 and web technologies, focussing on W3C standards and Semantic HTML",
         "icon": "html"
       },
       {
-        "text": "CSS including CSS Modules, SASS and LESS",
+        "text": "CSS including CSS Modules, SASS, and LESS",
         "icon": "css"
       },
       {
-        "text": "JavaScript in the browser",
+        "text": "JavaScript in the browser, from vanilla JS through to browserlist driven babel / webpack builds",
         "icon": "javascript"
       },
       {
-        "text": "React, although I've used other frameworks like VueJS",
+        "text": "React, with production experience with  other frameworks like VueJS",
         "icon": "react"
       },
       {
-        "text": "NodeJS",
+        "text": "NodeJS, mainly creaitng scripts / CLI tools, with some server-side programming thrown in the mix",
         "icon": "nodejs"
       },
       {
-        "text": "Creating NPM packages ",
+        "text": "Creating NPM packages, on both public and private repositories",
         "icon": "npm"
       },
       {
         "text": ".NET (C# / ASP / Core / Standard)",
         "icon": "dotnet"
       },
       {
-        "text": "Java, a classic 😉",
+        "text": "Java, a classic 😉, the main language used through academia with data structure and algorithm principles applicable to all languages",
         "icon": "java"
       },
       {
-        "text": "Ruby (Rails)",
+        "text": "Ruby (Rails) mainly used to build highly performant APIs when working in EdTech",
         "icon": "ruby"
       },
       {
         "text": "SQL in its various flavours (MySQL / MSSQL / Postgres / SQLite)",
         "icon": "database"
       },
       {
-        "text": "GIT (not to mention CVS / Subversion)",
+        "text": "GIT for version control for a good decade, not to mention CVS / Subversion",
         "icon": "git"
       },
       {
-        "text": "Shell scripting (CMD / Powershell / Bash / SH / etc.)",
+        "text": "Shell Scripting (CMD / Powershell / Bash / SH / etc.) to automate basic and repetitive tasks",
         "icon": "scripting"
       },
       {
-        "text": "API design and development across REST (OpenAPI), JSONRPC (OpenRPC), SOAP, etc.",
+        "text": "Strong API design and development background across REST (OpenAPI), GraphQL, JSONRPC (OpenRPC), SOAP, etc.",
         "icon": "api"
+      },
+      {
+        "text": "Secure by design / data protection by design and default",
+        "icon": "security"
       }
     ]
   },

src/components/Icon/Icon.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { AiTwotoneApi } from 'react-icons/ai'
+import { AiFillApi } from 'react-icons/ai'
 import {
   DiCss3,
   DiDatabase,
@@ -14,7 +14,7 @@ import {
   DiRuby,
   DiTerminal,
 } from 'react-icons/di'
-import { FaLinkedin, FaRegCircleQuestion, FaResearchgate, FaSquareGithub } from 'react-icons/fa6'
+import { FaLinkedin, FaRegCircleQuestion, FaResearchgate, FaSquareGithub, FaArrowDownUpLock } from 'react-icons/fa6'
 
 const Icon = ({ name, ...props }) => {
   switch (name) {
@@ -49,7 +49,9 @@ const Icon = ({ name, ...props }) => {
     case 'database':
       return <DiDatabase {...props} />
     case 'api':
-      return <AiTwotoneApi {...props} />
+      return <AiFillApi {...props} />
+    case 'security':
+      return <FaArrowDownUpLock {...props} />
   }
   return <FaRegCircleQuestion {...props} />
 }

src/components/Publications/Entry/Entry.jsx

@@ -1,40 +1,40 @@
-import Book from './Book'
-import Conference from './Conference'
-import InCollection from './InCollection'
-import InProceedings from './InProceedings'
+// import Book from './Book'
+// import Conference from './Conference'
+// import InCollection from './InCollection'
+// import InProceedings from './InProceedings'
 import Periodical from './Periodical'
-import Proceedings from './Proceedings'
-import TechReport from './TechReport'
-import Thesis from './Thesis'
+// import Proceedings from './Proceedings'
+// import TechReport from './TechReport'
+// import Thesis from './Thesis'
 import PropTypes from 'prop-types'
 
 const Entry = ({ entry }) => {
-  switch (entry.type) {
-    case 'proceedings':
-      return <Proceedings entry={entry} />
-    case 'unpublished':
-      return <Proceedings entry={entry} />
-    case 'misc':
-      return <Proceedings entry={entry} />
-    case 'book':
-      return <Book entry={entry} />
-    case 'inbook':
-      return <InCollection entry={entry} />
-    case 'incollection':
-      return <InCollection entry={entry} />
-    case 'article':
-      return <Periodical entry={entry} />
-    case 'conference':
-      return <Conference entry={entry} />
-    case 'inproceedings':
-      return <InProceedings entry={entry} />
-    case 'phdthesis':
-      return <Thesis entry={entry} />
-    case 'mastersthesis':
-      return <Thesis entry={entry} />
-    case 'techreport':
-      return <TechReport entry={entry} />
-  }
+  // switch (entry.type) {
+  //   case 'proceedings':
+  //     return <Proceedings entry={entry} />
+  //   case 'unpublished':
+  //     return <Proceedings entry={entry} />
+  //   case 'misc':
+  //     return <Proceedings entry={entry} />
+  //   case 'book':
+  //     return <Book entry={entry} />
+  //   case 'inbook':
+  //     return <InCollection entry={entry} />
+  //   case 'incollection':
+  //     return <InCollection entry={entry} />
+  //   case 'article':
+  //     return <Periodical entry={entry} />
+  //   case 'conference':
+  //     return <Conference entry={entry} />
+  //   case 'inproceedings':
+  //     return <InProceedings entry={entry} />
+  //   case 'phdthesis':
+  //     return <Thesis entry={entry} />
+  //   case 'mastersthesis':
+  //     return <Thesis entry={entry} />
+  //   case 'techreport':
+  //     return <TechReport entry={entry} />
+  // }
   return <Periodical entry={entry} />
 }
 

src/components/Publications/Publication.jsx

@@ -1,11 +1,11 @@
-// import Entry from './Entry'
+import Entry from './Entry'
 import styled from './Publication.module.css'
 import PropTypes from 'prop-types'
 
 const Publication = ({ entry }) => {
   return (
     <li className={styled.publication}>
-      {/* <Entry entry={entry} /> */}
+      <Entry entry={entry} />
       <details>
         <summary>Detail</summary>
         <div>

src/components/Skills/Skills.module.css

@@ -1,10 +1,10 @@
 @value vars: "../../variables.module.css";
-@value primary300, surface100, surface300, surface500, surfacemixed100, containerwidth from vars;
+@value primary300, surface100, surface300, surface600, surfacemixed100, containerwidth from vars;
 
 .breakout {
   border-top: 1px solid surface100;
   border-bottom: 1px solid surface100;
-  background-color: surface500;
+  background-color: surface600;
 }
 
 .skills {