<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Donovan Myers - Website designer/developer, problem solver, collaborator</title>
		<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=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
		<!-- replace with minimal -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
		<!-- end replace -->
		<script src="https://kit.fontawesome.com/da9819b98f.js" crossorigin="anonymous"></script>
		
		<link href="css/dist/lity.min.css" rel="stylesheet">
		<style type="text/css">
			body {
				font-family: 'Poppins', sans-serif;
				font-weight: 300;
				color: #333;
			}
			
			a {
				font-weight: 400;
				color: #1a49b7;
			}
			
			.text-primary {
				color: #4a5d88 !important;
			}
			
			.text-bg-primary {
				color: #fff;
				background-color: #4a5d88 !important;
			}
			
			.text-bg-primary a,
			.text-bg-dark a:not(.btn) {
				color: rgba(255,255,255,.8);
			}
			
			.text-bg-primary a:hover,
			.text-bg-dark a:hover:not(.btn) {
				color: #fff;
			}
			
			.text-bg-secondary {
				color: #333 !important;
				background-color: rgba(26, 73, 183, .1) !important;
			}
			
			.img-logo {
				max-width: 200px;
			}
			
			.label {
				font-weight: 600;
			}
			
			.text-bg-dark .label {
				color: #a6bdf2 !important;
			}
			
			h1 {
				font-weight: 600;
				letter-spacing: -1px;
			}
			
			mark {
				padding-top: 0;
				padding-bottom: 0;
				background-color: rgba(74, 93, 136,.1);
				background-color: rgba(26, 73, 183, .1);
			}
			
			.intro {
				background: linear-gradient(rgba(26, 73, 183, .2), #fff 25%)
			}
			
			.img-headshot {
				position: absolute;
				top: 110px;
				max-width: 150px;
				border: 4px solid #4a5d88;
				outline: 4px solid #fff;
			}
			
			@media(min-width: 992px) {
				p {
					font-size: 1.125rem;
					line-height: 1.65;
				}
				
				p.lead {
					font-size: 1.375rem;
					line-height: 1.4;
				}
			}
		</style>
	</head>
	<body>
		<header class="text-bg-primary py-3">
			<div class="container my-3">
				<div class="row align-items-center">
					<div class="col-6 col-md-4 col-lg-2">
						<img src="img/dm-white.svg" class="img-logo">
					</div>
					<div class="col-md-3 offset-md-1 col-lg-2 offset-lg-3 d-none d-md-flex">
						<img src="img/headshot-donovan.jpg" class="img-headshot rounded-circle shadow" alt="Photo of Donovan Myers">
					</div>
					<div class="col-6 col-md-3 offset-md-1 col-lg-2 offset-lg-3">
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link" href="http://linkedin.com/in/donovandmyers/" target="_blank"><i class="fa fa-linkedin me-1"></i> LinkedIn</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="/cdn-cgi/l/email-protection#92f6fdfcfde4f3fcd2f6fdfcfde4f3fcffebf7e0e1bcf1fdff"><i class="fa fa-envelope me-1"></i> Email</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="pdf/donovan-myers-resume.pdf"><i class="fa fa-file-pdf me-1"></i> Resume</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</header>
		<div class="intro py-3 py-md-5">
			<div class="container mt-3 mt-md-5">
				<div class="label text-uppercase text-primary">Hello! My name is</div>
				<h1 class="text-uppercase">Donovan Myers</h1>
				<div class="row">
					<div class="col-lg-6 col-xl-5">
						<p class="lead">I'm a consultant, designer, developer, troubleshooter, and mentor. I have created and managed over 90 financial institution, medical, automotive, e-commerce, SaaS, and small business websites.</p>
					</div>
					<div class="col-lg-6 col-xl-6 offset-xl-1">
						<p class="mt-1">Along with designing <mark>beautiful, responsive, and accessible websites</mark>, I also <mark>architect CMS integration, train clients, and provide post-launch consulting & support</mark>. I've spent the past 23 years building strong client relationships, winning new business, and growing organizations.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container my-md-5">
			<h2 class="text-uppercase text-bg-secondary p-3 rounded-1">Recent Works</h2>
			<div class="row my-md-5">
				<div class="col-lg-7 col-xl-8">
					<a href="img/mock-dfcu.jpg" data-lity=""><img src="img/mock-dfcu.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of DFCU Financial Website"></a>
				</div>
				<div class="col align-self-end mb-md-4">
					<h3>DFCU Financial</h3>
					<div class="label text-uppercase text-primary mb-4">Accessible, Responsive Website Refresh</div>
					<p>Performed overall site design refresh with the goal of making the homepage more useful for existing members while driving new membership.</p>
					<p><a href="https://www.dfcufinancial.com" target="_blank">Live Website</a></p>
				</div>
			</div>
			<hr>
			<div class="row my-md-5">
				<div class="col-lg-7 col-xl-8 order-lg-2">
					<a href="img/mock-frandsen.jpg" data-lity=""><img src="img/mock-frandsen.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of Frandsen Bank &amp; Trust Website"></a>
				</div>
				<div class="col align-self-end mb-md-3">
					<h3>Frandsen Bank &amp; Trust</h3>
					<div class="label text-uppercase text-primary mb-4">Accessible, Responsive Website Design</div>
					<p>Created an extensive financial education library and blog functionality. Designed and developed the new site by creating reusable modules that could be used across the homepage and inside pages. </p>
					<p><a href="https://www.frandsenbank.com" target="_blank">Live Website</a></p>
				</div>
			</div>
			<hr>
			<div class="row my-md-5">
				<div class="col-lg-7 col-xl-8">
					<a href="img/mock-coulee.jpg" data-lity=""><img src="img/mock-coulee.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of Coulee Bank"></a>
				</div>
				<div class="col align-self-end mb-md-4">
					<h3>Coulee Bank</h3>
					<div class="label text-uppercase text-primary mb-4">Accessible, Responsive Website Design</div>
					<p>Created a website that helps drive new account opening &amp; loan applications, highlights community involvement, and focuses on financial education all while being simple and easy for the marketing department to manage and update.</p>
					<p><a href="http://couleebank.net" target="_blank">Live Website</a></p>
				</div>
			</div>
			<hr>
			<div class="row my-md-5">
				<div class="col-lg-7 col-xl-8 order-lg-2">
					<a href="img/mock-feds.jpg" data-lity=""><img src="img/mock-feds.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of Frandsen Bank &amp; Trust Website"></a>
				</div>
				<div class="col align-self-end mb-md-3">
					<h3>Families Exploring Down Syndrome</h3>
					<div class="label text-uppercase text-primary mb-4">Website Design - Volunteer</div>
					<p>Families Exploring Down Syndrome is an organization near and dear to my heart &ndash; my oldest daughter has Down syndrome. I volunteer website and technology services, served on the board for 7 years (including as President) and co-managed the Walk Committee that increased donation income by over $20K per year.</p>
					<p><a href="https://www.fedsmi.org" target="_blank">Live Website</a></p>
				</div>
			</div>
			<div class="py-3 py-md-5"></div>
			<h2 class="text-uppercase text-bg-secondary p-3 rounded-1"><span class="d-none d-md-inline">Additional </span>Featured Works</h2>
			<div class="row row-cols-1 row-cols-md-3 text-center g-md-5 my-md-5">
				<div class="col">
					<a href="img/mock-5point.jpg" data-lity=""><img src="img/mock-5point.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of 5Point Credit Union"></a>
					<p><a href="http://5pointcu.org" target="_blank">5Point Credit Union</a></p>
				</div>
				<div class="col">
					<a href="img/mock-cbtc.jpg" data-lity=""><img src="img/mock-cbtc.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of CBTC"></a>
					<p>Community Bank of the Chesapeake*</p>
				</div>
				<div class="col">
					<a href="img/mock-firsthomebank.jpg" data-lity=""><img src="img/mock-firsthomebank.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of First Home Bank"></a>
					<p><a href="https://bayfirstfinancial.com" target="_blank">BayFirst Financial</a></p>
				</div>
				<div class="col">
					<a href="img/mock-firstneb.jpg" data-lity=""><img src="img/mock-firstneb.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of First Nebraska Credit Union"></a>
					<p><a href="https://firstnebraska.org" target="_blank">First Nebraska Credit Union</a></p>
				</div>
				<div class="col">
					<a href="img/mock-firstsource.jpg" data-lity=""><img src="img/mock-firstsource.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of First Source Credit Union"></a>
					<p><a href="https://fsource.org" target="_blank">First Source Credit Union</a></p>
				</div>
				<div class="col">
					<a href="img/mock-firststate.jpg" data-lity=""><img src="img/mock-firststate.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of First STate Bank"></a>
					<p><a href="https://firststatebnk.bank" target="_blank">First State Bank</a></p>
				</div>
				<div class="col">
					<a href="img/mock-jbt.jpg" data-lity=""><img src="img/mock-jbt.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of JBT"></a>
					<p><a href="https://jbt.bank" target="_blank">JBT Bank</a></p>
				</div>
				<div class="col">
					<a href="img/mock-scccu.jpg" data-lity=""><img src="img/mock-scccu.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of Santa Cruz Community Credit Union"></a>
					<p>Santa Cruz Community Credit Union*</p>
				</div>
				<div class="col">
					<a href="img/mock-unityone.jpg" data-lity=""><img src="img/mock-unityone.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of Unity One Credit Union"></a>
					<p><a href="https://unityone.org" target="_blank">Unity One Credit Union</a></p>
				</div>
			</div>
			<p><small>* Institutions were acquired or website has since been redesigned.</small></p>
			<div class="py-3 py-md-5"></div>
			<h2 class="text-uppercase text-bg-secondary p-3 rounded-1">SaaS Design<span class="d-none d-md-inline">, Development, &amp; Marketing</span></h2>
			<div class="row my-md-5">
				<div class="col-lg-7 col-xl-8">
					<a href="img/mock-deliveredsecure.jpg" data-lity=""><img src="img/mock-deliveredsecure.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of Delivered Secure Marketing Website"></a>
				</div>
				<div class="col align-self-end mb-md-4">
					<h3>Delivered Secure&trade;</h3>
					<div class="label text-uppercase text-primary mb-4">SaaS UI/UX &amp; Marketing Website</div>
					<p>Collaborated with lead programmer to carryout UI/UX design of Delivered Secure SaaS product. Design, development, and copywriting of marketing website.</p>
					<p><a href="https://www.deliveredesecure.com" target="_blank">Live Website</a></p>
				</div>
			</div>
			<hr>
			<div class="row my-md-5">
				<div class="col-lg-7 col-xl-8 order-lg-2">
					<a href="img/mock-sitecapture.jpg" data-lity=""><img src="img/mock-sitecapture.jpg" class="img-fluid" alt="Phone, Tablet, and Desktop preview of Frandsen Bank &amp; Trust Website"></a>
				</div>
				<div class="col align-self-end mb-3">
					<h3>Site Capture&trade;</h3>
					<div class="label text-uppercase text-primary mb-4">SaaS UI/UX &amp; Marketing Website</div>
					<p>Designed and oversaw the implementation of UI/UX design of Site Capture SaaS product. Design, development, and copywriting of companion marketing website.</p>
					<!--p><a href="https://capture.inetsolution.com" target="_blank">Live Website</a></p-->
					<p class="text-danger">In Development</p>
				</div>
			</div>
			<h2 class="text-uppercase text-bg-secondary p-3 rounded-1">Not Just Websites</h2>
			<p class="mt-3 mb-4">Concept, design direction, copywriting, and production coordination of postcards with custom spot coating.</p>
			<div class="row row-cols-1 row-cols-md-3 g-md-5 mb-md-5">
				<div class="col mb-3 mb-md-0">
					<a href="img/postcard-develop-final.jpg" data-lity=""><img src="img/postcard-develop-final.jpg" class="img-fluid rounded"></a>
				</div>
				<div class="col mb-3 mb-md-0">
					<a href="img/postcard-sfx-final.jpg" data-lity=""><img src="img/postcard-sfx-final.jpg" class="img-fluid rounded"></a>
				</div>
				<div class="col mb-3 mb-md-0">
					<a href="img/postcard-hosting-final.jpg" data-lity=""><img src="img/postcard-hosting-final.jpg" class="img-fluid rounded"></a>
				</div>
				<div class="col mb-3 mb-md-0">
					<a href="img/postcard-coaster-final.jpg" data-lity=""><img src="img/postcard-coaster-final.jpg" class="img-fluid rounded"></a>
				</div>
				<div class="col mb-3 mb-md-0">
					<a href="img/postcard-imageshare-final.jpg" data-lity=""><img src="img/postcard-imageshare-final.jpg" class="img-fluid rounded"></a>
				</div>
				<div class="col mb-3 mb-md-0">
					<a href="img/postcard-example-final.jpg" data-lity=""><img src="img/postcard-example-final.jpg" class="img-fluid rounded"></a>
				</div>
			</div>
		</div>
		<footer class="text-bg-dark py-3 pt-5 py-md-5 mt-3">
			<div class="container">
				<div class="row my-md-5">
					<div class="col-md-8 col-lg-6">
						<div class="label text-uppercase">Like what you see?</div>
						<h1 class="text-uppercase">Let's work together</h1>
						<p class="mb-md-5">I'm currently available for website development, refresh, and maintenance projects. If you'd like to talk about a project or need advice, drop me a message.</p>
						<a class="btn btn-lg btn-light" href="/cdn-cgi/l/email-protection#294d4647465f4847694d4647465f484744504c5b5a074a4644165a5c4b434c4a5d14795b46434c4a5d096047585c405b50">Email me</a>
					</div>
					<div class="d-md-none py-4"></div>
					<div class="col-md-4 col-lg-3 offset-lg-3 col-xl-2 offset-xl-4">
						<div class="label text-uppercase">Wanna be exclusive?</div>
						<h1 class="text-uppercase">Hire me</h1>
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link" href="http://linkedin.com/in/donovandmyers/" target="_blank"><i class="fa fa-linkedin me-1"></i> LinkedIn</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="pdf/donovan-myers-resume.pdf"><i class="fa fa-file-pdf me-1"></i> Resume</a>
							</li>
						</ul>
					</div>
				</div>
				<hr>
				<p class="text-center mb-0"><small>&copy; 2023 Donovan Myers</small></p>
			</div>
		</footer>
		<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
		<script src="js/dist/lity.js"></script>
	</body>
</html>