<!DOCTYPE html>
<!--[if lt IE 9]> <html lang="en" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<!-- Metadata -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<META name="robots" content="INDEX,FOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>haruneggleton.com</title>
<meta name="Description" content="Design and coding portfolio for Harun Eggleton, frontend developer and creative soul.">
<!-- **** Social Sharing Meta Data ***-->
<!-- Facebook, G+, Twitter, LinkedIn -->
<meta property="og:title" content="haruneggleton.com" />
<meta property="og:site_name" content="haruneggleton.com" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://haruneggleton.com" />
<meta property="og:image" content="" />
<meta property="og:description" content="Design and coding portfolio for Harun Eggleton, frontend developer and creative soul." />
<!-- **** End Social Sharing Meta Data ***-->
<!--Links-->
<link rel="stylesheet" href="assets/vender/intl-tel-input/css/intlTelInput.css">
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">
<!--Icons-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body data-spy="scroll" data-target="#mainnav">
<!-- ACCESSIBLITY: Skip to main content link -->
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<!--Modal HTML-->
<div id="site-mod" class="helium-modal">
<div class="modal">
<a href="" class="close x-button">×</a>
<div class="content"></div>
</div>
</div>
<!--Top Nav-->
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" id="mainnav">
<div class="container-fluid">
<span class="navbar-brand">Harun Eggleton<small> : Front End Developer</small></span>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#work">Portfolio</a></li>
<li><a href="#philosophy">Philosophy</a></li>
<li><a href="#contact">Contact</a></li>
<li class="mobile-only"><a href="code-html.php">Code View: HTML</a></li>
<li class="mobile-only"><a href="code-css.php">Code View: CSS</a></li>
<li class="mobile-only"><a href="code-js.php">Code View: JS</a></li>
<li><a href="http://www.linkedin.com/in/haruneggleton" class="linked-in" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- CODE VIEW -->
<span class="code-view">Code View <i class="fa fa-angle-double-down"></i></span>
<span class="site-view">Site View <i class="fa fa-angle-double-down"></i></span>
<!-- SITE WRAPPER -->
<div class="site">
<!-- CONTENT: portfolio sites -->
<section class="work" id="work">
<div class="container-fluid">
<div class="col-xs-12"><h1>Portfolio</h1></div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://www.morganhealth.com/" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-morganhealth.jpg" alt="Morgan Health site">
</figure>
<h3>Morgan Health</h3>
<p>This site is built using Panini by Zurb. Its a static site generator that uses Handlebars for templating. I was lead developer, and responsible for all aspects of the site.
<span class="tech">Technologies: Zurb Panini, Node, HTML, SCSS, Javascript</span>
</p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://thequest.chase.com" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-thequest.jpg" alt="The Quest interactive comic from chase.com">
</figure>
<h3>The Quest</h3>
<p>An interactive animated comic from JP Morgan Chase. This site leverages Greensock animation library and SVG code to create a engaging and responsive experience. I worked extensively on animations, paralax effects and accessibility features.
<span class="tech">Technologies: Greensock, HTML, SCSS, Javascript</span>
</p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://www.chase.com/business/education" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-chaseforbusiness.jpg" alt="Chase for Business">
</figure>
<h3>Chase for Business</h3>
<p>Chase.com is a large corporate site. Each section is a site in itself. I have had the privilege of contributing to accross the site including the development of an accessible carousel. Most notable however is the "Chase for Business" education section. A series of interactive lessons for small business owners to grow their businesses. These activities are all built in React.js and are fully responsive.
<span class="tech">Technologies: React.js, HTML, SCSS, Javascript, AEM, Java</span>
</p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://entenmanns.com" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-entenmanns.jpg" alt="Entenmann's donuts and snacks site">
</figure>
<h3>Entenmann’s</h3>
<p>This is another product-based manufacturer website. This time with a complex product category system. On this project I was responsible for front end development, content organization and entry, quality assurance, cross-browser compatability and Drupal admin optimization.
<span class="tech">Technologies: Drupal, PHP, Bootstrap, HTML, SCSS, Javascript</span></p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://therustikoven.com" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-therustikoven.jpg" alt="The Rustik Oven bread site">
</figure>
<h3>The Rustik Oven</h3>
<p>This is a database driven, responsive manufacturer website. This site was designed for the client to manage content, such as products and recipes. I was responsible for all front end development, Drupal theming, animations, initial content organization and content population.
<span class="tech">Technologies: Drupal, PHP, HTML, SCSS, Javascript</span>
</p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://thomasbreads.com" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-thomas.jpg" alt="Thomas Breads site">
</figure>
<h3>Thomas Breads</h3>
<p>This famous english muffin brand needed a site that could showcase many products and recipes along with a robust product finder. I worked on all aspects of drupal theming.
<span class="tech">Technologies: Drupal, PHP, HTML, SCSS, Javascript</span>
</p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://www.lendersbagels.com" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-lendersbagels.jpg" alt="Lender's Bagels site">
</figure>
<h3>Lender's Bagels</h3>
<p>This famous english muffin brand needed a site that could showcase many products and recipes along with a robust product finder. I worked on all aspects of drupal theming.
<span class="tech">Technologies: Drupal, PHP, HTML, SCSS, Javascript</span>
</p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
<div class="co-xs-12 col-md-6 col-lg-4 project">
<a href="https://marinelausa.com" target="_blank" class="mod-link" rel="noopener noreferrer">
<figure>
<img src="images/site-marinela.jpg" alt="Marinela USA snackfood site">
</figure>
<h3>Marinela USA</h3>
<p>Our clients had very specific needs for this project. Such as: a highly stylized full width layout, different branding for every product, bilingual content, moderated social streams, and a tight deadline. I was responsible for all front end development, Drupal theming and asset management.
<span class="tech">Technologies: Drupal, PHP, Juicer.io, HTML, CSS, Javascript</span>
</p>
<span class="btn btn-default">Visit this site</span>
</a>
</div>
</div> <!-- /.container-fluid -->
</section>
<!-- CONTENT: philosophy -->
<section class="philosophy" id="philosophy">
<div class="container-fluid">
<div class="col-xs-12"><h2>Philosophy</h2></div>
<div class="col-xs-12">
<h3>Craftsmanship</h3>
<p>Growing up in my father's woodworking shop I learned the importance of quality and strive to instill that same principle into my applications. The beauty of a finely crafted object is in the way it achieves its purpose; the beauty of a well-designed website starts with the code. A website's underlying logic should articulate what is being represented visually in the most concise manner possible. What lies beneath is just as important as what is on the surface.</p>
<h3>Accessibility</h3>
<h4>Mobile, ADA, UX, Clean coding</h4>
<p>Everything I code considers a wide audience. Code should be accessible to fellow developers. Ease of use is an accessibility concern for all users. Mobile devices should be a primary platform, not an afterthought. Coding with consideration for individuals with motor and visual impairments is essential.</p>
<h3>Art</h3>
<p>Being a creator is a gift. I help to create the hidden art that makes up our daily lives. Moments of happiness that people experience when interacting with a great UI design add up. However small, our choices matter.</p>
<h3>Community</h3>
<p>One of the things I love about this industry is that our most innovative pioneers share their work openly. Our best web development technology was created by the open source community for the benefit of everyone. Contributing to the community is an important and rewarding part of being a developer.</p>
<p>In summary; be considerate of others, be passionate about your work, and make every project better than the last!</p>
</div>
</div> <!-- /.container-fluid -->
</section>
<!-- CONTENT: Contact form -->
<section class="contact" id="contact">
<div class="container-fluid">
<div class="col-xs-12"><h2>Contact</h2></div>
<div class="col-xs-12">
<form role="form" id="feedbackForm" data-toggle="validator" data-disable="false">
<div class="form-group col-xs-12 col-sm-6 col-lg-4">
<label class="control-label" for="name">Name *</label>
<div class="input-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required/>
<span class="input-group-addon"><i class="fa fa-close form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-4">
<label class="control-label" for="email">Email Address *</label>
<div class="input-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required/>
<span class="input-group-addon"><i class="fa fa-close form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div class="form-group col-xs-12">
<label class="control-label" for="message">Message *</label>
<div class="input-group">
<textarea rows="5" cols="30" class="form-control" id="message" name="message" placeholder="Enter your message" required></textarea>
<span class="input-group-addon"><i class="fa fa-close form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group col-xs-12">
<div class="g-recaptcha" data-sitekey="6Le4FBMUAAAAAJlLaA_KgO7CTVH82yFBiyjRpGdA"></div>
<span class="help-block" style="display: none;">Please check that you are not a robot.</span>
<span class="help-block" style="display: none;">Please enter a the security code.</span>
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Send Inquiry</button>
</div>
</form>
</div> <!-- /.col-xs-12 -->
</div> <!-- /.container-fluid -->
</section>
</div> <!-- /.site -->
<!-- CONTENT: Code View-->
<aside class="code-view">
<a href="" class="code-toggle"><i class="fa fa-angle-double-down"></i> <span>JS</span></a>
<div id="parallax-js" style="display: none;">
</div>
<div id="parallax-css">
</div>
<div id="parallax-html" >
</div>
</aside>
<!-- javascript includes.-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="js/min/bootstrap.min.js"></script>
<script src="js/vendor/helium.mutate.js"></script>
<script src="js/vendor/helium.modal.js"></script>
<script src="js/scripts.js"></script>
<script src="assets/vender/intl-tel-input/js/intlTelInput.min.js"></script>
<script src="assets/js/contact-form.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
</body>
</html>