
<!DOCTYPE html>
<html
	lang="en">

	<head>

			<!-- Google Tag Manager -->
			<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
			new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
			j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
			'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
			})(window,document,'script','dataLayer','GTM-MK7B8B');</script>
	<!-- End Google Tag Manager -->

		<meta
			charset="UTF-8">
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0">

		<link
			rel="stylesheet"
			href="/assets/css/app.css?v=">
		<script
			defer
			src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

		<link
			rel="icon"
			href="/assets/images/svg/favicon.svg">
		<link
			rel="mask-icon"
			href="/assets/images/svg/favicon.svg"
			color="#000000">
		<link
			rel="apple-touch-icon"
			href="/assets/images/svg/favicon.svg">

		<link
			rel="preconnect"
			href="https://fonts.googleapis.com">
		<link
			rel="preconnect"
			href="https://fonts.gstatic.com"
			crossorigin>

		<link
			rel="preconnect"
			href="https://fonts.googleapis.com">
		<link
			rel="preconnect"
			href="https://fonts.gstatic.com"
			crossorigin>
		<link
			href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:wght@200;300;400;600;700&display=swap"
			rel="stylesheet">

				<script type="text/javascript">
			(function(c,l,a,r,i,t,y){
				c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
				t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
				y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
			})(window, document, "clarity", "script", "t1f3jturlt");
		</script>

	</head>

	<body
		class="en relative font-body text-base bg-white text-gray-700 " x-data="{ 'searchOverlayIsOpen': false, 'menuIsOpen': false }"
		@keydown.escape="searchOverlayIsOpen = false">

		<!-- Google Tag Manager (noscript) -->
		<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MK7B8B"
		height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
		<!-- End Google Tag Manager (noscript) -->

				<div
			id="page">
						
			<header
				class="relative bg-gradient-to-b to-white from-brandcream-200/25">
				<section
	class="flex justify-between items-center pt-0 md:pt-8 md:px-12">

		<div
		class="flex z-50 justify-center items-start px-4 pt-2 md:pt-0 md:px-0">

				<a
			href="/"
			class="w-40">
			<img
				src="/assets/images/svg/logo-blw.png"
				alt="Be Like Water" class="w-32 md:w-full">
		</a>

	</div>

	<nav
		class="relative justify-center items-center md:h-auto">
				<button
			@click="menuIsOpen = !menuIsOpen"
			:class="menuIsOpen ? 'open' : ''"
			class="flex mr-2 md:hidden focus:outline-none hamburger-menu text-brandblue-500">
			<div class="hamburger">
				<span class="block w-6 h-0.5 rounded-sm transition-all duration-200 ease-in-out bg-brandblue-500"></span>
				<span class="block w-6 h-0.5 rounded-sm transition-all duration-200 ease-in-out bg-brandblue-500"></span>
				<span class="block w-6 h-0.5 rounded-sm transition-all duration-200 ease-in-out bg-brandblue-500"></span>
			</div>
			<div class="cross">
				<span class="absolute w-0.5 h-0 rounded-sm transition-all duration-200 ease-in-out delay-500 bg-brandblue-500"></span>
				<span class="absolute w-0 h-0.5 rounded-sm transition-all duration-200 ease-in-out delay-300 bg-brandblue-500"></span>
			</div>
		</button>

		<ul
			:class="menuIsOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'"
			class="flex absolute right-0 top-20 flex-col justify-start p-4 mt-2 w-screen h-full max-h-full text-4xl font-extralight tracking-tighter text-center bg-white transition-all duration-500 ease-in-out transform md:font-light md:tracking-normal text-brandblue md:flex-row md:relative md:visible md:pointer-events-auto md:top-0 md:bg-transparent md:rounded-full md:p-0 md:mt-0 md:w-auto md:flex md:opacity-100 md:h-auto md:text-base"
			x-transition>
			<li
				class="opacity-0 transition-all duration-500 ease-out md:opacity-100"
				:class="menuIsOpen ? 'translate-y-0 opacity-100 delay-[100ms]' : 'translate-y-4 opacity-0 md:translate-y-0 md:opacity-100 md:delay-0'">
				<a
					href="/about"
					class="inline-block px-4 py-2 w-full md:py-0">About</a>
			</li>
			<li
				class="opacity-0 transition-all duration-500 ease-out md:opacity-100"
				:class="menuIsOpen ? 'translate-y-0 opacity-100 delay-[200ms]' : 'translate-y-4 opacity-0 md:translate-y-0 md:opacity-100 md:delay-0'">
				<a
					href="/work"
					class="inline-block px-4 py-2 w-full border-opacity-20 md:py-0 md:border-l border-brandcream-100 text-brandblue1">Work</a>
			</li>
									<li
				class="opacity-0 transition-all duration-500 ease-out md:opacity-100"
				:class="menuIsOpen ? 'translate-y-0 opacity-100 delay-[400ms]' : 'translate-y-4 opacity-0 md:translate-y-0 md:opacity-100 md:delay-0'">
				<a
					href="/contact"
					class="inline-block px-4 py-2 w-full border-opacity-20 md:py-0 md:border-l border-brandcream-100 text-brandblue1">Contact</a>
			</li>

		</ul>
	</nav>

</section>
			</header>

						<div
				class="transition-all duration-500 ease-in-out"
				:class="{'opacity-0 hidden': menuIsOpen, 'opacity-100 h-full': !menuIsOpen}"
				x-transition:enter="transition ease-in-out duration-1000"
				x-transition:enter-start="opacity-0"
				x-transition:enter-end="opacity-100"
				x-transition:leave="transition ease-in-out duration-1000"
				x-transition:leave-start="opacity-100"
				x-transition:leave-end="opacity-0">

				<main
					class="content"
					id="main">
										
	<div
		class="container flex flex-wrap justify-center mx-auto mt-0 lg:space-x-16 lg:mt-32">

		<p
			class="px-4 mx-auto mt-20 max-w-4xl text-4xl tracking-normal leading-10 text-center md:px-0 md:tracking-tight lg:text-8xl font-display lg:leading-24"
			:class="{'hidden': menuIsOpen}">
			<span
				class="block m-0 text-sm tracking-normal text-center md:text-lg font-body text-brandcream-600">
				Web design, development, and strategy.
			</span>
			Keeping organizations<br>
			<span
				class="text-transparent bg-clip-text bg-gradient-to-br from-venice-blue-500 to-brandblue-500 via-brandblue-200">current</span>
			<!-- / -->
			on the web<br>since 2008.</p>

	</div>
	<!-- / -->

		<section
		class="container px-4 mx-auto mt-16 lg:mt-32">
				<h2
			class="mb-8 text-2xl text-center md:text-3xl font-display">Some work I'm proud of:</h2>

		<div
			class="grid grid-cols-1 gap-8 sm:grid-cols-2 xl:grid-cols-3">
											<article
					class="flex relative flex-col h-full transition-all duration-300 transform drop-shadow-3xl md:drop-shadow hover:drop-shadow-3xl hover:scale-105 hover:-translate-y-2 group work-article">
					<a
						href="https://belikewater.ca/work/lung-cancer-canada/" class="overflow-hidden bg-transparent rounded-t-lg no-effect">
													<img
								src="https://belikewater.ca/assets/images/_transforms/_720xAUTO_fit_center-center_100_none/94/Screenshot-2024-12-29-at-12.47.15-PM.WebP" alt="Lung Cancer Canada" class="object-cover w-full transition-all duration-700 ease-out delay-100 transform origin-center aspect-video group-hover:scale-110 group-hover:saturate-125 group-hover:brightness-125">
											</a>

					<div
						class="flex-1 p-6 bg-white rounded-b-lg">
						<h2
							class="mt-0 text-3xl md:text-4xl">
							<a
								href="https://belikewater.ca/work/lung-cancer-canada/" class="bg-transparent title">
								Lung Cancer Canada
							</a>
						</h2>
													<div
								class="prose-p:text-base prose-p:mt-2 prose-p:leading-normal">
								<p>The flagship website for Lung Cancer Canada</p>
							</div>
							<!-- / -->
											</div>
				</article>
											<article
					class="flex relative flex-col h-full transition-all duration-300 transform drop-shadow-3xl md:drop-shadow hover:drop-shadow-3xl hover:scale-105 hover:-translate-y-2 group work-article">
					<a
						href="https://belikewater.ca/work/the-canadian-paediatric-society/" class="overflow-hidden bg-transparent rounded-t-lg no-effect">
													<img
								src="https://belikewater.ca/assets/images/_transforms/_720xAUTO_fit_center-center_100_none/66/Screenshot-2024-12-29-at-12.33.08-PM.WebP" alt="The Canadian Paediatric Society" class="object-cover w-full transition-all duration-700 ease-out delay-100 transform origin-center aspect-video group-hover:scale-110 group-hover:saturate-125 group-hover:brightness-125">
											</a>

					<div
						class="flex-1 p-6 bg-white rounded-b-lg">
						<h2
							class="mt-0 text-3xl md:text-4xl">
							<a
								href="https://belikewater.ca/work/the-canadian-paediatric-society/" class="bg-transparent title">
								The Canadian Paediatric Society
							</a>
						</h2>
													<div
								class="prose-p:text-base prose-p:mt-2 prose-p:leading-normal">
								<p>The voice of more than 3,600 Canadian paediatricians.</p>
							</div>
							<!-- / -->
											</div>
				</article>
											<article
					class="flex relative flex-col h-full transition-all duration-300 transform drop-shadow-3xl md:drop-shadow hover:drop-shadow-3xl hover:scale-105 hover:-translate-y-2 group work-article">
					<a
						href="https://belikewater.ca/work/the-monitor/" class="overflow-hidden bg-transparent rounded-t-lg no-effect">
													<img
								src="https://belikewater.ca/assets/images/_transforms/_720xAUTO_fit_center-center_100_none/103/Screenshot-2024-12-29-at-12.32.04-PM.WebP" alt="The Monitor" class="object-cover w-full transition-all duration-700 ease-out delay-100 transform origin-center aspect-video group-hover:scale-110 group-hover:saturate-125 group-hover:brightness-125">
											</a>

					<div
						class="flex-1 p-6 bg-white rounded-b-lg">
						<h2
							class="mt-0 text-3xl md:text-4xl">
							<a
								href="https://belikewater.ca/work/the-monitor/" class="bg-transparent title">
								The Monitor
							</a>
						</h2>
													<div
								class="prose-p:text-base prose-p:mt-2 prose-p:leading-normal">
								<p>Progressive news, views, and ideas from the Canadian Centre for Policy Alternatives.</p>
							</div>
							<!-- / -->
											</div>
				</article>
					</div>

<article>
		<p
			class="my-16 text-lg text-center font-display1">
			<a
				href="/work"
				class="bg-transparent border-b-2 text-brandblue border-brandblue-300">See more successful projects</a>
		</p>
</article>
	</section>

	
				</main>

				<footer
					class="bg-gradient-to-b from-brandblue-500 to-brandblue-600 via-brandblue-500">
						<div
	class="mt-16 bg-white ondebox">
	<svg
		class="onde"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		viewbox="0 24 150 28"
		preserveaspectratio="none"
		shape-rendering="auto">
		<defs>
			<path
				id="onda"
				d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352Z"/>
		</defs>
		<g
			class="parallaxonde">
			<use
				xlink:href="#onda"
				x="48"
				y="0"
				fill="rgba(6, 160, 207, 0.2)"/>
			<use
				xlink:href="#onda"
				x="48"
				y="3"
				fill="rgba(6, 160, 207, 0.4)"/>
			<use
				xlink:href="#onda"
				x="48"
				y="5"
				fill="rgba(4, 99, 128, 0.8)"/>
			<use
				xlink:href="#onda"
				x="48"
				y="7"
				fill="rgba(4, 99, 128, 1)"/>
					</g>
	</svg>
</div>

<div
	class="container grid gap-16 p-4 mx-auto w-full text-white lg:grid-cols-3 md:py-16 prose-p:text-sm prose-a:text-sm">
		<section
		class="space-y-4">
		<h3
			class="text-brandcream-50">Reach me</h3>
		<p
			class="">Have a question or want to discuss a project?
			<a
				href="/contact"
				class="underline">Let's talk.</a>
		</p>

		<a
			href="https://www.linkedin.com/in/mikemella/"
			class="flex items-center text-white transition-colors hover:text-brandcream-50">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="mr-2 w-6 h-6"
				fill="currentColor"
				viewbox="0 0 24 24">
				<path
					d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
			</svg>
			Be Like Water on LinkedIn.
		</a>

	</section>

		<section
		class="space-y-4">
		<h3
			class="text-brandcream-50">Stay current</h3>
		<p
			class="mt-2 leading-normal">
			Quench your web dev thirst with
			<em>Droplets</em>
			: Easily absorbed tips for nonprofits. Sent to your inbox periodically from Be Like Water.
		</p>
		<form
			class="flex flex-col items-start max-w-lg"
			action="//belikewater.us2.list-manage.com/subscribe/post?u=21dae731b86efe53216dd1261&amp;id=cd99452793&SIGNUP=FooterStayCurrent"
			method="post"
			id="mc-embedded-subscribe-form"
			name="mc-embedded-subscribe-form"
			class="validate"
			target="_blank"
			novalidate>
			<div
				class="flex flex-row mt-3 w-full">
				<input
					type="email"
					value=""
					name="EMAIL"
					class="block px-4 py-2 w-full text-sm font-medium placeholder-gray-400 text-gray-800 bg-white rounded-full rounded-r-none border border-gray-300 font-spline focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-600/50 disabled:opacity-50 required email"
					id="mce-EMAIL"
					placeholder="Enter your email..."
					required="">
				<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
				<div style="position: absolute; left: -5000px;"><input type="text" name="b_21dae731b86efe53216dd1261_cd99452793" tabindex="-1" value=""></div>
				<button
					type="submit"
					name="subscribe"
					id="mc-embedded-subscribe"
					class="inline-flex justify-center items-center px-6 py-2.5 w-full text-sm text-center text-white rounded-full rounded-l-none border-2 border-l-0 duration-200 cursor-pointer group border-brandblue-100 nline-flex hover:bg-brandblue-400 hover:border-brandblue-400 hover:text-white focus:outline-none lg:w-auto focus-visible:outline-brandblue focus-visible:ring-brandblue">
					<div
						style="position: relative"></div>
					Subscribe
										<svg
						xmlns="http://www.w3.org/2000/svg"
						viewbox="0 0 20 20"
						fill="currentColor"
						aria-hidden="true"
						class="ml-2 w-4 h-auto transition-all duration-300 group-hover:translate-x-1">
						<path
							fill-rule="evenodd"
							d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
							clip-rule="evenodd"></path>
					</svg>
				</button>
			</div>
		</form>
	</section>

		<section
		class="space-y-4">
		<p
			class="!text-xs tracking-widest lg:-mb-2 mb-0 text-gray-400 uppercase">what do you mean</p>
		<h3
			class=" !mt-0 text-brandcream-50">Be Like Water?</h3>

		<div
			class="space-y-6">

			<blockquote
				class="text-xl font-extralight">
				"Whatever is fluid, soft, and yielding will overcome whatever is rigid and hard. The best way to live is to <span class="text-brandblue-50">be like water.</span>"
				<footer
					class="mt-2 mr-8 text-sm text-right">- Lao Tzu</footer>
			</blockquote>

					</div>
	</section>

</div>

<p
	class="pb-16 text-xs text-center text-brandcream-50">Copyright ©
	2026
	Be Like Water Media, Inc.</p>
				</footer>

			</div>
			<!-- / -->

		</div>
		<!-- /#page -->
		<script
			src="/assets/js/app.js"></script>

		<script
			src="//instant.page/5.1.1"
			type="module"
			integrity="sha384-MWfCL6g1OTGsbSwfuMHc8+8J2u71/LA8dzlIN3ycajckxuZZmF+DNjdm7O6H3PSq"></script>


				<script
			src="https://www.google.com/recaptcha/api.js"
			async
			defer></script>

	</body>

</html>
