Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

dmd-git-demo/portfolio_website.html

Go to file
 
 
Cannot retrieve contributors at this time
782 lines (591 sloc) 35.3 KB
Raw Blame
Open in GitHub Desktop
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<link rel="stylesheet" href="css/animate.css">
<title></title>
</head>
<body >
<a href="#hero"><img src="img/logo_PB.png" id="brand"></a>
<div class="menu-container">
<ul class="menu">
<li class="nav-item" id="first-menu-item">
<a class="nav-link" href="#myMisson">mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myWork">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactMe">contact</a>
</li>
</ul>
</div>
<div id="hero">
<section class="cd-intro">
<h4 class="cd-headline clip is-full-width">
<span>I DESIGN</span>
<span class="cd-words-wrapper">
<b class="is-visible">SEAMLESS</b>
<b>BEAUTIFUL</b>
<b>CREATIVE</b>
</span>
</h4>
</section>
<h1>INTERFACE · EXPERIENCES</h1>
<h6>look around or view my <a href="Resume.pdf">resume</a><h6>
</div>
<div class="separation-area" id="myMisson">
<h4>MY MISSON</h4>
</div>
<!-- INITAL INFO -->
<div class="initial-info">
<div class="container">
<div class="row what-i-like">
<div class="col-sm-6 like-image">
<img src="img/Animated_Mockup.gif" class="center-block" alt="iphone gif">
</div>
<div class="col-sm-6 like-text wow fadeInRight">
<h3>What I like</h3>
<p>I am a fan of minimalistic designs and interfaces with high contrast. I appreciate websites that put just as much time into their typography as they do their color scheme. I have a soft spot for hover states and think microinteractions will be the next big thing. </p>
</div>
</div>
</div>
<div class="container">
<div class="row why-its-important">
<div class="col-sm-6 col-sm-push-6 important-image">
<img src="img/nike_socks.gif" class="center-block" alt="iphone with screen animation">
</div>
<div class="col-sm-6 col-sm-pull-6 important-text wow fadeInLeft">
<h3>Why it's important</h3>
<p>Devices will change dramtically over the next few years, and along with it, the user's experience will change too. My goal is to develop skills that transcend devices, sceen sizes, and perhaps even sceens themselves. I want to learn true UX design, a process that forms around interaction with the content, not the device itself. </p>
</div>
</div>
</div>
</div>
<!-- END OF INITIAL INFO -->
<!-- EXAMPLES SECTION -->
<div class="separation-area" id="myWork">
<h4>MY WORK</h4>
</div>
<div class="container mobile-fix-little">
<div class="row">
<div class="col-sm-6 col-md-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-sm-push-6 col-md-push-0 area-margins mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".2s">
<div class="example picture-all tile-picture-left">
<div class="first">
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-1">
<div class="circle-container">
<span class="plus-sign">+</span>
<p class="appear">view project</p>
</div>
</button>
</div>
<section id="MyModal-1" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<h3 class="modal-header">User Interface for UConn Case Competion</h3>
<div class="modal-body">
<div class="row">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<img src="img/modal/modalONE/ctc.jpg" class="modal-image">
<p>For a Case Competition held by the business school at the University of Connecticut my team and I were face with creating a platform that increased fluid communication between all levels of a business. We developed an extremely extensive business plan and along with it I created several user interfaces to show how these preactices would be carried out in our product. For this Interface I incoperated both a chat box to allow simultaneous communication, both with the skype video chat as well as text based. Our main feautres were descriptions of each speaker, their queue in line to speak, their job and what topic they would speka about. In additon I added two features that held close to one of our main goals of time effciency. The "on schedule" bar at the top and the small "time-alloted box" next to the current speaker both helped push out product beyond a generic type facetime call.</p>
</div>
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<img src="img/modal/modalONE/nexus.jpg" class="modal-image">
<p>This second interface was used as a smaller group centered workspace. I wanted to keep the multi-video chat capabilties while adding a file sharing application to aid in productivity. I modeled the abilty to chage the documents based on google docs which are incredibly useful for group work.</p>
</div>
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<img src="img/modal/modalONE/watercooler.jpg" class="modal-image">
<p>This last interface was used for a more personal face to face video chat. I wanted to make it fun and centered around interests of the person. Our idea was that a more soical office where people actually knew eachother personally would aid in productivity. For this reason I added sports, and information about family, type of coffee they drink and other interests to the bio section.</p>
</div>
</div>
</div>
<!-- both close buttons -->
<button type="button" class="btn btn-default btn-close btn-close-top" data-dismiss="modal">X</button>
<button type="button" class="btn btn-default btn-close btn-close-bottom" data-dismiss="modal">close</button>
</div>
</div>
</section>
<div class="blur-me">
<img src="img/screen_1.jpg">
</div>
<section class="caption">UI/UX DESIGN</section>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-sm-pull-6 col-md-pull-0 area-margins wow fadeInUp mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".4s">
<div class="example tile-words-right words-all">
<section>
<h3>ui/ux design</h3>
<p>In a 6 hour competition my group and I developed a business plan for a group skype platform. I was in charge of creating 3 interfaces that fully incorperated our business plan and were visually appealing. I had to work within a time constraint and with multiple people. We earned first prize at the competition.</p>
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-1">
<p>view project <img src="img/blue_arrow.svg" class="blue-arrow-right"></p>
</button>
</section>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-push-6 area-margins mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".2s">
<div class="example picture-all tile-picture-right">
<div class="first">
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-2">
<div class="circle-container">
<span class="plus-sign">+</span>
<p class="appear">view project</p>
</div>
</button>
</div>
<section id="MyModal-2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<h3 class="modal-header">Website redesign for UConn Counceling and Mental Health</h3>
<div class="modal-body">
<div class="row">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<img src="img/modal/modalTWO/counseling.png" class="modal-image">
<p>This project for a study on human factors was centered around the current website for UConn's Counseling and Mental Health. It cucrrently lacks clean design and the hierarchy of information that was intened is lacking. In order to fix this I developed an interface that had multiple paths to the same page and larger sections for more important information. I kept the color scheme (such as the red for Imediete help) becasue I felt for anyone who has used the site should be able to have some fimiliarity with the functions on the site.</p>
</div>
<!-- <div class="col-sm-2"></div> -->
</div>
</div>
<!-- both close buttons -->
<button type="button" class="btn btn-default btn-close btn-close-top" data-dismiss="modal">X</button>
<button type="button" class="btn btn-default btn-close btn-close-bottom" data-dismiss="modal">close</button>
</div>
</div>
</section>
<div class="blur-me">
<img src="img/screen_2.jpg">
</div>
<section class="caption">REDESIGN</section>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-pull-6 area-margins wow fadeInUp mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".4s">
<div class="example tile-words-left words-all">
<section>
<h3>site redesign</h3>
<p>For a class we looked at the current website for the Counceling and Mental Health Services. I was tasked with coming up with a possible redesign for the site. I was required to maintain the current hierarchy of the site while making it more user friendly. In addition I added a few extra sections which I felt would engadge the user to interact with the site.</p>
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-2">
<p>view project <img src="img/blue_arrow.svg" class="blue-arrow-right"></p>
</button>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-sm-push-6 col-md-push-0 area-margins mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".2s";>
<div class="example picture-all tile-picture-left">
<div class="first">
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-3">
<div class="circle-container">
<span class="plus-sign">+</span>
<p class="appear">view project</p>
</div>
</button>
</div>
<section id="MyModal-3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<h3 class="modal-header">Storyboards for short story</h3>
<div class="modal-body">
<div class="row">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-6 col-sm-offset-3">
<img src="img/modal/modalTHREE/drawn_character.jpg" class="modal-image">
<p>For this project I created a story boards for a short story. I started on paper to create a young boy. I am not an amazing artist so this was tricky to make a character that I would be able to create emotion with. I eventually came up with this.</p>
</div>
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-8 col-sm-offset-2">
<img src="img/modal/modalTHREE/character_development.jpg" class="modal-image">
<p>I then took my drawing and scanned it on to my computer. I used illustrator to re create a digital version of the character. As you can see from the character on the far left, I had origianly started out in illustrator and then decided I didnt like it and moved to paper and pencil. I think this alone was the biggest part of the project. I had often started my projects straight in photoshop or illustraor before thinking them through. While this may work on occasion, starting on paper is something I always start with now. </p>
</div>
<div class="col-sm-8 col-sm-offset-2">
<img src="img/modal/modalTHREE/sketches.jpg" class="modal-image">
<p>After I had my character I started to storyboard the idea. I needed to keep it semi-simple while still getting across the ideas I wanted to.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalTHREE/Midterm_1.jpg" class="modal-image">
<p>Boy opens present on christmas.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalTHREE/Midterm_2.jpg" class="modal-image">
<p>Shows the present. It is a toy car. Show father in background to establish relationship.</p>
</div>
<div class="col-sm-6 col-sm-offset-3">
<img src="img/modal/modalTHREE/Midterm_4.jpg" class="modal-image">
<p>Show boy playing with car from his perspective.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalTHREE/Midterm_3.jpg" class="modal-image">
<p>Pan out to show he is infront of the house. Boy looks happy.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalTHREE/Midterm_5.jpg" class="modal-image">
<p>father walks into garage.</p>
</div>
<div class="col-sm-6 col-sm-offset-3">
<img src="img/modal/modalTHREE/Midterm_6.jpg" class="modal-image">
<p>Father backs down the drive way.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalTHREE/Midterm_7.jpg" class="modal-image">
<p>Zoom in on car tire running over the boys toy.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalTHREE/Midterm_8.jpg" class="modal-image">
<p>For the final shot I wanted to add and emotional stacne of the boy and his father, but at the same time have it be funny and show the father was just driving a huge version of the toy car. When I finished I realized it wasnt clear he had gotten out of the car so I added some light footprints to the road to show his movement.</p>
</div>
<div class="col-xs-12">
<img src="img/modal/modalTHREE/final.jpg" class="modal-image">
<p>This is the the final storyboard put together for someone to view quickly.</p>
</div>
</div>
</div>
<!-- both close buttons -->
<button type="button" class="btn btn-default btn-close btn-close-top" data-dismiss="modal">X</button>
<button type="button" class="btn btn-default btn-close btn-close-bottom" data-dismiss="modal">close</button>
</div>
</div>
</section>
<div class="blur-me">
<img src="img/screen_3.jpg">
</div>
<section class="caption">STORYBOARDS</section>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-sm-pull-6 col-md-pull-0 area-margins wow fadeInUp mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".4s">
<div class="example tile-words-right words-all">
<section>
<h3>storyboards</h3>
<p> For a course I was assigned to tell a short story. This was one of the most challenging assignments becasue it forced me to look very closely at my workflow from start to finish. Working on paper first was huge to this assignment and an idea that woroked so well for me, I now try to apply it to everything I work on.</p>
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-3">
<p>view project <img src="img/blue_arrow.svg" class="blue-arrow-right"></p>
</button>
</section>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-push-6 area-margins mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".2s">
<div class="example picture-all tile-picture-right">
<div class="first">
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-4">
<div class="circle-container">
<span class="plus-sign">+</span>
<p class="appear">view project</p>
</div>
</button>
</div>
<section id="MyModal-4" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<h3 class="modal-header">Animation for UConn Center for Career Development</h3>
<div class="modal-body">
<div class="row">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<div class="video-background">
<video controls poster="img/modal/modalFOUR/uconn_poster_1.png" class="modal-image">
<source src="img/modal/modalFOUR/dmd_logo_1.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p>This first animation was used for the bumper of a video put out by the Center for Career Development about school pride. I needed to keep the slogan and the mascot and end with the UConn logo, but was only alloted about 8 seconds for the shot. I had seen a similar animation on a CNN video and chose to use that as inspiration to show multiple ideas in a very short amount of time.</p>
</div>
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<div class="video-background">
<video controls poster="img/modal/modalFOUR/uconn_poster_2.png" class="modal-image">
<source src="img/modal/modalFOUR/dmd_logo_2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p>This is a just another bumper that I feel uses ease in and out very well. I think as the web become more animated this will play a bigger factor in UI/UX design.</p>
</div>
</div>
</div>
<!-- both close buttons -->
<button type="button" class="btn btn-default btn-close btn-close-top" data-dismiss="modal">X</button>
<button type="button" class="btn btn-default btn-close btn-close-bottom" data-dismiss="modal">close</button>
</div>
</div>
</section>
<div class="blur-me">
<img src="img/screen_4.jpg">
</div>
<section class="caption">ANIMATION</section>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-pull-6 area-margins wow fadeInUp mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".4s">
<div class="example tile-words-left words-all">
<section>
<h3>animation</h3>
<p>For my internship at the Center for Career Development I was assigned to made a video bumper that incorpetared a few differnt ideas. I used insiration from a CNN animation I saw that used a cube as a way to show multiple ideas quickly. This not only challnged my technical skills but my approach to how I solve problems.</p>
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-4">
<p>view project <img src="img/blue_arrow.svg" class="blue-arrow-right"></p>
</button>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-sm-push-6 col-md-push-0 area-margins mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".2s";>
<div class="example picture-all tile-picture-left">
<div class="first">
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-5">
<div class="circle-container">
<span class="plus-sign">+</span>
<p class="appear">view project</p>
</div>
</button>
</div>
<section id="MyModal-5" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<h3 class="modal-header">Poster Design for Colby College</h3>
<div class="modal-body">
<div class="row">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<img src="img/modal/modalFIVE/1.jpg" class="modal-image">
<p>This is the poster that I designed for a client at Colby College. I spoke with her over the phone and got all the details about the event being held. While this was helpful the proposal was somewhat vague and open to interpritation. I was excited at this becasue it allowed me to work freely but also made the process somewhat difficult.</p>
</div>
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<img src="img/modal/modalFIVE/2.jpg" class="modal-image">
<p>I sent the design and she loved it. However, I wasnt super happy with it, so I spent a little extra time making a second draft and sent it to her. I liked it much more but she didn't. It was tough for me to throw away those extra hours of working becasue I had done them on my own after she has aprroved the first design.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalFIVE/3.jpg" class="modal-image">
<p>This is a final picture of the 4 by 8 foot poster. It came out great and becasue I have worked less with CYMK and print it was nice to see the final product the way I had intened it to look.</p>
</div>
<div class="col-sm-6">
<img src="img/modal/modalFIVE/4.jpg" class="modal-image">
<p>This event is going to be held annumally at the college so for the time being it will be hanging in the main hall. You can go check it out if you want.</p>
</div>
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<img src="img/modal/modalFIVE/5.jpg" class="modal-image">
<p>Here is an aditional image of the event itself. I was told tons of people showed up and it went very well.</p>
</div>
</div>
</div>
<!-- both close buttons -->
<button type="button" class="btn btn-default btn-close btn-close-top" data-dismiss="modal">X</button>
<button type="button" class="btn btn-default btn-close btn-close-bottom" data-dismiss="modal">close</button>
</div>
</div>
</section>
<div class="blur-me">
<img src="img/screen_5.jpg">
</div>
<section class="caption">FREELANCE</section>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-sm-pull-6 col-md-pull-0 area-margins wow fadeInUp mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".4s">
<div class="example tile-words-right words-all">
<section>
<h3>freelance</h3>
<p>This is a poster that I made for a writing event held at Colby College. It had to incorperate several themes, including revoltution. This was one of the more difficult jobs I've done because it required me as a designer to be exremely flexible. This was fun to make and will hang in at the College for the next several years.</p>
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-5">
<p>view project <img src="img/blue_arrow.svg" class="blue-arrow-right"></p>
</button>
</section>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-push-6 area-margins mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".2s">
<div class="example picture-all tile-picture-right">
<div class="first">
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-6">
<div class="circle-container">
<span class="plus-sign">+</span>
<p class="appear">view project</p>
</div>
</button>
</div>
<section id="MyModal-6" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<h3 class="modal-header">A few other examples of my work</h3>
<div class="modal-body">
<div class="row">
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1">
<img src="img/modal/modalSIX/grad.jpg" class="modal-image">
<p>This is an example of my photoshop work. It was originally a photo of myself and my three friends from high school. Later in college I became proficent enough in photoshop and made this for them as a joke. I like to incorperate humor into my work becasue I feel it adds a personal touch that at least most people can aprechiate.</p>
</div>
<!-- <div class="col-sm-2"></div> -->
<div class="col-sm-10 col-sm-offset-1">
<div class="video-background">
<video controls poster="img/modal/modalSIX/amazon_poster.png" class="modal-image">
<source src="img/modal/modalSIX/alexa.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p>This is a mock video for an Amazon commerical for the Amazon Echo. I had fun maing this in after effects and it pushed me to work in 3D and smooth trnasitions.</p>
</div>
<div class="col-sm-10 col-sm-offset-1">
<div class="video-background">
<video controls class="modal-image">
<source src="img/modal/modalSIX/green_flash.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p>This was an expirimental movie for a project this year. I was tasked with creating something that incorperated the random line "I hate the green flashing light". I chose to make a time based gif that played off both A Clockwork Orange and The Great Gatsby. I wanted to make a juxstopostion of the cruel pysicallity of hating a green flashing light and an emotional internal struggle of the green light from the book. Its two minutes long and it is a just a loop so don't wait for anyhting to happen.</p>
</div>
<div class="col-sm-6">
<div class="video-background">
<video controls poster="img/modal/modalSIX/love_story.png" class="modal-image">
<source src="img/modal/modalSIX/love_Story.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p>This was a project that I made last year. Each person in the class was assigned a differnet platform to create the video on. I was given "vine", hence the poor quality. Despite the pixelation I think this video more than any other shows who I am as a person/designer. I wanted to make it fun and rediculous but still tell a good story. I think that in UI/UX it is extemely important to be able to bring the user through a website and having good storytelling skills is incredibly helpful for that. </p>
</div>
<div class="col-sm-6">
<div class="video-background">
<video controls class="modal-image">
<source src="img/modal/modalSIX/pbandjaz.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<p>This is just a fun video I made for my friend who has a problem picking out his hairs. It is an actual disease and I wanted to poke fun at him in a way that wasn't mean. I love that digital media is a platform to share any idea with anyone, friends, family or someone half way across the globe who I've never met before.</p>
</div>
</div>
</div>
<!-- both close buttons -->
<button type="button" class="btn btn-default btn-close btn-close-top" data-dismiss="modal">X</button>
<button type="button" class="btn btn-default btn-close btn-close-bottom" data-dismiss="modal">close</button>
</div>
</div>
</section>
<div class="blur-me">
<img src="img/screen_6.jpg">
</div>
<section class="caption">MISC.</section>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-pull-6 area-margins wow fadeInUp mobile-width-fixer" data-wow-duration="2s" data-wow-delay=".4s">
<div class="example tile-words-left words-all">
<section>
<h3>a few other projects</h3>
<p>These are a few other projects that I have done either for myself for fun or assignemnts for courses I've taken. Some are expirimental and more just for fun. These projects are not as clean cut as my previous but I feel encorperate more of my fun personality.</p>
<button type="button" class="btn" data-toggle="modal" data-target="#MyModal-6">
<p>view project <img src="img/blue_arrow.svg" class="blue-arrow-right"></p>
</button>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF EXAMPLES SECTION -->
<div class="separation-area" id="aboutMe">
<h4>ABOUT ME</h4>
</div>
<div class="about-me">
<div class="about-padding">
<!-- <div class="row"> -->
<div class="about-me-please">
<img src="img/head-shot.jpg">
<p>My name is Peter. I am a Junior at the University of Connecticut majoring in Digital Media and Design. I have a concentration in Web Design and Interactive Media and my goal is to become a UX designer. I am currently learning javascript and how to become proficient on a wacom tablet and in the next few months I am hoping to add Framer.JS to my skillset. I like those little green circles with the check mark in them that pop up when you enter correct information on forms and hate the sound that the machine makes when I take my chip out of the credit card reader. I apprechaite good movie references, hiking and swimming. I am a weekly listener of Jason Ogle's podcast "User Defenders" and would highly reccomend it to anyone interested in this discipline. I am lucky to enter a field where my creativity is awarded and hope to continue to solve problems with my work and, of course, make people laugh. </p>
</div>
<!-- </div> -->
</div>
</div>
<!-- END OF ABOUT ME -->
<div class="separation-area" id="contactMe">
<h4>CONTACT ME</h4>
</div>
<div class="container">
<div class="row contact-area">
<div class="col-sm-6 contact-image">
<img src="img/ipad_mock_up.png" alt="ipad with interface">
</div>
<div class="col-sm-6 contact-info">
<h6>PETER BRAUNSTEIN</h6>
<br>
<p><a href="mailto:peter.braunstein@uconn.edu?subject=I%20want%20to%20hire%20you">peter.braunstein@uconn.edu</a></p>
<br>
<p><a href="tel:860-841-2652">860-841-2652</a></p>
<br>
<p id="contact-resume">view my <a href="Resume.pdf">resume</a></p>
</div>
</div>
<div class="back-to-top">
<div class="topper">
<a href="#hero">back to top</a>
</div>
<div class="topper-arrow">
<img src="img/up_arrow.svg">
</div>
</div>
</div>
<footer>
<p>© ALL RIGHTS RESERVED - PETER BRAUNSTEIN 2016</p>
</footer>
<!-- <div class="separation-area" id="aboutMe">
<h4>ABOUT ME</h4>
</div>
<div class="about-me">
<div class="about-padding">
<div class="row">
<div class="col-sm-6 center">
<div class="row">
<div class="col-xs-6 col-xs-offset-6">
<img src="img/head-shot.jpg">
</div>
</div>
</div>
<div class="col-sm-6 center">
<div class="row">
<div class="col-xs-9">
<p>I am a Junior at the University of Connecticut majoring in Digital Media and Design. I have a concentration in Web Design and Interactive Media and my goal is to become a UX designer. I am currently learning javascript and how to become proficient on a wacom tablet and then hoping to add Framer.JS to my skillset. I like those little green circles with the check mark in them that pop up when you enter correct information on forms and hate the sound that the machine makes when I take my chip out of the credit card reader. I apprechaite good movie references and play trombone in my free time. I am lucky to enter a field where my creativity is awarded and hope to continue to solve problems with my work and make people laugh. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="background-color:blue; height: 500px;"></div>
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>