<div id='light'></div>

<div id="resumewrap">



	<div class="text-container" align="left">
	<div id="experience" class="section">
	<header id="resumeheader">Experience </header>
	<h2 id="resumeh2">CREATIVE INTERN</h2><br>
	<h3 id="resumeh3">22Squared</h3> <br>
	<h4 id="resumeh4">Jun 2014-July 2014 </h4><br>

	Created over 30 illustrations for an agency presentation, assisted in designing and building online banner ads, social posts, and print material for clients such as Publix, Hanes, and Southeast Toyota.
<br><br>
	<h2 id="resumeh2">FREELANCE GRAPHIC DESIGNER</h2><br>
	<h4 id="resumeh4">Jan 2013- May 2014</h4><br>
	Created illustrations, ads, and written articles for print &amp; web for various clients.
<br><br>
	<h2 id="resumeh2">CALENDAR EDITOR</h2><br>
	<h3 id="resumeh3">Lewiston-Auburn Magazine</h3> <br>
	<h4 id="resumeh4">June 2012-May 2014</h4><br>

	Produced content and designed the layout for each month's print calendar; designed additional layouts.
<br><br>
	<h2 id="resumeh2">GRAPHIC DESIGN INTERN</h2><br>
	<h3 id="resumeh3">The Dempsey Challenge</h3> <br>
	<h4 id="resumeh4">Jul-Aug 2011, 2012</h4><br>
	Created designs for clothing, print material, and web content for the event.
<br><br>
	<h2 id="resumeh2">VISUAL DISPLAYS ASSOCIATE</h2><br>
	<h3 id="resumeh3">Madewell</h3> <br>
	<h4 id="resumeh4">Feb 2012- June 2012</h4><br>

	Set up visual displays for store windows &amp; in-store displays. Organized inventory for assisted in checkout.
<br><br>
	<h2 id="resumeh2">Teen Vogue Fashion University</h2><br>
	<h4 id="resumeh4">Sept 2013</h4><br>

	Selected to attend a yearly fashion conference in New York City to learn about careers and the current state of the fashion industry.
	</div>

	<div id="education" class="section">
		<header id="resumeheader">Education </header>
		<h2 id="resumeh2">UNIVERSITY OF TAMPA <br>Honors College</h2><br><br>
		BFA in Graphic Design, GPA 3.75<br>
		Expected graduation: May 2015<br>
		Studied architecture in Paris June 2013<br>
<br><br>
		<h2 id="resumeh2">AMERICAN UNIVERSITY <br>Honors College</h2><br><br>
		Studied Communications &amp; Graphic Design, end GPA 3.74<br>
		Made Dean's List 3 semesters.<br>
	</div>

	<div id="skills" class="section">
		<header id="resumeheader">Skills </header>
		indesign<br>
		photoshop<br>
		illustrator<br>
		dreamweaver<br>
		css<br>
		html<br>
		javascript<br>
		php<br>
		after effects<br>
	</div>
	<div id="about" class="section">
		<header id="resumeheader">About </header>
		Once I realized design is all about visually interesting organization, it was love at first sight. I have a passion for grids, typography, and experimentation. View my portfolio online at beccabarton.net.
	</div>
	<div id="contact" class="section">
		<header id="resumeheader">Contact </header>
		beccabarton.com<br>
		@becckitt<br>
		
	</div>

	</div>


</div>
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700);

@import url(https://fonts.googleapis.com/css?family=Cutive+Mono);

body{
	font-family: 'Cutive Mono';
	background-color:rgba(0,0,0,1.00);
	color:rgba(255,255,255,1.00);
	/*overflow:hidden;*/
}

body * {
    z-index: 20;
    color: rgba(0,0,0,1.00);
}

.text-container {
    position: relative;
  width: 80%;
    top: 50px;
  float: right;
}

#fs {
    position: relative;
    color: #000;
    margin: 20px;
    cursor: pointer;
}

header{
	font-family: 'Old Standard TT', serif;
	font-size:200%;
	font-weight:700;
	letter-spacing:1px;
	margin-bottom:20px;
	text-decoration:underline;
	
}

h2{
	font-family: 'Old Standard TT', serif;
	font-weight:bold;
	font-size:20px;
	height:20px;
	margin:0px;


}

h3{
	font-family: 'Old Standard TT', serif;
	font-weight:400;
	margin:0px;
	margin-top:-10px;
}

h4{
	font-family: 'Old Standard TT', serif;
	font-style:italic;
	font-weight:400;
	font-size:12px;
	margin:0px;
	margin-top:-15px;
}

.section{
	margin:10px;
	margin-left:2%;
	width:35%;
}

#experience{
	float:left;
}

#education{
	float:left;
}

#skills{
	float:left;
}

/*#fs {
    position: relative;
    color: #000;
    margin: 20px;
    cursor: pointer;
}*/

#about{
	float:left;
}

#contact{
	float:left;
}



/*/////////////////////////////////  FLASHLIGHT EFFECT ////////////////////////////  */

#light {
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #fff;
    z-index: 10;
    -webkit-box-shadow: inset 0px 0px 150px 166px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px 0px 150px 166px rgba(0,0,0,1);
    box-shadow: inset 0px 0px 150px 166px rgba(0,0,0,1);

}


/*//////////////////////////////// END FLASHLIGHT EFFECT ///////////////////////////  */
$(document).ready(function(){
   $(document).mousemove(function(event){
      $("#light").css({"top": event.pageY - 250, "left": event.pageX - 300}); 
   }); 
   
   
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js