<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
<body style="margin: 0;">
	<div style="position: fixed; width: 100%; height: 100%; overflow: auto;">
		<div style="display: flex; flex-direction: column;">
			<div style="display: flex; padding: 60px; background-color: #425ea6;">
				<div style="display: flex; flex-direction: column; width: 250px;">
					<img src="https://jordan.roher.me/img/portfolio/playfab/cover.jpg" style="max-width: 100%;">
					<span style="margin-top: 20px; font-family: Open Sans; font-size: 16px; font-weight: 600; color: #ffffff;">PlayFab</span>
					<span style="margin-top: 5px; font-family: Open Sans; font-size: 12px; color: #ffffff;">PlayFab is a backend-as-a-service startup for games. They provide an easy API for player authentication, inventory, leaderboards, push notifications, and server hosting. When your game is featured on the App Store, you’ll be able to handle the crush of users if you’re using PlayFab.</span>
				</div>
				<div style="display: flex; flex-direction: column; margin-left: 60px; width: 250px;">
					<img src="https://jordan.roher.me/img/portfolio/343-industries/cover.jpg" style="max-width: 100%;">
					<span style="margin-top: 20px; font-family: Open Sans; font-size: 16px; font-weight: 600; color: #ffffff;">343 Industries</span>
					<span style="margin-top: 5px; font-family: Open Sans; font-size: 12px; color: #ffffff;">Halo Waypoint is the official site for the Halo universe, Microsoft’s best-selling game franchise. As well as a marketing site, it displays player statistics from all Halo games, facilitates player-to-player messaging, forums, and allows for clan creation.</span>
				</div>
				<div style="display: flex; flex-direction: column; margin-left: 60px; width: 250px;">
					<img src="https://jordan.roher.me/img/portfolio/ardent-eagle/cover.jpg" style="max-width: 100%;">
					<span style="margin-top: 20px; font-family: Open Sans; font-size: 16px; font-weight: 600; color: #ffffff;">Ardent Eagle Solutions</span>
					<span style="margin-top: 5px; font-family: Open Sans; font-size: 12px; color: #ffffff;">Ardent Eagle Solutions is an information technology service provider for the United States government.</span>
				</div>
				<div style="display: flex; flex-direction: column; margin-left: 60px; width: 250px;">
					<img src="https://jordan.roher.me/img/portfolio/ardent-eagle/cover.jpg" style="max-width: 100%;">
					<span style="margin-top: 20px; font-family: Open Sans; font-size: 16px; font-weight: 600; color: #ffffff;">Metia Game Design Proposals</span>
					<span style="margin-top: 5px; font-family: Open Sans; font-size: 12px; color: #ffffff;">Metia is an advertising and marketing company based in Kirkland, Washington. Most of what I worked on was internal Sharepoint sites for Microsoft.</span>
				</div>
			</div>
			<div style="display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 700px; padding: 60px 40px;">
				<img style="width: 240px; height: 240px; border-radius: 100%;" src="https://jordan.roher.me/img/contact/jordan-roher.jpg">
				<div style="display: flex; margin-top: 20px;">
					<span style="font-family: Open Sans; font-size: 24px; font-weight: 700;">Jordan Roher</span>
					<span style="margin-left: 10px; font-family: Open Sans; font-size: 24px; color: #666666;">([email protected])</span>
				</div>
				<span style="margin-top: 5px; text-align: center; font-family: Open Sans; font-size: 14px;">I’m a front-end web developer with ? years experience based in Seattle, Washington. This site is for some of my random blog posts and of course samples of my portfolio (as you can see in the list on the top of the page).</span>
				<div style="display: flex; margin-top: 20px;">
					<div style="display: flex; align-items: center;">
						<svg style="width: 20px; height: 20px; fill: #425ea6;" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Facebook icon</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
						<a style="margin-left: 10px; font-family: Open Sans; font-size: 14px; color: #425ea6;" href="https://www.facebook.com/jordanroher">Jordan Roher</a>
					</div>
					<div style="display: flex; align-items: center; margin-left: 30px;">
						<svg style="width: 20px; height: 20px; fill: #425ea6;" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Twitter icon</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
						<a style="margin-left: 10px; font-family: Open Sans; font-size: 14px; color: #425ea6;" href="https://www.facebook.com/jordanroher">Jordan Roher (@jordanroher)</a>
					</div>
				</div>
				<div style="display: flex; flex-direction: column; margin-top: 60px; padding: 30px 0; border-top: 1px solid #f1f1f1;">
					<span style="font-family: Open Sans; font-size: 20px; font-weight: 700; color: #425ea6;">On Criticism</span>
					<span style="margin-top: 10px; font-family: Open Sans; font-size: 14px; color: #444444;">A critic’s job is not to reflect the public opinion, but to inform it.<br>Art may be judged by how well it achieves what it sets out to do.<br>Ratings should be meaningful and distinct. The difference between each rank of the rating system should be obvious to the reviewer and the reader.</span>
					<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px; ">
						<span style="font-family: Open Sans; font-size: 14px; color: #999999;">August 9, 2020</span>
						<svg style="width: 28px; height: 28px; fill: #425ea6;" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16.01 11H5c-.55 0-1 .45-1 1s.45 1 1 1h11.01v1.79c0 .45.54.67.85.35l2.78-2.79c.19-.2.19-.51 0-.71l-2.78-2.79c-.31-.32-.85-.09-.85.35V11z"/></svg>
					</div>
				</div>
				<div style="display: flex; flex-direction: column; margin-top: 30px; padding: 30px 0; border-top: 1px solid #f1f1f1;">
					<span style="font-family: Open Sans; font-size: 20px; font-weight: 700; color: #425ea6;">Using Premium Verizon CDN to run React's BrowserRouter</span>
					<span style="margin-top: 10px; font-family: Open Sans; font-size: 14px; color: #444444;">I use Microsoft Azure to host all my sites. This blog, The Villain, and Sara’s Flare are all static sites generated by Hugo. It’s super fast and super cheap. Can’t believe I was paying $10 a month for years. My current monthly bills are like $0.60.<br>I’m working on a new site built using create-react-app and wanted to use the BrowserRouter component to give the pages a natural URI. Turns out it’s not a big deal.</span>
					<img style="margin-top: 15px; max-width: 100%; object-fit: cover;" src="https://jordan.roher.me/img/blog/2020/azure-verizon-cdn-rules.png">
					<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px; ">
						<span style="font-family: Open Sans; font-size: 14px; color: #999999;">August 9, 2020</span>
						<svg style="width: 28px; height: 28px; fill: #425ea6;" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16.01 11H5c-.55 0-1 .45-1 1s.45 1 1 1h11.01v1.79c0 .45.54.67.85.35l2.78-2.79c.19-.2.19-.51 0-.71l-2.78-2.79c-.31-.32-.85-.09-.85.35V11z"/></svg>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>