SEO, removed me.img, some style changes
This commit is contained in:
Hug Tao
parent
f4a925ace3
commit
5a76f7f489
5 changed files with 204 additions and 48 deletions
BIN
public/og-image.jpg
Normal file
BIN
public/og-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
|
|
@ -72,7 +72,7 @@
|
|||
vertexShader,
|
||||
fragmentShader,
|
||||
uniforms: {
|
||||
uTime: { value: Math.random() * 128 },
|
||||
uTime: { value: 0 },
|
||||
uNoiseTexture: { value: noiseTex },
|
||||
uNoiseScale: { value: 0.01 },
|
||||
uAmplitude: { value: 3.0 },
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ const { title ="Title", description = "This is your description", tags=["Example
|
|||
---
|
||||
|
||||
<div class="xl:p-3 lg:p-2 md:p-4 p-4 rounded-lg">
|
||||
<a :href="item.link" class="block">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold">{title}</h2>
|
||||
<p class="mt-2">{description}</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex gap-2 flex-wrap ">
|
||||
{tags.map((item: string) => (
|
||||
|
|
|
|||
|
|
@ -1,20 +1,118 @@
|
|||
---
|
||||
import '@fontsource-variable/sora';
|
||||
import "@fontsource-variable/sora";
|
||||
import "@phosphor-icons/web/regular";
|
||||
import "@phosphor-icons/web/bold";
|
||||
|
||||
const isProd = import.meta.env.PROD;
|
||||
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
{isProd && <script defer src="https://umami.merli.one/script.js" data-website-id="418105c9-7c18-4ee4-b268-00167070754a"></script>}
|
||||
<title>Oskar Wolnarek</title>
|
||||
{
|
||||
isProd && (
|
||||
<script
|
||||
defer
|
||||
src="https://umami.merli.one/script.js"
|
||||
data-website-id="418105c9-7c18-4ee4-b268-00167070754a"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>Oskar Wolnarek – Ad Tech & Digitale Kampagnen</title>
|
||||
<meta
|
||||
name="title"
|
||||
content="Oskar Wolnarek | Freelancer für Ad Tech & Digitale Kampagnen"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="Dein Experte für Ad Tech & digitale Kampagnen. Ob Automatisierung, Datenvisualisierung oder performante Websites: Ich helfe dir, das Beste aus deiner digitalen Strategie rauszuholen."
|
||||
/>
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://www.merli.one/" />
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Oskar Wolnarek | Freelancer für Ad Tech & Digitale Kampagnen"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Dein Experte für Ad Tech & digitale Kampagnen. Ob Automatisierung, Datenvisualisierung oder performante Websites: Ich helfe dir, das Beste aus deiner digitalen Strategie rauszuholen."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://www.merli.one/og-image.jpg"
|
||||
/>
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://www.merli.one/" />
|
||||
<meta
|
||||
property="twitter:title"
|
||||
content="Oskar Wolnarek | Freelancer für Ad Tech & Digitale Kampagnen"
|
||||
/>
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="Dein Experte für Ad Tech & digitale Kampagnen. Ob Automatisierung, Datenvisualisierung oder performante Websites: Ich helfe dir, das Beste aus deiner digitalen Strategie rauszuholen."
|
||||
/>
|
||||
<meta
|
||||
property="twitter:image"
|
||||
content="https://www.merli.one/og-image.jpg"
|
||||
/>
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://www.merli.one/" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
|
||||
<!--- Not implemented
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
-->
|
||||
|
||||
<!-- Structured Data (JSON-LD) -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Person",
|
||||
"name": "Oskar Wolnarek",
|
||||
"jobTitle": "Consultant für Ad Tech & Digitale Kampagnen",
|
||||
"url": "https://www.merli.one/",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Nordstraße 5",
|
||||
"addressLocality": "Wülfrath",
|
||||
"postalCode": "42489",
|
||||
"addressCountry": "Deutschland"
|
||||
},
|
||||
"email": "hello@wolnarek.de",
|
||||
"telephone": "+4915679601116",
|
||||
"description": "Oskar Wolnarek | Freelancer für Ad Tech & Digitale Kampagnen | Dein Experte für Ad Tech & digitale Kampagnen. Ob Automatisierung, Datenvisualisierung oder performante Websites."
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Viewport and Charset -->
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- Theme Color -->
|
||||
<meta name="theme-color" content="#1e293b" />
|
||||
|
||||
<!-- Additional SEO Tags -->
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Ad Tech, Digitale Kampagnen, Technische Beratung, Automatisierung, Datenvisualisierung, Frontend-Entwicklung, Programmatic Advertising, Oskar Wolnarek, Freelancer"
|
||||
/>
|
||||
<meta name="author" content="Oskar Wolnarek" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
|
|
@ -22,7 +120,6 @@ const isProd = import.meta.env.PROD;
|
|||
</html>
|
||||
|
||||
<style>
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import Layout from "../layouts/Layout.astro";
|
|||
import Services from "../components/Services.astro";
|
||||
// import Contact from "../components/Contact.svelte"
|
||||
import Hero from "../components/Hero.astro";
|
||||
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
|
@ -40,7 +39,7 @@ import Hero from "../components/Hero.astro";
|
|||
<div class="flex items-center space-x-3">
|
||||
<a
|
||||
class="text-sm flex items-center space-x-2 p-1 sm:p-0"
|
||||
href="https://wa.me/4915679601116?text=Guten%20Tag%2C%20ich%20bin%20interessiert%20an%20einer%20Zusammenarbeit%20und%20würde%20mich%20freuen%2C%20mehr%20darüber%20zu%20erfahren."
|
||||
href="https://wa.me/4915679601116?text=%20Hi%2C%20ich%20bin%20interessiert%20an%20einer%20Zusammenarbeit%20und%20würde%20mich%20freuen%2C%20mehr%20zu%20erfahren."
|
||||
target="_blank"
|
||||
>
|
||||
<i class="ph ph-whatsapp-logo sm:text-xl text-2xl"></i>
|
||||
|
|
@ -83,7 +82,7 @@ import Hero from "../components/Hero.astro";
|
|||
class="sm:text-2xl text-lg mt-12 leading-relaxed font-normal"
|
||||
>
|
||||
<span
|
||||
class="bg-white/50 px-2 box-decoration-clone rounded-md"
|
||||
class="bg-white/50 backdrop-blur-md px-2 box-decoration-clone rounded-md"
|
||||
>
|
||||
In der heutigen Welt entscheiden immer mehr
|
||||
technologische Ansätze über den Erfolg von
|
||||
|
|
@ -186,7 +185,10 @@ import Hero from "../components/Hero.astro";
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Contact" class="container mx-auto py-16 p-1 sm:px-6 my-36 relative w-full 2xl:w-7/12 xl:w-9/12 md:11/12 max-w-5xl">
|
||||
<div
|
||||
id="Contact"
|
||||
class="container mx-auto py-16 p-1 sm:px-6 my-36 mt-12 relative w-full 2xl:w-7/12 xl:w-9/12 md:11/12 max-w-5xl"
|
||||
>
|
||||
<!-- Grid Layout for 2 Columns -->
|
||||
<div class="gap-8 items-center relative">
|
||||
<!-- About Me Section -->
|
||||
|
|
@ -194,7 +196,9 @@ import Hero from "../components/Hero.astro";
|
|||
class="relative bg-white border-slate-300 border rounded-lg shadow-lg shadow-slate-400/50 md:p-16 p-8 pt-24"
|
||||
>
|
||||
<!-- Image Section -->
|
||||
<div class="flex justify-center items-center absolute -top-24 left-1/2 transform -translate-x-1/2">
|
||||
<div
|
||||
class="flex justify-center items-center absolute -top-24 left-1/2 transform -translate-x-1/2 hidden"
|
||||
>
|
||||
<img
|
||||
src="me.jpg"
|
||||
alt="Portrait of Oskar Wolnarek"
|
||||
|
|
@ -202,7 +206,7 @@ import Hero from "../components/Hero.astro";
|
|||
/>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl font-black mb-6">Das bin Ich</h1>
|
||||
<h1 class="text-3xl font-black mb-6">Über mich</h1>
|
||||
<div class="text-left font-medium">
|
||||
<p class="text-lg leading-relaxed">
|
||||
Ich bin Oskar Wolnarek, ein erfahrener Senior
|
||||
|
|
@ -232,16 +236,24 @@ import Hero from "../components/Hero.astro";
|
|||
</div>
|
||||
|
||||
<!-- Contact Information in a Row -->
|
||||
<div class="mt-8 flex flex-col lg:flex-row gap-6 lg:gap-12">
|
||||
<div
|
||||
class="mt-8 flex flex-col lg:flex-row gap-6 lg:gap-12 "
|
||||
aria-label="Kontaktmöglichkeiten"
|
||||
>
|
||||
<!-- Phone -->
|
||||
<div class="flex flex-col items-start">
|
||||
<h3 class="font-bold text-sm mb-2 flex items-center space-x-2">
|
||||
<i class="ph ph-phone text-xl"></i>
|
||||
<h3
|
||||
class="font-bold text-sm mb-2 flex items-center space-x-2"
|
||||
>
|
||||
<i
|
||||
class="ph ph-phone text-xl"
|
||||
aria-hidden="true"></i>
|
||||
<span>Per Telefon</span>
|
||||
</h3>
|
||||
<a
|
||||
class="text-lg p-1 sm:p-0 underline"
|
||||
class="text-lg p-1 sm:p-0 underline decoration-2 hover:text-rose-500"
|
||||
href="tel:+4915679601116"
|
||||
aria-label="Telefonnummer: +49 15679 601116"
|
||||
>
|
||||
+49 15679 601116
|
||||
</a>
|
||||
|
|
@ -249,13 +261,18 @@ import Hero from "../components/Hero.astro";
|
|||
|
||||
<!-- Mail -->
|
||||
<div class="flex flex-col items-start">
|
||||
<h3 class="font-bold text-sm mb-2 flex items-center space-x-2">
|
||||
<i class="ph ph-envelope text-xl"></i>
|
||||
<h3
|
||||
class="font-bold text-sm mb-2 flex items-center space-x-2"
|
||||
>
|
||||
<i
|
||||
class="ph ph-envelope text-xl"
|
||||
aria-hidden="true"></i>
|
||||
<span>Per Mail</span>
|
||||
</h3>
|
||||
<a
|
||||
class="text-lg p-1 sm:p-0 underline"
|
||||
class="text-lg p-1 sm:p-0 underline decoration-2 hover:text-rose-500"
|
||||
href="mailto:hello@wolnarek.de"
|
||||
aria-label="E-Mail: hello@wolnarek.de"
|
||||
>
|
||||
hello@wolnarek.de
|
||||
</a>
|
||||
|
|
@ -263,29 +280,41 @@ import Hero from "../components/Hero.astro";
|
|||
|
||||
<!-- WhatsApp -->
|
||||
<div class="flex flex-col items-start">
|
||||
<h3 class="font-bold text-sm mb-2 flex items-center space-x-2">
|
||||
<i class="ph ph-whatsapp-logo text-xl"></i>
|
||||
<h3
|
||||
class="font-bold text-sm mb-2 flex items-center space-x-2"
|
||||
>
|
||||
<i
|
||||
class="ph ph-whatsapp-logo text-xl"
|
||||
aria-hidden="true"></i>
|
||||
<span>WhatsApp</span>
|
||||
</h3>
|
||||
<a
|
||||
class="text-lg p-1 sm:p-0 underline"
|
||||
class="text-lg p-1 sm:p-0 underline decoration-2 hover:text-rose-500"
|
||||
href="https://wa.me/4915679601116?text=Guten%20Tag%2C%20ich%20bin%20interessiert%20an%20einer%20Zusammenarbeit%20und%20würde%20mich%20freuen%2C%20mehr%20darüber%20zu%20erfahren."
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="WhatsApp Nachricht schreiben"
|
||||
>
|
||||
Nachricht schreiben
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<div class="flex flex-col items-start">
|
||||
<h3 class="font-bold text-sm mb-2 flex items-center space-x-2">
|
||||
<i class="ph ph-linkedin-logo text-xl"></i>
|
||||
<!-- LinkedIn (Hidden) -->
|
||||
<div class="flex flex-col items-start hidden">
|
||||
<h3
|
||||
class="font-bold text-sm mb-2 flex items-center space-x-2"
|
||||
>
|
||||
<i
|
||||
class="ph ph-linkedin-logo text-xl"
|
||||
aria-hidden="true"></i>
|
||||
<span>LinkedIn</span>
|
||||
</h3>
|
||||
<a
|
||||
class="text-lg p-1 sm:p-0 underline"
|
||||
href="https://www.linkedin.com/in/wolnarek"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn Profil von Oskar Wolnarek"
|
||||
>
|
||||
Connect
|
||||
</a>
|
||||
|
|
@ -297,33 +326,63 @@ import Hero from "../components/Hero.astro";
|
|||
|
||||
<footer
|
||||
class="bg-gradient-to-tl from-slate-900 to-slate-800 text-white py-6"
|
||||
aria-label="Footer mit Kontaktinformationen und Adresse"
|
||||
>
|
||||
<div
|
||||
class="container mx-auto px-4 flex flex-wrap flex-col lg:flex-row justify-center lg:items-center lg:text-sm items-start text-md gap-2 lg:gap-4"
|
||||
>
|
||||
<!-- Name -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="font-black">Oskar Wolnarek</span>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="ph ph-map-pin"></i>
|
||||
<i class="ph ph-map-pin" aria-hidden="true"></i>
|
||||
<span>Nordstraße 5, 42489 Wülfrath, Deutschland</span>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="ph ph-phone"></i>
|
||||
<span>+49 15679 601116</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="ph ph-envelope"></i>
|
||||
<span>hello@wolnarek.de</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="ph ph-globe"></i>
|
||||
<a href="https://www.wolnarek.de" class="hover:underline"
|
||||
>www.wolnarek.de</a
|
||||
<i class="ph ph-phone" aria-hidden="true"></i>
|
||||
<a
|
||||
href="tel:+4915679601116"
|
||||
class="hover:underline"
|
||||
aria-label="Telefonnummer: +49 15679 601116"
|
||||
>
|
||||
+49 15679 601116
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="ph ph-envelope" aria-hidden="true"></i>
|
||||
<a
|
||||
href="mailto:hello@wolnarek.de"
|
||||
class="hover:underline"
|
||||
aria-label="E-Mail: hello@wolnarek.de"
|
||||
>
|
||||
hello@wolnarek.de
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="ph ph-globe" aria-hidden="true"></i>
|
||||
<a
|
||||
href="https://www.merli.one"
|
||||
class="hover:underline"
|
||||
aria-label="Website: www.merli.one"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
www.merli.one
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- VAT ID (Hidden) -->
|
||||
<div class="flex items-center space-x-2 hidden">
|
||||
<i class="ph ph-briefcase"></i>
|
||||
<i class="ph ph-briefcase" aria-hidden="true"></i>
|
||||
<span>USt-IdNr: DE123456789</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue