manu/emmanuelbernard.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(perf): switch to CDN fonts and optimize loading

Browse Source
This commit is contained in:
Manu
2026-01-03 13:05:31 +01:00
parent 6e1fa6e89e
commit 1f6067301f
4 changed files with 200 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/favicon.svg
View File

@@ -1,9 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"> <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" /> <g clip-path="url(#clip0_1_40)">
<style> <rect width="107" height="21" fill="black"/>
path { fill: #000; } <rect y="107" width="128" height="21" fill="black"/>
@media (prefers-color-scheme: dark) { <rect y="53" width="128" height="21" fill="black"/>
path { fill: #FFF; } <rect x="5.59506e-06" y="128" width="128" height="21" transform="rotate(-90 5.59506e-06 128)" fill="black"/>
} <rect x="43" y="128" width="128" height="21" transform="rotate(-90 43 128)" fill="black"/>
</style> <rect x="86" y="74" width="74" height="21" transform="rotate(-90 86 74)" fill="black"/>
<rect x="107" y="127" width="74" height="21" transform="rotate(-90 107 127)" fill="black"/>
</g>
<defs>
<clipPath id="clip0_1_40">
<rect width="128" height="128" fill="white"/>
</clipPath>
</defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 749 B

After

Width:  |  Height:  |  Size: 775 B

18
src/layouts/BaseLayout.astro
View File

@@ -29,12 +29,20 @@ const {
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Google Fonts - Inter --> <!-- Font Optimization: Preload Critical Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="preload"
rel="stylesheet" href="https://cdn.avqn.ch/fonts/ClashDisplay-Bold.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="https://cdn.avqn.ch/fonts/GeneralSans-Regular.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/> />
</head> </head>
<body class="font-sans antialiased bg-white text-gray-900 min-h-screen"> <body class="font-sans antialiased bg-white text-gray-900 min-h-screen">

76
src/pages/index.astro
View File

@@ -22,17 +22,22 @@ const links = [
<BaseLayout> <BaseLayout>
<!-- Main Container: Full screen height, centered content but with a grid layout --> <!-- Main Container: Full screen height, centered content but with a grid layout -->
<main class="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-white selection:bg-black selection:text-white"> <main
class="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-white selection:bg-black selection:text-white"
>
<!-- Grid Wrapper: Max width restriction for large screens, grid on desktop --> <!-- Grid Wrapper: Max width restriction for large screens, grid on desktop -->
<div class="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-12 border border-black"> <div
class="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-12 border border-black"
>
<!-- LEFT COLUMN: Profile & Bio (Spans 5 cols) --> <!-- LEFT COLUMN: Profile & Bio (Spans 5 cols) -->
<div class="lg:col-span-5 p-8 sm:p-12 border-b lg:border-b-0 lg:border-r border-black flex flex-col justify-between min-h-[500px]"> <div
class="lg:col-span-5 p-8 sm:p-12 border-b lg:border-b-0 lg:border-r border-black flex flex-col justify-between min-h-[500px]"
>
<!-- Header / Avatar --> <!-- Header / Avatar -->
<div> <div>
<div class="w-32 aspect-[3/4] mb-8 overflow-hidden border border-black grayscale relative group"> <div
class="w-32 aspect-[3/4] mb-8 overflow-hidden border border-black grayscale relative group"
>
<!-- Grayscale Avatar --> <!-- Grayscale Avatar -->
<img <img
src="/emmanuel-bernard.webp" src="/emmanuel-bernard.webp"
@@ -42,31 +47,51 @@ const links = [
/> />
</div> </div>
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tighter text-black mb-4 uppercase leading-[0.9]"> <h1
class="text-4xl sm:text-5xl font-extrabold tracking-tighter text-black mb-4 uppercase leading-[0.9]"
>
Emmanuel<br />Bernard Emmanuel<br />Bernard
</h1> </h1>
</div> </div>
<!-- Body --> <!-- Body -->
<div class="space-y-6"> <div class="space-y-6">
<h2 class="text-xl font-bold border-l-4 border-black pl-4 py-1 leading-snug"> <h2
class="text-xl font-bold border-l-4 border-black pl-4 py-1 leading-snug"
>
Consultant-formateur<br />AI Automation &<br />Expert n8n à Lausanne Consultant-formateur<br />AI Automation &<br />Expert n8n à Lausanne
</h2> </h2>
<p class="text-lg text-black font-medium leading-relaxed max-w-sm text-balance"> <p
Avec 20 ans d'expérience technique, j'accompagne les équipes et agences pour automatiser leurs processus et prototyper leurs idées grâce à l'IA. class="text-lg text-black font-medium leading-relaxed max-w-sm text-balance"
>
Avec 20 ans d'expérience technique, j'accompagne les équipes et
agences pour automatiser leurs processus et prototyper leurs idées
grâce à l'IA.
</p> </p>
</div> </div>
</div> </div>
<!-- RIGHT COLUMN: Links Broken Grid (Spans 7 cols) --> <!-- RIGHT COLUMN: Links Broken Grid (Spans 7 cols) -->
<div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2"> <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2">
<!-- Link Block 1: Agency Site --> <!-- Link Block 1: Agency Site -->
<a href="https://avqn.ch" target="_blank" rel="noopener noreferrer" class="group relative sm:col-span-2 border-b border-black p-8 sm:p-12 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-center min-h-[240px]"> <a
<span class="text-sm font-bold uppercase tracking-widest mb-2 opacity-60 group-hover:opacity-80">AVQN.CH</span> href="https://avqn.ch"
<span class="text-3xl sm:text-4xl font-black uppercase leading-none tracking-tighter mb-4">Aussi Vite<br/>Que Nécessaire</span> target="_blank"
<p class="text-sm sm:text-base font-medium max-w-sm mt-auto border-l-2 border-current pl-3 opacity-90"> rel="noopener noreferrer"
class="group relative sm:col-span-2 border-b border-black p-8 sm:p-12 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-center min-h-[240px]"
>
<span
class="text-sm font-bold uppercase tracking-widest mb-2 opacity-60 group-hover:opacity-80"
>AVQN.CH</span
>
<span
class="text-3xl sm:text-4xl font-black uppercase leading-none tracking-tighter mb-4"
>Aussi Vite<br />Que Nécessaire</span
>
<p
class="text-sm sm:text-base font-medium max-w-sm mt-auto border-l-2 border-current pl-3 opacity-90"
>
Découvrez mes services en<br />AI Automation et n8n Découvrez mes services en<br />AI Automation et n8n
</p> </p>
<div class="absolute top-6 right-6"> <div class="absolute top-6 right-6">
@@ -75,7 +100,12 @@ const links = [
</a> </a>
<!-- Link Block 2: LinkedIn --> <!-- Link Block 2: LinkedIn -->
<a href="https://www.linkedin.com/in/emmbernard" target="_blank" rel="noopener noreferrer" class="group relative border-b sm:border-b-0 sm:border-r border-black p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"> <a
href="https://www.linkedin.com/in/emmbernard"
target="_blank"
rel="noopener noreferrer"
class="group relative border-b sm:border-b-0 sm:border-r border-black p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"
>
<div class="absolute top-6 right-6"> <div class="absolute top-6 right-6">
<span class="text-2xl font-light">↗</span> <span class="text-2xl font-light">↗</span>
</div> </div>
@@ -86,7 +116,12 @@ const links = [
</a> </a>
<!-- Link Block 3: YouTube --> <!-- Link Block 3: YouTube -->
<a href="https://www.youtube.com/@emmanuelflux" target="_blank" rel="noopener noreferrer" class="group relative p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"> <a
href="https://www.youtube.com/@emmanuelflux"
target="_blank"
rel="noopener noreferrer"
class="group relative p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"
>
<div class="absolute top-6 right-6"> <div class="absolute top-6 right-6">
<span class="text-2xl font-light">↗</span> <span class="text-2xl font-light">↗</span>
</div> </div>
@@ -97,11 +132,12 @@ const links = [
</a> </a>
<!-- Optional Filler / Deco Block (To complete grid if needed, or footer) --> <!-- Optional Filler / Deco Block (To complete grid if needed, or footer) -->
<div class="sm:col-span-2 border-t border-black bg-gray-50 p-6 flex items-center justify-between text-xs font-mono uppercase tracking-widest text-black/50"> <div
class="sm:col-span-2 border-t border-black bg-gray-50 p-6 flex items-center justify-between text-xs font-mono uppercase tracking-widest text-black/50"
>
<span>© {new Date().getFullYear()} Emmanuel Bernard</span> <span>© {new Date().getFullYear()} Emmanuel Bernard</span>
<span>Lausanne, CH</span> <span>Lausanne, CH</span>
</div> </div>
</div> </div>
</div> </div>
</main> </main>

93
src/styles/global.css
View File

@@ -1,7 +1,98 @@
@import "tailwindcss"; @import "tailwindcss";
@theme {
--font-sans: "General Sans", "Inter", system-ui, -apple-system, sans-serif;
--font-display: "Clash Display", "Inter", system-ui, -apple-system, sans-serif;
--color-primary-50: #FFE5EF;
--color-primary-100: #FFCCE0;
--color-primary-200: #FF99C1;
--color-primary-300: #FF66A2;
--color-primary-400: #FF5C8A;
--color-primary-500: #FF5C8A;
--color-primary-600: #FF2E6E;
--color-primary-700: #FF0052;
--color-primary-800: #CC0042;
--color-primary-900: #990032;
}
/* Fonts Setup */
@font-face {
font-family: 'General Sans';
src: url('https://cdn.avqn.ch/fonts/GeneralSans-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'General Sans';
src: url('https://cdn.avqn.ch/fonts/GeneralSans-Medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'General Sans';
src: url('https://cdn.avqn.ch/fonts/GeneralSans-Semibold.woff2') format('woff2');
font-weight: 600;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'General Sans';
src: url('https://cdn.avqn.ch/fonts/GeneralSans-Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Clash Display';
src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Clash Display';
src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Clash Display';
src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Semibold.woff2') format('woff2');
font-weight: 600;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Clash Display';
src: url('https://cdn.avqn.ch/fonts/ClashDisplay-Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
font-style: normal;
}
@layer base { @layer base {
body { body {
font-family: 'Inter', system-ui, -apple-system, sans-serif; font-family: var(--font-sans);
@apply bg-primary-50 text-gray-900 antialiased selection:bg-primary-500 selection:text-white;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
} }
} }