Updated Circle Graphs writing

HHogg · Oct 7, 2021 · 299b054 · 299b054
1 parent fbb14c2
commit 299b054
Show file tree

Hide file tree

Showing 86 changed files with 4,593 additions and 495 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/.eslintrc b/.eslintrc
@@ -1,10 +1,24 @@
 {
-  "extends": ["eslint-config-preshape"],
-  "env": {
-    "es6": true
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-preshape"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   },
   "rules": {
-    "indent": "off",
-    "@typescript-eslint/indent": [2, "error"]
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "react/display-name": [0],
+    "react/prop-types": [0]
   }
 }
diff --git a/@types/index.d.ts b/@types/index.d.ts
@@ -0,0 +1,9 @@
+declare module '*.frag' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.vert' {
+  const value: string;
+  export default value;
+}
diff --git a/hogg.io.sketch b/hogg.io.sketch
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "rm -rf public && parcel build src/index.html -d public && react-snap",
     "deploy": "firebase deploy",
     "lint:css": "stylelint src/**/*.css",
-    "lint:js": "eslint src/**/*.ts src/**/*.tsx",
+    "lint:js": "eslint src",
     "lint": "yarn lint:js && yarn lint:css",
     "serve": "superstatic ./public --port 4000 -c superstatic.json",
     "start": "rm -rf dist && parcel src/index.dev.html --port 4000 -d dist --no-cache --no-autoinstall"
@@ -20,17 +20,19 @@
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^8.2.3",
     "bezier-easing": "^2.1.0",
+    "bitset": "^5.1.1",
     "caniuse-lite": "^1.0.30000697",
     "classnames": "^2.2.5",
     "d3-scale": "^3.3.0",
     "firebase": "^7.14.0",
     "firebase-tools": "^7.14.0",
     "framer": "^1.1.7",
-    "framer-motion": "^1.8.4",
+    "framer-motion": "^4.1.17",
     "gl-matrix": "^3.0.0",
     "glslify-bundle": "^5.1.1",
     "glslify-deps": "^1.3.1",
     "lodash.flatten": "^4.4.0",
+    "lodash.floor": "^4.0.4",
     "lodash.groupby": "^4.6.0",
     "lodash.random": "^3.2.0",
     "luxon": "^1.22.0",
@@ -39,14 +41,15 @@
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-html-externals": "^0.2.0",
     "postcss-preset-env": "^6.7.0",
-    "preshape": "^6.1.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "preshape": "^7.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.0.0-beta.2 ",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.3.0",
     "react-snap": "^1.23.0",
     "regl": "^2.0.1",
     "sat": "^0.8.0",
+    "src": "^1.1.2",
     "typescript": "^3.7.5"
   },
   "devDependencies": {
@@ -55,6 +58,7 @@
     "@types/d3-scale": "*",
     "@types/gl-matrix": "*",
     "@types/lodash.flatten": "*",
+    "@types/lodash.floor": "*",
     "@types/lodash.groupby": "*",
     "@types/lodash.random": "*",
     "@types/luxon": "*",
@@ -63,8 +67,8 @@
     "@types/react-helmet": "*",
     "@types/react-router-dom": "*",
     "@types/sat": "*",
-    "eslint": "^7.0.0",
-    "eslint-config-preshape": "^2.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-preshape": "^4.0.2",
     "stylelint": "^13.2.0",
     "stylelint-config-preshape": "^2.0.0",
     "superstatic": "^6.0.4"

diff --git a/src/Types.ts → src/Types/index.d.ts b/src/Types.ts → src/Types/index.d.ts
@@ -1,8 +1,8 @@
 export interface Experience {
   company: string;
   date: string;
-  description: string;
-  tags: string[];
+  description?: string;
+  tags?: string[];
   role: string;
 }
 
@@ -17,11 +17,14 @@ export interface Project {
 }
 
 export interface Writing {
+  id: string;
   date: string;
   description: string;
   imageOG: string;
+  tags: string[];
   title: string;
   to: string;
+  unlisted?: boolean;
 }
 
 export interface Data {

diff --git a/src/assets/circle-graph.png b/src/assets/circle-graph.png
diff --git a/src/components/Experience/Experience.tsx b/src/components/Experience/Experience.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { Box, Label, Labels, Text } from 'preshape';
 import { DateTime } from 'luxon';
+import { Box, Label, Labels, Text } from 'preshape';
+import * as React from 'react';
 import { Experience } from '../../Types';
 
 interface Props extends Experience {
@@ -25,7 +25,7 @@ const ExperienceComponent = (props: Props) => {
                 borderRadius="x1"
                 paddingHorizontal="x2"
                 paddingVertical="x1"
-                size="x1"
+                size="x2"
                 strong
                 textColor="light-shade-1">
               Now
@@ -53,7 +53,7 @@ const ExperienceComponent = (props: Props) => {
               borderRadius="x1"
               paddingHorizontal="x2"
               paddingVertical="x1"
-              size="x1"
+              size="x2"
               strong
               textColor="light-shade-1">
             { DateTime.fromISO(date).toFormat('yyyy') }
@@ -62,14 +62,20 @@ const ExperienceComponent = (props: Props) => {
       </Box>
 
       <Box backgroundColor="background-shade-2" basis="0" grow padding="x6">
-        <Text size="x3" strong>{ company }</Text>
+        <Text size="x4" strong>{ company }</Text>
         <Text strong>{ role }</Text>
-        <Text margin="x2">{ description }</Text>
-        <Labels margin="x3">
-          { tags.map((tag) =>
-            <Label key={ tag }>{ tag } </Label>
-          ) }
-        </Labels>
+
+        { description && (
+          <Text margin="x2">{ description }</Text>
+        ) }
+
+        { tags && (
+          <Labels margin="x3">
+            { tags.map((tag) =>
+              <Label key={ tag }>{ tag } </Label>
+            ) }
+          </Labels>
+        ) }
       </Box>
     </Box>
   );

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,6 +1,6 @@
+import { Box, BoxProps, Icon, Link, Text, ThemeSwitcher } from 'preshape';
 import * as React from 'react';
 import { Route } from 'react-router-dom';
-import { Box, BoxProps, Icon, Link, Text, ThemeSwitcher } from 'preshape';
 import { RootContext } from '../Root';
 
 interface Props extends BoxProps {
@@ -38,8 +38,8 @@ const Header = (props: Props) => {
         <React.Fragment>
           <Box borderSize="x1" />
 
-          <Box grow>
-            <Text size="x3" strong>{ title }</Text>
+          <Box basis="0" grow>
+            <Text size="x4" strong>{ title }</Text>
 
             { description && (
               <Text>{ description }</Text>

diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
 import { motion } from 'framer';
 import { Box, Grid, Link, Text, Icon } from 'preshape';
+import * as React from 'react';
 import data from '../../data';
 import Experience from '../Experience/Experience';
+import Header from '../Header/Header';
 import Project from '../Project/Project';
 import Writing from '../Writing/Writing';
-import Header from '../Header/Header';
 
 export default function Landing() {
   return (
@@ -18,7 +18,7 @@ export default function Landing() {
           gap="x16">
         <Box maxWidth="600px" paddingVertical="x3">
           <Box margin="x6">
-            <Text margin="x2" size="x6" strong>
+            <Text margin="x2" size="x7" strong>
               Hi. <motion.span
                   animate={ { rotate: ['0deg', '25deg', '0deg', '25deg', '0deg', '25deg', '0deg'] } }
                   initial={ { rotate: '0deg' } }
@@ -32,11 +32,11 @@ export default function Landing() {
                 👋
               </motion.span>
             </Text>
-            <Text margin="x2" size="x5" strong>I'm Harrison Hogg, a Software Engineer from Brighton, UK.</Text>
+            <Text margin="x2" size="x6" strong>I'm Harrison Hogg, a Software Engineer from Brighton, UK.</Text>
           </Box>
 
           <Box margin="x6">
-            <Text margin="x3" size="x3">I love designing and building things, which frequently
+            <Text margin="x3" size="x4">I love designing and building things, which frequently
               sends me down rabbit holes on side projects. I studied at <Link href="https://www.open.ac.uk/" underline>The Open University</Link> where
               I received my BSc Computing and Design Honours degree. When I'm not stringing characters together, I'm
               a less than stable climbing frame for my two daughters 👧🏼👩🏼.</Text>
@@ -45,7 +45,7 @@ export default function Landing() {
 
         <Box maxWidth="1240px" paddingVertical="x3">
           <Box maxWidth="600px">
-            <Text size="x4" strong>Personal Projects</Text>
+            <Text size="x5" strong>Personal Projects</Text>
             <Text margin="x2">Some of my favourite and finished personal side projects.</Text>
           </Box>
 
@@ -61,7 +61,7 @@ export default function Landing() {
 
         <Box maxWidth="600px" paddingVertical="x3">
           <Box margin="x6">
-            <Text margin="x2" size="x4" strong>Writings</Text>
+            <Text margin="x2" size="x5" strong>Writings</Text>
             <Text margin="x2">
               Usually when doing one of my side projects, I find something to write about and then
               add them to this list. It's like an infrequent blog with no consistent theme.
@@ -70,6 +70,7 @@ export default function Landing() {
 
           { Object
               .values(data.writings)
+              .filter((a) => !a.unlisted)
               .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
               .map((writing) => (
                 <Writing { ...writing } key={ writing.title } />
@@ -78,7 +79,7 @@ export default function Landing() {
 
         <Box maxWidth="600px" paddingVertical="x3">
           <Box margin="x10">
-            <Text margin="x2" size="x4" strong>Experience</Text>
+            <Text margin="x2" size="x5" strong>Experience</Text>
             <Text margin="x2">A timeline of where and what I've worked on over the years.</Text>
           </Box>
 
@@ -119,4 +120,4 @@ export default function Landing() {
       </Box>
     </Box>
   );
-};
+}
diff --git a/src/components/Project/Project.tsx b/src/components/Project/Project.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Box, Image, Link, Text } from 'preshape';
+import * as React from 'react';
 import { Project } from '../../Types';
 
 interface Props extends Project {}
@@ -34,8 +34,8 @@ const ProjectComponent = (props: Props & React.HTMLProps<HTMLAnchorElement>) =>
             grow
             paddingHorizontal="x6"
             paddingVertical="x4">
-          <Text size="x2" strong>{ title }</Text>
-          <Text size="x1">{ description }</Text>
+          <Text size="x3" strong>{ title }</Text>
+          <Text size="x2">{ description }</Text>
         </Box>
       </Box>
     </Link>

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Box } from 'preshape';
+import * as React from 'react';
 import Header from '../Header/Header';
 import Metas from '../Metas/Metas';
 

diff --git a/src/components/Projects/CircleGraph/CircleGraph.tsx b/src/components/Projects/CircleGraph/CircleGraph.tsx
@@ -0,0 +1,28 @@
+import { Box, Link, Text } from 'preshape';
+import * as React from 'react';
+import data from '../../../data';
+import ProjectPage from '../../ProjectPage/ProjectPage';
+import IntersectionExplorer, { sampleCircles } from '../IntersectionExplorer/IntersectionExplorer';
+import useGraph from '../IntersectionExplorer/useGraph';
+
+const CircleGraph = () => {
+  const graphResult = useGraph(sampleCircles);
+
+  return (
+    <ProjectPage { ...data.projects.CircleGraph }>
+      <Box alignChildrenVertical="middle" flex="vertical" grow maxWidth="1400px">
+        <IntersectionExplorer { ...graphResult } />
+      </Box>
+
+      <Box>
+        <Text align="middle">
+          This is a Circle Graph Intersection Explorer,
+          please <Link to="/writings/circle-graphs" underline>see this article</Link> on how
+          to use and interpret this visualisation.
+        </Text>
+      </Box>
+    </ProjectPage>
+  );
+};
+
+export default CircleGraph;