+
+
+ Inspired by others, I share my open-source derived work with the community.
+
+
+
+
+
+
-
+ class="absolute left-0 top-40 h-96 w-full -translate-y-full [background-image:radial-gradient(closest-side,rgba(123,175,224,0.12)_0%,transparent_100%)]"
+ >
+
+
Introduction
+
+ Building confidence and containers.
+
+
+
+
+ I'm a DevOps and Platform Engineering enthusiast from Zaandam, The Netherlands. Started my
+ journey in Information Sciences at the Vrije Universiteit Amsterdam, quickly learning and
+ adopting Python, Javascript and Linux. These days, I'm also working alot with Terraform,
+ Bicep, and Kubernetes, creating cloud infra solutions that are sustainable.
+
+
+ Over at Triple, my role involves providing services to clients including HEINEKEN, BAM, and citizenM. I
+ utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain robust,
+ scalable cloud infrastructures. For operational purposes, I employ technologies like
+ SaltStack, PRTG, and LogicMonitor.
+
+
+ I love to work on personal projects or playing games with friends. Beyond the screens, you
+ can catch me vibing to vinyl, watching movies, hitting concerts and festivals.
+
+
+ When the dust settles, my life is all about sharing laughs with my oversized cat and with
+ my amazing girlfriend. I also enjoy a good whiskey, and I'm always up for a chat or down
+ to help.
+
-
Introduction
-
- Building confidence and containers.
-
-
-
-
- I'm a DevOps and Platform Engineering enthusiast from Zaandam, The Netherlands. Started
- my journey in Information Sciences at the Vrije Universiteit Amsterdam, quickly learning
- and adopting Python, Javascript and Linux. These days, I'm also working alot with
- Terraform, Bicep, and Kubernetes, creating cloud infra solutions that are sustainable.
-
-
- Over at Triple, my role involves providing services to clients including HEINEKEN, BAM, and citizenM.
- I utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain
- robust, scalable cloud infrastructures. For operational purposes, I employ technologies
- like SaltStack, PRTG, and LogicMonitor.
-
-
- I love to work on personal projects or playing games with friends. Beyond the screens,
- you can catch me vibing to vinyl, watching movies, hitting concerts and festivals.
-
-
- When the dust settles, my life is all about sharing laughs with my oversized cat and
- with my amazing girlfriend. I also enjoy a good whiskey, and I'm always up for a chat or
- down to help.
-
-
-
-
-
+
+
-
-
+
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 13528bc..5e8ac92 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */
export function load() {
return {
- title: `Home`
+ name: `Home`,
+ title: `I made this for you`,
+ subTitle: `Featuring current work and studies in a SvelteKit-based portfolio.`
};
}
diff --git a/src/routes/og.png/+server.ts b/src/routes/og.png/+server.ts
new file mode 100644
index 0000000..c82931d
--- /dev/null
+++ b/src/routes/og.png/+server.ts
@@ -0,0 +1,53 @@
+import satori from 'satori';
+import { Resvg } from '@resvg/resvg-js';
+import { html } from 'satori-html';
+import { OgImage } from '$lib/components/site';
+import GeistRegular from '$lib/assets/og/Geist-Regular.woff';
+import GeistBold from '$lib/assets/og/Geist-Bold.woff';
+import imageData from '$lib/assets/og/me-inline.jpg?base64';
+
+const height = 630;
+const width = 1200;
+
+/** @type {import('./$types').RequestHandler} */
+export const GET = async ({ url }) => {
+ const title = url.searchParams.get('title') ?? undefined;
+ const subTitle = url.searchParams.get('subTitle') ?? undefined;
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const result = (OgImage as any).render({ title, subTitle, imageData });
+ const element = html(`${result.html}`);
+
+ const svg = await satori(element, {
+ fonts: [
+ {
+ name: 'Geist Regular',
+ data: Buffer.from(GeistRegular),
+ weight: 100
+ },
+ {
+ name: 'Geist Bold',
+ data: Buffer.from(GeistBold),
+ weight: 700
+ }
+ ],
+ height,
+ width
+ });
+
+ const resvg = new Resvg(svg, {
+ fitTo: {
+ mode: 'width',
+ value: width
+ }
+ });
+
+ const image = resvg.render();
+
+ return new Response(image.asPng(), {
+ headers: {
+ 'content-type': 'image/png',
+ 'cache-control': 'public, max-age=86400, immutable'
+ }
+ });
+};
diff --git a/src/routes/og.png/env.d.ts b/src/routes/og.png/env.d.ts
new file mode 100644
index 0000000..1f98122
--- /dev/null
+++ b/src/routes/og.png/env.d.ts
@@ -0,0 +1,7 @@
+///
+///
+
+declare module '*?base64' {
+ const src: string;
+ export default src;
+}
diff --git a/src/routes/og.png/preview/+page.svelte b/src/routes/og.png/preview/+page.svelte
new file mode 100644
index 0000000..4f50c8f
--- /dev/null
+++ b/src/routes/og.png/preview/+page.svelte
@@ -0,0 +1,11 @@
+
+
+
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 05ba089..e67a418 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,17 +1,14 @@
-
-
- Projects I've realized
-
- Explore some of the projects I worked on in the past.
-
-
+
-
-
+
diff --git a/src/routes/projects/+page.ts b/src/routes/projects/+page.ts
index d65c29c..fb781c7 100644
--- a/src/routes/projects/+page.ts
+++ b/src/routes/projects/+page.ts
@@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */
export function load() {
return {
- title: `Projects`
+ name: `Projects`,
+ title: `Projects Ive realized`,
+ subTitle: `Explore some of the projects I worked on in the past.`
};
}
diff --git a/src/routes/robots.txt/+server.ts b/src/routes/robots.txt/+server.ts
index 33556c6..1a1bf6b 100644
--- a/src/routes/robots.txt/+server.ts
+++ b/src/routes/robots.txt/+server.ts
@@ -31,7 +31,7 @@ export async function GET() {
* @returns {string} robots.txt content.
*/
function generateRobotsTxt(siteUrl: string, config: { agent: string; disallow: string[] }[]) {
- return `Sitemap: ${siteUrl}/sitemap.xml
+ return `Sitemap: https://${siteUrl}/sitemap.xml
# https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap#addsitemap
# https://www.robotstxt.org/robotstxt.html
diff --git a/src/routes/timeline/+page.svelte b/src/routes/timeline/+page.svelte
index 0e954aa..74feb56 100644
--- a/src/routes/timeline/+page.svelte
+++ b/src/routes/timeline/+page.svelte
@@ -1,17 +1,14 @@
-
-
- Experiences through time
-
- Achievements in my education, career and personal life.
-
-
+
-
-
+
diff --git a/src/routes/timeline/+page.ts b/src/routes/timeline/+page.ts
index cc1cb53..c35132f 100644
--- a/src/routes/timeline/+page.ts
+++ b/src/routes/timeline/+page.ts
@@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */
export function load() {
return {
- title: `Timeline`
+ name: `Timeline`,
+ title: `Experiences through time`,
+ subTitle: `Achievements in my education, career and personal life.`
};
}
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index dbe10a4..4af967b 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -1,17 +1,14 @@
-
-
- Inside my toolbox
-
- Tools, applications, and software that fuels my development and operations work.
-
-
+
-
-
+
diff --git a/src/routes/tools/+page.ts b/src/routes/tools/+page.ts
index 2e6c036..8b7d696 100644
--- a/src/routes/tools/+page.ts
+++ b/src/routes/tools/+page.ts
@@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */
export function load() {
return {
- title: `Tools`
+ name: `Tools`,
+ title: `Inside my toolbox`,
+ subTitle: `Tools, applications, and software that fuels my development and operations work.`
};
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e76d77e..85f33df 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,10 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
+ --font-geist-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
@@ -89,6 +90,40 @@
-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
}
+ /* Font face Geist font */
+
+ @font-face {
+ font-family: 'Geist Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/fonts/Geist/Geist-Regular.woff2') format('woff2');
+ }
+
+ @font-face {
+ font-family: 'Geist Sans';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('/fonts/Geist/Geist-Medium.woff2') format('woff2');
+ }
+
+ @font-face {
+ font-family: 'Geist Sans';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url('/fonts/Geist/Geist-SemiBold.woff2') format('woff2');
+ }
+
+ @font-face {
+ font-family: 'Geist Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('/fonts/Geist/Geist-Bold.woff2') format('woff2');
+ }
+
/* === Scrollbars === */
::-webkit-scrollbar {
diff --git a/static/fonts/Geist/Geist-Black.woff2 b/static/fonts/Geist/Geist-Black.woff2
new file mode 100644
index 0000000..c8230cb
Binary files /dev/null and b/static/fonts/Geist/Geist-Black.woff2 differ
diff --git a/static/fonts/Geist/Geist-Bold.woff b/static/fonts/Geist/Geist-Bold.woff
new file mode 100644
index 0000000..081ecdf
Binary files /dev/null and b/static/fonts/Geist/Geist-Bold.woff differ
diff --git a/static/fonts/Geist/Geist-Bold.woff2 b/static/fonts/Geist/Geist-Bold.woff2
new file mode 100644
index 0000000..d0562e4
Binary files /dev/null and b/static/fonts/Geist/Geist-Bold.woff2 differ
diff --git a/static/fonts/Geist/Geist-Light.woff2 b/static/fonts/Geist/Geist-Light.woff2
new file mode 100644
index 0000000..5661120
Binary files /dev/null and b/static/fonts/Geist/Geist-Light.woff2 differ
diff --git a/static/fonts/Geist/Geist-Medium.woff2 b/static/fonts/Geist/Geist-Medium.woff2
new file mode 100644
index 0000000..76edd10
Binary files /dev/null and b/static/fonts/Geist/Geist-Medium.woff2 differ
diff --git a/static/fonts/Geist/Geist-Regular.woff2 b/static/fonts/Geist/Geist-Regular.woff2
new file mode 100644
index 0000000..2ebd009
Binary files /dev/null and b/static/fonts/Geist/Geist-Regular.woff2 differ
diff --git a/static/fonts/Geist/Geist-SemiBold.woff2 b/static/fonts/Geist/Geist-SemiBold.woff2
new file mode 100644
index 0000000..a6c53e8
Binary files /dev/null and b/static/fonts/Geist/Geist-SemiBold.woff2 differ
diff --git a/static/fonts/Geist/Geist-Thin.woff2 b/static/fonts/Geist/Geist-Thin.woff2
new file mode 100644
index 0000000..a330c07
Binary files /dev/null and b/static/fonts/Geist/Geist-Thin.woff2 differ
diff --git a/static/fonts/Geist/Geist-UltraBlack.woff2 b/static/fonts/Geist/Geist-UltraBlack.woff2
new file mode 100644
index 0000000..198caea
Binary files /dev/null and b/static/fonts/Geist/Geist-UltraBlack.woff2 differ
diff --git a/static/fonts/Geist/Geist-UltraLight.woff2 b/static/fonts/Geist/Geist-UltraLight.woff2
new file mode 100644
index 0000000..5416852
Binary files /dev/null and b/static/fonts/Geist/Geist-UltraLight.woff2 differ
diff --git a/static/fonts/Geist/GeistVariableVF.ttf b/static/fonts/Geist/GeistVariableVF.ttf
new file mode 100644
index 0000000..3bf8230
Binary files /dev/null and b/static/fonts/Geist/GeistVariableVF.ttf differ
diff --git a/static/fonts/Geist/GeistVariableVF.woff2 b/static/fonts/Geist/GeistVariableVF.woff2
new file mode 100644
index 0000000..328a020
Binary files /dev/null and b/static/fonts/Geist/GeistVariableVF.woff2 differ
diff --git a/static/fonts/Geist/LICENSE.TXT b/static/fonts/Geist/LICENSE.TXT
new file mode 100644
index 0000000..df71062
--- /dev/null
+++ b/static/fonts/Geist/LICENSE.TXT
@@ -0,0 +1,92 @@
+Geist Sans and Geist Mono Font
+(C) 2023 Vercel, made in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/static/og.png b/static/og.png
deleted file mode 100644
index 7ab4a1f..0000000
Binary files a/static/og.png and /dev/null differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 38fb24e..b0bd3fc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,7 +17,7 @@ const config = {
colors: {
border: 'hsl(var(--border) /
)',
input: 'hsl(var(--input) / )',
- ring: 'hsl(var(--ring) / )',
+ ring: 'hsl(var(--ring))',
background: 'hsl(var(--background) / )',
foreground: 'hsl(var(--foreground) / )',
primary: {
@@ -55,7 +55,7 @@ const config = {
sm: 'calc(var(--radius) - 4px)'
},
fontFamily: {
- sans: [...fontFamily.sans]
+ sans: ['var(--font-geist-sans)', ...fontFamily.sans]
}
}
}
diff --git a/vite.config.ts b/vite.config.ts
index 30b72df..e651b8d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,46 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';
+import fs from 'fs';
export default defineConfig({
- plugins: [enhancedImages(), sveltekit()],
- ssr: {
- noExternal: ['three']
- },
+ plugins: [base64(), enhancedImages(), rawFonts(['.woff']), sveltekit()],
define: {
- 'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
+ 'import.meta.env.VERCEL_URL': JSON.stringify(process.env.VERCEL_URL)
}
});
+
+function rawFonts(ext: string[]) {
+ return {
+ name: 'vite-plugin-raw-fonts',
+ transform(_code: string, id: string) {
+ if (ext.some((e) => id.endsWith(e))) {
+ const buffer = fs.readFileSync(id);
+ return { code: `export default ${JSON.stringify(buffer)}`, map: null };
+ }
+ }
+ };
+}
+
+function base64() {
+ return {
+ name: 'vite-plugin-base64-loader',
+ // transform(_code: string, id: string) {
+ // const [path, query] = id.split('?');
+ // if (query === 'base64' && ext.some((e) => id.endsWith(e))) {
+ // const base64 = fs.readFileSync(path, { encoding: 'base64' });
+ // return { code: `export default ${JSON.stringify(base64)}`, map: null };
+ // }
+ // }
+ transform(_code: string, id: string) {
+ const [path, query] = id.split('?');
+
+ if (query !== 'base64') {
+ return null;
+ }
+
+ const base64 = fs.readFileSync(path, { encoding: 'base64' });
+ return { code: `export default ${JSON.stringify(base64)}`, map: null };
+ }
+ };
+}
+