Added publications

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/Publication/Publication.tsx

@@ -0,0 +1,52 @@
+import { Link, Text } from 'preshape';
+import React from 'react';
+import { Publication } from '../../types';
+import { fromISO } from '../../utils/date';
+
+interface Props extends Publication {}
+
+const PublicationComponent = (props: Props) => {
+  const { authors, date, description, journal, title, href } = props;
+
+  return (
+    <Link
+      backgroundColor="background-shade-2"
+      borderRadius="x3"
+      display="block"
+      href={href}
+      margin="x3"
+      padding="x6"
+    >
+      <Text flex="horizontal" gap="x10">
+        <Text basis="0" grow margin="x1" strong>
+          {title}
+        </Text>
+
+        <Text size="x2" strong>
+          {journal}
+        </Text>
+      </Text>
+
+      <Text margin="x1">{description}</Text>
+
+      <Text margin="x2" size="x3" strong>
+        by{' '}
+        {authors.map((author, index) => (
+          <Text inline key={author}>
+            {author}{' '}
+            <Text inline superscript>
+              [{index + 1}]
+            </Text>
+            {index === authors.length - 1 ? ' ' : ', '}
+          </Text>
+        ))}
+      </Text>
+
+      <Text margin="x2" size="x3" strong>
+        {fromISO(date)}
+      </Text>
+    </Link>
+  );
+};
+
+export default PublicationComponent;

src/components/Root.tsx

@@ -16,7 +16,6 @@ import Snake from './Projects/Snake/Snake';
 import Spirals from './Projects/Spirals/Spirals';
 import CircleGraphs from './Writings/CircleGraphs/CircleGraphs';
 import CircleIntersections from './Writings/CircleIntersections/CircleIntersections';
-import GeneratingTessellations from './Writings/GeneratingTessellations/GeneratingTessellations';
 import SnakeSolution from './Writings/SnakeSolution/SnakeSolution';
 
 export const RootContext = createContext<{
@@ -71,10 +70,10 @@ const Site = () => {
               element={<CircleGraphs />}
               path={data.writings.CircleGraphs.to}
             />
-            <Route
+            {/* <Route
               element={<GeneratingTessellations />}
               path={data.writings.GeneratingTessellations.to}
-            />
+            /> */}
             <Route
               element={<SnakeSolution />}
               path={data.writings.SnakeSolution.to}

src/data.ts

@@ -1,13 +1,6 @@
 import { Data } from './types';
 
-const data: Data<
-  'Pure360' | 'Reedsy' | 'Brandwatch' | 'Bitrise' | 'Spotify',
-  'CircleGraph' | 'CircleArt' | 'Antwerp' | 'Preshape' | 'Snake' | 'Spirals',
-  | 'CircleGraphs'
-  | 'CircleIntersections'
-  | 'GeneratingTessellations'
-  | 'SnakeSolution'
-> = {
+const data: Data = {
   experience: {
     Pure360: {
       company: 'Pure360',
@@ -45,6 +38,7 @@ const data: Data<
       company: 'Spotify',
       date: '2021-08-30',
       role: 'Senior Engineer',
+      tags: ['typescript', 'nodejs', 'java', 'react', 'gcp'],
     },
   },
 
@@ -138,23 +132,23 @@ const data: Data<
       to: '/writings/circle-intersections',
       unlisted: true,
     },
-    GeneratingTessellations: {
-      id: 'GeneratingTessellations',
-      date: '2020-01-31',
-      description:
-        'An explanation of the GomJau-Hogg’s notation for generating all of the regular, semiregular (uniform) and demigular (k-uniform, up to at least k=3) in a consistent, unique and unequivocal manner.',
-      imageOG: require('./assets/antwerp.png'),
-      tags: [
-        'svg',
-        'visualisation',
-        'geometry',
-        'tessellations',
-        'nomenclature',
-      ],
-      title:
-        'GomJau-Hogg’s notation for automatic generation of k-uniform tessellations',
-      to: '/writings/generating-tessellations',
-    },
+    // GeneratingTessellations: {
+    //   id: 'GeneratingTessellations',
+    //   date: '2020-01-31',
+    //   description:
+    //     'An explanation of the GomJau-Hogg’s notation for generating all of the regular, semiregular (uniform) and demigular (k-uniform, up to at least k=3) in a consistent, unique and unequivocal manner.',
+    //   imageOG: require('./assets/antwerp.png'),
+    //   tags: [
+    //     'svg',
+    //     'visualisation',
+    //     'geometry',
+    //     'tessellations',
+    //     'nomenclature',
+    //   ],
+    //   title:
+    //     'GomJau-Hogg’s notation for automatic generation of k-uniform tessellations',
+    //   to: '/writings/generating-tessellations',
+    // },
     SnakeSolution: {
       id: 'SnakeSolution',
       date: '2020-04-13',
@@ -174,6 +168,17 @@ const data: Data<
       to: '/writings/snake-solution',
     },
   },
+
+  publications: {
+    Tilings: {
+      title: 'GomJau-Hogg’s Notation for Automatic Generation of k-Uniform Tessellations with ANTWERP v3.0',
+      date: '2021-12-09',
+      authors: ['Valentin Gomez-Jauregui', 'Harrison Hogg', 'Cristina Manchado', 'Cesar Otero'],
+      journal: 'MDPI Symmetry',
+      description: 'Euclidean tilings are constantly applied to many fields of engineering (mechanical, civil, chemical, etc.). These tessellations are usually named after Cundy & Rollett’s notation. However, this notation has two main problems related to ambiguous conformation and uniqueness. This communication explains the GomJau-Hogg’s notation for generating all the regular, semi-regular (uniform) and demi-regular (k-uniform, up to at least k = 3) in a consistent, unique and unequivocal manner. Moreover, it presents Antwerp v3.0, a free online application, which is publicly shared to prove that all the basic tilings can be obtained directly from the GomJau-Hogg’s notation.',
+      href: 'https://www.mdpi.com/2073-8994/13/12/2376',
+    }
+  },
 };
 
 export const listedWritingsSorted = Object.values(data.writings)
@@ -184,4 +189,8 @@ export const experienceSorted = Object.values(data.experience).sort(
   (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
 );
 
+export const publicationsSorted = Object.values(data.publications).sort(
+  (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+);
+
 export default data;

src/types.ts

@@ -1,12 +1,25 @@
-export interface Experience {
+
+type ExperienceList =
+| 'Pure360' | 'Reedsy' | 'Brandwatch' | 'Bitrise' | 'Spotify';
+
+type ProjectsList =
+| 'Antwerp' | 'CircleGraph' | 'CircleArt' | 'Preshape' | 'Snake' | 'Spirals';
+
+type WritingsList =
+| 'CircleGraphs' | 'CircleIntersections' | 'SnakeSolution'
+
+type PublicationsList =
+| 'Tilings';
+
+export type Experience = {
   company: string;
   date: string;
   description?: string;
   tags?: string[];
   role: string;
 }
 
-export interface Project {
+export type Project = {
   description: string;
   href?: string;
   image: string;
@@ -16,7 +29,7 @@ export interface Project {
   to?: string;
 }
 
-export interface Writing {
+export type Writing = {
   id: string;
   date: string;
   description: string;
@@ -27,8 +40,18 @@ export interface Writing {
   unlisted?: boolean;
 }
 
-export interface Data<E extends string, P extends string, W extends string> {
-  experience: Record<E, Experience>;
-  projects: Record<P, Project>;
-  writings: Record<W, Writing>;
+export type Publication = {
+  title: string;
+  date: string;
+  journal: string;
+  authors: string[];
+  href: string;
+  description: string;
+};
+
+export interface Data {
+  experience: Record<ExperienceList, Experience>;
+  projects: Record<ProjectsList, Project>;
+  writings: Record<WritingsList, Writing>;
+  publications: Record<PublicationsList, Publication>,
 }