<html lang="en">

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="">

<title>Nathaniel Sena</title>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/1-col-portfolio.css" rel="stylesheet">

<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/>

<!-- Navigation -->

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="theNavBar">

<div class="container">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" onclick="scrollToTop()">Nate Sena</a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li>

<a href="#AboutMe">About Me</a>

</li>

<li>

<a href="mailto:nate.sena1@gmail.com?Subject=Contact%20Form" target="_top">Contact</a>

</li>

</ul>

</div>

<!-- /.navbar-collapse -->

</div>

<!-- /.container -->

</nav>

<div id="page-content">

<div id="iframe-container">

<iframe id="three-sixty" src="webvr.html" frameborder="0">

<!-- <div class="col-lg-6 col-sm-6 cover-text">

</iframe >

<div id="inner-frame">

<h1 class="page-header">Nathaniel Sena<br>

<small>

Immersive Web Developer

<span class="title-break">Los Angeles, California</span>

</small>

</h1>

</div>

</div>

<!-- Page Content -->

<div class="container" id="content-container">

<!-- Page Heading -->

<div>

<h2>Skills</h2>

<div>

<h4>Frontend</h4>

<div class="skill-btns">

<p class="btn-skill">Ruby</p>

<p class="btn-skill">Javascript</p>

<p class="btn-skill">HTML</p>

<p class="btn-skill">CSS</p>

</div>

</div>

<div>

<h4>Backend</h4>

<div class="skill-btns">

<p class="btn-skill">Node.js</p>

<p class="btn-skill">Rails</p>

</div>

</div>

<div>

<h4>DB</h4>

<div class="skill-btns">

<p class="btn-skill">PostgreSQL</p>

<p class="btn-skill">MongoDB</p>

</div>

</div>

<div>

<h4>Frameworks</h4>

<div class="skill-btns">

<p class="btn-skill">ReactVR</p>

<p class="btn-skill">React</p>

</div>

</div>

<div>

<h4>Libraries</h4>

<div class="skill-btns">

<p class="btn-skill">A-Frame</p>

<p class="btn-skill">Three.js</p>

<p class="btn-skill">Wavesurfer.js</p>

</div>

</div>

</div>

<!-- About Me -->

<div class="row" id="AboutMe">

<div class="col-md-12">

<h3>About Me</h3>

<p>I am a Web Developer who used to work in SAAS sales that now focuses on MERN stack development. As a lover of product over my entire life, I have always deeply thought about how I interact with what’s around me, and how I might be able to make it better. Currently, I bring that vision to life focusing on emergent web technologies, especially those focused on building our XR future.</p>

<a class="btn btn-primary" href="Files/Resume.pdf" download>Download Resume <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<div id="project" style='margin-top: 10px'>

<br>

<!-- -------------------- WEB DEV PROJECTS -------------------------- -->

<hr>

<h1>Web Development Work</h1>

<!-- Project One -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="Gif/reactvr-optimized.gif" alt="" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Social Netowrking in React-VR</h3>

<p>No DOM, No Router, No Problem</p>

<a class="btn btn-primary" href="https://github.com/natesena/react-vr-app">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

<a class="btn btn-primary" href="https://www.youtube.com/watch?v=PdRuOix3km8&t=1s">View Project Demo <span class="glyphicon glyphicon-chevron-right"></span></a>

<div class="skill-btns">

<p class="btn-skill">Node.js</p>

<p class="btn-skill">ReactVR</p>

<p class="btn-skill">React</p>

<p class="btn-skill">JSON Web Token</p>

<p class="btn-skill">Express</p>

<p class="btn-skill">MongoDB</p>

<p class="btn-skill">Javascript</p>

</div>

</div>

</div>

<!-- Project One -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Dozer-Imgs/one.png" alt="" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Dozer</h3>

<p>Sleep Up Until Arrival on Public Transportation and Rideshares</p>

<a class="btn btn-primary" href="https://github.com/natesena/Dozer">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

<a class="btn btn-primary" href="https://evening-bastion-15027.herokuapp.com/">Try Dozer Here<span class="glyphicon glyphicon-chevron-right"></span></a>

<div class="skill-btns">

<p class="btn-skill">Node.js</p>

<p class="btn-skill">AJAX</p>

<p class="btn-skill">Google Maps APIs</p>

<p class="btn-skill">BCrypt</p>

<p class="btn-skill">Mongo</p>

<p class="btn-skill">Express</p>

<p class="btn-skill">Twilio</p>

</div>

</div>

</div>

<!-- Project One -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Freely_Imgs/one.png" alt="" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Free.ly</h3>

<p>Soundcloud Clone</p>

<a class="btn btn-primary" href="https://github.com/natesena/music_app">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

<a class="btn btn-primary" href="http://cryptic-crag-81851.herokuapp.com/">Try Free.ly Here<span class="glyphicon glyphicon-chevron-right"></span></a>

<div class="skill-btns">

<p class="btn-skill">Ruby</p>

<p class="btn-skill">Rails</p>

<p class="btn-skill">BCrypt</p>

<p class="btn-skill">PostgreSQL</p>

<p class="btn-skill">Wavesurfer.js</p>

<p class="btn-skill">Paperclip Gem</p>

<p class="btn-skill">Amazon S3</p>

</div>

</div>

</div>

<!-- Project One -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="Gif/Threejs-optimized.gif" alt="Blastron Gameplay Img" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Blastron</h3>

<p> Two Player FPS Built on Three.js</p>

<a class="btn btn-primary" href="https://github.com/natesena/threejsgame">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

<a class="btn btn-primary" href="https://natesena.github.io/threejsgame/">Play Blastron Here<span class="glyphicon glyphicon-chevron-right"></span></a>

<div class="skill-btns">

<p class="btn-skill">Three.js</p>

<p class="btn-skill">Javascript</p>

<p class="btn-skill">HTML</p>

<p class="btn-skill">CSS</p>

</div>

</div>

</div>

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="./img/psd-to-html.png" alt="Blastron Gameplay Img" height="50">

</a>

</div>

<div class="col-md-5">

<h3>PSD to HTML/CSS Conversion</h3>

<p>Everyone loves Vanilla</p>

<a class="btn btn-primary" href="psd-to-html.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

<div class="skill-btns">

<p class="btn-skill">PSD</p>

<p class="btn-skill">HTML</p>

<p class="btn-skill">CSS</p>

</div>

</div>

</div>

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="./Gif/360-optimized.gif" alt="Blastron Gameplay Img" height="50">

</a>

</div>

<div class="col-md-5">

<h3>360 Web Video</h3>

<p>Pan, Tilt, Scroll</p>

<a class="btn btn-primary" href="webvr.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

<div class="skill-btns">

<p class="btn-skill">A-Frame</p>

<p class="btn-skill">HTML</p>

<p class="btn-skill">CSS</p>

</div>

</div>

</div>

<hr>

<h1>Product Design Work</h1>

<!-- Project Two -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Portfolio_Finals/Portfolio_Cover.png" alt="" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Physical Product Design Portfolio</h3>

<p>My most recent product design portfolio</p>

<a class="btn btn-primary" href="Portfolio.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- Project One -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Portfolio_Finals/snapchat.jpg" alt="" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Snapchat VR Case</h3>

<p>VR Phone Case Product Pitch & VR Integration</p>

<a class="btn btn-primary" href="Snapchat.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- Project One -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Soundcloud/Soundcloud1_Final.png" alt="" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Soundcloud Design Work</h3>

<p>Aligning Artist and Listener Incentives</p>

<a class="btn btn-primary" href="Soundcloud.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- Project One -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/CarsDirect/Cars_Direct_Pitch2.png" alt="CarsDirectPitch.png" height="50">

</a>

</div>

<div class="col-md-5">

<h3>Cars Direct Price Checker</h3>

<p>Simple Price Checking Web App</p>

<a class="btn btn-primary" href="CarsDirect.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Vino_Vortex/decanter10.JPG" alt="decanter10" height="100">

</a>

</div>

<div class="col-md-5">

<h3>Vino Vortex</h3>

<h4>Wine Aerator Concept for OPIM 415</h4>

<p>A novel approach to wine aeration that aligns with the current behaviors of wine drinkers by hiding a contactless blender within a decanter. It aerates better than currently available methods and silently blends while resting on its base.</p>

<a class="btn btn-primary" href="project_2.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- Project One -->

<div class="row project" >

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Cutting_Board/Render_1.JPG" alt="first render">

</a>

</div>

<div class="col-md-5">

<h3>Cutting Board with Ipad Integration</h3>

<h4>Project for

<img src="http://livingstonepartners.com/wp-content/uploads/2014/11/Lifetime-Brands1.png" alt="Lifetime Brands Logo" width="200" align="bottom"></h4>

<p>Final project For MKTG 292, pitched to Bill Lazaroff, the VP of Product Development and Design at Lifetime Brands. The product is a cutting board with Ipad integration meant to service millenials and new kitchen trends.</p>

<a class="btn btn-primary" href="PROJECT_1.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/VR_Case/VRCase1.jpg" alt="">

</a>

</div>

<div class="col-md-5">

<h3>VR Phone Case</h3>

<h4>360 Video on the Go</h4>

<p>A quick drawing of a model with proposed features and specs.</p>

<a class="btn btn-primary" href="project_12.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- Project Four -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/360_Speaker/360_Chandelier.JPG" width="100%" alt="">

</a>

</div>

<div class="col-md-5">

<h3>360 Speaker</h3>

<h4>Concept and Prototype</h4>

<p>I have a laser cutter; I have an amp, I have some speakers. Lets build some reference speakers.</p>

<a class="btn btn-primary" href="project_9.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<h1> Projects</h1>

<!-- Project Two -->

<!-- Project 7-->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="./Gif/360Cam-optimized.gif" alt="">

</a>

</div>

<div class="col-md-5">

<h3>360 Video Rig for the Eken H3</h3>

<h4>Plans and Modeling</h4>

<p>A design of an interlocking 360 actioncamera rig. The mold was modeled with dimensions taken by caliper from the underwater case. Different from other underwater rigs, this one has a backing to insure that each camera is facing at exactly the correct angle.</p>

<a class="btn btn-primary" href="project_8.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<!-- Project Three -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Drone/quad1.PNG" alt="">

</a>

</div>

<div class="col-md-5">

<h3>Backpacking Drone </h3>

<h4>With Gimbal</h4>

<p>A custom built quadcopter meant to deliver the greatest wingspan in the smallest footprint. The design is purposed to hold a gimbal, telemetry units, FPV gear, and an APM flight controller with GPS. The motors and propellers can be of varying size, dependent on desired efficiency, flight time, and payload. The complete design is focused on reduced cost and easy manufacturability from widely available parts and materials.</p>

<a class="btn btn-primary" href="project_3.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<!-- /.row -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" width="100%" src="./Gif/Crossbow-optimized.gif" alt="coin sorter">

</a>

</div>

<div class="col-md-5">

<h3>Crossbow</h3>

<h4>More Press-Fit</h4>

<p>As part of a group assignment for my mechanical engineering course I designed a crossbow.</p>

<a class="btn btn-primary" href="project_10.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<!-- Project Four -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="./Gif/visual-optimized.gif" alt="Visual.gif">

</a>

</div>

<div class="col-md-5">

<h3>Visualizer Art</h3>

<h4>Live and Practice Content</h4>

<p>Discussing visuals, their significance, and what my experience has been trying to be a visual artist.</p>

<a class="btn btn-primary" href="project_4.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<!-- Project Five -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="./Gif/hologram-optimized.gif" alt="">

</a>

</div>

<div class="col-md-5">

<h3>Hologram Form</h3>

<h4>Random Fun and Future Plans</h4>

<p>As part of an assignment for my mechanical engineering course I made a press-fit acrylic pyramid to play around with holograms.</p>

<a class="btn btn-primary" href="project_5.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<!-- Project Five -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Fan/Fan1.JPG" alt="">

</a>

</div>

<div class="col-md-5">

<h3>Friendly Fan</h3>

<h4>For Cooling Down Fast</h4>

<p>A quick fan I made for Coachella Music Festival.</p>

<a class="btn btn-primary" href="project_11.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<!-- Project Five -->

<!-- /.row -->

<div class="row project">

<div class="col-md-7">

<a href="#">

<img class="img-responsive" src="img/Delta_Printer/delta2.JPG" alt="kossel">

</a>

</div>

<div class="col-md-5">

<h3>Kossel XL</h3>

<h4>Delta Printers and More</h4>

<p>My journey building and working with a Kossel XL printer.</p>

<a class="btn btn-primary" href="project_6.html">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>

</div>

</div>

<!-- /.row -->

<hr>

</div>

</div>

<!-- /.container -->

<script src="./js/SkillButtonAnimation.js"></script>

<script src="./js/iframeManager.js"></script>

<script src="js/jquery.js"></script>

<script src="js/custom.js"></script>

<!-- <script src="js/CoverSize.js"></script> -->

<!-- <script src="js/AnimatedColor.js"></script> -->

<!-- Bootstrap Core JavaScript -->

<script src="js/bootstrap.min.js"></script>