<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Naman Sood</title>
	<meta name="description" content="Developer and technology enthusiast who's never gonna give you up.">
	<meta name="keywords" content="nsood, nfool, naman sood, nachloride, nsdcars5, namansood, namandoesnotpanic, tendstofortytwo">
	<meta property="og:url" content="https://nsood.in">
	<meta property="og:type" content="website">
	<meta property="og:title" content="Naman Sood">
	<meta property="og:description" content="Developer and technology enthusiast who's never gonna give you up.">
	<link rel="stylesheet" type="text/css" href="fonts/css/nunito.css">
	<link rel="stylesheet" type="text/css" href="fonts/css/fontawesome.min.css">
	<link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-brands.min.css">
	<link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-regular.min.css">
	<link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-solid.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section id="home" class="main">
	<!-- empty alt attribute informs screen readers that background graphic is purely decorative and should be ignored -->
	<canvas id="bg" alt=""></canvas>
	<div class="text-container">
		<h1>Hi, I'm Naman.</h1>
		<h3>I'm <span class="description">a person</span> who's fond of <em>coffee</em>, <em>math</em>, <em>writing</em>, <em>cars</em>, <button class="among">among</button> other things. I also enjoy <em>programming</em> enough to do that for a living.</h3>
		<h3>You can click to see my <a href="/resume.pdf">resume</a>, visit my <a href="https://prose.nsood.in">blog</a>, or check out ways to contact me below.</h3>
		<div class="contact-methods">
			<a href="mailto:mail@nsood.in" class="contact-method" aria-label="Email">
				<i class="email"></i>
				<p class="detail">mail@nsood.in</p>
			</a>
			<a href="https://social.treehouse.systems/@tendstofortytwo" class="contact-method" aria-label="Mastodon" rel="me">
				<i class="fa-brands fa-mastodon"></i>
				<p class="detail">@tendstofortytwo@treehouse.systems</p>
			</a>
			<a href="https://bsky.app/profile/tends.to" class="contact-method" aria-label="Bluesky">
				<i class="fa-brands fa-bluesky"></i>
				<p class="detail">@tends.to</p>
			</a>
			<a href="https://linkedin.com/in/namansood" class="contact-method" aria-label="LinkedIn">
				<i class="fa-brands fa-linkedin-in"></i>
				<p class="detail">Naman Sood</p>
			</a>
			<a href="https://github.com/tendstofortytwo" class="contact-method" aria-label="GitHub">
				<i class="fa-brands fa-github"></i>
				<p class="detail">tendstofortytwo</p>
			</a>
		</div>
	</div>
	<dialog class="change-color-dialog">
		<h4>If you could pick any color,<br> what color would you pick?</h4>
		<form method="dialog">
			<div class="radio-buttons"></div>
			<input type="button" value="save" id="color-change-save">
			<input type="submit" value="exit">
		</form>
	</dialog>
	<button class="change-color-button" aria-label="change color">
		<i class="fas fa-paint-brush"></i>
	</button>
	<noscript>
		<style>
			button.change-color-button { display: none; }
		</style>
	</noscript>
</section>

<!-- I guess it doesn't make sense for a purely visual easter egg to be visible to screen readers..? -->
<div class="clapper" aria-hidden="true">👏👏👏</div>

<script src="js/script.js"></script>
<script src="fonts/attribution.js"></script>
</body>
</html>