diff --git a/src/components/ProjectLogo.astro b/src/components/ProjectLogo.astro
index 307ca05..98ba486 100644
--- a/src/components/ProjectLogo.astro
+++ b/src/components/ProjectLogo.astro
@@ -1,23 +1,25 @@
---
+import {Icon} from 'astro-icon/components';
import {type ProjectEntry} from '@data/types';
interface Props {
- id: ProjectEntry['logo'];
+ logo: ProjectEntry['logo'];
name?: ProjectEntry['name'];
url?: ProjectEntry['url'];
}
-const {id, name = '', url = ''} = Astro.props;
-const logos = await Astro.glob('../assets/svg/Logo*.astro');
-
-function getLogo(logoId: string) {
- const foundLogo = logos.find(({file}) => file.includes(logoId));
- // TODO: Pass back a unique fallback logo?
- return foundLogo ? foundLogo.default : logos[0].default;
-}
-
-const LogoSvg = getLogo(id);
+// No need to strongly type `logo`, because `astro-icon` will fail the
+// build if it cannot find the SVG asset.
+const {logo, name = '', url = ''} = Astro.props;
const isLink = Boolean(url && name);
+
+const iconProps = {
+ name: `logos/${logo}`,
+ // `astro-icon` appends a `width/height` prop, which we do not want.
+ // There should be a way to do this via SVGO.
+ width: undefined,
+ height: undefined,
+};
---
{
@@ -30,12 +32,12 @@ const isLink = Boolean(url && name);
rel="noopener noreferrer"
data-overlay-action
>
-
-
)
@@ -65,7 +67,7 @@ const isLink = Boolean(url && name);
cursor: url('../assets/img/cursor-dead.png'), not-allowed;
}
- .ProjectLogo > :global(svg) {
+ .ProjectLogo > [data-icon] {
width: 100%;
height: 100%;
overflow: visible;
@@ -74,58 +76,49 @@ const isLink = Boolean(url && name);
/* Unique logo sizes per section id */
- :global(#BodyMindChange) {
- --project-logo-size: 18rem;
-
- @media (--min-tablet) {
- --project-logo-size: 24rem;
- }
- }
-
:global(#Chicken) {
- --project-logo-size: 13rem;
+ --project-logo-size: 14rem;
@media (--min-tablet) {
- --project-logo-size: 17.6rem;
+ --project-logo-size: 20rem;
}
}
:global(#CommerceAwards),
- :global(#PartnersAcademy),
:global(#Polaris) {
- --project-logo-size: 10rem;
+ --project-logo-size: 12rem;
@media (--min-tablet) {
- --project-logo-size: 16rem;
+ --project-logo-size: 18rem;
}
}
:global(#Draggable) {
- --project-logo-size: 10rem;
+ --project-logo-size: 16rem;
@media (--min-tablet) {
- --project-logo-size: 14rem;
+ --project-logo-size: 22rem;
}
}
- :global(#Fringe) {
- --project-logo-size: 20rem;
+ :global(#Earwurm) {
+ --project-logo-size: 12rem;
@media (--min-tablet) {
- --project-logo-size: 26rem;
+ --project-logo-size: 18rem;
}
}
- :global(#NorthernArmy),
- :global(#NorthernArmy2012) {
- --project-logo-size: 16rem;
+ :global(#Fringe) {
+ --project-logo-size: 20rem;
@media (--min-tablet) {
- --project-logo-size: 22rem;
+ --project-logo-size: 26rem;
}
}
- :global(#NorthNavy) {
+ :global(#NA2012),
+ :global(#NorthernArmy) {
--project-logo-size: 16rem;
@media (--min-tablet) {
@@ -134,18 +127,18 @@ const isLink = Boolean(url && name);
}
:global(#PreservationSociety) {
- --project-logo-size: 12rem;
+ --project-logo-size: 14rem;
@media (--min-tablet) {
- --project-logo-size: 17rem;
+ --project-logo-size: 20rem;
}
}
- :global(#SandwichVideo) {
- --project-logo-size: 16rem;
+ :global(#Tetchi) {
+ --project-logo-size: 20rem;
@media (--min-tablet) {
- --project-logo-size: 22rem;
+ --project-logo-size: 26rem;
}
}
diff --git a/src/components/Stars.astro b/src/components/Stars.astro
index 0331960..1d63f3b 100644
--- a/src/components/Stars.astro
+++ b/src/components/Stars.astro
@@ -1,5 +1,7 @@
---
-import PatternStars from '@assets/svg/PatternStars.astro';
+const {default: patternStarsHtml} = await import(
+ '../assets/svg/patterns/PatternStars.svg?raw'
+);
// NOTE: This is mostly adapted from the `Stars` component on `Draggable`.
// I have not included the `Shooting Stars`, but may want to consider
@@ -7,7 +9,7 @@ import PatternStars from '@assets/svg/PatternStars.astro';
---
-
diff --git a/src/data/sections.ts b/src/data/sections.ts
index 039e792..fe7c4d6 100644
--- a/src/data/sections.ts
+++ b/src/data/sections.ts
@@ -4,27 +4,18 @@ const intro: SectionEntry = {
id: 'Intro',
name: 'Hello',
description: 'Portfolio site of Curtis Dulmage',
- thumbnail: '/assets/intro-flowers.png',
+ thumbnail: '/assets/intro-flowers.webp',
channels: [140, 84, 193],
};
-const preserve: ProjectEntry = {
- id: 'PreservationSociety',
- name: 'Preserve',
- description: 'Northern Army Preservation Society of Canada',
- thumbnail: '/assets/bg-preservation-society.png',
- channels: [255, 195, 12],
- logo: 'LogoPreservationSociety',
- url: 'https://preserve.northernarmy.com',
- attribution: 'Rene Antunes',
- inhouse: ['Northern Army', 'https://northernarmy.com'],
-};
+///
+/// Projects
const bodyMindChange: ProjectEntry = {
id: 'BodyMindChange',
name: 'Body Mind Change',
description: 'David Cronenberg’s Body Mind Change presented by TIFF',
- thumbnail: '/assets/bg-body-mind-change.png',
+ thumbnail: '/assets/bg-body-mind-change.webp',
channels: [255, 65, 0],
logo: 'LogoBodyMindChange',
attribution: 'Rene Antunes',
@@ -36,36 +27,64 @@ const bodyMindChange: ProjectEntry = {
inactive: true,
};
+const chicken: ProjectEntry = {
+ id: 'Chicken',
+ name: 'Chicken Farmers',
+ description: 'Chicken Farmers of Canada',
+ thumbnail: '/assets/bg-chicken.webp',
+ channels: [248, 61, 74],
+ logo: 'LogoChicken',
+ attribution: 'Rene Antunes',
+ client: ['Chicken Farmers of Canada', 'https://chicken.ca'],
+ agency: ['Northern Army', 'https://northernarmy.com'],
+ inactive: true,
+};
+
+const commerceAwards: ProjectEntry = {
+ id: 'CommerceAwards',
+ name: 'Commerce Awards',
+ description: 'Shopify Commerce Awards 2017',
+ thumbnail: '/assets/bg-commerce-awards.webp',
+ channels: [156, 106, 222],
+ logo: 'LogoShopify',
+ url: 'https://www.siteinspire.com/websites/7422-shopify-commerce-awards-2017',
+ attribution: 'Nick DeGiorgio',
+ inhouse: [
+ 'Shopify Commerce Awards 2017',
+ 'https://www.shopify.com/commerce-awards',
+ ],
+ inactive: true,
+};
+
const draggable: ProjectEntry = {
id: 'Draggable',
name: 'Draggable',
description: 'The drag-and-drop library your grandparents warned you about',
- thumbnail: '/assets/bg-draggable.png',
- channels: [20, 5, 41],
+ thumbnail: '/assets/bg-draggable.webp',
+ channels: [0, 66, 255],
logo: 'LogoDraggable',
url: 'https://shopify.github.io/draggable',
attribution: 'Curtis Dulmage',
personal: ['Draggable', 'https://shopify.github.io/draggable'],
};
-const northernArmy: ProjectEntry = {
- id: 'NorthernArmy',
- name: 'Northern Army',
- description: 'Independent branding & packaging studio',
- thumbnail: '/assets/bg-northern-army.png',
- channels: [226, 172, 58],
- logo: 'LogoNorthernArmy',
- url: 'https://northernarmy.com',
- attribution: 'Rene Antunes',
- inhouse: ['Northern Army', 'https://northernarmy.com'],
- inactive: true,
+const earwurm: ProjectEntry = {
+ id: 'Earwurm',
+ name: 'Earwurm',
+ description: 'Easier web audio for UI sound effects',
+ thumbnail: '/assets/bg-earwurm.webp',
+ channels: [207, 1, 93],
+ logo: 'LogoEarwurm',
+ url: 'https://beefchimi.github.io/earwurm/',
+ attribution: 'Curtis Dulmage',
+ personal: ['Earwurm', 'https://github.com/beefchimi/earwurm'],
};
const fringe: ProjectEntry = {
id: 'Fringe',
name: 'Ottawa Fringe',
description: 'Ottawa Fringe Festival',
- thumbnail: '/assets/bg-fringe.png',
+ thumbnail: '/assets/bg-fringe.webp',
channels: [255, 90, 82],
logo: 'LogoFringe',
attribution: 'Mandira Midha',
@@ -74,11 +93,36 @@ const fringe: ProjectEntry = {
inactive: true,
};
+const na2012: ProjectEntry = {
+ id: 'NA2012',
+ name: 'NA 2012',
+ description: 'Legacy Northern Army 2012',
+ thumbnail: '/assets/bg-na2012.webp',
+ channels: [234, 72, 72],
+ logo: 'LogoNorthernArmy',
+ attribution: 'Rene Antunes',
+ inhouse: ['Northern Army', 'https://northernarmy.com'],
+ inactive: true,
+};
+
+const northernArmy: ProjectEntry = {
+ id: 'NorthernArmy',
+ name: 'Northern Army',
+ description: 'Independent branding & packaging studio',
+ thumbnail: '/assets/bg-northern-army.webp',
+ channels: [226, 172, 58],
+ logo: 'LogoNorthernArmy',
+ url: 'https://northernarmy.com',
+ attribution: 'Rene Antunes',
+ inhouse: ['Northern Army', 'https://northernarmy.com'],
+ inactive: true,
+};
+
const northNavy: ProjectEntry = {
id: 'NorthNavy',
name: 'North & Navy',
description: 'North and Navy restaurant',
- thumbnail: '/assets/bg-north-navy.png',
+ thumbnail: '/assets/bg-north-navy.webp',
channels: [21, 53, 91],
logo: 'LogoNorthNavy',
url: 'https://northandnavy.com',
@@ -87,10 +131,36 @@ const northNavy: ProjectEntry = {
agency: ['Northern Army', 'https://northernarmy.com'],
};
+const polaris: ProjectEntry = {
+ id: 'Polaris',
+ name: 'Polaris',
+ description: 'Shopify Polaris Styleguide',
+ thumbnail: '/assets/bg-polaris.webp',
+ channels: [56, 80, 177],
+ logo: 'LogoShopify',
+ url: 'https://polaris.shopify.com',
+ attribution: 'Alistair Lane',
+ inhouse: ['Shopify Polaris Styleguide', 'https://www.shopify.com'],
+ inactive: true,
+};
+
+const preserve: ProjectEntry = {
+ id: 'PreservationSociety',
+ name: 'Preservation Society ',
+ description: 'Northern Army Preservation Society of Canada',
+ thumbnail: '/assets/bg-preservation-society.webp',
+ channels: [255, 195, 12],
+ logo: 'LogoPreservationSociety',
+ url: 'https://preserve.northernarmy.com',
+ attribution: 'Rene Antunes',
+ inhouse: ['Northern Army', 'https://northernarmy.com'],
+};
+
const sandwich: ProjectEntry = {
id: 'SandwichVideo',
name: 'Sandwich Video',
description: 'Video production studio and sandwich enthusiasts',
+ // Keeping this as a PNG as it is so much smaller than the WEBP version.
thumbnail: '/assets/bg-sandwich-video.png',
channels: [207, 44, 71],
logo: 'LogoSandwichVideo',
@@ -100,85 +170,45 @@ const sandwich: ProjectEntry = {
inactive: true,
};
-const commerceAwards: ProjectEntry = {
- id: 'CommerceAwards',
- name: 'Commerce Awards',
- description: 'Shopify Commerce Awards 2017',
- thumbnail: '/assets/bg-commerce-awards.png',
- channels: [156, 106, 222],
- logo: 'LogoShopify',
- url: 'https://www.siteinspire.com/websites/7422-shopify-commerce-awards-2017',
- attribution: 'Nick DeGiorgio',
- inhouse: [
- 'Shopify Commerce Awards 2017',
- 'https://www.shopify.com/commerce-awards',
- ],
- inactive: true,
-};
-
-const na2012: ProjectEntry = {
- id: 'NorthernArmy2012',
- name: 'NA 2012',
- description: 'Legacy Northern Army 2012',
- thumbnail: '/assets/bg-northern-army-2012.png',
- channels: [234, 72, 72],
- logo: 'LogoNorthernArmy',
- attribution: 'Rene Antunes',
- inhouse: ['Northern Army', 'https://northernarmy.com'],
- inactive: true,
-};
-
-const partnersAcademy: ProjectEntry = {
- id: 'PartnersAcademy',
- name: 'Partners Academy',
- description: 'Shopify Partners Academy learning platform',
- thumbnail: '/assets/bg-partners-academy.png',
- channels: [180, 180, 180],
- logo: 'LogoShopify',
- url: 'https://www.shopify.ca/partners/academy',
- attribution: 'Jonathan Forsythe',
- inhouse: ['Shopify Partners Academy', 'https://www.shopify.com'],
- inactive: true,
-};
-
-const chicken: ProjectEntry = {
- id: 'Chicken',
- name: 'Chicken Farmers',
- description: 'Chicken Farmers of Canada',
- thumbnail: '/assets/bg-chicken.png',
- channels: [248, 61, 74],
- logo: 'LogoChicken',
- attribution: 'Rene Antunes',
- client: ['Chicken Farmers of Canada', 'https://chicken.ca'],
- agency: ['Northern Army', 'https://northernarmy.com'],
+const tetchi: ProjectEntry = {
+ id: 'Tetchi',
+ name: 'Tetchi',
+ description: 'Tribute to Tetsuro Takara',
+ thumbnail: '/assets/bg-tetchi.webp',
+ channels: [2, 0, 255],
+ logo: 'LogoTetchi',
+ attribution: 'Curtis Dulmage',
+ personal: ['Tetchi', 'https://codepen.io/tetchi'],
inactive: true,
};
-const polaris: ProjectEntry = {
- id: 'Polaris',
- name: 'Polaris Styleguide',
- description: 'Shopify Polaris Styleguide',
- thumbnail: '/assets/bg-polaris-styleguide.png',
- channels: [56, 80, 177],
- logo: 'LogoShopify',
- url: 'https://polaris.shopify.com',
- attribution: 'Alistair Lane',
- inhouse: ['Shopify Polaris Styleguide', 'https://www.shopify.com'],
+const yat: ProjectEntry = {
+ id: 'Yat',
+ name: 'Yat Labs',
+ description: 'Intergalactic Web 3',
+ thumbnail: '/assets/bg-yat.webp',
+ channels: [87, 18, 222],
+ logo: 'LogoYat',
+ url: 'https://y.at/',
+ attribution: 'Karim Balaa',
+ inhouse: ['Yat Floor Game', 'https://www.freshcontrast.com/'],
inactive: true,
};
export const sections: [intro: SectionEntry, ...projects: ProjectEntry[]] = [
intro,
- preserve,
bodyMindChange,
- draggable,
- northernArmy,
+ polaris,
+ preserve,
fringe,
+ yat,
+ northernArmy,
northNavy,
sandwich,
commerceAwards,
na2012,
- partnersAcademy,
+ draggable,
chicken,
- polaris,
+ tetchi,
+ earwurm,
];
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 14ab25b..8eb5b4b 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -52,10 +52,15 @@ import Stars from '@components/Stars.astro';
position: relative;
display: grid;
- gap: var(--space-tight);
justify-content: center;
+ gap: var(--space-tight);
+ padding: var(--space);
text-align: center;
max-width: 80rem;
animation: rainbowSpin 4s linear infinite both;
}
+
+ .ErrorContent h4 a {
+ font-weight: 700;
+ }