Bump lodash from 4.17.15 to 4.17.21

package.json

@@ -26,6 +26,7 @@
     "caniuse-lite": "^1.0.30000697",
     "classnames": "^2.2.5",
     "d3-scale": "^3.3.0",
+    "file-saver": "^2.0.5",
     "firebase": "^7.14.0",
     "firebase-tools": "^7.14.0",
     "framer": "^1.1.7",
@@ -43,20 +44,22 @@
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-html-externals": "^0.2.0",
     "postcss-preset-env": "^6.7.0",
-    "preshape": "^12.0.1",
+    "preshape": "^13.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "6.0.0-beta.2 ",
     "react-router-dom": "^6.2.2",
     "react-snap": "^1.23.0",
     "regl": "^2.0.1",
     "regression": "^2.0.1",
-    "sat": "^0.8.0"
+    "sat": "^0.8.0",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@types/bezier-easing": "*",
     "@types/classnames": "*",
     "@types/d3-scale": "*",
+    "@types/file-saver": "*",
     "@types/gl-matrix": "*",
     "@types/lodash.flatten": "*",
     "@types/lodash.floor": "*",
@@ -69,6 +72,7 @@
     "@types/react-router-dom": "*",
     "@types/regression": "^2.0.2",
     "@types/sat": "*",
+    "@types/uuid": "*",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "eslint": "^8.10.0",

src/components/Landing/Landing.tsx

@@ -1,10 +1,15 @@
 import { motion } from 'framer';
 import { Box, Grid, Link, Text, Icons, useMatchMedia } from 'preshape';
 import React from 'react';
-import data, { experienceSorted, listedWritingsSorted } from '../../data';
+import data, {
+  experienceSorted,
+  listedWritingsSorted,
+  publicationsSorted,
+} from '../../data';
 import Experience from '../Experience/Experience';
 import Header from '../Header/Header';
 import Project from '../Project/Project';
+import Publication from '../Publication/Publication';
 import Writing from '../Writing/Writing';
 
 export default function Landing() {
@@ -67,9 +72,6 @@ export default function Landing() {
             <Text size="x6" strong>
               Personal Projects
             </Text>
-            <Text margin="x2">
-              Some of my favourite and finished personal side projects.
-            </Text>
           </Box>
 
           <Grid gap="x4" margin="x6" repeatWidthMin="300px">
@@ -90,9 +92,6 @@ export default function Landing() {
               <Text margin="x2" size="x6" strong>
                 Experience
               </Text>
-              <Text margin="x2">
-                A timeline of where and what I've worked on over the years.
-              </Text>
             </Box>
 
             {experienceSorted.map((exp, index) => (
@@ -106,11 +105,6 @@ export default function Landing() {
                 <Text margin="x2" size="x6" 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.
-                </Text>
               </Box>
 
               {listedWritingsSorted.map((writing) => (
@@ -123,12 +117,11 @@ export default function Landing() {
                 <Text margin="x2" size="x6" strong>
                   Publications
                 </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.
-                </Text>
               </Box>
+
+              {publicationsSorted.map((publication) => (
+                <Publication {...publication} key={publication.title} />
+              ))}
             </Box>
           </Box>
         </Box>

src/components/Projects/CircleArt/CircleArt.tsx

@@ -0,0 +1,34 @@
+import { Box, useMatchMedia } from 'preshape';
+import React, { useState } from 'react';
+import data from '../../../data';
+import ProjectPage from '../../ProjectPage/ProjectPage';
+import Editor from './Editor/Editor';
+import Gallery from './Gallery/Gallery';
+import configurations from './Gallery/configurations';
+
+const CircleArt = () => {
+  const match = useMatchMedia(['1000px']);
+  const [circleData, setCircleData] = useState(configurations[0]);
+
+  return (
+    <ProjectPage {...data.projects.CircleArt}>
+      <Box flex={match('1000px') ? 'horizontal' : 'vertical'} gap="x3" grow>
+        <Box
+          backgroundColor="background-shade-2"
+          basis="0"
+          borderRadius="x3"
+          flex="vertical"
+          grow
+        >
+          <Editor data={circleData.config} />
+        </Box>
+
+        <Box basis="0" maxHeight="100%">
+          <Gallery onSelect={setCircleData} />
+        </Box>
+      </Box>
+    </ProjectPage>
+  );
+};
+
+export default CircleArt;

src/components/Projects/CircleArt/Editor/Editor.css

@@ -0,0 +1,68 @@
+.CircleArt__circle,
+.CircleArt__intersection {
+  stroke-width: 1;
+  transition-property: fill, stroke, stroke-width;
+  transition-duration: var(--transition-duration--fast);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.CircleArt__circle--active {
+  stroke: var(--color-accent-shade-4);
+  stroke-width: 2;
+}
+
+.CircleArt--mode-draw {
+  & .CircleArt__circle {
+    fill: transparent;
+
+    &:hover {
+      stroke: var(--color-accent-shade-4);
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+/* .CircleArt__circle--active,
+.CircleArt__circle:hover {
+  stroke: var(--color-accent-shade-4);
+}
+
+.CircleArt__circle--selectable,
+.CircleArt__intersection--selectable {
+  stroke: var(--color-text-shade-4);
+}
+
+.CircleArt__circle--selectable:hover,
+.CircleArt__intersection--selectable:hover {
+  stroke: var(--color-accent-shade-4);
+} */
+
+
+
+
+
+
+
+.CircleArt--mode-fill,
+.CircleArt--mode-view {
+  /* & .CircleArt__circle--selectable.CircleArt__circle--filled:hover,
+  & .CircleArt__intersection--selectable.CircleArt__intersection--filled:hover {
+    fill: var(--color-text-shade-1);
+  } */
+}
+
+/* .CircleArt--mode-view {
+  & .CircleArt__circle,
+  & .CircleArt__intersection {
+    stroke: rgba(var(--rgb-text-shade-3), 0.25);
+  }
+} */