Skip to content

Instantly share code, notes, and snippets.

@jackiewu

jackiewu/Material Resume.markdown

Created August 16, 2015 01:52
Show Gist options
  • Save jackiewu/807fd3fd0b8b7ffd267e to your computer and use it in GitHub Desktop.
Save jackiewu/807fd3fd0b8b7ffd267e to your computer and use it in GitHub Desktop.
Download ZIP
Material Resume
Raw
index.html
<!-- contact form works OK -->
<!--
contact form works OK
-->
<!-- HEADER -->
<header class="menuHidden">
<div class="top-bar">
<button class="menu">
<em class="hamburger"></em>
</button>
<script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_zerospree_1" class="skype">
<script type="text/javascript">
Skype.ui({
"name": "chat",
"element": "SkypeButton_Call_zerospree_1",
"participants": ["zerospree"],
"imageColor" : "white",
"imageSize": 24
});
</script>
</div>
<a class="mail" href="#contact">[email protected]</a>
</div>
</header>
<!-- NAVIGATION BAR -->
<nav>
<div class="grid">
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#experience">Experience</a>
<a href="#works">Portfolio</a>
<a href="#weaknesses">Weaknesses</a>
<a href="#contact">Contact</a>
</div>
</nav>
<main role="main" class="grid">
<!-- HERO -->
<section class="box white-box hero" id="about">
<img src="http://codrin.eu/assets/img/pic.jpg" class="thumb" />
<h1>Codrin Pavel</h1>
<h2>Front End Developer & UX Fan</h2>
<p>Hy there! I'm a 25 y.o. web developer focusing on HTML5, CSS3, jQuery and JS. I am experienced in architecting and developing large scale web applications and delivering on-time, pixel-perfect mock-ups and CSS animations to various businesses across
the globe.</p>
<a class="btn blue" href="http://codrin.eu/assets/docs/codrin_pavel_cv.pdf" target="_blank">View C.V.</a>
<a class="btn green" href="#works">See Portfolio</a>
</section>
<!-- SKILLS -->
<h3 id="skills">Skills</h3>
<section class="box blue-box skills-box">
<div class="col">
<h4>Professional</h4>
<ul>
<li>HTML5 & CSS3 / HAML & SCSS</li>
<li>JavaScript & jQuery</li>
<li>GIT (GitHub, Bitbucket)</li>
<li>Adobe Photoshop & Fireworks</li>
<li>Brackets, Aptana</li>
<li>Basecamp, Wrike, Jira</li>
</ul>
</div><div class="col">
<h4>Personal</h4>
<ul>
<li>Details Oriented</li>
<li>Communicative, team player</li>
<li>Deep understanding of UX</li>
<li>Results over process</li>
<li>I'll take the lead when no one else does</li>
<li>Honest guy, I know my downsides</li>
</ul>
</div>
</section>
<!-- EXPERIENCE -->
<h3 id="experience">Experience</h3>
<section>
<ul class="timeline">
<li class="box">
<strong>FRONT END LEAD, MyGov LLC</strong>
<span>April, 2013</span>
<p>Architecting and implementing front-end modules + overseeing the team's work on the modular, yet-to-be-launched, next generation platform of the popular governmental web-based software suite <a href="http://mygov.us" target="_blank" class="link">MyGov.us</a>.</p>
</li>
<li class="box">
<strong>FRONT END DEVELOPER, <a class="link" href="http://wearex3.com" target="_blank">weareX3</a></strong>
<span>April, 2012 - April 2013</span>
<p>An award-winning graphic & interactive design studio, X3 was the perfect place to gain the proffesional knowledge and experience needed to build challenging, sophisticated, high quality web products.</p>
</li>
<li class="box">
<strong>FREELANCER, <a class="link" href="http://ajaxmasters.com" target="_blank">AjaxMasters</a></strong>
<span>October 2011 - April 2012</span>
<p>Whilst working on YoutubeOnRepeat.com - a succesfull personal project - I ensured meeting tight deadlines and delivering pixel-perfect mock-ups for AjaxMasters and other various clients. (and still do, sometimes)</p>
</li>
<li class="box">
<strong>HOTEL RECEPTIONIST, <a class="link" href="http://continentalhotels.ro/Continental-Forum-Arad/en/" target="_blank">ContinetalHotels****</a></strong>
<span>May, 2010 - October 2011</span>
<p>A great way of improving one's soft skills. It was during the night shifts at Continental that I took on web freelancing and, ultimately, improved my overall personal and professional web skills.</p>
</li>
</ul>
</section>
<!-- WORKS -->
<h3 id="works">Portfolio</h3>
<section>
<ul class="cards">
<li class="card dark">
<a class="box" href="http://www.visualfreaks.com" target="_blank">
<img src="http://codrin.eu/assets/img/vf.jpg" />
<div class="summary">
<h4>Visual Freaks</h4>
<span class="category">psd to html5 &amp; css3, jquery, php</span>
</div>
<p>VisualFreaks was in need of a good front-end developer to implement their newest website and email templates based on provided PSD files and also hook up their product with FetchApp.com, a powerful pay to download service.</p>
</a>
</li>
<li class="card card-kiteops">
<a class="box" href="http://kiteops.com/" target="_blank">
<img src="http://codrin.eu/assets/img/kiteops.jpg" />
<div class="summary kiteops-summary">
<h4>KiteOps</h4>
<span class="category">psd to html5 & css3, jquery, youtube API</span>
</div>
</a>
</li>
<li class="card">
<a class="box" href="http://benevol.ro" target="_blank">
<img src="http://codrin.eu/assets/img/benevol.jpg" />
<div class="summary benevol-summary">
<h4>Benevol</h4>
<span class="category">psd to html5 &amp; css3, google maps API, jquery</span>
</div>
<p>Started by the Vodafone Foundation and meant to help organizations through vountary work, I was involved with the front-end work for their Admin area and all forms available throughout the entire platform.</p>
</a>
</li>
<li class="card">
<a class="box" href="http://youtubeonrepeat.com/" target="_blank">
<img src="http://codrin.eu/assets/img/yor.jpg" />
<div class="summary yor-summary">
<h4>YoutubeOnRepeat</h4>
<span class="category">design, html5, css3, js, jquery, php, mysql</span>
</div>
<p>A personal web application, based on YouTube's JavaScript API, localStorage and a bit of back-end work, used by millions of music lovers since 2012.</p>
</a>
</li>
<li class="card">
<a class="box" href="http://runceanu.zerospree.com/" target="_blank">
<img src="http://codrin.eu/assets/img/runceanu.jpg" />
<div class="summary runceanu-summary">
<h4>Runceanu</h4>
<span class="category">psd to html5 &amp; css3, jquery</span>
</div>
</a>
</li>
<li class="card">
<a class="box" href="http://savepotatoes.com/" target="_blank">
<img src="http://codrin.eu/assets/img/sp.jpg" />
<div class="summary sp-summary">
<h4>Save Potatoes</h4>
<span class="category">psd to html5 &amp; css3, jquery</span>
</div>
</a>
</li>
<li class="card">
<a class="box" href="http://codepen.io/zerospree/pen/bNWbvW" target="_blank">
<img src="http://codrin.eu/assets/img/flip.jpg" />
<div class="summary flip-summary">
<h4>Flip</h4>
<span class="category">html5 &amp; css3, jQuery</span>
</div>
<p>Another (tiny) personal project, simply because I always wanted to implement an HTML5 game.</p>
</a>
</li>
<li class="card">
<a class="box" href="http://pixelart.zerospree.com" target="_blank">
<img src="http://codrin.eu/assets/img/pa.jpg" />
<div class="summary pa-summary">
<h4>PixelArt</h4>
<span class="category">html5 & css3, js, canvas, localStorage, jquery, gif.js, codepen.io API</span>
</div>
<p>PixelArt is a canvas/localStorage based app (Chrome only) that allows you to import, pixelize and edit images, then export them as .png, animated .gif, animated css box-shadow or animated base64 sprite with added css keyframes. It's a personal
project, still a work in progress.</p>
</a>
</li>
</ul>
</section>
<!-- WEAKNESSES -->
<h3 id="weaknesses">Weaknesses</h3>
<section class="box blue-box skills-box">
<div class="col">
<h4>Professional</h4>
<ul>
<li>No CMS/Wordpress experience*</li>
<li>No MVC frameworks experience**</li>
</ul>
</div><div class="col">
<h4>Personal</h4>
<ul>
<li>I sometimes OCD over pixel perfect</li>
<li>Can get lost in details</li>
</ul>
</div>
<p class="footnote">
* Sadly, most of my previous works were custom-all-the-way and that's what I'm best at.
<br/> ** I'd be totally happy and excited to learn all these fancy new things in the industry!
</p>
</section>
<!-- CONTACT -->
<h3 id="contact">Get in touch (the form is functional)</h3>
<form class="box white-box contact" novalidate>
<div class="field">
<input type="text" id="fname" name="first_name" required />
<label for="fname">First Name</label>
</div>
<div class="field">
<input type="text" id="lname" name="last_name" required />
<label for="lname">Last Name</label>
</div>
<div class="field">
<input type="email" id="email" name="email" required />
<label for="email">Email Address</label>
</div>
<div class="field field_optional">
<input type="url" id="company" name="company_name" />
<label for="company">Company Website</label>
</div>
<div class="field field-textarea">
<textarea id="message" name="message" required></textarea>
<label for="message">Message</label>
</div>
<div class="message message_success">Thank you for contacting me, I will try to respond ASAP.</div>
<div class="message message_error">
Ooops! Looks like an error occured. So embarassing!
<br/> You should either try again, or send a direct email to [email protected]
<br/> Thank you!
</div>
<div class="center">
<input type="submit" class="btn green" value="Send Email / Job Offer" id="submitform"></input>
</div>
</form>
</main>
<!-- FOOTER -->
<footer class="grid box white-box">
Don't like forms, but need more info? See more demos of what I do on <a class="link codepen" href="http://codepen.io/zerospree/" target="_blank">Codepen</a>, or chat with me on <a class="link twitter" href="https://twitter.com/zerospree" target="_blank">Twitter</a> or <a class="link facebook" href="https://www.facebook.com/zerospree" target="_blank">Facebook</a>.
</footer>
Raw
Material Resume.markdown
Raw
script.js
$(window).load(function() {
$(".cards").masonry({
itemSelector: ".card",
transitionDuration: 0
})
}),
function(e) {
"use strict";
function t(e) {
return /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i.test(e)
}
function a(e) {
return e.length > 0
}
function s(e) {
var s = e.parent(),
n = e.val();
if (n.length ? s.addClass("completed") : s.removeClass("completed"), e.is("[required]")) {
var i = e.is('[type="email"]') ? t(n) : a(n);
s.attr("data-isvalid", i)
} else n.length ? s.attr("data-isvalid", "true") : s.removeAttr("data-isvalid")
}
var n, i = e("body"),
o = e("header"),
l = e(".hero"),
r = e(".menu"),
d = e(".top-bar").height(),
m = e('nav [href^="#"]'),
c = m.map(function() {
return e(e(this).attr("href"))
});
e(window).scroll(function() {
var t, a = e(this).scrollTop(),
s = a + d + 50,
r = window.matchMedia("(max-width:900px)"),
u = c.map(function() {
return e(this).offset().top < s ? this : void 0
});
u = u[u.length - 1], t = u && u.length ? "#" + u[0].id : m.first().attr("href"), n !== t && (n = t, m.removeClass("active"), e("[href=" + t + "]").addClass("active")), r.matches ? (o.removeClass("menuHidden"), i.toggleClass("collapsed", a >= 0), l.toggleClass("sticky", a > 133)) : (o.toggleClass("menuHidden", d > a), i.toggleClass("collapsed", a > d), l.toggleClass("sticky", a > 333))
}).resize(function() {
e(this).trigger("scroll")
}).trigger("scroll"), r.on("click", function() {
i.toggleClass("collapsed")
}), e('[href^="#"]').on("click", function(t) {
t.preventDefault(), e("html,body").animate({
scrollTop: e(e(this).attr("href")).offset().top - d - 44
}, 250)
}), e("input,textarea").on("blur change input", function() {
s(e(this))
}), e("form.contact").on("submit", function(t) {
t.preventDefault();
var a = e(this),
n = e("#submitform");
return e(".message").removeClass("shown"), e.each(e("input,textarea"), function() {
s(e(this))
}), e('[data-isvalid="false"]').length ? (e("html,body").animate({
scrollTop: e('[data-isvalid="false"]').first().offset().top - 150
}, 250), !1) : (n.prop("disabled", !0), void e.ajax({
method: "POST",
url: "http://codrin.eu/utils/sendmail.php",
data: {
first_name: e("[name=first_name]").val(),
last_name: e("[name=last_name]").val(),
email: e("[name=email]").val(),
company_name: e("[name=company_name]").val(),
message: e("[name=message]").val()
}
}).done(function(t) {
setTimeout(function() {
n.prop("disabled", !1), 1 == t ? (a[0].reset(), e(".field").removeClass("completed").removeAttr("data-isvalid"), e(".message_success").addClass("shown")) : e(".message_error").addClass("shown")
}, 2e3)
}))
})
}(jQuery);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
Raw
style.css
h1,
h3 {
font-weight: 500
}
h2,
h4 {
margin: 0;
font-weight: 400
}
.center,
h3 {
text-align: center
}
.btn,
a {
display: inline-block
}
.btn,
.menu {
position: relative;
cursor: pointer
}
.btn,
.link,
.menu {
position: relative
}
.btn,
.timeline span,
nav a {
text-transform: uppercase
}
body,
html {
margin: 0;
overflow-x: hidden;
background: #E3E3E3;
color: #8B8B8D;
font: 500 16px/22px Roboto, Arial, sans-serif
}
h3,
h4 {
line-height: 46px
}
body {
padding: 200px 20px 0;
margin-top: 200px
}
a {
text-decoration: none
}
:focus {
outline: 0
}
::-moz-focus-inner {
border: 0
}
li,
ul {
padding: 0;
margin: 0;
list-style: none
}
.btn,
nav .grid {
padding: 0 20px
}
h1 {
font-size: 45px;
line-height: 60px;
color: #565656;
margin: 0
}
h2 {
font-size: 18px;
line-height: 30px
}
h3 {
font-size: 30px;
margin: 50px 0
}
h4 {
font-size: 28px
}
p {
margin: 30px 0
}
.grid {
max-width: 1200px;
margin: 0 auto
}
.link {
color: #72B7E1;
border-bottom: 2px solid currentColor;
margin-bottom: -2px;
-webkit-transition: color 150ms;
transition: color 150ms
}
.link:active {
top: 2px
}
.link:hover {
color: #C3C3C3
}
.link.codepen {
color: #050305
}
.link.twitter {
color: #55ACEE
}
.link.facebook {
color: #5973A8
}
.btn {
font: 500 16px/22px Roboto, Arial, sans-serif;
line-height: 45px;
color: #fff;
border-radius: 4px;
border: 0;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2)
}
.skills-box ul,
.top-bar,
nav a {
font-size: 18px
}
.btn:active {
top: 2px;
box-shadow: none
}
.btn.blue {
background: #00A8FF
}
.btn.green {
background: #38DE8A
}
.btn+.btn {
margin-left: 15px
}
.menu {
float: left;
left: 13px;
top: 13px;
width: 40px;
height: 40px;
background: 0 0;
border: 0;
padding: 0;
margin: 0;
opacity: .7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms
}
.hamburger::after,
.hamburger::before {
content: '';
background: #fff
}
header,
nav {
left: 0;
right: 0
}
.menu:hover {
opacity: 1
}
.menuHidden .menu {
opacity: 0;
pointer-events: none
}
.hamburger,
.hamburger::after,
.hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms
}
.hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px)
}
.skype {
display: inline-block;
line-height: 0;
vertical-align: middle
}
.skype p {
margin: 0
}
.skype p img {
margin: 0!important;
vertical-align: middle!important
}
header {
position: fixed;
top: 0;
z-index: 2
}
.top-bar {
text-align: right;
font-weight: 300;
line-height: 66px;
color: rgba(255, 255, 255, .7);
letter-spacing: 1px;
background: #0396E3;
z-index: 1;
position: relative
}
.blue-box,
nav a,
nav a.active,
nav a:hover {
color: #fff
}
.hero,
.message,
footer.grid {
text-align: center
}
.skype,
.top-bar .mail {
margin: 0 20px;
color: #fff;
opacity: .7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms
}
.skype:hover,
.top-bar .mail:hover {
opacity: 1
}
nav {
z-index: 1;
background: #00A8FF;
position: fixed;
top: 66px;
padding: 50px 0 0;
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
box-shadow: 0 2px 3px 2px rgba(0, 0, 0, .25)
}
.collapsed .hamburger,
.white-box {
background: #fff
}
nav a {
line-height: 80px;
margin: 0 50px 0 0;
color: rgba(255, 255, 255, .7);
-webkit-transition: all 150ms;
transition: all 150ms
}
nav a:last-child {
margin-right: 0
}
nav a.active,
nav a:active {
box-shadow: inset 0 -2px 0 currentColor
}
.collapsed .hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px)
}
.collapsed .hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px)
}
.collapsed nav {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}
.box {
box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .15);
box-sizing: border-box;
padding: 90px 100px
}
.blue-box {
background: #00A8FF
}
.hero {
line-height: 30px;
padding-top: 150px;
position: relative
}
.hero p {
margin-bottom: 70px
}
.hero .thumb {
-webkit-transition: width 150ms, height 150ms;
transition: width 150ms, height 150ms;
width: 210px;
height: 210px;
border-radius: 50%;
position: absolute;
z-index: 2;
top: 0;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.hero.sticky .thumb,
body:not(.collapsed) header:not(.menuHidden)+.hero .thumb {
box-shadow: 0 2px 3px 2px rgba(0, 0, 0, .25);
position: fixed;
top: 60px;
width: 100px;
height: 100px
}
.timeline {
position: relative
}
.timeline .box::before,
.timeline::before {
display: block;
content: '';
position: absolute;
left: 50%
}
.timeline::before {
height: 100%;
width: 2px;
background: #B6B6B6;
margin-left: -1px;
box-shadow: inset 0 -100px 100px -30px #E3E3E3
}
.timeline::after {
content: '';
display: block;
clear: both
}
.timeline .box {
width: 45%;
background: #fff;
border-radius: 4px;
padding: 40px;
float: left;
clear: both
}
.timeline .box::before {
width: 14px;
height: 14px;
border-radius: 50%;
background: #00A8FF;
margin: -47px 0 0 -7px
}
.timeline .box:nth-child(2n+2) {
float: right
}
.timeline strong {
font-size: 18px;
font-weight: 500;
color: #555;
display: block
}
.card,
.field,
.skills-box .col {
display: inline-block;
box-sizing: border-box
}
.timeline span {
color: #72B7E1;
font-weight: 300;
line-height: 40px
}
.timeline p {
margin: 10px 0 0;
font-weight: 400;
line-height: 26px
}
.skills-box .col {
width: 50%;
padding: 0 0 0 6%;
vertical-align: top
}
.skills-box ul {
line-height: 40px;
font-weight: 400;
margin-top: 30px
}
.card,
.cards {
line-height: 0
}
.skills-box .footnote {
margin: 100px 0 0;
font-weight: 300;
font-size: 14px
}
.cards {
font-size: 0;
margin: 0 0 -30px -15px;
width: calc(100% + 30px)
}
.card {
padding: 0 15px 30px;
margin: 0;
width: 33.333333%;
font-weight: 400;
vertical-align: top
}
.card .box {
padding: 0;
background: #fff;
-webkit-transition: all .2s cubic-bezier(.3, .6, .2, 1.8);
transition: all .2s cubic-bezier(.3, .6, .2, 1.8)
}
.card .box:hover {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
box-shadow: 0 2px 14px 5px rgba(0, 0, 0, .15)
}
.card img {
width: 100%
}
.card .summary {
background: #F1DD1E;
color: #fff;
padding: 20px
}
.card span {
line-height: 20px;
color: rgba(255, 255, 255, .8);
font-size: 17px
}
.card.dark .summary {
color: #000
}
.card.dark span {
color: #454545
}
.card p {
padding: 20px;
margin: 0;
line-height: 26px;
font-size: 16px;
color: #8B8B8D
}
.summary.kiteops-summary {
background: #5CBC90
}
.summary.sp-summary {
background: #FE8D25
}
.summary.runceanu-summary {
background: #179DB4
}
.summary.yor-summary {
background: #E14E42
}
.summary.benevol-summary {
background: #910613
}
.summary.flip-summary {
background: #16A085
}
.summary.pa-summary {
background: #28261F
}
.contact {
font-size: 0;
line-height: 0
}
.field {
position: relative;
width: 50%;
margin-bottom: 50px;
padding: 0 20px
}
.field.field-textarea {
width: 100%;
padding: 0
}
.field:nth-child(odd) {
padding-left: 0
}
.field:nth-child(even) {
padding-right: 0
}
.field input,
.field textarea {
width: 100%;
border: 0;
border-bottom: 1px solid #A8A8AA;
box-shadow: inset 700px 0 0 0 #fff, 0 1px 0 #ECECEE;
margin: 0;
padding: 6px 0;
font: 300 18px/28px Roboto, Arial, sans-serif
}
.field textarea {
height: 150px;
resize: vertical
}
.field input:focus,
.field textarea:focus {
border-color: #18B1FD
}
.field label {
pointer-events: none;
font-size: 18px;
line-height: 20px;
font-weight: 400;
position: absolute;
left: 0;
transition: all 150ms
}
#submitform,
.field label {
-webkit-transition: all 150ms
}
.field:nth-child(even) label {
left: 20px
}
.field input:focus+label,
.field textarea:focus+label,
.field.completed label {
font-size: 12px;
color: #34B2FF;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px)
}
.contact .btn {
font-size: 16px;
min-width: 50%;
padding: 0;
margin-top: 50px
}
[required]+label:after {
content: '*'
}
.field[data-isvalid=false] [required]+label:after {
content: ''
}
.field[data-isvalid=true] label {
color: #38DE8A
}
.field[data-isvalid=false] label {
color: #E14E42;
text-transform: lowercase
}
.field[data-isvalid=false] label::before {
content: 'Please provide your ';
text-transform: none
}
.field[data-isvalid=false] label[for=email]::before {
content: 'Looks like an invalid '
}
.field[data-isvalid=false] label[for=message]::before {
content: 'You really should send me a '
}
.field:not([data-isvalid=true]):not(.field_optional)~.center input {
background: #E14E42
}
.message {
margin: 50px 0;
font-size: 24px;
line-height: 45px;
font-weight: 300;
display: none
}
.message.shown {
display: block
}
.message_success {
color: #38DE8A
}
.message_error {
color: #E14E42
}
#submitform {
transition: all 150ms
}
#submitform[disabled] {
background: #eee;
font-size: 0;
border-radius: 50%;
min-width: 45px;
width: 45px;
cursor: default;
margin-left: auto;
margin-right: auto;
-webkit-animation: sendMail 750ms infinite alternate ease-in-out;
animation: sendMail 750ms infinite alternate ease-in-out
}
@-webkit-keyframes sendMail {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px)
}
100% {
-webkit-transform: translateX(100px);
transform: translateX(100px)
}
}
@keyframes sendMail {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px)
}
100% {
-webkit-transform: translateX(100px);
transform: translateX(100px)
}
}
footer.grid {
margin-top: 20px;
margin-bottom: 20px;
font-size: 16px;
line-height: 32px
}
@media (max-width:900px) {
.hero .thumb, header {
box-shadow: 0 2px 3px 2px rgba(0, 0, 0, .25)
}
.mail,
body:not(.collapsed) .thumb {
display: none
}
.card {
width: 50%
}
.skills-box .col {
width: 100%;
text-align: center;
padding: 0
}
.skills-box .col ul {
margin-top: 20px
}
.skills-box .col:not(:first-child) h4 {
border-top: 2px solid #fff;
padding-top: 40px;
margin-top: 40px
}
body {
margin-top: 0;
padding-top: 140px
}
.hero .thumb {
position: fixed;
top: 60px;
width: 100px;
height: 100px
}
nav,
nav a.active,
nav a:active {
box-shadow: none
}
.box.hero {
padding-top: 40px;
padding-bottom: 40px
}
nav {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
bottom: 0;
top: 16px;
z-index: 1
}
.collapsed nav {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
-webkit-transition: none;
transition: none
}
nav a {
text-align: center;
margin: 0;
display: block;
line-height: calc((100vh - 66px)/ 6)
}
h3:not(#experience) {
margin-bottom: 20px
}
.field {
width: 100%;
padding: 0
}
.field:nth-child(even) label {
left: 0
}
}
@media (max-width:750px) {
body {
padding-left: 10px;
padding-right: 10px
}
.menu {
left: 3px
}
.skype {
margin-right: 10px
}
.timeline .box {
width: 100%;
position: relative;
margin-bottom: 40px
}
.timeline .box:last-child {
margin-bottom: 0
}
.hero p {
margin-bottom: 20px
}
.skills-box .footnote {
margin-top: 40px
}
.contact .btn {
width: 100%
}
}
@media (max-width:600px) {
.card {
width: 100%
}
.box,
.timeline .box {
padding: 20px
}
.timeline::before {
margin-top: -15px
}
form.box {
padding-top: 40px
}
.contact .btn,
.message {
margin-top: 0
}
.timeline strong {
margin-bottom: 20px
}
}
@media (max-width:420px) {
.btn {
display: block;
text-align: center
}
.btn+.btn {
margin: 20px 0 0
}
}
Raw
styles
<link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment