xevion/old.xevion.github.io
1
0
Fork 0
mirror of https://github.com/Xevion/old.xevion.github.io.git synced 2025-12-06 07:15:32 -06:00
Code Issues Packages Projects Releases Wiki Activity
Files
e7847a5015410b2d3dede95be488885705a62b7a
old.xevion.github.io/_site/index.html
Brittany Chiang e7847a5015 add set up to read me
2016-12-21 15:58:56 -05:00

1 line
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Brittany Chiang | Front End Software Engineer</title> <link rel="shortcut icon" href="http://brittanychiang.com/img/logo-black.png" hreflang="en-us"> <meta property="og:title" content="Brittany Chiang | Front End Software Engineer"/> <meta property="og:description" content="Design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design."/> <meta property="og:type" content="website"/> <meta property="og:url" content="http://brittanychiang.com"/> <meta property="og:site_name" content="Brittany Chiang"/> <meta property="og:image" content="http://brittanychiang.com/img/og.jpg"/> <meta property="og:image:width" content="1280"/> <meta property="og:image:height" content="800"/> <meta property="og:image:type" content="image/jpg"/> <meta property="og:locale" content="en_US"> <meta name="description" content="Design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design."> <meta name="keywords" content="design, development, web, bchiang7, brittany, chiang, javascript, northeastern"> <meta name="google-site-verification" content="DCl7VAf9tcz6eD9gb67NfkNnJ1PKRNcg8qQiwpbx9Lk"/> <meta itemprop="name" content="Brittany Chiang | Front End Software Engineer"> <meta itemprop="description" content="Design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design."> <meta itemprop="image" content="http://brittanychiang.com/img/og.jpg"> <meta name="twitter:card" content="summary"> <meta name="twitter:url" content="http://brittanychiang.com"> <meta name="twitter:site" content="@bchiang7"> <meta name="twitter:creator" content="@bchiang7"> <meta name="twitter:title" content="Brittany Chiang | Front End Software Engineer"> <meta name="twitter:description" content="Design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design."> <meta name="twitter:image:src" content="http://brittanychiang.com/img/og.jpg"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css"> <link rel="stylesheet" href="/css/main.css" hreflang="en-us"> <script>!function(e,t,a,n,c,s,o){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,s=t.createElement(a),o=t.getElementsByTagName(a)[0],s.async=1,s.src=n,o.parentNode.insertBefore(s,o)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-84377262-1","auto"),ga("send","pageview");</script> </head> <body> <nav id="dot-nav"> <ul> <li class="dot-container"> <a href="#intro-section" data-number="1"> <span class="dot"></span> <span class="dot-label">Intro</span> </a> </li> <li class="dot-container"> <a href="#about-section" data-number="2"> <span class="dot"></span> <span class="dot-label">About</span> </a> </li> <li class="dot-container"> <a href="#services-section" data-number="3"> <span class="dot"></span> <span class="dot-label">What I Do</span> </a> </li> <li class="dot-container"> <a href="#skills-section" data-number="4"> <span class="dot"></span> <span class="dot-label">Skills</span> </a> </li> <li class="dot-container"> <a href="#experience-section" data-number="5"> <span class="dot"></span> <span class="dot-label">Experience</span> </a> </li> <li class="dot-container"> <a href="#portfolio-section" data-number="6"> <span class="dot"></span> <span class="dot-label">Portfolio</span> </a> </li> <li class="dot-container"> <a href="#contact-section" data-number="7"> <span class="dot"></span> <span class="dot-label">Contact</span> </a> </li> </ul> </nav> <div id="toggle" class="container"> <span class="line top"></span> <span class="line middle"></span> <span class="line bottom"></span> </div> <div id="overlay" class="overlay"> <div class="logo"><img class="logo-img" src="img/logo-white.png" alt="logo"><span>Brittany Chiang</span></div> <nav class="overlay-menu"> <ul class="menu-container"> <li class="menu-item"><a href="#intro-section">Intro</a></li> <li class="menu-item"><a href="#about-section">About</a></li> <li class="menu-item"><a href="#services-section">What I Do</a></li> <li class="menu-item"><a href="#skills-section">Skills</a></li> <li class="menu-item"><a href="#experience-section">Experience</a></li> <li class="menu-item"><a href="#portfolio-section">Portfolio</a></li> <li class="menu-item"><a href="#contact-section">Contact</a></li> </ul> </nav> </div> <div id="skrollr-body"> <section id="intro-section" class="section"> <div class="bg" data-anchor-target="#intro-section" data-bottom-top="transform: translate3d(0px, -150px, 0px);" data-top-bottom="transform: translate3d(0px, 150px, 0px);"></div> <div class="intro-wrapper"> <div class="intro-body" data-anchor-target="#intro-section" data-top="opacity: 1;" data-top-bottom="opacity: 0;"> <div class="intro-content"> <h1 class="heading" data-content="Brittany Chiang"><span class="name">Brittany Chiang</span></h1> <div class="action-wrapper"> <p class="subtext"> <a class="btn main-action">Front End Software Engineer</a> </p> </div> </div> <div class="scroll-down-wrapper"> <a href="#about-section" class="scroll-down"> <img class="logo" src="img/logo-white.png" alt="scroll down"> <span class="scroll-down-text"> Learn More <svg class="chevron" viewBox="0 0 57.942 105.958" enable-background="new 0 0 11.893 6.503"> <line fill="none" stroke="#fff" stroke-width="7" stroke-miterlimit="10" x1="2.475" y1="2.475" x2="55.467" y2="55.466"/> <line fill="none" stroke="#fff" stroke-width="7" stroke-miterlimit="10" x1="55.467" y1="50.492" x2="2.475" y2="103.484"/> </svg> </span> </a> </div> </div> </div> </section> <section id="about-section" class="section"> <div class="section-wrapper"> <div class="fade-in"> <h1 class="section-heading">Hey, I'm Brittany.</h1> <h3 class="section-subheading">I'm a design-minded, detail oriented software engineer passionate about combining beautiful code with beautiful design.</h3> <span class="divider"></span> <div class="about-wrapper"> <img class="headshot" src="img/headshot.jpg" alt="headshot"> <div class="about-text-wrapper"> <p class="about-text"><strong>I'm a fourth year student at Northeastern University</strong> in Boston studying computer science and interaction design. I have experience developing and designing software for the web, from simple landing pages to progressive web applications. I strive to create software that not only functions efficiently under the hood, but also provides intuitive, pixel-perfect user experiences.</p> <p class="about-text">I love learning new and better ways to create seamless user experiences with clean, efficient, and scalable code. I consider work an ongoing education, and I'm always looking for opportunities to work with those who are willing to share their knowledge as much as I want to learn. At the end of the day, my primary goal is to create something beautiful with people that bring out the best in me.</p> <p class="about-text"><strong>When I'm not in front of a computer screen,</strong> I'm probably snowboarding, traveling, petting dogs, or learning a new song on my uke.</p> </div> </div> </div> </div> </section> <section id="services-section" class="section gap"> <div class="bg" data-anchor-target="#services-section" data-bottom-top="transform: translate3d(0px, -150px, 0px);" data-top-bottom="transform: translate3d(0px, 150px, 0px);"></div> <div class="overlay-wrapper"> <div class="fade-in"> <h1 class="section-heading">What I Do</h1> <span class="divider"></span> <div class="services-wrapper"> <div class="service-row"> <div class="service-column"> <div class="sprite webdev"></div> <h2 class="service-heading">Web Development</h2> <p class="service-text">I love using HTML, CSS, and JavaScript with pre-processors and build tools such as Sass and Grunt to produce pixel-perfect websites and apps with semantic, modular front-end code and dry, efficient back-end code for the web.</p> </div> <div class="service-column"> <div class="sprite ui"></div> <h2 class="service-heading">Responsive UI Design</h2> <p class="service-text"><strong><em>"A user interface is like a joke. If you have to explain it, it's not that good."</em></strong> I strive to develop and implement responsive and aesthetically pleasing interfaces for websites and apps that adapt to any type of device, platform, or browser.</p> </div> </div> <div class="service-row"> <div class="service-column"> <div class="sprite xd"></div> <h2 class="service-heading">Experience Design</h2> <p class="service-text">There have been far too many times where I've been trying to accomplish a simple task on a website, and ended up wanting to throw my computer out the window in frustration. Needless to say, user experience is an aspect of software I am always focused on perfecting.</p> </div> <div class="service-column"> <div class="sprite wit"></div> <h2 class="service-heading">Inclusivity in Tech</h2> <p class="service-text">Coding and designing aside, I am a strong advocate for diversifying the tech industry, especially for women. I currently lead Northeastern Women in Tech, and was a 2016 <a href="http://ghc.anitaborg.org/" target="_blank">Grace Hopper Conference</a> Scholar.</p> </div> </div> </div> </div> </div> </section> <section id="skills-section" class="section"> <div class="section-wrapper"> <div class="fade-in"> <h1 class="section-heading">Skills</h1> <span class="divider"></span> <div class="skills-flex-wrapper"> <div class="flex-item dev-wrapper"> <h2 class="skills-heading"> <span class="sprite dev"></span> <span>Development</span> </h2> <ul> <li class="dev-item">JavaScript</li> <li class="dev-item">HTML5</li> <li class="dev-item">CSS3</li> <li class="dev-item">Handlebars</li> <li class="dev-item">Backbone</li> <li class="dev-item">NodeJS</li> <li class="dev-item">Jekyll</li> <li class="dev-item">React</li> <li class="dev-item">Python</li> </ul> </div> <div class="flex-item design-wrapper"> <h2 class="skills-heading"> <span class="sprite design"></span> <span>Design</span> </h2> <ul> <li class="design-item"><img class="item-img" src="img/icons/adobe-photoshop.png" alt="adobe-photoshop"></li> <li class="design-item"><img class="item-img" src="img/icons/adobe-indesign.png" alt="adobe-indesign"></li> <li class="design-item"><img class="item-img" src="img/icons/adobe-illustrator.png" alt="adobe-illustrator"></li> <li class="design-item"><img class="item-img" src="img/icons/invision.png" alt="invision"></li> <li class="design-item"><img class="item-img" src="img/icons/zeplin.png" alt="zeplin"></li> </ul> </div> <div class="flex-item check-wrapper"> <div class="tools-wrapper"> <h2 class="skills-heading"> <span class="sprite tools"></span> <span>Tools</span> </h2> <ul class="list"> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>Git, Github</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>Command Line</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>Chrome DevTools</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>Grunt/Gulp</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>Postman</li> </ul> </div> <div class="knowledge-wrapper"> <h2 class="skills-heading"> <span class="sprite knowledge"></span> <span>Knowledge</span></h2> <ul class="list"> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>CSS Detangling</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>ES6</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>Usability</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>Wireframing</li> <li class="list-item"><img class="item-svg" src="img/icons/checkmark.svg" alt="checkmark"/>SEO</li> </ul> </div> </div> </div> </div> </div> </section> <section id="experience-section" class="section gap"> <div class="bg" data-anchor-target="#experience-section" data-bottom-top="transform: translate3d(0px, -150px, 0px);" data-top-bottom="transform: translate3d(0px, 150px, 0px);"></div> <div class="overlay-wrapper"> <div class="fade-in"> <div class="center"> <h1 class="section-heading">Experience</h1> <span class="divider center"></span> <p class="experience-description">Thanks to Northeastern's co-op program, I've had the privelege of completing two awesome six-month co-ops as a Creative Technologist at <a href="http://us.mullenlowe.com/" target="_blank">MullenLowe U.S.</a> and Software Engineer at <a href="https://starry.com/" target="_blank">Starry</a>. I'm currently on looking for my third and final co-op from July to December 2017.</p> </div> <div class="experience-wrapper"> <div id="timeline"> <div class="timeline-block"> <div class="timeline-content"> <h2 class="position">Northeastern University</h2> <h3 class="company"><a href="http://www.ccis.northeastern.edu/program/information-science-bs/" target="_blank">NU College of Computer &amp; Information Science</a></h3> <p class="job-desc">Candidate for Bachelor of Science in Information Science with a concentration in Human Computer Interaction (HCI) and a minor in Interaction Design. <strong>Graduating in May 2018.</strong></p> </div> <div class="timeline-img"> <div class="sprite university"></div> </div> <span class="date">2013 - Present</span> </div> <div class="timeline-block"> <div class="timeline-content"> <h2 class="position">HCI Research Assistant</h2> <h3 class="company"><a href="http://www.ccis.northeastern.edu/" target="_blank">NU College of Computer &amp; Information Science</a></h3> <p class="job-desc">Assisted a computer science PhD student in the development of a software prototype built with HTML, CSS, JavaScript, and jQuery to facilitate better understanding of parent-child communication preferences in low-SES (Socio-Economic Status) families. Developed remotely to meet weekly deadlines and project checkpoints.</p> </div> <div class="timeline-img"> <div class="sprite research"></div> </div> <span class="date">Mar - May 2015</span> </div> <div class="timeline-block"> <div class="timeline-content"> <h2 class="position">Creative Technologist Co-op</h2> <h3 class="company"><a href="http://us.mullenlowe.com/" target="_blank">MullenLowe U.S.</a></h3> <p class="job-desc">Developed and maintained code for in-house and client websites. Tested front-end code in various browsers and mobile devices to ensure cross-browser compatibility and responsiveness. Collaborated closely with other developers and digital producers to meet deadlines for clients including Lovesac, U.S. Cellular, JetBlue, and more.</p> </div> <div class="timeline-img"> <div class="sprite industry"></div> </div> <span class="date">July - Dec 2015</span> </div> <div class="timeline-block"> <div class="timeline-content"> <h2 class="position">HCI Teaching Assistant</h2> <h3 class="company"><a href="http://www.ccis.northeastern.edu/" target="_blank">NU College of Computer &amp; Information Science</a></h3> <p class="job-desc">Assisted professor with grading homework and project assignments. Held office hours to aid students in their understanding of core HCI concepts and reported to the professor the extent of their understanding.</p> </div> <div class="timeline-img"> <div class="sprite academic"></div> </div> <span class="date">Jan - May 2016</span> </div> <div class="timeline-block"> <div class="timeline-content"> <h2 class="position">President</h2> <h3 class="company"><a href="http://nuwit.ccs.neu.edu" target="_blank">NU Women in Tech</a></h3> <p class="job-desc">Lead weekly club meetings to foster a community of diverse women in CS. Manage a variety of academic and social activities throughout the semester, including tech talks, student panels, and workshops. Communicate regularly with e-board and administrative organizations.</p> </div> <div class="timeline-img"> <div class="sprite university"></div> </div> <span class="date">May 2016 - Present</span> </div> <div class="timeline-block"> <div class="timeline-content"> <h2 class="position">Software Engineer Co-op</h2> <h3 class="company"><a href="https://starry.com/" target="_blank">Starry, Inc.</a></h3> <p class="job-desc">Engineered and maintained major features of Starry's customer-facing web app using ES6, Handlebars, Backbone, Marionette, and CSS. Proposed and implemented scalable solutions to issues identified with cloud services and applications responsible for communicating with Starry Station. Worked closely with designers and other developers to ensure thoughtful and coherent user experiences across Starry’s mobile apps.</p> </div> <div class="timeline-img"> <div class="sprite industry"></div> </div> <span class="date">July - Dec 2016</span> </div> </div> <i class="down-arrow"></i> </div> </div> </div> </section> <a class="block-btn" href="http://brittanychiang.com/resume.pdf" target="_blank"> <span class="resume-text">View my full résumé</span> <img class="resume-img" src="img/icons/download.png" alt="download resume"> </a> <section id="portfolio-section" class="section"> <div class="section-wrapper"> <div class="fade-in"> <h1 class="section-heading">Some of My Work</h1> <span class="divider"></span> <div class="portfolio-item-wrapper"> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/weather/weather.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/weather/weather-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/weather/weather-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">Weather Widget</h2> <div class="description-buttons"> <a href="http://quiet-dusk-89245.herokuapp.com/" target="_blank">Demo</a> <a href="https://github.com/bchiang7/DemoWebApp" target="_blank">Code</a> </div> </div> <p class="portfolio-description">A simple weather app I made at HubSpot's Fall 2016 Web App Workshop utilizing Node.js, Express, and Heroku. I used the OpenWeatherMap API to get weather and forecast data, and then used the current city's coordinates to create a map background that reflected the current city using the Google Maps API.</p> <div class="used"> <ul class="used-items"> <li class="used-item">OpenWeatherMap API</li> <li class="used-item">Google Maps API</li> <li class="used-item">JavaScript</li> <li class="used-item">jQuery</li> <li class="used-item">CSS</li> <li class="used-item">Node.js</li> <li class="used-item">Express</li> <li class="used-item">Heroku</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots screentime"> <img class="img-screentime" src="img/portfolio/screentime/screentime-1.jpg" alt="screentime-1"> <img class="img-screentime" src="img/portfolio/screentime/screentime-2.jpg" alt="screentime-2"> <img class="img-screentime" src="img/portfolio/screentime/screentime-3.jpg" alt="screentime-3"> <img class="img-screentime" src="img/portfolio/screentime/screentime-4.jpg" alt="screentime-4"> </div> <div class="description-title-container"> <h2 class="description-title">Screentime 2.0</h2> <div class="description-buttons"> <a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">Demo</a> </div> </div> <p class="portfolio-description">ScreenTime 2.0 was one of <a href="https://starry.com/" target="_blank">Starry</a>'s most important consumer-facing software updates on <a href="https://starry.com/station" target="_blank">Starry Station</a>, providing new functionality for users to easily filter content, pause the internet, and even create custom rules for blocking apps like Facebook and Twitter right from their mobile phones. As a co-op, I played a large role in the implementation of this feature on Starry's cordova android app, and was responsible for building out front-end designs, linking up back-end data, as well as communicating with designers and other engineers throughout the process. <br><br> Check out the Starry App on <a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">Google Play</a>, and learn more about ScreenTime 2.0 on <a href="https://www.producthunt.com/tech/screentime-for-starry-station" target="_blank">Product Hunt</a> and the <a href="https://blog.starry.com/whats-new-screentime-just-got-better-for-parents/" target="_blank">Starry Blog</a>.</p> <div class="used"> <ul class="used-items"> <li class="used-item">JavaScript</li> <li class="used-item">CSS</li> <li class="used-item">Handlebars.js</li> <li class="used-item">Backbone.js</li> <li class="used-item">Marionette.js</li> <li class="used-item">Cordova</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/resume/resume.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/resume/resume-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/resume/resume-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">Online Resume</h2> <div class="description-buttons"> <a href="http://brittanychiang.com/resume" target="_blank">Demo</a> <a href="https://github.com/bchiang7/react-profile/" target="_blank">Code</a> </div> </div> <p class="portfolio-description">This is just an online version of my resume I made for fun. I was interested in learning React.js, so I found this <a href="https://medium.com/learning-new-stuff/building-your-first-react-js-app-d53b0c98dc#.1439cdewq">simple tutorial</a> and it kind of spun into this weekend project. I probably didn't need to use React at all, but hey, at least I learned a few things!</p> <div class="used"> <ul class="used-items"> <li class="used-item">JavaScript</li> <li class="used-item">React.js</li> <li class="used-item">CSS</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/websitev1/websitev1.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/websitev1/websitev1-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/websitev1/websitev1-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">Old Personal Website</h2> <div class="description-buttons"> <a href="http://brittanychiang.com/v1" target="_blank">Demo</a> <a href="https://github.com/bchiang7/website_2015/" target="_blank">Code</a> </div> </div> <p class="portfolio-description">This was my first portfolio website I built in 2014. It's a simple one-pager like this one, but relied heavily on Bootstrap. Since then, I think my web development and design skills have expanded immensely.</p> <div class="used"> <ul class="used-items"> <li class="used-item">HTML</li> <li class="used-item">CSS</li> <li class="used-item">Bootstrap</li> <li class="used-item">JavaScript</li> <li class="used-item">jQuery</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/coursesource/coursesource.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/coursesource/coursesource-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/coursesource/coursesource-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">CourseSource</h2> <div class="description-buttons"> <a href="http://webdevspring2016-chiangbrittany.rhcloud.com/project/client/#/login" target="_blank">Demo</a> <a href="https://github.com/bchiang7/WebDevSpring2016/tree/master/public/project" target="_blank">Code</a> </div> </div> <p class="portfolio-description">CourseSource is a web application built on the MEAN (MongoDB, Express, Angular, Node) stack for my web development class in 2015. I created this web app with the intention of providing Northeastern Students a better experience browsing the courses offered at Northeastern (which is currently a painstakingly tedious task on our current student portal).</p> <div class="used"> <ul class="used-items"> <li class="used-item">HTML</li> <li class="used-item">CSS</li> <li class="used-item">Bootstrap</li> <li class="used-item">JavaScript</li> <li class="used-item">jQuery</li> <li class="used-item">NodeJS</li> <li class="used-item">AngularJS</li> <li class="used-item">Express</li> <li class="used-item">MongoDB</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/nuwit/nuwit.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/nuwit/nuwit-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/nuwit/nuwit-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">NU Women in Tech</h2> <div class="description-buttons"> <a href="http://nuwit.ccs.neu.edu/" target="_blank">Demo</a> <a href="https://github.com/nuwit/website" target="_blank">Code</a> </div> </div> <p class="portfolio-description">While serving as web chair for Northeastern University Women in Technology, I did a complete overhaul of the club website. I designed and developed the current website using Jekyll as a static site generator, and was responsible for the upkeeping and maintainence of the site.</p> <div class="used"> <ul class="used-items"> <li class="used-item">Jekyll</li> <li class="used-item">Liquid</li> <li class="used-item">Yaml</li> <li class="used-item">HTML</li> <li class="used-item">CSS</li> <li class="used-item">Bootstrap</li> <li class="used-item">jQuery</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/fontipsums/fontipsums.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/fontipsums/fontipsums-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/fontipsums/fontipsums-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">Fontipsums</h2> <div class="description-buttons"> <a href="http://brittanychiang.com/fontipsums" target="_blank">Demo</a> <a href="https://github.com/bchiang7/fontipsums" target="_blank">Code</a> </div> </div> <p class="portfolio-description">As a typography nerd, I wanted a way to visually see different font combinations together. 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. Over the course of creating this site, I learned a lot about web fonts and best practices.</p> <div class="used"> <ul class="used-items"> <li class="used-item">HTML</li> <li class="used-item">SCSS</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/onecard/onecard.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/onecard/onecard-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/onecard/onecard-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">One Card For All</h2> <div class="description-buttons"> <a href="http://onecardforall.org" target="_blank">Demo</a> </div> </div> <p class="portfolio-description">At MullenLowe, I helped build this 2015 holiday site around an algorithm that generated 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. Check out this short <a href="https://vimeo.com/152734803" target="_blank">video</a> describing the project!</p> <div class="used"> <ul class="used-items"> <li class="used-item">HTML</li> <li class="used-item">SCSS</li> <li class="used-item">JavaScript</li> <li class="used-item">jQuery</li> </ul> </div> </div> <span class="divider"></span> <div class="portfolio-row"> <div class="screenshots "> <img class="img-lg" src="img/portfolio/humankinda/humankinda.jpg" alt="desktop-screenshot"> <img class="img-md" src="img/portfolio/humankinda/humankinda-tablet.jpg" alt="tablet-screenshot"> <img class="img-sm" src="img/portfolio/humankinda/humankinda-mobile.jpg" alt="mobile-screenshot"> </div> <div class="description-title-container"> <h2 class="description-title">JetBlue HumanKinda</h2> <div class="description-buttons"> <a href="http://jetbluehumankinda.com" target="_blank">Demo</a> </div> </div> <p class="portfolio-description">During my first co-op as a creative technologist at Mullen Lowe, I played a major role in the development of this Tumblr site to complement JetBlue's HumanKinda campaign and 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. This project was featured 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> <div class="used"> <ul class="used-items"> <li class="used-item">HTML</li> <li class="used-item">CSS</li> <li class="used-item">JavaScript</li> <li class="used-item">jQuery</li> </ul> </div> </div> <span class="divider"></span> </div> </div> </div> </section> <section id="contact-section" class="section gap"> <div class="bg" data-anchor-target="#contact-section" data-bottom-top="transform: translate3d(0px, -150px, 0px);" data-top-bottom="transform: translate3d(0px, 150px, 0px);"></div> <div class="overlay-wrapper"> <div class="fade-in"> <div class="center"> <h1 class="section-heading">Get In Touch</h1> <span class="divider center"></span> <p class="contact-description">Have a sweet project in mind or just want to say hi? Feel free to send me a message!</p> </div> <div class="contact-wrapper"> <form class="form-wrapper" autocomplete="off" method="post" action="https://formspree.io/brittany.chiang@gmail.com"> <div class="input-wrapper"> <label for="name" class="input-label">Name</label> <input type="text" name="name" class="contact-input" id="name" required> </div> <div class="input-wrapper"> <label for="email" class="input-label">Email</label> <input type="email" name="_replyto" class="contact-input" id="email" required> </div> <div class="input-wrapper"> <label for="subject" class="input-label">Subject</label> <input type="text" name="_subject" class="contact-input" id="subject" required> </div> <div class="input-wrapper"> <label for="message" class="input-label" id="message-label">Message</label> <textarea name="message" class="contact-input autoExpand" id="message" required></textarea> </div> <button type="submit" name="submit" class="message-btn"> <span>Send Message</span> </button> </form> </div> </div> </div> </section> <section id="footer" class="section"> <div class="section-wrapper"> <ul class="soc"> <li class="soc-item"><a href="mailto:brittany.chiang@gmail.com" target="_blank" class="icon email" title="email"><img src="img/icons/email.svg" alt="email"></a></li> <li class="soc-item"><a href="https://twitter.com/bchiang7" target="_blank" class="icon twitter" title="twitter"><img src="img/icons/twitter.svg" alt="twitter"></a></li> <li class="soc-item"><a href="https://instagram.com/bchiang7" target="_blank" class="icon instagram" title="instagram"><img src="img/icons/instagram.svg" alt="instagram"></a></li> <li class="soc-item"><a href="http://codepen.io/bchiang7" target="_blank" class="icon codepen" title="codepen"><img src="img/icons/codepen.svg" alt="codepen"></a></li> <li class="soc-item"><a href="https://github.com/bchiang7" target="_blank" class="icon github" title="github"><img src="img/icons/github.svg" alt="github"></a></li> <li class="soc-item"><a href="https://www.linkedin.com/in/bchiang7" target="_blank" class="icon linkedin" title="linkedin"><img src="img/icons/linkedin.svg" alt="linkedin"></a></li> </ul> <div class="copyright-wrapper center"> <p>&copy;&nbsp;&nbsp;Brittany Chiang 2016</p> </div> </div> </section> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script> <script src="/js/main.js"></script> </body> </html>
Reference in New Issue View Git Blame Copy Permalink