add extra project

content/pages/cv.md

@@ -46,7 +46,7 @@ A submission which placed 1st in the IBM UK Call for Code competition and was th
 
 *September 2014 - June 2018*
 
-Masters project: *UAVs with precise position knowledge*.
+Master's project: *UAVs with precise position knowledge*.
 Developing mathematical models in Python to combine data from different sensors onboard a drone, with the aim of locating its position to within 1mm, for use in adaptive optics within astronomy.
 
 ## Technical Skills
@@ -57,4 +57,8 @@ JavaScript, Python, Golang
 
 ### Frameworks / Tools
 
-React, Express, Docker, Kubernetes, HTML/CSS/Bootstrap, Jekyll/Gatsby, Git
+React, Express, HTML/CSS, Jekyll/Gatsby/Next.js, Bootstrap/Tailwindcss
+
+### Devops / SCM
+
+Docker, Kubernetes, Git

gatsby-config.js

@@ -11,18 +11,18 @@ module.exports = {
       medium: `@jcockbain96`,
     },
     menuLinks: [
+      // {
+      //   link: "/pages/about",
+      //   name: "About",
+      // },
       {
-        link: "/pages/about",
-        name: "About",
+        link: "/projects",
+        name: "Projects",
       },
       {
         link: "/blogs",
         name: "Blog",
       },
-      {
-        link: "/projects",
-        name: "Projects",
-      },
       {
         link: "/pages/cv",
         name: "CV",

package.json

@@ -13,7 +13,7 @@
     "@types/react-responsive": "^8.0.2",
     "axios": "^0.19.2",
     "babel-plugin-styled-components": "^1.10.0",
-    "gatsby": "^2.3.31",
+    "gatsby": "^2.24.7",
     "gatsby-image": "^2.4.6",
     "gatsby-plugin-feed": "^2.1.1",
     "gatsby-plugin-google-analytics": "^2.0.18",

src/components/tags.tsx → src/components/blogTagsSelector.tsx

@@ -1,6 +1,7 @@
 import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
 import styled from "styled-components"
+import TagLabel from "../elements/tagLabel"
 
 interface Tag {
   tag: string
@@ -68,7 +69,7 @@ const Tags = ({ updateCategories, currentCategories }: Props) => {
           }`}
           key={element.tag}
         >
-          {element.tag}
+          <TagLabel text={element.tag} />
         </TagSelector>
       ))}
     </TagsPanel>

src/elements/tag.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import styled from "styled-components"
+import TagLabel from "./tagLabel"
 
 const Tag = styled.div`
   background-color: ${props => props.theme.tag};
@@ -15,6 +16,10 @@ interface Props {
   text: string
 }
 
-const BlogTag = (props: Props) => <Tag>{props.text}</Tag>
+const BlogTag = ({ text }: Props) => (
+  <Tag>
+    <TagLabel text={text} />
+  </Tag>
+)
 
 export default BlogTag

src/elements/tagLabel.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import styled from "styled-components"
+
+const StyledTagLabel = styled.div`
+  color: ${props => props.theme.onBackground};
+  opacity: ${props => props.theme.headerOpacity};
+`
+
+interface Props {
+  text: string
+}
+
+const TagLabel = ({ text }: Props) => <StyledTagLabel>{text}</StyledTagLabel>
+
+export default TagLabel

src/pages/blogs.tsx

@@ -1,7 +1,7 @@
 import { graphql, PageRendererProps, useStaticQuery } from "gatsby"
 import React, { useState } from "react"
 import styled from "styled-components"
-import Tags from "../components/tags"
+import Tags from "../components/blogTagsSelector"
 import { Layout } from "../containers/layout"
 import Card from "../elements/card"
 import { FadeLink } from "../elements/link"

src/pages/index.tsx

@@ -26,7 +26,7 @@ const HomePage = (props: PageRendererProps) => {
 
   return (
     <Layout location={props.location} title="Home">
-      <SEO title="home" />
+      <SEO title="Home" />
       <Card>
         <h2>Hi, I'm James &#x1f44b; </h2>
         <CardP>
@@ -38,8 +38,7 @@ const HomePage = (props: PageRendererProps) => {
           alt="A picture of me!"
         />
         <CardP>
-          You can read more about me <FadeLink to="/pages/about">here</FadeLink>
-          .
+          You can read more about me <FadeLink to="/pages/cv">here</FadeLink>.
         </CardP>
       </Card>
     </Layout>

src/pages/projects.tsx

@@ -7,45 +7,12 @@ import Flex from "../elements/flex"
 import ProjectIcons from "../elements/projectIcons"
 import { SEO } from "../elements/seo"
 import Tag from "../elements/tag"
+import projects from "../utils/projects"
 
 const CardP = styled.p`
   margin: 1rem 0;
 `
 
-const projects = [
-  {
-    name: "Project Reunite",
-    summary:
-      "A submission which placed 1st in the IBM UK Call for Code competition and was then selected in the final 5, out of 132 projects in the global contest.",
-    technologies: ["React", "Mineral-UI", "Express", "Socket.io"],
-    codeLink: "https://github.com/project-reunite/reunite",
-    deploymentLink: "http://project-reunite.eu-gb.cf.appdomain.cloud/#/",
-  },
-  {
-    name: "MERN TODO App",
-    summary:
-      "A MongoDB based app I use to track daily tasks. The Next.js client offers pages for CRUD operations on todays tasks, for managing all tasks through a calendar, and a graphical summary of tasks completed.",
-    technologies: [
-      "MongoDB",
-      "Express",
-      "React",
-      "Node.js",
-      "Next.js",
-      "Heroku",
-    ],
-    codeLink: "https://github.com/project-reunite/reunite",
-    deploymentLink: "",
-  },
-  {
-    name: "jamescockbain.com",
-    summary:
-      "This website! Starting from a basic Gatsby Typescript starter, with custom styled-components styles. Deployed with Netlify.",
-    technologies: ["Gatsby", "Typescript", "Styled-Components", "Netlify"],
-    codeLink: "https://github.com/project-reunite/reunite",
-    deploymentLink: "https://jamescockbain.com",
-  },
-]
-
 const ProjectsPage = (props: PageRendererProps) => {
   return (
     <Layout location={props.location} title="Projects">

src/utils/projects.ts

@@ -0,0 +1,34 @@
+export default [
+  {
+    name: "Project Reunite",
+    summary:
+      "A submission which placed 1st in the IBM UK Call for Code competition and was then selected in the final 5, out of 132 projects in the global contest. It's a mobile-friendly web app for reuniting loved ones after a natural disaster, using facial feature recognition.",
+    technologies: ["React", "Mineral-UI", "Express", "Socket.io"],
+    codeLink: "https://github.com/project-reunite/reunite",
+    deploymentLink: "http://project-reunite.eu-gb.cf.appdomain.cloud/#/",
+  },
+  {
+    name: "MERN TODO App",
+    summary:
+      "A MongoDB based app I use to track daily tasks. The Next.js client offers pages for; CRUD operations on todays tasks, for managing all tasks through a calendar, and a graphical summary of tasks completed.",
+    technologies: ["MongoDB", "Express", "React", "Node.js", "Next.js"],
+    codeLink: "https://github.com/MERN-todo?type=source",
+    deploymentLink: "",
+  },
+  {
+    name: "jamescockbain.com",
+    summary:
+      "This website! Starting from a basic Gatsby Typescript starter, with custom styled-components styles. Deployed with Netlify.",
+    technologies: ["Gatsby", "Typescript", "Styled-Components", "Netlify"],
+    codeLink: "https://github.com/project-reunite/reunite",
+    deploymentLink: "https://jamescockbain.com",
+  },
+  {
+    name: "Advent Of Code",
+    summary:
+      "Solutions for the christmas-themed Advent of Code challenges (adventofcode.com), written in Python.",
+    technologies: ["Python", "Algorithms"],
+    codeLink: "https://github.com/jcockbain/advent-of-code",
+    deploymentLink: "",
+  },
+]