HTML Source Code

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<!-- Adjust site for mobiles and all kind of devices compatibility -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<!-- Facebook meta data - Open Graph are must have these days -->
<meta property="og:title" content="Petr Novák - UI/UX ❤ DESIGNER &amp; &lt;coder&gt;"/>
<meta property="og:url" content=""/>
<meta property="og:type" content="blog"/>
<meta property="og:image" content=""/>
<meta property="og:description" content="35 years &quot;young&quot; talented, ambitious and self-motivated passionate web designer, coder and UI/UX ❤ with a technical background. Self-disciplined with the ability to work with the minimum of supervision. A good team player who thrives on creating engaging creative solutions. Deadline orientated and has the ability to produce detailed technical specifications from client requirements. A quick learner who can absorb new ideas and can communicate clearly and effectively. Currently looking for a opportunity to join a dynamic and ambitious team."/>
<!-- All kind of icons for shortcuts and mobile devices -->
<meta name="application-name" content="Petr Novák CV"/>
<meta name="msapplication-TileColor" content="#80765c"/>
<meta name="msapplication-TileImage" content="win8icon.png"/>
<link rel="mobile-icon" href="img/micon.png"/>
<link rel="apple-touch-icon" href="img/micon.png" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/creativev.css" rel="stylesheet" media="screen">
<title>Petr Novák - UI/UX lover, Designer and &lt;coder&gt;</title>
<!-- Can't imagine life without Jquery -->
<script src=""></script>
<!-- Bootsrtap is not only CSS framework -->
<script src="js/bootstrap.min.js"></script>
<!-- TimeLine Sript -->
<script src="js/jquery.timelinr-0.9.53.js"></script>
<!-- Timeline setup -->
orientation: 'vertical',
issuesSpeed: 300,
datesSpeed: 100,
arrowKeys: 'true',
startAt: 1
<!-- Charts animation funtion -->
$(function() {
$(".graphbar > span").each(function() {
.data("origHeight", $(this).height())
height: $(this).data("origHeight")
}, 1200);
<!-- Bootstrap Tooltip Functions -->
$(document).ready(function () {
'selector': '',
'placement': 'bottom'
<!-- Great Hack - how to create mobile nav only with CSS - this is for button on mobile devices -->
<input type="checkbox" id="slideit-checkbox" class="slideit-checkbox" role="button">
<label for="slideit-checkbox" class="slideit-toggle" onclick></label>
<div class="slideit">
<div class="container">
<!-- This is navigation -->
<ul class="nav">
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Comming soon">Česky</a></li>
<li><a href="./download/" data-placement="bottom" title="7MB zip file">Download CV in PSD</a></li>
<li><a href="#"data-toggle="tooltip" data-placement="bottom" title="Comming soon">View PDF version</a></li>
<li><a href="#"data-toggle="tooltip" data-placement="bottom" title="Comming soon">Indesign version</a></li>
<li>&nbsp; </li>
<li><a href="source-code.html">View HTML Source</a></li>
<li><a href="css-source.html">View CSS Source</a></li>
<li><a href="./">Home</a></li>
<!-- Here starts page header -->
<!-- Integration of (itemscope property) -->
<div class="row-fluid" itemscope itemtype="" id="header">
<div class="span7" id="name-title">
<h1 itemprop="name">Petr Novák</h1>
<h3 itemprop="jobTitle">UI/UX <span class="lover">❤</span> <span class="grad">designer</span> and <span class="code">&lt;coder&gt;</span></h3>
<div class="span2" id="cv">
<!-- Contact details -->
<h2 class="hideit">Contacts </h2>
<div id="contacts" class="span3">
<ul class="address">
<li itemprop="url"><a href=""></a></li>
<li itemprop="email"><a href=""></a></li>
<li itemprop="telephone">+420 739 662 338</li>
<h3 class="hideit">Social networks</h3>
<!--Social media icons and links -->
<ul class="social">
<li><a href="" class="linkedin" target="_blank">LinkedIn</a></li>
<li><a href="" class="twitter" target="_blank">Twitter</a></li>
<li><a href="" class="facebook" target="_blank">Facebook</a></li>
<li><a href="" class="gplus" target="_blank" rel="publisher">Goodle Plus</a> </li>
<section class="row-fluid">
<!-- Intro - Short text about me -->
<div class="span4">
<p class="about">35 years &quot;young&quot; talented, ambitious and self-motivated passionate web designer, coder and UI/UX ❤ with a technical background. Self-disciplined with the ability to work with the minimum of supervision. A good team player who thrives on creating engaging creative solutions. Deadline orientated and has the ability to produce detailed technical specifications from client requirements. A quick learner who can absorb new ideas and can communicate clearly and effectively. Currently looking for a opportunity to join a dynamic and ambitious team.</p>
<div class="span8">
<!-- Here starts Timeline -->
<div id="timeline">
<h2 class="hideit">Working experience</h2>
<!--Timeline dates -->
<ul id="dates">
<li><a href="#2013">2013</a></li>
<li><a href="#2012">2012</a></li>
<li><a href="#2010">2010</a></li>
<li><a href="#2008">2008</a></li>
<li><a href="#2005">2005</a></li>
<li><a href="#2004">2004</a></li>
<li><a href="#2002">2002</a></li>
<li><a href="#2000">2000</a></li>
<!--Timeline issues -->
<ul id="issues">
<li id="2013">
<div class="bubble">
<h3><span class="hideit">2013: </span>Looking for new oportunities</h3>
<p>Currently looking for new opportunities and experiences in dynamic and ambitious team. Do you want to hire me? </p>
<li id="2012">
<div class="bubble">
<h3><span class="hideit">2012: </span>Freelancer</h3>
<p>Back in freelancers world after several years in Suricata Travel. Webdesigning, coding, corporate identity, UI/UX, SMM and SEM. Created several sites for significant companies. External support for <a href="" target="_blank">Suricata Travel</a>. </p>
<li id="2010">
<div class="bubble">
<h3><span class="hideit">2010: </span>Customer support team leadership</h3>
<p>Build new customer support. Setup processes, systems and functions. Created and managed new customer support team in Suricata s.r.o. Dive in to social media marketing. </p>
<li id="2008">
<div class="bubble">
<h3><span class="hideit">2008: </span>Suricata s.r.o. expansion</h3>
<p>Changing Suricata s.r.o. from incommming agency to global accommodation supplier. Setup new destinations <a href="" target="_blank">Rome</a>, <a href="" target="_blank">Madid</a>, <a href="" target="_blank">Berlin</a>, <a href="" target="_blank">Barcelona</a>, <a href="" target="_blank">Warsaw</a>, <a href="" target="_blank">Krakow</a>, <a href="" target="_blank">Brussel</a>, <a href="" target="_blank">London</a>. Responsive for new markets outside Czech Republic and openning local office in Poland. Contracting partners in new destinations.</p>
<li id="2005">
<div class="bubble">
<h3><span class="hideit">2005: </span>Owner in Suricata s.r.o.</h3>
<p>Set up Suricata s.r.o. Prague incomming travel agency. Designing and coding for online <a href="" target="_blank">Prague booking</a> system. SEO, SEM, A/B testing, UI/UX interface.</p>
<li id="2004">
<div class="bubble">
<h3><span class="hideit">2004: </span>Freelancer /</h3>
<p> Fulltime freelancer for <a href=""></a>. Web Design XHTML and CSS coding, corporare identitiy. Some of our important clients: Oskar Mobil, Russell, Aaron</p>
<li id="2002">
<div class="bubble">
<h3><span class="hideit">2002: </span>CRM Worldwide s.r.o.</h3>
<p> Designing for SuperOffice CRM modules and company clients. Responsive for corporate website and content. CRM modules and clients. </p>
<li id="2000">
<div class="bubble">
<h3><span class="hideit">2000: </span>ParsCom Internet Services s.r.o.</h3>
<p> Responsive for visual design and HTML / CSS templating. Maintenance of new and existing websites.</p>
<!--Timeline top and bottom covers -->
<div id="grad_top"></div>
<div id="grad_bottom"></div>
<!--Timeline prev and next links -->
<a href="#" id="next">&raquo;&raquo;</a> <a href="#" id="prev">&laquo;&laquo;</a>
<!-- Section with Education, Trainings and Hobbies -->
<section class="row-fluid">
<div class="span4 edu">
<li><strong><span class="hidden">2003</span><a href="" target="_blank">DIGITAL MEDIA INSTITUTE</a></strong><br>
Interactive design school focused on graphics, web and photography. Graduated as graphic designer.
<li><strong><span class="hidden">1998 - 2002</span><a href="" target="_blank">CZECH AGRICULTURAL UNIVERSITY</a> IN PRAGUE</strong><br>
Faculty of economics. Graduated with title qualification awarded Dipl. Eng. Diploma.
<li><strong><span class="hidden">1992 – 1998</span><a href="" target="_blank">Business and Management Academy</a></strong><br>
School – leaving examination.
<div class="span4 course">
<h2> Trainings<span></span></h2>
<li><strong>ADOBE PHOTOSHOP COURSE </strong><br>
intensive course for advance Adobe Photoshop users focused on print design.
<li><strong><a href="" target="_blank">CALEDONIAN</a> LANGUAGE SCHOOL</strong><br>
6 month intensive course of English.
<li><strong>SEO/SEM TRAINING WITH <a href="" target="_blank">MAREK PROKOP</a></strong><br>
Two days Search Engines Optimization and Search Engines Marketing course by Marek Prokop.
<div class="span4 hobbies">
<h2>Hobbies <span></span></h2>
<li><strong>DIGITAL PHOTOGRAPHY</strong><br>
Cities, landscapes and nature photography is my passion.
<li><strong>BLOGGING ABOUT <a href="" target="_blank">HEALTHY LIFESTYLE</a></strong><br>
After loosing 25kg healthy lifestyle became my second passion.
<li><strong>ALL KIND OF SPORTS</strong><br>
Beach volleyball, cycling, mountain hiking, running, HIIT etc.
<li><strong>Lecture at <a href="" target="_blank"></a></strong> <br>
Courses: how to loose weitght and how to use <a href="" target="_blank">WordPress</a> CMS
<!--Skills section graph and list of othrer skills -->
<section class="row-fluid">
<div class="span8 skils">
<h2>Software proficiency &amp; skills <span></span></h2>
<ul id="graph">
<li class="graphbar"> <span class="ps">Photoshop: 82%</span> </li>
<li class="graphbar"> <span class="ai">Adobe Illustrator: 45%</span> </li>
<li class="graphbar"> <span class="dw">Dreamwever: 76%</span> </li>
<li class="graphbar"> <span class="id">Iindesign: 50%</span> </li>
<li class="graphbar"> <span class="fl">Flash: 20%</span> </li>
<li class="graphbar"> <span class="html5">HTML5: 65%</span> </li>
<li class="graphbar"> <span class="css3">CSS3: 60%</span> </li>
<div class="span4 otherskils">
<h2>Other skills</h2>
<li><strong>PHP and Javascript</strong><br>
Understand PHP and javascript code and basic knowledge of these languages.
<li><strong>SEO, SEM and SOCIAL MEDIA MARKETING</strong><br>
Good knowledge of search engines optimization and marketing.
Experience in social media strategies and marketing.
<li><strong>Wireframing And Prototyping</strong><br>
Familiar with wireframing and prototiping tools.
<li><strong>UI / UX Experience</strong><br>
Knowledge and focuse on user experience and user interface design.
<!--Working equipement and languages sections -->
<section class="row-fluid">
<div class="span8 equip">
<h2>Working equipement<span></span></h2>
<p class="equipement">LCD monitor 24" Dell, MacBook Pro 13&#8221;, iPad, iPhone, Car</p>
<div class="span4 lang">
<ul id="langraph">
<li class="graphbar"> <span class="eng">English: Fluent</span> </li>
<li class="graphbar"> <span class="rus">Russian: Begginer +1</span> </li>
<li class="graphbar"> <span class="spa">Spanish: Neverending begiiner</span> </li>
<!-- Showcase section -->
<section class="row-fluid">
<h2 class="showcase">Showcase<span></span></h2>
<div class="row-fluid">
<div class="span12">
<ul id="showcaseblock">
<li class="span3"> <a href="imex.html" data-toggle="tooltip" title="IMEX Project website design" ><img src="img/reference/imex.jpg" alt="Imex" /></a> </li>
<li> <a href="" target="_blank" data-toggle="tooltip" title="Design and code of responsive microsite for Android Apps"><img src="img/reference/jetsoft.jpg" alt="Jetsoft - Android Apps site" width="270" height="398"></a> </li>
<li> <a href="" target="_blank" data-toggle="tooltip" title="Design, code, search engines optimization and CMS implementation"><img src="img/reference/bludicka.jpg" alt="Challet Bludicka" /></a> </li>
<li> <a href="" target="_blank" data-toggle="tooltip" title="Design, code and CMS implementation"><img src="img/reference/perfectmakeup.jpg" alt="Perfect Makeup" width="270" height="398"></a> </li>
<!--Google ANalytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-885450-10']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);