<!DOCTYPE html>
<html lang="en">
	<title>Projects &mdash; Matt Madeiro</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
	<style>
		/* Chrome, Safari, Opera */
		@-webkit-keyframes fadeInUp {
		    0% {
		        opacity: 0;
		        -webkit-transform: translateY(10px);
		    }
		    100% {
		        opacity: 1;
		        -webkit-transform: translateY(0);
		    }
		}
		/* Standard syntax */
		@keyframes fadeInUp {
		    0% {
		        opacity: 0;
		        transform: translateY(10px);
		    }
		    100% {
		        opacity: 1;
		        transform: translateY(0);
		    }
		}
		.anim-in-slow {
		  -webkit-animation: fadeInUp 200ms ease-in forwards; /* Chrome, Safari, Opera */
		  animation: fadeInUp 200ms ease-in forwards;
		  opacity: 0;
		}
		.anim-delay-1 {
			animation-delay: 0.25s;
		}
		.anim-delay-2 {
			animation-delay: 0.375s;
		}
		.anim-delay-3 {
			animation-delay: 0.5s;
		}
		.anim-delay-4 {
			animation-delay: 0.675s;
		}
		.anim-delay-5 {
			animation-delay: 0.75s;
		}
		.anim-delay-6 {
			animation-delay: 0.875s;
		}
	</style>
	<body class='sans-serif'>
		<div class='pb5-ns'>
			<header class='cf pv4 pt5-ns'>
				<div class='w-90 w-50-ns center pb1'>
					<h1 class='ma0 '>Matt Madeiro</h1>
					<h2 class='silver f5 fw4'>Projects</h2>
				</div>
			</header>
			<div class='w-90 w-50-ns center cf'>
				<ul class='list ma0 pa0'>
					<li class='w-100 w-50-ns fl pr3-ns mb4 anim-in-slow'>
						<a href="/imistaway" class='db white no-underline dim relative' style="max-height: 250px">
							<img src="img/imistaway.png" />
							<span class='absolute left-1 top-1'>
								iMistAway v3
							</span>
						</a>
						<span class='silver i f6 mt2 pv2-ns db'>Web App, Mobile App, Design &amp; Development</span>
					</li>
					<li class='w-100 w-50-ns fl pl3-ns mb4 anim-in-slow anim-delay-1'>
						<a href="/mwm" class='db white no-underline dim relative' style="max-height: 250px">
							<img src="img/mwm.png" />
							<span class='absolute left-1 top-1'>
								Made with Mustard
							</span>
						</a>
						<span class='silver i f6 mt2 pv2-ns db'>Logo Design, Branding</span>
					</li>
					<li class='w-100 w-50-ns fl pr3-ns mb4 anim-in-slow anim-delay-2'>
						<a href="/tinyboxes" class='db white no-underline dim relative' style="max-height: 250px">
							<img src="img/tinyboxes.png" />
							<span class='absolute left-1 top-1'>
								Tiny Boxes
							</span>
						</a>
						<span class='silver i f6 mt2 pv2-ns db'>Branding, UI, UX, Design &amp; Development</span>
					</li>
					<li class='w-100 w-50-ns fl pl3-ns mb4 anim-in-slow anim-delay-3'>
						<a href="/sleepcalculator" class='db white no-underline dim relative' style="max-height: 250px">
							<img src="img/sleepcalculator.png" />
							<span class='absolute left-1 top-1'>
								Sleep Calculator
							</span>
						</a>
						<span class='silver i f6 mt2 pv2-ns db'>Branding, UI, UX, Design &amp; Development</span>
					</li>
					<li class='w-100 w-50-ns fl pr3-ns mb4 anim-in-slow anim-delay-4'>
						<a href="/meshify" class='db white no-underline dim relative' style="max-height: 250px">
							<img src="img/meshify.png" />
							<span class='absolute left-1 top-1'>
								Meshify
							</span>
						</a>
						<span class='silver i f6 mt2 pv2-ns db'>UI, UX, Design &amp; Development</span>
					</li>
					<li class='w-100 w-50-ns fl pl3-ns mb4 anim-in-slow anim-delay-5'>
						<a href="/mm2017" class='db white no-underline dim relative' style="max-height: 250px">
							<img src="img/mm2017.png" />
							<span class='absolute left-1 top-1'>
								MadeirOS
							</span>
						</a>
						<span class='silver i f6 mt2 pv2-ns db'>Design &amp; Development</span>
					</li>
				</ul>
			</div>
			<section class='w-50-ns center mv4 cf ph3 ph0-ns'>
				<div class='w-100 fl'>
					<h3 class='mt0 mb4 fw4 f4 b'>Available for new projects in June 2020.</h3>
				</div>
				<div class='w-100 w-50-ns fl lh-copy'>
					<p class='black-80 ma0'>
						I'm a website and mobile app designer and developer with an emphasis on user experience. I make a website look good, but also&mdash;and much more importantly&mdash;usable.
					</p>
					<p class='black-80'>
						I have a strong background in code, but my expertise is visual design. Over the last five years, I've worked in a wide variety of disciplines: logo and branding design, interface design for mobile apps and web applications, and even game design.
					</p>
					<p class='black-80'>
						If you need a designer or developer for your next project, please don't hesitate to get in touch. Hello from Houston, Texas!
					</p>
					<p class='silver i f7 mt4'>
						Last updated: April 7th, 2020.
					</p>
				</div>
				<div class='w-100 w-50-ns fl mt4 mt0-ns'>
					<ul class='list ma0 pa0 pl3-ns tl tr-ns'>
						<li class='mb3'>
							<a class='blue link hover-near-black no-underline' href="mailto:matt@mattmadeiro.com">matt@mattmadeiro.com</a>
						</li>
						<li class='mb3'>
							<a class='blue link hover-near-black no-underline' href="http://github.com/mattmadeiro">github.com/MattMadeiro</a>
						</li>
					</ul>
				</div>
			</section>
		</div>
	</body>
</html>
