diff --git a/src/assets/logos/envalior.png b/src/assets/logos/envalior.png
deleted file mode 100644
index aa6d0c3..0000000
Binary files a/src/assets/logos/envalior.png and /dev/null differ
diff --git a/src/assets/logos/envalior.svg b/src/assets/logos/envalior.svg
new file mode 100644
index 0000000..6ca7bf0
--- /dev/null
+++ b/src/assets/logos/envalior.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/Companies.astro b/src/components/Companies.astro
index f61bc88..5e4249b 100644
--- a/src/components/Companies.astro
+++ b/src/components/Companies.astro
@@ -1,36 +1,24 @@
---
-import { getImage } from 'astro:assets';
import type { SvgComponent } from 'astro/types';
import { companies } from '../data/profile';
-// SVG logos are inlined, so their currentColor parts follow the theme. A PNG
-// logo is single-colour; it is used as a mask over currentColor instead, which
-// renders it the same way.
-const logos = await Promise.all(
- companies.map(async ({ name, src, height, ink }) => {
- const width = Math.round((height * src.width) / src.height);
- const style = `--h: ${height}px; --w: ${width}px; ${ink ? `--ink: ${ink};` : ''}`;
- if (src.format === 'svg') {
- return { name, style, Svg: src as unknown as SvgComponent };
- }
- const mask = await getImage({ src, height: height * 2, format: 'webp' });
- return { name, style: `${style} --mask: url(${mask.src});` };
- }),
-);
+// The logos are inlined SVGs, so their currentColor parts follow the theme and
+// they appear with the page, without a request of their own.
+const logos = companies.map(({ name, src, height, ink }) => {
+ const width = Math.round((height * src.width) / src.height);
+ const style = `--h: ${height}px; --w: ${width}px; ${ink ? `--ink: ${ink};` : ''}`;
+ return { name, style, Svg: src as unknown as SvgComponent };
+});
---
-
Experience with
-
+ Experience with
+
{logos.map(({ name, style, Svg }) => (
-
- {Svg ? (
-
- ) : (
-
- )}
+
))}
@@ -77,18 +65,11 @@ const logos = await Promise.all(
color: var(--text);
}
- .logos :global(svg),
- .mask {
+ .logos :global(svg) {
height: var(--h);
width: var(--w);
}
- .mask {
- display: block;
- background: currentColor;
- mask: var(--mask) center / contain no-repeat;
- }
-
@media (max-width: 920px) {
.wrap {
grid-template-columns: 1fr;
@@ -103,8 +84,7 @@ const logos = await Promise.all(
gap: 22px 30px;
}
- .logos :global(svg),
- .mask {
+ .logos :global(svg) {
height: calc(var(--h) * 0.75);
width: calc(var(--w) * 0.75);
}
diff --git a/src/data/profile.ts b/src/data/profile.ts
index cfa13dc..0aca91c 100644
--- a/src/data/profile.ts
+++ b/src/data/profile.ts
@@ -17,7 +17,7 @@ import psm1 from '../assets/badges/psm1.png';
import cbtw from '../assets/logos/cbtw.svg';
import cronos from '../assets/logos/cronos.svg';
import deloitte from '../assets/logos/deloitte.svg';
-import envalior from '../assets/logos/envalior.png';
+import envalior from '../assets/logos/envalior.svg';
import imec from '../assets/logos/imec.svg';
import partenamut from '../assets/logos/partenamut.svg';
@@ -47,7 +47,10 @@ export const person = {
*/
export interface Logo {
name: string;
- /** An SVG, inlined; or a single-colour PNG, used as a mask. */
+ /**
+ * An SVG, inlined. A logo only available as a single-colour PNG is wrapped
+ * in one, as a mask over a currentColor rectangle (see envalior.svg).
+ */
src: ImageMetadata;
/** Display height in pixels on large screens; logos differ in proportions. */
height: number;