4 changed files with 778 additions and 2 deletions
@ -0,0 +1,674 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<title>Resume of Alice Strete</title> |
|||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" |
|||
rel="stylesheet"> |
|||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" |
|||
rel="stylesheet"> |
|||
<style type="text/css"> |
|||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800); |
|||
@charset "utf-8"; |
|||
@-webkit-viewport { width: device-width; } |
|||
@-moz-viewport { width: device-width; } |
|||
@-ms-viewport { width: device-width; } |
|||
@-o-viewport { width: device-width; } |
|||
@viewport { width: device-width; } |
|||
|
|||
body{ |
|||
font-family: 'Open Sans', Arial, Tahoma; |
|||
font-weight: 400; |
|||
color: #363636; |
|||
background: white; |
|||
} |
|||
blockquote { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
.container{ |
|||
margin-top: 80px; |
|||
margin-bottom: 15px; |
|||
background: #fff; |
|||
} |
|||
|
|||
#photo-header{ |
|||
margin-top: -75px; |
|||
} |
|||
#photo{ |
|||
width: 160px; |
|||
height: 160px; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
padding: 5px; |
|||
background: black; |
|||
display: inline-block; |
|||
} |
|||
#photo img{ |
|||
width: 150px; |
|||
height: 150px; |
|||
border-radius: 50%; |
|||
} |
|||
#text-header h1{ |
|||
margin: 0; |
|||
padding: 0; |
|||
font-size: 1.5em; |
|||
font-weight: 700; |
|||
text-transform: uppercase; |
|||
letter-spacing: -1px; |
|||
} |
|||
#text-header h1::first-line{ |
|||
font-size: 1.5em; |
|||
font-weight: 800; |
|||
line-height: 1.5em; |
|||
} |
|||
#text-header h1 span{ |
|||
color: #334960; |
|||
opacity: 0.7; |
|||
} |
|||
#text-header h1 sup{ |
|||
opacity: 0.5; |
|||
} |
|||
#text-header:after{ |
|||
width: 100%; |
|||
height: 3px; |
|||
border-bottom: 1px solid #ddd; |
|||
margin-top: 15px; |
|||
content: ''; |
|||
display: block; |
|||
} |
|||
|
|||
.box{ |
|||
padding-bottom: 10px; |
|||
margin-bottom: 25px; |
|||
} |
|||
.box h2{ |
|||
color: #227c74; |
|||
font-size: 1.5em; |
|||
font-weight: 700; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
#awards, |
|||
#education{ |
|||
margin-top: 20px; |
|||
margin-bottom: 0; |
|||
position: relative; |
|||
padding: 1em 0; |
|||
list-style: none; |
|||
} |
|||
#awards:before, |
|||
#education:before { |
|||
width: 5px; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 35px; |
|||
top: 0; |
|||
content: ' '; |
|||
display: block; |
|||
background: #32475c; |
|||
background: -moz-linear-gradient(top, #ffffff 0%, #32475c 7%, #32475c 89%, #ffffff 100%); |
|||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(7%,#32475c), color-stop(89%,#32475c), color-stop(100%,#ffffff)); |
|||
background: -webkit-linear-gradient(top, #ffffff 0%,#32475c 7%,#32475c 89%,#ffffff 100%); |
|||
background: -o-linear-gradient(top, #ffffff 0%,#32475c 7%,#32475c 89%,#ffffff 100%); |
|||
background: -ms-linear-gradient(top, #ffffff 0%,#32475c 7%,#32475c 89%,#ffffff 100%); |
|||
background: linear-gradient(to bottom, #ffffff 0%,#32475c 7%,#32475c 89%,#ffffff 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); |
|||
} |
|||
#awards li, |
|||
#education li{ |
|||
width: 100%; |
|||
z-index: 2; |
|||
position: relative; |
|||
float: left; |
|||
} |
|||
#awards .year, |
|||
#education .year{ |
|||
width: 14%; |
|||
background: #fff; |
|||
padding: 10px; |
|||
font-weight: 700; |
|||
display: inline-block; |
|||
} |
|||
#awards .description, |
|||
#education .description{ |
|||
width: 83%; |
|||
display: inline-block; |
|||
background: #eee; |
|||
margin-bottom: 10px; |
|||
position: relative; |
|||
padding: 10px; |
|||
border-bottom: 1px solid #ccc; |
|||
border-right: 1px solid #ccc; |
|||
} |
|||
#awards .description:after, |
|||
#education .description:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 0; |
|||
left: -16px; |
|||
height: 0; |
|||
width: 0; |
|||
border: solid transparent; |
|||
border-right-color: #eee; |
|||
border-width: 8px; |
|||
pointer-events: none; |
|||
} |
|||
#awards .description h3, |
|||
#education .description h3{ |
|||
font-size: 1.2em; |
|||
margin: 0; |
|||
padding: 0; |
|||
font-weight: 700; |
|||
} |
|||
#awards .description p, |
|||
#education .description p{ |
|||
margin-top: 5px; |
|||
padding: 0; |
|||
} |
|||
|
|||
.job{ |
|||
margin-bottom: 15px; |
|||
} |
|||
.job .details { |
|||
margin-left: 3%; |
|||
width: 95%; |
|||
padding: 10px; |
|||
margin-bottom: 10px; |
|||
background: #eee; |
|||
border-bottom: 1px solid #ccc; |
|||
border-right: 1px solid #ccc; |
|||
} |
|||
.job .where{ |
|||
font-size: 1.2em; |
|||
font-weight: bold; |
|||
} |
|||
.job .year{ |
|||
opacity: 0.7; |
|||
} |
|||
.job .profession{ |
|||
font-size: 1.2em; |
|||
font-weight: bold; |
|||
} |
|||
.job .description{ |
|||
line-height: 1.5em; |
|||
} |
|||
.job .highlights{ |
|||
padding: 5px 0; |
|||
font-weight: bold; |
|||
} |
|||
.job .job-details { |
|||
padding-left: 5%; |
|||
width: 100%; |
|||
} |
|||
.publication { |
|||
margin-bottom: 0; |
|||
} |
|||
.publication .name{ |
|||
font-size: 1em; |
|||
font-weight: bold; |
|||
} |
|||
.publication .year{ |
|||
opacity: 0.7; |
|||
} |
|||
.publication p{ |
|||
margin: 0; |
|||
padding-top: 10px; |
|||
} |
|||
|
|||
.contact-item{ |
|||
width: 100%; |
|||
float: left; |
|||
} |
|||
.contact-item .icon{ |
|||
padding: 10px; |
|||
border-right: 1px solid #ccc; |
|||
border-bottom: 1px solid #ccc; |
|||
color: #32475c; |
|||
background: #eee; |
|||
} |
|||
.contact-item:last-child .icon{ |
|||
border-bottom: none; |
|||
} |
|||
.contact-item .title{ |
|||
width: 80%; |
|||
width: calc(100% - 55px); |
|||
font-weight: 700; |
|||
opacity: 0.9; |
|||
} |
|||
.contact-item .title.only{ |
|||
margin-top: 10px; |
|||
} |
|||
.contact-item .description{ |
|||
width: 80%; |
|||
width: calc(100% - 55px); |
|||
color: #334960; |
|||
} |
|||
|
|||
.item-interests, |
|||
.item-skills{ |
|||
height: 30px; |
|||
color: #334960; |
|||
padding: 5px 10px; |
|||
margin-bottom: 5px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
font-size: 1.1em; |
|||
font-weight: 600; |
|||
} |
|||
.interest, |
|||
.skill{ |
|||
color: #fff; |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
margin-bottom: 5px; |
|||
padding: 5px 10px; |
|||
background: #32475c; |
|||
position: relative; |
|||
font-size: .85em; |
|||
} |
|||
.skill-level { |
|||
background-color: #227c74; |
|||
border-radius: 4px; |
|||
color: #fff; |
|||
padding: 1px 8px; |
|||
font-size: .75em; |
|||
position: absolute; |
|||
margin: 1px 10px; |
|||
} |
|||
|
|||
#language-skills .skill{ |
|||
margin: 10px 0; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
</style> |
|||
<style type="text/css" media="print"> |
|||
body { |
|||
font-size: .95em; |
|||
-webkit-print-color-adjust: exact; |
|||
} |
|||
|
|||
a[href]:after { |
|||
content: none !important; |
|||
} |
|||
|
|||
#photo{ |
|||
display: none; |
|||
} |
|||
|
|||
.box { |
|||
margin-bottom: -10px; |
|||
} |
|||
.col-sm-5{ |
|||
width: 40%; |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.col-sm-7{ |
|||
width: 60%; |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.skills .col-sm-offset-1, |
|||
.interests .col-sm-offset-1{ |
|||
margin-top: -10px; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
#education { |
|||
margin: 0; |
|||
margin-bottom: -20px; |
|||
} |
|||
#awards:before, |
|||
#education:before { |
|||
background: none; |
|||
} |
|||
|
|||
#awards .description, |
|||
#education .description, |
|||
.job .details { |
|||
border: 1px solid #eee; |
|||
} |
|||
.publication, |
|||
.publication .panel-heading, |
|||
.publication .name{ |
|||
margin: 0; |
|||
padding: 0 5px; |
|||
border: none; |
|||
} |
|||
.publication .panel-body { |
|||
padding: 0 10px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.badge { |
|||
margin: 0; |
|||
} |
|||
|
|||
.list-group-item{ |
|||
border: none; |
|||
margin: 0; |
|||
padding: 5px 15px; |
|||
} |
|||
.list-group-item:after{ |
|||
content: ''; |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 0; |
|||
left: -1px; |
|||
height: 0; |
|||
width: 0; |
|||
border: solid transparent; |
|||
border-right-color: #999; |
|||
border-width: 4px; |
|||
pointer-events: none; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-xs-12"> |
|||
<div id="photo-header" class="text-center"> |
|||
<!-- PHOTO (AVATAR) --> |
|||
<div id="photo"> |
|||
<img src="http://i.imgur.com/OJbjqTZ.jpg" alt="avatar"> |
|||
</div> |
|||
<div id="text-header"> |
|||
<h1>Alice Strete<br><span>Copywriter; Social Media Manager</span></h1> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-xs-12 col-sm-7"> |
|||
<!-- ABOUT ME --> |
|||
<div class="box"> |
|||
<h2><i class="fa fa-user ico"></i> About</h2> |
|||
|
|||
<p>For the past couple of years, I've been working as a Copywriter, Social |
|||
Media Manager and Online Campaign Analyst, in Cluj-Napoca, Yangon and Berlin. |
|||
I've had the pleasure to collaborate with brands such as Sule Shangri-La, |
|||
Belmond Governor's Residence, FMI Air, Pun Hlaing Golf Estate, and |
|||
Dulcefina, and to be part of amazing teams at Kaus Group and Media.net.</p> |
|||
</div> |
|||
<!-- WORK EXPERIENCE --> |
|||
<div class="box"> |
|||
<h2><i class= "fa fa-suitcase ico"></i> Work Experience</h2> |
|||
|
|||
<div class="job clearfix"> |
|||
<div class="row"> |
|||
<div class="details"> |
|||
<div class="where">Media.net</div> |
|||
<div class="address"> <a href="http://media.net" target="_blank"><i class="fa fa-globe ico"></i> http://media.net</a> |
|||
|
|||
</div> |
|||
<div class="year">June 2015 – November 2015</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="job-details col-xs-11"> |
|||
<div class="profession">Online Campaign Analyst</div> |
|||
<div class="description">I planned, developed and implemented native ad units on online publishers, |
|||
created targeted headlines and ensured a steady growth of KPIs through |
|||
daily monitoring and optimization. |
|||
<div class="highlights">Highlights</div> |
|||
<ul class="list-group"> |
|||
<li class="list-group-item">Contributed to the development of innovative practices and strategies, |
|||
and helped train the outsourced team</li> |
|||
<li class="list-group-item">Increased up to 2x daily revenue</li> |
|||
<li class="list-group-item">Maintained a steady growth of relevant KPIs</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="job clearfix"> |
|||
<div class="row"> |
|||
<div class="details"> |
|||
<div class="where">Kaus Group</div> |
|||
<div class="address"> <a href="http://kausmediagroup.com" target="_blank"><i class="fa fa-globe ico"></i> http://kausmediagroup.com</a> |
|||
|
|||
</div> |
|||
<div class="year">September 2012 – April 2015</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="job-details col-xs-11"> |
|||
<div class="profession">Copywriter, Social Media Manager</div> |
|||
<div class="description">I initially started as a copywriter, collaborating with a team of art |
|||
directors to create high quality, engaging copy for both online and offline. |
|||
Eventually, I took the responsibility of managing the social media channels |
|||
for clients such as Belmond Governor's Residence, FMI Air and Pun Hlaing |
|||
Golf Estate, creating high quality, original content and engaging targeted |
|||
audiences. I also created and developed the website content for the agency. |
|||
<div |
|||
class="highlights">Highlights</div> |
|||
<ul class="list-group"> |
|||
<li class="list-group-item">Engaged audiences and increased communities up to 25k, significantly building |
|||
brand awareness</li> |
|||
<li class="list-group-item">Played a significant role in building the agency portfolio</li> |
|||
<li class="list-group-item">Successfully promoted events and innovations, depending on the client</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- AWARDS --> |
|||
<div class="box"> |
|||
<h2><i class="fa fa-certificate ico"></i> Awards</h2> |
|||
|
|||
<ul id="awards" class="clearfix"> |
|||
<li> |
|||
<div class="year pull-left">2013</div> |
|||
<div class="description pull-right"> |
|||
<h3>Publifest Advertising Students' Festival</h3> |
|||
|
|||
<p><i class="fa fa-trophy ico"></i> Best Print, Best Campaign</p> |
|||
<p></p> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<div class="year pull-left">2013</div> |
|||
<div class="description pull-right"> |
|||
<h3>Deutsches Kulturzentrum Klausenburg</h3> |
|||
|
|||
<p><i class="fa fa-trophy ico"></i> CEFR Level B1</p> |
|||
<p></p> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<div class="year pull-left">2010</div> |
|||
<div class="description pull-right"> |
|||
<h3>University of Cambridge, ESOL Examinations</h3> |
|||
|
|||
<p><i class="fa fa-trophy ico"></i> CEFR Level C2</p> |
|||
<p></p> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<!-- VOLUNTEER --> |
|||
<div class="box"> |
|||
<h2><i class= "fa fa-group ico"></i> Internships </h2> |
|||
|
|||
<div class="job clearfix"> |
|||
<div class="row"> |
|||
<div class="details"> |
|||
<div class="where">Sykes Cluj-Napoca</div> |
|||
<div class="address"> <a href="http://www.sykes.com/romania/" target="_blank"><i class="fa fa-globe ico"></i> http://www.sykes.com/romania/</a> |
|||
|
|||
</div> |
|||
<div class="year">April 2013 – June 2013</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-xs-11 pull-right"> |
|||
<div class="profession">Social Media</div> |
|||
<div class="description">I became familiar and worked with the social media monitoring tool Radian6, |
|||
while testing its value and performance for clients such as Panasonic UK |
|||
and Yahoo. |
|||
<div class="highlights">Highlights</div> |
|||
<ul class="list-group"> |
|||
<li class="list-group-item">I submitted a comprehensive report on how the tool would improve CRM practices</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="job clearfix"> |
|||
<div class="row"> |
|||
<div class="details"> |
|||
<div class="where">Vitrina Advertising</div> |
|||
<div class="address"> <a href="http://www.vitrina.ro/english" target="_blank"><i class="fa fa-globe ico"></i> http://www.vitrina.ro/english</a> |
|||
|
|||
</div> |
|||
<div class="year">2012 – 2012</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-xs-11 pull-right"> |
|||
<div class="profession">Copywriting</div> |
|||
<div class="description">I gained invaluable insights from working on campaign briefs for Banca |
|||
Transilvania, one of the biggest Romanian banks.</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-sm-5"> |
|||
<!-- CONTACT --> |
|||
<div class="box clearfix"> |
|||
<h2><i class="fa fa-bullseye ico"></i> Contact</h2> |
|||
|
|||
<div class="contact-item"> |
|||
<div class="icon pull-left text-center"><span class="fa fa-map-marker fa-fw"></span> |
|||
</div> |
|||
<div class="title pull-right">Ohmstrasse 10</div> |
|||
<div class="description pull-right">Berlin, 10179 Germany</div> |
|||
</div> |
|||
<div class="contact-item"> |
|||
<div class="icon pull-left text-center"><span class="fa fa-phone fa-fw"></span> |
|||
</div> |
|||
<div class="title only pull-right">(+49) 17657628857</div> |
|||
</div> |
|||
<div class="contact-item"> |
|||
<div class="icon pull-left text-center"><span class="fa fa-envelope fa-fw"></span> |
|||
</div> |
|||
<div class="title only pull-right"><a href="mailto:alice.strt@gmail.com" target="_blank">alice.strt@gmail.com</a> |
|||
</div> |
|||
</div> |
|||
<div class="contact-item"> |
|||
<div class="icon pull-left text-center"><span class="fa fa-globe fa-fw"></span> |
|||
</div> |
|||
<div class="title only pull-right"><a href="http://alicestrete.com" target="_blank">http://alicestrete.com</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- EDUCATION --> |
|||
<div class="box"> |
|||
<h2><i class="fa fa-university ico"></i> Education</h2> |
|||
|
|||
<ul id="education" class="clearfix"> |
|||
<li> |
|||
<div class="year pull-left">2013 2014</div> |
|||
<div class="description pull-right"> |
|||
<h3>Dublin City University</h3> |
|||
|
|||
<p></p> |
|||
<p>GPA: 6.6</p> |
|||
<div>Courses</div> |
|||
<ul class="list-group"> |
|||
<li class="list-group-item">Media Writing</li> |
|||
<li class="list-group-item">International Marketing</li> |
|||
<li class="list-group-item">Consumer Behaviour</li> |
|||
</ul> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<div class="year pull-left">2011 2014</div> |
|||
<div class="description pull-right"> |
|||
<h3>Babes-Bolyai University</h3> |
|||
|
|||
<p></p> |
|||
<p>GPA: 9.6</p> |
|||
<div>Courses</div> |
|||
<ul class="list-group"> |
|||
<li class="list-group-item">Copywriting</li> |
|||
<li class="list-group-item">Campaign Strategy</li> |
|||
<li class="list-group-item">PR and Communication</li> |
|||
<li class="list-group-item">Marketing</li> |
|||
</ul> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<!-- SKILLS --> |
|||
<div class="box"> |
|||
<h2><i class="fa fa-tasks ico"></i> Skills</h2> |
|||
|
|||
<div class="skills clearfix"> |
|||
<div class="item-skills">Software</div> |
|||
<div class="col-sm-offset-1 col-sm-12 clearfix"> <span class="skill badge">Adobe Photoshop</span> |
|||
<span class="skill badge">Adobe Illustrator</span> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="skills clearfix"> |
|||
<div class="item-skills">Social Media</div> |
|||
<div class="col-sm-offset-1 col-sm-12 clearfix"> <span class="skill badge">Hootsuite</span> |
|||
<span class="skill badge">IFTTT</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- LANGUAGES --> |
|||
<div class="box"> |
|||
<h2><i class="fa fa-language ico"></i> Languages</h2> |
|||
|
|||
<ul class="list-group"> |
|||
<li class=" list-group-item">Romanian - native<span class="skill badge pull-right"></span> |
|||
</li> |
|||
<li class=" list-group-item">English - fluent<span class="skill badge pull-right"></span> |
|||
</li> |
|||
<li class=" list-group-item">German - intermediate<span class="skill badge pull-right"></span> |
|||
</li> |
|||
<li class=" list-group-item">Spanish - intermediate<span class="skill badge pull-right"></span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<!-- HOBBIES --> |
|||
<div class="box"> |
|||
<h2><i class="fa fa-heart ico"></i> Interests</h2> |
|||
|
|||
<div class="interests clearfix"> |
|||
<div class="item-interests">Illustration</div> |
|||
<div class="skill">Enthusiastic amateur sketcher in pen and watercolor</div> |
|||
<div class="col-sm-offset-1 col-sm-12 clearfix"></div> |
|||
</div> |
|||
<div class="interests clearfix"> |
|||
<div class="item-interests">Literature</div> |
|||
<div class="skill">Vonnegut book collector</div> |
|||
<div class="col-sm-offset-1 col-sm-12 clearfix"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- JQUERY --> |
|||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> |
|||
<!-- BOOTSTRAP --> |
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.stringsElement=this.options.stringsElement,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s<t.strings.length;++s)t.sequence[s]=s;t.shuffle&&(t.sequence=t.shuffleArray(t.sequence)),t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},t.startDelay)},build:function(){var s=this;if(this.showCursor===!0&&(this.cursor=t('<span class="typed-cursor">'+this.cursorChar+"</span>"),this.el.after(this.cursor)),this.stringsElement){s.strings=[],this.stringsElement.hide();var e=this.stringsElement.find("p");t.each(e,function(e,i){s.strings.push(t(i).html())})}this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,i=this;i.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var o=1;/^\^\d+/.test(r)&&(r=/\d+/.exec(r)[0],o+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+o)}if("html"===i.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var a="",h="";for(h="<"===n?">":";";t.substr(s).charAt(0)!==h;)a+=t.substr(s).charAt(0),s++;s++,a+=h}}i.timeout=setTimeout(function(){if(s===t.length){if(i.options.onStringTyped(i.arrayPos),i.arrayPos===i.strings.length-1&&(i.options.callback(),i.curLoop++,i.loop===!1||i.curLoop===i.loopCount))return;i.timeout=setTimeout(function(){i.backspace(t,s)},i.backDelay)}else{0===s&&i.options.preStringTyped(i.arrayPos);var e=t.substr(0,s+1);i.attr?i.el.attr(i.attr,e):i.isInput?i.el.val(e):"html"===i.contentType?i.el.html(e):i.el.text(e),s++,i.typewrite(t,s)}},e)},e)}},backspace:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.backSpeed,i=this;i.timeout=setTimeout(function(){if("html"===i.contentType&&">"===t.substr(s).charAt(0)){for(var e="";"<"!==t.substr(s).charAt(0);)e-=t.substr(s).charAt(0),s--;s--,e+="<"}var r=t.substr(0,s);i.attr?i.el.attr(i.attr,r):i.isInput?i.el.val(r):"html"===i.contentType?i.el.html(r):i.el.text(r),s>i.stopNum?(s--,i.backspace(t,s)):s<=i.stopNum&&(i.arrayPos++,i.arrayPos===i.strings.length?(i.arrayPos=0,i.shuffle&&(i.sequence=i.shuffleArray(i.sequence)),i.init()):i.typewrite(i.strings[i.sequence[i.arrayPos]],s))},e)}},shuffleArray:function(t){var s,e,i=t.length;if(i)for(;--i;)e=Math.floor(Math.random()*(i+1)),s=t[e],t[e]=t[i],t[i]=s;return t},reset:function(){var t=this;clearInterval(t.timeout);var s=this.el.attr("id");this.el.after('<span id="'+s+'"/>'),this.el.remove(),"undefined"!=typeof this.cursor&&this.cursor.remove(),t.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var i=t(this),r=i.data("typed"),o="object"==typeof e&&e;r||i.data("typed",r=new s(this,o)),"string"==typeof e&&r[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery); |
|||
Loading…
Reference in new issue