<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jérémie Bédard-Wien - Personal Site</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Using a system font stack for a native, fast-loading feel like the reference site. */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Make headings bold but use the same font as the body for a flat hierarchy */
h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 600; /* semibold */
}
hr {
border: 0;
height: 1px;
background-color: #e5e7eb; /* cool-gray-200 */
margin: 3rem 0;
}
.mono-font {
font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
</style>
</head>
<body class="bg-white text-gray-800">
<div class="max-w-2xl mx-auto px-6 py-12 md:py-20">
<main>
<!-- Header section is now integrated into the main flow -->
<section class="mb-12">
<h1 class="text-2xl text-gray-900">Jérémie Bédard-Wien.</h1>
<div class="mt-6 text-base leading-relaxed text-gray-700 space-y-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</p>
<p>
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
</p>
</div>
</section>
<hr />
<!-- Blog Section -->
<section class="mb-12">
<h2 class="text-xl text-gray-900">Recent Musings</h2>
<div class="space-y-4 mt-6">
<!-- Blog Post 1 -->
<article class="flex justify-between items-baseline">
<h3 class="text-base"><a href="#" class="text-gray-800 hover:underline">The Quiet Power of CSS Container Queries</a></h3>
<p class="text-sm text-gray-500 text-right pl-4 mono-font shrink-0">Sep 12, 2025</p>
</article>
<!-- Blog Post 2 -->
<article class="flex justify-between items-baseline">
<h3 class="text-base"><a href="#" class="text-gray-800 hover:underline">Navigating the AI Hype Cycle as a Developer</a></h3>
<p class="text-sm text-gray-500 text-right pl-4 mono-font shrink-0">Aug 28, 2025</p>
</article>
<!-- Blog Post 3 -->
<article class="flex justify-between items-baseline">
<h3 class="text-base"><a href="#" class="text-gray-800 hover:underline">Lessons From a Decade in Software</a></h3>
<p class="text-sm text-gray-500 text-right pl-4 mono-font shrink-0">Jul 15, 2025</p>
</article>
</div>
</section>
<hr />
<!-- Portfolio Section -->
<section>
<h2 class="text-xl text-gray-900">My Work</h2>
<div class="space-y-4 mt-6">
<!-- Project 1 -->
<article class="flex justify-between items-baseline">
<h3 class="text-base"><a href="#" class="text-gray-800 hover:underline">ProseKit</a></h3>
<p class="text-sm text-gray-500 text-right pl-4 mono-font">Static Site Generator in Go</p>
</article>
<!-- Project 2 -->
<article class="flex justify-between items-baseline">
<h3 class="text-base"><a href="#" class="text-gray-800 hover:underline">Tab Sorter</a></h3>
<p class="text-sm text-gray-500 text-right pl-4 mono-font">Browser Extension</p>
</article>
<!-- Project 3 -->
<article class="flex justify-between items-baseline">
<h3 class="text-base"><a href="#" class="text-gray-800 hover:underline">D3.js Contributions</a></h3>
<p class="text-sm text-gray-500 text-right pl-4 mono-font">Open Source</p>
</article>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-sm text-gray-500 mt-16 pt-8 border-t border-gray-200">
<div class="flex items-center space-x-4">
<a href="mailto:bedardwien@gmail.com" class="hover:underline hover:text-gray-800">Email</a>
<a href="https://linkedin.com" target="_blank" class="hover:underline hover:text-gray-800">LinkedIn</a>
<a href="https://twitter.com" target="_blank" class="hover:underline hover:text-gray-800">X</a>
<a href="#" target="_blank" class="hover:underline hover:text-gray-800">Substack</a>
</div>
<p class="mt-4 text-xs text-gray-400">© 2025 Jérémie Bédard-Wien</p>
</footer>
</div>
</body>
</html>