src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Personal Website for Marcel Michau - I just filled this in for better SEO :)"
/>
<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" />
<link rel="manifest" href="site.webmanifest" />
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<title>Marcel Michau - I write code & stuff</title>
<link rel="preload" href="dist/main.css" as="style" />
<link href="dist/main.css" rel="stylesheet" />
</head>
<body class="text-white">
<div class="bg-gray-900">
<header
class="h-screen bg-gray-800 flex justify-center items-center text-center"
>
<div class="relative isolate overflow-hidden bg-gray-800">
<svg
class="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
aria-hidden="true"
>
<defs>
<pattern
id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
width="200"
height="200"
x="50%"
y="-1"
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<svg x="50%" y="-1" class="overflow-visible fill-gray-900/50">
<path
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"
/>
</svg>
<rect
width="100%"
height="100%"
stroke-width="0"
fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
/>
</svg>
<div
class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
aria-hidden="true"
>
<div
class="background-polygon aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-30"
></div>
</div>
<div class="h-screen w-screen grid items-center">
<div class="mx-auto">
<div class="flex justify-center">
<img
src="images/profile-small.jpg"
alt="Your Image"
class="w-60 h-60 rounded-full ring-4 ring-blue-400"
/>
</div>
<h2
class="text-5xl text-center text-blue-100 font-semibold pt-8 pb-8"
>
Marcel Michau
</h2>
<p
class="text-center font-mono mx-auto overflow-hidden animate-typing whitespace-nowrap border-r-2"
>
<span class="text-white">console</span
><span class="text-blue-200">.</span
><span class="text-pink-300">log</span>(<span
><span class="text-blue-200">"</span
><span class="text-green-300">I write code & stuff</span
><span class="text-blue-200">"</span></span
>)<span class="text-blue-200">;</span>
</p>
<div class="flex justify-center pt-8 pb-8">
<span class="text-4xl mx-5">
<a
href="https://github.com/MarcelMichau"
target="_blank"
class="fill-blue-400 hover:fill-blue-200"
><svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 496 512"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
/></svg
></a>
</span>
<span class="text-4xl mx-5">
<a
href="https://twitter.com/MarcelMichau"
target="_blank"
class="fill-blue-400 hover:fill-blue-200"
><svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 512 512"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
/></svg
></a>
</span>
<span class="text-4xl mx-5">
<a
href="https://blog.marcelmichau.dev"
target="_blank"
class="fill-blue-400 hover:fill-blue-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 512 512"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
/>
</svg>
</a>
</span>
</div>
</div>
</div>
</div>
</header>
<main class="flex justify-center py-24">
<div class="text-center space-y-6">
<div class="h-screen grid items-center">
<div class="space-y-6">
<h1 class="text-3xl font-bold">
This is my website. No one else's.
</h1>
<h2 class="text-xl">Look how minimal it is.</h2>
</div>
</div>
<div class="space-y-6">
<h2 class="text-xl font-semibold">It's built using:</h2>
<ul>
<li class="text-blue-400">
<a
class="hover:underline"
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
>Good ol' vanilla HTML</a
>
</li>
<li class="text-blue-400">
<a class="hover:underline" href="https://tailwindcss.com/"
>Tailwind CSS</a
>
</li>
</ul>
<h2 class="text-xl font-semibold">With some help from:</h2>
<ul>
<li class="text-blue-400">
<a
class="hover:underline"
href="https://github.com/features/actions"
>GitHub Actions</a
>
</li>
<li class="text-blue-400">
<a class="hover:underline" href="https://fontawesome.com/"
>Font Awesome</a
>
</li>
<li class="text-blue-400">
<a href="https://getwaves.io/">getwaves.io</a>
</li>
</ul>
<h2 class="text-xl font-semibold">Deployed to:</h2>
<ul>
<li class="text-blue-400">
<a class="hover:underline" href="https://pages.cloudflare.com/"
>Cloudflare Pages</a
>
</li>
</ul>
<h2 class="text-xl font-semibold">And code hosted on:</h2>
<ul>
<li class="text-blue-400">
<a
class="hover:underline"
href="https://github.com/MarcelMichau/home-page"
>GitHub</a
>
</li>
</ul>
<h2 class="text-xl font-semibold">It is intended to be:</h2>
<ul class="space-y-2">
<li>Fast 🐌</li>
<li>Agile 🐢</li>
<li>Scalable ⚖️</li>
<li>Cloud-native 🌧️</li>
<li>Distributed 🎊</li>
<li>Resilient 🔨</li>
<li>Asynchronous ⏲</li>
<li>Sustainable 🌲</li>
<li>Privacy-focused 🔒</li>
<li>Enterprise-ready 🏢</li>
<li>Containerized 📦</li>
<li>Built on Microservices 🔍</li>
<li>Powered by Machine Learning 🤖</li>
<li>Blockchain ₿</li>
<li>Something about Artificial Intelligence 💡</li>
<li>Gluten-free 🍕</li>
<li>
Filled with buzz words so that search engines pick this up 😁
</li>
</ul>
</div>
</div>
</main>
<svg
class="-mb-2.5 fill-blue-900"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1440 320"
>
<path
fillOpacity="1"
d="M0,192L48,192C96,192,192,192,288,160C384,128,480,64,576,80C672,96,768,192,864,208C960,224,1056,160,1152,154.7C1248,149,1344,203,1392,229.3L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
></path>
</svg>
<footer class="bg-blue-900 flex justify-center pt-4 pb-8">
<div>
<div class="flex justify-center pt-4 pb-4">
<img
src="images/mm-logo-small.png"
alt="MM Logo"
class="w-10 h-10"
/>
</div>
<div>Marcel Michau © 2024</div>
</div>
</footer>
</div>
</body>
</html>