index.html

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

		<!-- Basic Page Needs
		–––––––––––––––––––––––––––––––––––––––––––––––––– -->
		<meta charset="utf-8">
		<title>Matteo Vesprini-Heidrich</title>
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Mobile Specific Metas
		–––––––––––––––––––––––––––––––––––––––––––––––––– -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- FONT
		–––––––––––––––––––––––––––––––––––––––––––––––––– -->
		<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>

		<!-- CSS
		–––––––––––––––––––––––––––––––––––––––––––––––––– -->
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="normalize.css">
		<link rel="stylesheet" href="skeleton.css">
		<link rel="stylesheet" href="portfolio.css">
		<link rel="stylesheet" type="text/css" href="tooltipster.css">

		<!-- Favicon
		–––––––––––––––––––––––––––––––––––––––––––––––––– -->
		<link rel="icon" type="image/png" href="favicon.png">

	</head>
	<body>
		<header>
			<div class="container">
				<nav>
					<a href="#about"><h4 class="header-link active">ABOUT</h4></a>
					<a href="#work"><h4 class="header-link">WORK</h4></a>
				</nav>
			</div>
		</header>

		<!-- Primary Page Layout
		–––––––––––––––––––––––––––––––––––––––––––––––––– -->
		<div class="container">
			<section class="header">
				<img src="pic.jpg" class="circle"/>
				<h1>Matteo Vesprini-Heidrich</h1>
				<h5>Full Stack Engineer | JavaScript | UCLA Computer Science</h5>
			</section>

			<section id="about">
				<h2>About</h2>
				<p>Hi. I’m an aspiring web developer finishing the last year of my undergraduate computer science degree at UCLA.</p>
				<p>I’ve been working for the past two years as a front-end developer, back-end developer, system administrator, and everything in between.</p>
				<p>Most of my experience has been with Node and PHP, but I've used a lot of different languages and technology stacks.</p>
				<div class="tech-examples">
					<img src='techLogos/js.png' class='tooltip' alt='JavaScript' title='JavaScript'>
					<img src='techLogos/html.png' class='tooltip' alt='HTML5' title='HTML5'>
					<img src='techLogos/handlebars.png' class='tooltip' alt='Handlebars' title='Handlebars'>
					<img src='techLogos/css.png' class='tooltip' alt='CSS3' title='CSS3'>
					<img src='techLogos/sass.png' class='tooltip' alt='SASS' title='SASS'>
					<img src='techLogos/nodejs.png' class='tooltip' alt='Node.js' title='Node.js'>
					<img src='techLogos/npm.png' class='tooltip' alt='npm' title='npm'>
					<img src='techLogos/gulp.png' class='tooltip' alt='Gulp' title='Gulp'>
					<img src='techLogos/postgresql.png' class='tooltip' alt='PostgreSQL' title='PostgreSQL'>
					<img src='techLogos/mongodb.png' class='tooltip' alt='MongoDB' title='MongoDB'>
					<img src='techLogos/react.png' class='tooltip' alt='React' title='React'>
				</div>
			</section>

			<section id="work">
				<h2>Work</h2>
				<div class="row">
					<div class="six columns work-example">
						<div class="site-img">
							<img class="work-snapshot" src="radio.png">
						</div>
						<div class="site-description">
							<h4>My pride and joy.</h4>
							<p>I've had a very busy career in the short time as web manager for UCLA Radio:</p>
							<ul>
								<li>Added a new material design influenced page with all important links for the station</li>
								<li>Implemented a rush-themed splash page for recruitment</li>
								<li>Included a Now Playing section on the homepage</li>
								<li>Added an area for DJs to submit their show info and then display that information on the homepage during their sets</li>
							</ul>
							<a class="work-link" href="http://uclaradio.com" target="_blank">
								<button>Check It Out</button>
							</a>
						</div>
					</div>
					<div class="six columns work-example">
						<div class="site-img">
							<img class="work-snapshot" src="dma.png">
						</div>
						<div class="site-description">
							<p>I work for the Design Media Arts department at UCLA as the sole web developer.</p>
							<p>
							<p>I've done a little bit of everything on the support site, but here are the biggest changes I've made:</p>
							<ul>
								<li>Refactor existing code to fit a neat MVC organization</li>
								<li>Engineer a new single-page print charge area to adhere to department budgeting guidelines</li>
							</ul>
							<a class="work-link" href="https://support.dma.ucla.edu" target="_blank">
								<button>Check It Out</button>
							</a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="six columns work-example">
						<div class="site-img">
							<img class="work-snapshot" src="api.jpg">
						</div>
						<div class="site-description">
							<p>A RESTful API that was created for my <a href="https://github.com/CS130-spring2015-barter">capstone Computer Science project</a>.</p>
							<p>The iOS app, Barter, allows users to trade items locally.</p>
							<p>The Node API that I created allows the iOS client to communicate with a PostgreSQL server for persistent data storage.</p>
							<a class="work-link" href="https://github.com/CS130-spring2015-barter/backend-api" target="_blank">
								<button>Check It Out</button>
							</a>
						</div>
					</div>
				</div>
			</section>

		</div>

		<footer>
			<div class="row">
				<div class="ten columns offset-by-one">
					<div class="three columns footer-link">
						<i class="fa fa-linkedin-square"></i>
						<a href="linked.in/matteovh">Matteo Vesprini-Heidrich</a>
					</div>
					<div class="three columns footer-link">
						<i class="fa fa-envelope-o"></i>
						<a href="mailto:matteovh@ucla.edu">matteovh@ucla.edu</a>
					</div>
					<div class="three columns footer-link">
						<i class="fa fa-github"></i>
						<a href="https://github.com/MatteoVH" target="_blank">@MatteoVH</a>
					</div>
					<div class="three columns footer-link">
						<i class="fa fa-file-text-o"></i>
						<a href="matteovh_resume.pdf" download>Resume</a>
					</div>
				</div>
			</div>
		</footer>
		<!-- End Document
		–––––––––––––––––––––––––––––––––––––––––––––––––– -->
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="portfolio.js"></script>
	<script type="text/javascript" src="jquery.tooltipster.min.js"></script>
</html>