mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-07 09:15:41 -06:00
903 lines
60 KiB
HTML
Executable File
903 lines
60 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head prefix="og: http://ogp.me/ns#">
|
|
<title>Brittany Chiang | Web Developer & UX Enthusiast</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="keywords" content="brittany chiang, brittany, chiang, bchiang7, northeastern university, northeastern, university, student, front-end, web, website, computer, software, developer, engineer, designer, co-op" />
|
|
<meta name="author" content="Brittany Chiang" />
|
|
<meta name="description" content="Web developer, UX Enthusiast, and everything in between." />
|
|
<meta property="og:description" content="Web developer, UX Enthusiast, and everything in between." />
|
|
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://brittanychiang.com/img/social-image.png" />
|
|
<meta property="og:image:type" content="image/png" />
|
|
<meta property="og:title" content="Brittany Chiang's Personal Website" />
|
|
<meta property="og:url" content="http://brittanychiang.com/" />
|
|
<meta property="og:type" content="website" />
|
|
<link rel="shortcut icon" href="img/logo-transparent-00009C.png">
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
|
|
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" type="text/css" href="css/animate.css">
|
|
<link rel="stylesheet" type="text/css" href="css/normalize.css">
|
|
<link rel="stylesheet" type="text/css" href="css/styles.css">
|
|
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,900,900italic,700italic'>
|
|
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400'>
|
|
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100'>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
</head>
|
|
|
|
<body id="page-top" data-spy="scroll" data-target=".navbar-custom" data-offset="100">
|
|
<!-- <div id="loader-wrapper">
|
|
<div id="loader"></div>
|
|
<div class="loader-section section-top"></div>
|
|
<div class="loader-section section-bottom"></div>
|
|
</div> -->
|
|
<div id="content">
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header page-scroll">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
|
|
<i class="fa fa-2x fa-bars"></i>
|
|
</button>
|
|
<a class="navbar-brand page-scroll" href="http://brittanychiang.com/">
|
|
<img src="img/logo-transparent-white-30pt.png" />Brittany Chiang</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse navbar-main-collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li class="hidden">
|
|
<a class="page-scroll" href="#page-top"></a>
|
|
</li>
|
|
<li><a class="page-scroll" href="#about">About</a></li>
|
|
<li><a class="page-scroll" href="#services">Passion</a></li>
|
|
<li><a class="page-scroll" href="#experience">Experience</a></li>
|
|
<li><a class="page-scroll" href="#portfolio">Work</a></li>
|
|
<li><a class="page-scroll" href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Section: Introduction -->
|
|
<section id="intro" class="intro text-center">
|
|
<div class="overlay">
|
|
<div class="intro-content">
|
|
<h1 class="animated fadeInDown delay-05s">Hi, I'm Brittany</strong>
|
|
</h1>
|
|
<p class="subtitle animated fadeInUp delay-05s">Web Developer & UX Enthusiast</p>
|
|
<a class="fa fa-angle-down page-scroll" href="#about"></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section: About -->
|
|
<section id="about" class="text-center">
|
|
<div class="overlay">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 col-md-offset-2 wp1">
|
|
<h2>A Little Bit About Me</h2>
|
|
<img src="img/headshot1-square4.jpg" id="prof-pic" />
|
|
<p>
|
|
Hey! My name is Brittany and I'm a web developer with a passion for front end development and design. I'm currently a third year student at
|
|
<a href="http://www.northeastern.edu/" target="_blank">Northeastern University</a> pursuing a degree in <a href="http://www.ccs.neu.edu/undergraduate/degree-programs/information-science-bachelor-of-science/" target="_blank">information science</a> with a minor in interaction design. I aspire toward a career that will allow me to channel my creativity through crafting beautiful software and engaging experiences.
|
|
<br>
|
|
<br> When I'm not on the computer, I enjoy snowboarding, swimming, and petting dogs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div id="tl-dr">
|
|
<h3>TL;DR? Self Proclamations:</h3>
|
|
<!-- <h4>Self Proclamations:</h4> -->
|
|
<div class="tldr-proc">
|
|
<div class="tldr-icon" id="tldr-keyboard"><i class="fa fa-keyboard-o"></i></div>
|
|
<h5>Web Developer</h5>
|
|
</div>
|
|
<div class="tldr-proc">
|
|
<div class="tldr-icon"><i class="fa fa-pencil"></i></div>
|
|
<h5>UX Enthusiast</h5>
|
|
</div>
|
|
<div class="tldr-proc">
|
|
<div class="tldr-icon"><i class="fa fa-tree"></i></div>
|
|
<h5>Snowboarder</h5>
|
|
</div>
|
|
<div </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /Section: About -->
|
|
<!-- Section: Services (Passions) -->
|
|
<section id="services" class="text-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2>What I Do</h2>
|
|
<div class="spacer-10"></div>
|
|
<div class="col-md-4 wp2">
|
|
<div class="icon"><i class="fa fa-laptop"></i></div>
|
|
<h3>Design</h3>
|
|
<p>Design isn't just what a product looks like and feels like on the outside. Design encompasses the internal functionality of a product as well as the overall user experience. I strive to design interfaces and experiences that people can enjoy on all digital mediums.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 wp2 delay-025s">
|
|
<div class="icon"><i class="fa fa-code"></i></div>
|
|
<h3>Development</h3>
|
|
<p>With a strong foundation in computer science, I'm passionate about web design and development, and interested in mobile app development. As I grow as a developer, I hope to write clean, readable code that can be used by others and leveraged to create beautiful software.</p>
|
|
</div>
|
|
<div class="col-md-4 wp2 delay-05s">
|
|
<div class="icon"><i class="fa fa-lightbulb-o"></i></div>
|
|
<h3>Involvement</h3>
|
|
<p>At Northeastern, I'm currently the web chair for <a href="http://nuwit.ccs.neu.edu" target="_blank">nuWiT</a> (NU Women in Tech) as well as a Teaching Assistant for the undergrad HCI course. Previously, I've been involved with the club water polo team, the resident student association, and the ski and snowboard club.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section: Experience -->
|
|
<section id="experience">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="col-md-10 col-md-offset-1 text-center wp3">
|
|
<h2>Experience</h2>
|
|
<p>I've been doing web development for about 3 years now, and I'm always eager to learn more in this fast paced industry.</p>
|
|
</div>
|
|
<!-- <div class="col-md-8 col-xs-8 skills">
|
|
<ul class="skills-bar-container">
|
|
<label>HTML5</label>
|
|
<span class="percent" id="html-percent"></span>
|
|
<li>
|
|
<span class="progressbar progressred wp3-1" id="progress-1"></span>
|
|
</li>
|
|
<label>CSS3 / Sass</label>
|
|
<span class="percent" id="css-percent"></span>
|
|
<li>
|
|
<span class="progressbar progressblue wp3-2" id="progress-2"></span>
|
|
</li>
|
|
<label>Javascript / jQuery</label>
|
|
<span class="percent" id="javascript-percent"></span>
|
|
<li>
|
|
<span class="progressbar progresspurple wp3-3" id="progress-3"></span>
|
|
</li>
|
|
<label>Java</label>
|
|
<span class="percent" id="angular-percent"></span>
|
|
<li>
|
|
<span class="progressbar progressgreen wp3-4" id="progress-4"></span>
|
|
</li>
|
|
<label>MEAN Stack</label>
|
|
<span class="percent" id="php-percent"></span>
|
|
<li>
|
|
<span class="progressbar progressorange wp3-5" id="progress-5"></span>
|
|
</li>
|
|
</ul>
|
|
</div> -->
|
|
<div class="col-sm-offset-1 col-xs-12 col-sm-6 col-md-6 skills-section wp3">
|
|
<h3>Some technologies I've worked with:</h3>
|
|
<div class="row">
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/html.png" id="html"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/css.png" id="css"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/sass.png" id="sass"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/js.png" id="js"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/java.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/python.png" id="python"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/jquery.png" id="jquery"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/bootstrap.png" id="bootstrap"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/foundation.png" id="foundation"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/angular.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/node.png" id="node"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/mongodb.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/github.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/photoshop.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/indesign.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/jira.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/linux.png"></div>
|
|
<div class="col-xs-3 col-sm-2 col-md-2 skill-icon"><img class="img-responsive" src="img/skills/tumblr.png"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-offset-1 col-sm-4 col-md-offset-1 col-md-3 employment wp3">
|
|
<div class="text-center places-worked">
|
|
<h3>Where I've Worked:</h3>
|
|
<!-- <a href="http://www.starry.com/" target="_blank">
|
|
<img id="starry-logo" src="img/starry-logo.png" alt="Starry" />
|
|
</a> -->
|
|
<a href="http://www.mullenloweus.com/" target="_blank">
|
|
<img id="mullen-logo" src="img/mullen-octopus.png" alt="Mullen" />
|
|
</a>
|
|
<a href="http://www.ccs.neu.edu/" target="_blank">
|
|
<img id="nu-logo" src="img/nu-logo.png" alt="Northeastern" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /col-->
|
|
</div>
|
|
<!-- /row -->
|
|
</div>
|
|
<!-- Container-->
|
|
</section>
|
|
<!-- /Section: Experience -->
|
|
<!-- Section: Resume -->
|
|
<section id="resume">
|
|
<div class="text-center">
|
|
<div class="overlay">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2>Check out my résumé!</h2>
|
|
<div id="resume-button">
|
|
<a class="resume-btn wp4" href="resume2016.pdf" target="_blank">Grab A Copy</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- row -->
|
|
</div>
|
|
<!-- container -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /Section: Resume -->
|
|
<!-- Section: Portfolio -->
|
|
<section id="portfolio">
|
|
<div class="container">
|
|
<div class="col-lg-12 text-center">
|
|
<h2 class="section-heading">What I've Done</h2>
|
|
<h5 class="coming-soon">(more coming soon)</h5>
|
|
</div>
|
|
<div class="row portfolio-row">
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#courseSourceModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/CourseSource.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>CourseSource</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#feedbackLoopModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/feedback-loop.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Feedback Loop</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#webdevModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/webdev-home.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Web Dev Homepage</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#fontipsumsModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/fontipsums.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>FontIpsums</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#nuwitModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/nuwit.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>NU Women in Tech</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#oneCardForAllModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/onecardforall.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>One Card For All</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#medMilModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/medmil.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Medicine and the Military</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#humankindaModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/humankinda_tumblr.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>JetBlue HumanKinda Tumblr</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#uscModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/USC-iphone6s.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>U.S. Cellular</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#lovesacModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/lovesac_tumblr.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Lovesac Roots Tumblr</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5 delay-025s">
|
|
<div class="portfolio-item" data-toggle="modal" href="#mullen_comModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/mullen_com.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Mullen Lowe U.S. Website</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#bookmarksModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/bookmarks-site.png" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Personal Bookmarks</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5">
|
|
<div class="portfolio-item" data-toggle="modal" href="#calendrModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/calendr.jpg" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Calendr</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5 delay-025s">
|
|
<div class="portfolio-item" data-toggle="modal" href="#hciWebsiteModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/hciwebsite.jpg" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>HCI Website</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item-wrapper wp5 delay-05s">
|
|
<div class="portfolio-item" data-toggle="modal" href="#oblivionThemesModal">
|
|
<div class="portfolio-overlay"></div>
|
|
<div class="links">
|
|
<a class="image-link"><i class="fa fa-search-plus"></i></a>
|
|
<!-- <a href="https://google.com" target="_blank"><i class="fa fa-link"></i></a> -->
|
|
</div>
|
|
<img src="img/oblivionthemes.jpg" alt="image">
|
|
<div class="portfolio-info">
|
|
<h3>Oblivion Themes</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--************************** PORTFOLIO MODALS **************************-->
|
|
<!-- CourseSource MODAL -->
|
|
<div class="modal fade" id="courseSourceModal" tabindex="-1" role="dialog" aria-labelledby="courseSourceModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">CourseSource</h4>
|
|
<h6 class="modal-title-description">Web App</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/CourseSource.png" alt="">
|
|
</p>
|
|
<p class="modal-description">CourseSource is a web application that was built with the MEAN stack for my web development class. I wanted to build this web app to help Northeastern Students have a better experience and more functionalities while browsing the courses offered at Northeastern, especially during registration season. </br>I'm sure many Northeastern students would agree with me that our student portal is in need of a major upgrade, and this web app is just a small example of what our student portal could be like.</p>
|
|
<p class="visit"><a href="http://webdevspring2016-chiangbrittany.rhcloud.com/project/client/#/login" target="_blank" id="visit-btn">Visit Site</a> or <a href="https://github.com/bchiang7/WebDevSpring2016/tree/master/public/project" target="_blank" id="visit-btn">View Source</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Feedback Loop MODAL -->
|
|
<div class="modal fade" id="feedbackLoopModal" tabindex="-1" role="dialog" aria-labelledby="fontipsumsModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Feedback Loop</h4>
|
|
<h6 class="modal-title-description">Final Project</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/feedback-loop.png" alt="">
|
|
</p>
|
|
<p class="modal-description">This site was my final project for 5D Foundations: Experience and Drawing. Dubbed "The Emotion Machine", the goal for the project was to use HTML and CSS to create a website which elicits an emotion from the user's interaction with it or engages its user with a particular sort of experience in mind.</p>
|
|
<Br>
|
|
<p class="modal-description"><strong>Note:</strong> For an optimal experience, use chrome with your sound on</p>
|
|
<p class="modal-description"><strong>Warning:</strong> Very resource heavy — efficiency & optimization was definitely not a concern for this project.</p>
|
|
<p class="visit"><a href="http://brittanychiang.com/feedback-loop/" target="_blank" id="visit-btn">Visit Site</a> or <a href="https://github.com/bchiang7/feedback-loop" target="_blank" id="visit-btn">View Source</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Web Dev Homepage MODAL -->
|
|
<div class="modal fade" id="webdevModal" tabindex="-1" role="dialog" aria-labelledby="fontipsumsModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Web Development Homepage</h4>
|
|
<h6 class="modal-title-description">Landing Page</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/webdev-home.png" alt="">
|
|
</p>
|
|
<p class="modal-description">This was a very simple landing page I made for my web development class, hosted on Openshift. It contains a small blurb and the various links required by the professor.</p>
|
|
<Br>
|
|
<p class="modal-description"><strong>Note:</strong> The live assignment is not working due to having to remove functionality from the assignment to make my final project run smoothly.</p>
|
|
<p class="visit"><a href="http://webdevspring2016-chiangbrittany.rhcloud.com/" target="_blank" id="visit-btn">Visit Site</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- FontIpsums MODAL -->
|
|
<div class="modal fade" id="fontipsumsModal" tabindex="-1" role="dialog" aria-labelledby="fontipsumsModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Fontipsums</h4>
|
|
<h6 class="modal-title-description">Website</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/fontipsums.png" alt="">
|
|
</p>
|
|
<p class="modal-description">I really enjoy typography and recently became semi-obssessed with discovering new font pairings. I whipped up this simple website to display some of my favorite pairings combined with some fun lorem ipsum variations I found on the web.</p>
|
|
<p class="visit"><a href="http://brittanychiang.com/fontipsums/" target="_blank" id="visit-btn">Visit Site</a> or <a href="https://github.com/bchiang7/fontipsums" target="_blank" id="visit-btn">View Source</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- nuWiT MODAL -->
|
|
<div class="modal fade" id="nuwitModal" tabindex="-1" role="dialog" aria-labelledby="nuwitModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Northeastern University Women in Tech</h4>
|
|
<h6 class="modal-title-description">Club Website</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/nuwit.png" alt="">
|
|
</p>
|
|
<p class="modal-description">While serving on the e-board as web chair for Northeastern University Women in Technology (NU WiT), I did a complete overhaul on the club website. I designed and built the new website from the ground up. I was responsible for the upkeeping and maintainence of the site.</p>
|
|
<p class="visit"><a href="http://nuwit.ccs.neu.edu/" target="_blank" id="visit-btn">Visit Site</a> or <a href="https://github.com/nuwit/website" target="_blank" id="visit-btn">View Source</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ONE CARD FOR ALL MODAL -->
|
|
<div class="modal fade" id="oneCardForAllModal" tabindex="-1" role="dialog" aria-labelledby="oneCardForAllModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">One Card For All</h4>
|
|
<h6 class="modal-title-description">Mullen's Holiday Card 2015</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/onecardforall.png" alt="">
|
|
</p>
|
|
<p class="modal-description">In the spirit of wishing the world peace and joy during the 2015 holiday season, Mullen built a site around an algorithm that generates a holiday greeting to each and every person on the planet. We also accounted for newcomers being added at an amazing rate. Overall, the website is a tranquil, animated experience. As new names appear, visitors can watch them fall, like snowflakes, onto a stylized world map. Users can also find their own name and see it as part of the world collective.</p>
|
|
<br>
|
|
<p class="modal-description">Check out this short <b><a href="https://vimeo.com/152734803" target="_blank">video</a></b> describing the project!</p>
|
|
<p class="visit"><a href="http://onecardforall.org" target="_blank" id="visit-btn">Visit Site</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- MED MIL MODAL -->
|
|
<div class="modal fade" id="medMilModal" tabindex="-1" role="dialog" aria-labelledby="medMilModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Medicine and the Military</h4>
|
|
<h6 class="modal-title-description">Website</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/medmil.png" alt="">
|
|
</p>
|
|
<p class="modal-description">Medicine and the Military is one of the Department of Defense sites I was involved in working on while at Mullen. I worked on various elements of the website, including the full bleed header video, many design tweaks, and the overall experience in general.</p>
|
|
<p class="visit"><a href="http://medicineandthemilitary.com" target="_blank" id="visit-btn">Visit Site</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- HUMANKINDA MODAL -->
|
|
<div class="modal fade" id="humankindaModal" tabindex="-1" role="dialog" aria-labelledby="mullen_comModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">JetBlue HumanKinda</h4>
|
|
<h6 class="modal-title-description">Tumblr Site</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/humankinda_tumblr.png" alt="">
|
|
</p>
|
|
<p class="modal-description">At Mullen, I played a major role in the development and design of this Tumblr site to complement JetBlue's new HumanKinda documentary. The site houses the video documentary at the top, the many graphics created by Mullen for the campaign, and an interactive quiz to determine how "HumanKinda" you are.
|
|
<br> Read more about this project on <a href="http://www.adweek.com/adfreak/jetblue-makes-16-minute-film-about-being-less-busy-and-its-surprisingly-fun-167714" target="_blank">AdWeek</a>, <a href="http://www.fastcocreate.com/3052562/see-how-ridiculously-busy-we-all-are-in-humankinda-a-short-film-from-jetblue" target="_blank">Fast Company</a>, and <a href="http://digiday.com/brands/humankinda-jetblue-makes-first-foray-longform-content/" target="_blank">Digiday</a>!</p>
|
|
<p class="visit"><a href="http://jetbluehumankinda.com" target="_blank" id="visit-btn">Visit Site</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- US CELLULAR MODAL -->
|
|
<div class="modal fade" id="uscModal" tabindex="-1" role="dialog" aria-labelledby="uscModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">U.S. Cellular Landing Pages</h4>
|
|
<h6 class="modal-title-description">Static Template Promo Sites</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/USC-iphone6s.png" alt="">
|
|
</p>
|
|
<p class="modal-description">At Mullen, I was resonsible for the development of several of U.S. Cellular's landing pages. Each landing page was for a different campaign, and each page lived in U.S. Cellular's static template.
|
|
<br> A few pages I built can be found <b><a href="http://www.uscellular.com/uscellular/common/digitalLandingTemplate.jsp?id=m&page=podnetworkrw.html" target="_blank">here</a></b>, <b><a href="http://www.uscellular.com/uscellular/common/digitalLandingTemplate.jsp?id=m&page=promo-iphone6s.html" target="_blank">here</a></b>, and <b><a href="http://www.uscellular.com/uscellular/common/digitalLandingTemplate.jsp?id=m&page=holiday15.html" target="_blank">here</a></b>.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- MULLEN DISPLAYS MODAL -->
|
|
<div class="modal fade" id="displaysModal" tabindex="-1" role="dialog" aria-labelledby="mullen_comModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Mullen Display Screens</h4>
|
|
<h6 class="modal-title-description"></h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/mullen_displays_fit.png" alt="">
|
|
</p>
|
|
<p class="modal-description">I was involved in the prototyping and initial development of Mullen Display Screens, which was an in-house project at Mullen Lowe's Boston office. This site is displayed on various TV screens around the office as an convenient way to keep employees and guests informed about what goes on at Mullen Lowe. With a Wordpress backend, it's easy for Mullen employees to maintain and update the information displayed by the site.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- LOVESAC MODAL -->
|
|
<div class="modal fade" id="lovesacModal" tabindex="-1" role="dialog" aria-labelledby="mullen_comModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Lovesac</h4>
|
|
<h6 class="modal-title-description">Tumblr Site</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/lovesac_tumblr.png" alt="">
|
|
</p>
|
|
<p class="modal-description">For Lovesac's 20th anniversary, Mullen built this Tumblr timeline site to document Lovesac's history juxtaposed with different cultural trends and pop culture throughout the years. I inherited the code for this shortly before launch, and was responsible for finishing the development on a tight deadline, as well as handling hotfixes.</p>
|
|
<p class="visit"><a href="http://roots.lovesac.com" target="_blank" id="visit-btn">Visit Site</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- MULLEN.COM MODAL -->
|
|
<div class="modal fade" id="mullen_comModal" tabindex="-1" role="dialog" aria-labelledby="mullen_comModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">MullenLoweUS.com</h4>
|
|
<h6 class="modal-title-description">Mullen Lowe's Website</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/mullen_com.png" alt="">
|
|
</p>
|
|
<p class="modal-description">In the beginning of my co-op at Mullen, I tackled and fixed many major bugs and blockers for the company website. I worked with digital producers to create a site style guide and optimized the homepage particle image across all browsers.</p>
|
|
<p class="visit"><a href="http://us.mullenlowe.com/" target="_blank" id="visit-btn">Visit Site</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- BOOKMARKS MODAL -->
|
|
<div class="modal fade" id="bookmarksModal" tabindex="-1" role="dialog" aria-labelledby="bookmarksModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Bookmarks</h4>
|
|
<h6 class="modal-title-description">A Compilation of Front End Dev Bookmarks</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/bookmarks-site.png" alt="">
|
|
</p>
|
|
<p class="modal-description">One day I realized my bookmarks folder was overflowing and disorganized. So, I decided to make what I had always hoped my bookmarks folder to look like. This site is essentially a visualization of my bookmarks folder, and also a resource for other developers and designers. This site is mainly for my personal reference, but hopefully, other people find it useful.</p>
|
|
<br>
|
|
<p class="modal-description"><b>NOTE:</b> Optimized for desktop only.</p>
|
|
<p class="visit"><a href="http://brittanychiang.com/bookmarks/" target="_blank" id="visit-btn">Visit Site</a> or <a href="https://github.com/bchiang7/Bookmarks" target="_blank" id="visit-btn">View Source</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- CALENDR MODAL -->
|
|
<div class="modal fade" id="calendrModal" tabindex="-1" role="dialog" aria-labelledby="calendrModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Calendr</h4>
|
|
<h6 class="modal-title-description">All-In-One Calendar/Scheduling Web App</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/calendr.jpg" alt="">
|
|
</p>
|
|
<p class="modal-description">While taking Northeastern's Human Computer Interaction Course, my team and I built a prototype of a web application called Calendr to streamline and mitigate the number of applications that students use to manage their lives. We conceptualized, tested, and developed an all-in-one calendar/homework assignment/to-do list application designed specifically for students. For the purposes of our course, we only implemented a prototype of the front end, which we did with HTML, CSS, jQuery, JavaScript, and the bootstrap framework.</p>
|
|
<p class="modal-description">Read about the steps we took to create the final product
|
|
<strong><a href="http://www.ccs.neu.edu/home/bchiang7/project.html" target="_blank">here</a></strong>.</p>
|
|
<p class="visit"><a href="http://www.ccs.neu.edu/home/bchiang7/calendr/login.html" target="_blank" id="visit-btn">Visit Site</a> or <a href="https://github.com/bchiang7/Calendr" target="_blank" id="visit-btn">View Source</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- HCI WEBSITE MODAL -->
|
|
<div class="modal fade" id="hciWebsiteModal" tabindex="-1" role="dialog" aria-labelledby="hciWebsiteModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">HCI Course Website</h4>
|
|
<h6 class="modal-title-description">Homework Submission Website</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/hciwebsite.jpg" alt="">
|
|
</p>
|
|
<p class="modal-description">This was the simple homework submission website that I created for my human computer interaction class in the spring of 2015. Built using using HTML, CSS, and the foundation framework by Zurb. It is where you can find my homework assignments, paper critiques, and group project assignments.</p>
|
|
<p class="visit"><a href="http://www.ccs.neu.edu/home/bchiang7/is4300.html" target="_blank" id="visit-btn">Visit Site</a> or <a href="https://github.com/bchiang7/IS4300_website" target="_blank" id="visit-btn">View Source</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- OBLIVION THEMES MODAL -->
|
|
<div class="modal fade" id="oblivionThemesModal" tabindex="-1" role="dialog" aria-labelledby="oblivionThemesModal" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Oblivion Themes</h4>
|
|
<h6 class="modal-title-description">Custom Tumblr Themes & Theme Blog</h6>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
<img class="img-responsive img-centered" src="img/oblivionthemes.jpg" alt="">
|
|
</p>
|
|
<p class="modal-description">In my spare time I enjoy designing and developing custom Tumblr themes for free. Oblivion Themes is a theme blog that I created to showcase and open source my custom themes. Creating these themes are a productive way for me to keep coding in front end languages and learn new tricks in my free time. I haven't released any new themes recently, but I hope and plan on creating many more themes in the future.</p>
|
|
<p class="visit"><a href="http://www.oblivion-themes.tumblr.com" target="_blank" id="visit-btn">Visit Site</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Section: Contact -->
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-10 col-md-offset-1 text-center">
|
|
<div class="email-icon"><i class="fa fa-paper-plane-o wp6"></i></div>
|
|
<h2>Get In Touch!</h2>
|
|
<p>Whether you have an idea for a project or just want to chat, feel free to shoot me an email!</p>
|
|
<p style="margin-top:40px;">
|
|
<a id="email-button" href="mailto:brittany.chiang@gmail.com" target="_blank">Say Hello</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /Section: Contact -->
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<!-- <h3>Other places you can find me</h3> -->
|
|
<ul class="list-inline social-buttons animated fadeIn">
|
|
<!-- Facebook Button -->
|
|
<li><a id="facebook" href="https://www.facebook.com/brittany.chiang" target="_blank"><i class="fa fa-facebook"></i></a></li>
|
|
<!-- Twitter Button -->
|
|
<li><a id="twitter" href="https://twitter.com/bchiang7" target="_blank"><i class="fa fa-twitter"></i></a></li>
|
|
<!-- Instagram Button -->
|
|
<li><a id="instagram" href="https://instagram.com/bchiang7/" target="_blank"><i class="fa fa-instagram"></i></a></li>
|
|
<!-- Pinterest Button -->
|
|
<!-- <li><a id="pinterest" href="https://www.pinterest.com/brittanychiang/" target="_blank"><i class="fa fa-pinterest"></i></a></li> -->
|
|
<!-- Spotify Button -->
|
|
<li><a id="spotify" href="https://play.spotify.com/user/bchiang7" target="_blank"><i class="fa fa-spotify"></i></a></li>
|
|
<!-- Codepen Button -->
|
|
<li><a id="codepen" href="http://codepen.io/bchiang7/" target="_blank"><i class="fa fa-codepen"></i></a></li>
|
|
<!-- GitHub Button -->
|
|
<li><a id="github" href="https://github.com/bchiang7" target="_blank"><i class="fa fa-github"></i></a></li>
|
|
<!-- LinkedIn Button -->
|
|
<li><a id="linkedin" href="https://www.linkedin.com/in/bchiang7" target="_blank"><i class="fa fa-linkedin"></i></a></li>
|
|
</ul>
|
|
<div class="page-scroll">
|
|
<a id="to-top" class="page-scroll" href="#page-top">
|
|
<img id="rocket" src="img/rocket12.png" />
|
|
</a>
|
|
<p id="to-top-copy">Beam me up, Scotty!</p>
|
|
</div>
|
|
<div class="copyright">
|
|
<!-- please don't steal my stuff without permission -->
|
|
<p><i class="fa fa-copyright"></i> Brittany Chiang 2016</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- container -->
|
|
</footer>
|
|
<!-- Core JavaScript Files -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="js/jquery.easing.1.3.js"></script>
|
|
<script src="js/jquery.scrollTo.min.js"></script>
|
|
<!-- Helpers -->
|
|
<script src="js/scrolling-nav.js"></script>
|
|
<script src="js/jquery.waypoints.min.js"></script>
|
|
<script src="js/modernizr.js"></script>
|
|
<script src="js/custom.js"></script>
|
|
<script>
|
|
// $(function() {
|
|
// $(".preload").fadeOut(2000, function() {
|
|
// $(".everything").fadeIn(1000);
|
|
// });
|
|
// });
|
|
</script>
|
|
<!-- *********************************************
|
|
_ _ _ _ _
|
|
| | | | ___ _ _ | |_| |__ ___ _ __ ___| |
|
|
| |_| |/ _ \ | | | | __| '_ \ / _ \ '__/ _ \ |
|
|
| _ | __/ |_| | | |_| | | | __/ | | __/_|
|
|
|_| |_|\___|\__, | \__|_| |_|\___|_| \___(_)
|
|
|___/
|
|
|
|
Lookin' at the source code huh?
|
|
Be sure to drop me a line! I'd love to chat,
|
|
whether it's about code, design, dogs,
|
|
coffee, snowboarding, or anything in between.
|
|
|
|
- Brittany
|
|
|
|
********************************************** -->
|
|
</body>
|
|
|
|
</html>
|