<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kmeda/pen/ZaEeqM" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Fira+Sans'>
<style class="cp-pen-styles">a {
color: inherit;
text-decoration: none;
}
body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
color: white;
background-color: #1e1f24;
}
.sidebar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
width: 35px;
height: 100%;
top: 0;
border-right: 1px solid #393939;
cursor: pointer;
z-index: 99;
background-color: #1e1f24;
backface-visibility: hidden;
}
.sidebar .logo {
font-size: 1.3em;
position: absolute;
top: 0;
margin-top: 3px;
}
.sidebar .handle {
display: flex;
justify-content: space-between;
align-items: center;
width: 9px;
height: 30px;
}
.sidebar .handle .v-bar-a, .sidebar .handle .v-bar-b {
width: 2px;
height: 100%;
background-color: #6c6c6c;
}
.outer-most {
min-width: 100%;
width: auto;
height: 100%;
overflow-Y: hidden;
position: absolute;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180086/texture_akcj8b.png);
}
.outer-most .side-panel {
display: inline-block;
width: 75%;
height: 100%;
color: #dadada;
margin-left: -75%;
position: relative;
backface-visibility: hidden;
}
.outer-most .side-panel .side-panel-overlay {
width: 100%;
height: 100%;
position: absolute;
border-right: 1px solid #393939;
padding-left: 35px;
backface-visibility: hidden;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180141/honeycomb_s9jgpr.png);
}
.outer-most .side-panel .side-panel-overlay .about-me {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(30, 31, 36, 0.2) 0%, #1e1f24 50%, rgba(30, 31, 36, 0.2) 100%);
backface-visibility: hidden;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 90%;
height: 90%;
border: 1px solid #393939;
position: relative;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box::before {
content: "About";
color: #0afc9b;
font-family: "Fira sans";
font-size: 0.8em;
letter-spacing: 0.2em;
position: absolute;
top: 0;
right: 0;
margin-top: -9px;
margin-right: 10px;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .avatar {
box-sizing: border-box;
position: absolute;
width: 180px;
height: 180px;
top: -3%;
left: 3%;
z-index: 2;
border: 6px solid #393939;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
backface-visibility: hidden;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180158/pp_qxtlzj.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .avatar .contact {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 0;
left: 115%;
z-index: 1;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .avatar .contact .contact-glyph {
font-size: 1.3em;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .avatar .contact .email {
margin-bottom: 7px;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .avatar .contact .github {
margin-bottom: 7px;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .content span {
font-family: "Fira sans";
background-color: #8f8b8b;
color: transparent;
-webkit-background-clip: text;
text-align: justify;
font-size: 0.9em;
text-indent: 2em;
line-height: 1.5em;
}
.outer-most .side-panel .side-panel-overlay .about-me .content-box .sig {
width: 90px;
height: 80px;
position: absolute;
right: 5%;
bottom: 2%;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180442/sig_ieenwe.png);
background-size: contain;
background-repeat: no-repeat;
}
.outer-most .front-area {
display: inline-block;
width: auto;
height: 100%;
}
.outer-most .front-area .content-container {
display: flex;
width: auto;
height: 100%;
position: absolute;
}
.outer-most .front-area .content-container .profile {
box-sizing: border-box;
min-width: 50vw;
height: 100%;
position: relative;
}
.outer-most .front-area .content-container .profile .dial-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
.outer-most .front-area .content-container .profile .dial-container .dial {
width: 70%;
height: auto;
}
.outer-most .front-area .content-container .profile .text-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
}
.outer-most .front-area .content-container .profile .text-container .text-overlay {
margin-top: 150px;
text-align: center;
width: 100%;
font-family: "Fira Sans", sans-serif;
}
.outer-most .front-area .content-container .profile .text-container .text-overlay .greeting {
font-size: 2.5em;
background-color: #fafafa;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .profile .text-container .text-overlay .name {
font-size: 1.5em;
background-color: #8f8b8b;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .profile .text-container .text-overlay .name span {
background-color: #0afc9b;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .profile .text-container .text-overlay .iam {
font-size: 4em;
letter-spacing: 5px;
padding-left: 20px;
background-color: #fafafa;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .profile .text-container .text-overlay .endline {
background-color: #8f8b8b;
color: transparent;
-webkit-background-clip: text;
font-size: 0.8em;
}
.outer-most .front-area .content-container .profile .forward-indicator {
position: absolute;
left: 100%;
top: 35%;
font-size: 2em;
transform: translateX(-40px);
color: #6c6c6c;
cursor: pointer;
z-index: 9;
}
.outer-most .front-area .content-container .projects {
display: flex;
min-width: 40vw;
width: auto;
height: 100%;
}
.outer-most .front-area .content-container .projects .skills {
text-align: center;
min-width: 350px;
height: 100%;
border-left: 1px solid #393939;
position: relative;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 470px;
font-family: "Fira sans";
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509181756/halftonesimple_cbpemp.png);
background-size: cover;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .label {
margin-bottom: 30px;
width: 100%;
font-size: 1.3em;
background-color: #8f8b8b;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .label span {
font-size: 0.9em;
background-color: #0afc9b;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill {
text-align: left;
width: 70%;
min-height: 40px;
font-size: 0.8em;
background-color: #8f8b8b;
color: transparent;
-webkit-background-clip: text;
margin-bottom: 5px;
position: relative;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level {
margin-top: 5px;
width: 100%;
height: 1px;
background-color: rgba(10, 252, 155, 0.2);
position: relative;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.html::after {
content: "";
position: absolute;
width: 75%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.javascript::after {
content: "";
position: absolute;
width: 65%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.jquery::after {
content: "";
position: absolute;
width: 70%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.react::after {
content: "";
position: absolute;
width: 80%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.nodejs::after {
content: "";
position: absolute;
width: 65%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.mongo::after {
content: "";
position: absolute;
width: 60%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.webpack::after {
content: "";
position: absolute;
width: 60%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.ps::after {
content: "";
position: absolute;
width: 45%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .skills .skills-overlay .tool-chain .skill .level.ai::after {
content: "";
position: absolute;
width: 40%;
height: 2px;
background-color: #0afc9b;
}
.outer-most .front-area .content-container .projects .projects-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-width: 2500px;
width: auto;
height: 100%;
padding-right: 100px;
padding-left: 50px;
border-left: 1px solid #393939;
position: relative;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180141/honeycomb_s9jgpr.png);
}
.outer-most .front-area .content-container .projects .projects-wrapper::before {
content: "Portfolio";
position: absolute;
transform: rotate(-90deg);
left: 0;
background-color: rgba(10, 252, 155, 0.9);
color: transparent;
-webkit-background-clip: text;
font-family: "Fira sans";
font-size: 1.2em;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container {
display: flex;
align-items: center;
justify-content: center;
width: 97%;
height: 90%;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 15px 15px;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
text-align: center;
position: relative;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.65);
left: 0;
top: 0;
overflow: hidden;
font-family: "Fira Sans";
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay .count {
position: absolute;
right: 0;
font-size: 1.1em;
padding-right: 5px;
padding-top: 5px;
z-index: 9;
background-color: #e3e0e0;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay .description {
position: absolute;
z-index: 9;
background-color: #e3e0e0;
color: transparent;
-webkit-background-clip: text;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay .popup {
position: absolute;
width: 100%;
height: 60%;
background-color: rgba(0, 0, 0, 0.9);
bottom: 0;
top: 100%;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay .popup .stack {
position: absolute;
left: 5%;
top: 100%;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay .popup .stack span {
text-align: left;
padding-left: 5px;
padding-right: 15px;
font-family: "Fira sans";
font-size: 0.7em;
background-color: #e3e0e0;
color: transparent;
-webkit-background-clip: text;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay .popup .github {
position: absolute;
left: 50%;
bottom: -10%;
transform: translateX(-30px);
cursor: pointer;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project .overlay .popup .live-link {
position: absolute;
left: 50%;
bottom: -10%;
cursor: pointer;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-21 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180401/project21_kfxzmg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-20 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180402/project20_zyfs01.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-19 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project19_cfz4uy.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-18 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180402/project18_aetjjj.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-17 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180402/project17_fht0it.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-16 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180402/project16_e9gseo.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-15 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-14 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180402/project14_y6saok.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-13 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180402/project13_wri7tn.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-12 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project12_sz4zvc.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-11 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project11_ok5taw.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-10 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project10_fdjhwk.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-09 {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project09_xnciti.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-08 {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project08_wmg8q0.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-07 {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180404/project07_lidrbh.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-06 {
grid-column-start: 6;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 2;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project06_ulao95.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-05 {
grid-column-start: 6;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180404/project05_nn9tbh.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-04 {
grid-column-start: 6;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180403/project04_sc4fia.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-03 {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 1;
grid-row-end: 2;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180404/project03_zfag0i.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-02 {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 2;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180404/project02_pxs8yt.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .projects-wrapper .grid-container .grid .project-01 {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 3;
grid-row-end: 3;
background-image: url(https://res.cloudinary.com/kmeda/image/upload/v1509180404/project01_v0j8wl.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.outer-most .front-area .content-container .projects .go-back-indicator {
height: 100%;
min-width: 40px;
border-left: 1px solid #393939;
text-align: center;
font-size: 2em;
transform: translateX(-15px);
position: absolute;
right: 0;
}
.outer-most .front-area .content-container .projects .go-back-indicator .back {
color: #6c6c6c;
cursor: pointer;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #1e1f24;
background-clip: content-box;
}
::-webkit-scrollbar-thumb {
background: #6c6c6c;
border: 3px solid #1e1f24;
border-radius: 5px;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.profile {
min-width: 100vw !important;
}
.greeting {
font-size: 1em !important;
}
.name {
font-size: 0.8em !important;
}
.iam {
font-size: 1.5em !important;
}
.endline {
font-size: 0.6em !important;
}
.forward-indicator {
font-size: 1.5em !important;
}
.go-back-indicator {
font-size: 1.5em !important;
}
.projects-wrapper {
min-width: 1700px !important;
}
.count {
font-size: 0.9em !important;
}
.description {
font-size: 0.7em !important;
}
.popup .stack {
font-size: 0.7em !important;
top: 40% !important;
}
.popup .stack span {
font-size: 0.5em !important;
}
.popup .github {
font-size: 0.7em !important;
}
.popup .live-link {
font-size: 0.7em !important;
}
.avatar {
width: 100px !important;
height: 100px !important;
border: 4px solid #393939 !important;
}
.contact-glyph {
font-size: 0.9em !important;
}
.sig {
width: 55px !important;
height: 45px !important;
}
.content-box::before {
font-size: 0.7em !important;
margin-top: -7px !important;
margin-right: 10px !important;
}
.content span {
font-size: 0.7em !important;
}
}
@media only screen and (min-width: 481px) and (max-width: 1280px) {
.profile {
min-width: 65vw !important;
}
.greeting {
font-size: 1.3em !important;
}
.name {
font-size: 1em !important;
}
.iam {
font-size: 2em !important;
}
.endline {
font-size: 0.7em !important;
}
.forward-indicator {
font-size: 1.5em !important;
}
.go-back-indicator {
font-size: 1.5em !important;
}
}
@media only screen and (min-width: 800px) and (max-width: 1280px) {
.greeting {
font-size: 1.7em !important;
}
.name {
font-size: 1.3em !important;
}
.iam {
font-size: 3em !important;
}
.endline {
font-size: 1em !important;
}
.forward-indicator {
font-size: 2em !important;
}
.go-back-indicator {
font-size: 1.5em !important;
}
.projects-wrapper {
min-width: 2000px !important;
}
.count {
font-size: 0.9em !important;
}
.description {
font-size: 0.9em !important;
}
.popup .stack {
font-size: 0.8em !important;
top: 40% !important;
}
.popup .stack span {
font-size: 0.7em !important;
}
.popup .github {
font-size: 0.8em !important;
}
.popup .live-link {
font-size: 0.8em !important;
}
}
@media only screen and (min-height: 320px) and (max-height: 420px) {
.profile {
min-width: 75vw !important;
}
.greeting {
font-size: 1em !important;
}
.name {
font-size: 0.8em !important;
}
.iam {
font-size: 1.3em !important;
}
.endline {
font-size: 0.6em !important;
}
.forward-indicator {
font-size: 1.5em !important;
}
.go-back-indicator {
font-size: 1.5em !important;
}
.dial {
width: 60% !important;
}
.skills {
min-width: 300px !important;
}
.skills .skills-overlay .tool-chain {
min-height: 320px !important;
}
.skills .skills-overlay .tool-chain .label {
margin-bottom: 20px !important;
font-size: 0.85em !important;
}
.skills .skills-overlay .tool-chain .skill {
min-height: 25px !important;
font-size: 0.6em !important;
margin-bottom: 3px !important;
}
.skills .skills-overlay .tool-chain .skill .level {
margin-top: 3px !important;
}
.grid {
grid-template-columns: repeat(11, 1fr) !important;
grid-template-rows: 1fr 1fr !important;
grid-gap: 10px 10px !important;
}
.grid .project-21 {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-20 {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
grid-row-start: 2 !important;
}
.grid .project-19 {
grid-column-start: 2 !important;
grid-column-end: 3 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-18 {
grid-column-start: 2 !important;
grid-column-end: 3 !important;
grid-row-start: 2 !important;
}
.grid .project-17 {
grid-column-start: 3 !important;
grid-column-end: 4 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-16 {
grid-column-start: 3 !important;
grid-column-end: 4 !important;
grid-row-start: 2 !important;
}
.grid .project-15 {
grid-column-start: 4 !important;
grid-column-end: 5 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-14 {
grid-column-start: 4 !important;
grid-column-end: 5 !important;
grid-row-start: 2 !important;
}
.grid .project-13 {
grid-column-start: 5 !important;
grid-column-end: 6 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-12 {
grid-column-start: 5 !important;
grid-column-end: 6 !important;
grid-row-start: 2 !important;
}
.grid .project-11 {
grid-column-start: 6 !important;
grid-column-end: 7 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-10 {
grid-column-start: 6 !important;
grid-column-end: 7 !important;
grid-row-start: 2 !important;
}
.grid .project-09 {
grid-column-start: 7 !important;
grid-column-end: 8 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-08 {
grid-column-start: 7 !important;
grid-column-end: 8 !important;
grid-row-start: 2 !important;
}
.grid .project-07 {
grid-column-start: 8 !important;
grid-column-end: 9 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-06 {
grid-column-start: 8 !important;
grid-column-end: 9 !important;
grid-row-start: 2 !important;
}
.grid .project-05 {
grid-column-start: 9 !important;
grid-column-end: 10 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-04 {
grid-column-start: 9 !important;
grid-column-end: 10 !important;
grid-row-start: 2 !important;
}
.grid .project-03 {
grid-column-start: 10 !important;
grid-column-end: 11 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.grid .project-02 {
grid-column-start: 10 !important;
grid-column-end: 11 !important;
grid-row-start: 2 !important;
}
.grid .project-01 {
grid-column-start: 11 !important;
grid-column-end: 12 !important;
grid-row-start: 1 !important;
grid-row-end: 2 !important;
}
.count {
font-size: 0.9em !important;
}
.description {
font-size: 0.7em !important;
}
.popup .stack {
font-size: 0.7em !important;
top: 40% !important;
}
.popup .stack span {
font-size: 0.5em !important;
}
.popup .github {
font-size: 0.7em !important;
}
.popup .live-link {
font-size: 0.7em !important;
}
.avatar {
width: 100px !important;
height: 100px !important;
border: 4px solid #393939 !important;
}
.contact-glyph {
font-size: 0.8em !important;
}
.sig {
width: 55px !important;
height: 45px !important;
}
.content-box::before {
font-size: 0.7em !important;
margin-top: -7px !important;
margin-right: 10px !important;
}
.content {
top: 60% !important;
}
.content span {
font-size: 0.65em !important;
}
}
</style></head><body>
<div class=sidebar>
<div class="logo fa fa-angle-right"><span class=blink>_</span></div>
<div class=handle>
<div class="v-bar-a v-bar"></div>
<div class="v-bar-b v-bar"></div>
</div>
</div>
<div class=outer-most>
<div class=side-panel>
<div class=side-panel-overlay>
<div class=about-me>
<div class=content-box>
<div class=avatar>
<div class=contact><a class="contact-glyph email fa fa-envelope-square" href=mailto:karthikreddymeda@gmail.com target=_top></a><a class="contact-glyph github fa fa-github-square" href=https://github.com/ target=_blank></a><a class="contact-glyph skype fa fa-skype"
></a></div>
</div>
<div class=content>
<span>Having built both frontend and backend projects in Javascript I have gained fullstack development experience with MERN stack. React with redux has been a lot of fun to work with and Node for the backend. I also look forward to learning functional reactive programming with RxJS.</span>
<span>....</span>
</div>
<div
class=sig></div>
</div>
</div>
</div>
</div>
<div class=front-area>
<div class=content-container>
<div class=profile>
<div class=dial-container>
<div class=dial><svg id=Layer_1 data-name="Layer 1" xmlns=http://www.w3.org/2000/svg viewBox="0 0 895.5 894.2"><path class=top-dial d=M50,500C50,262.9,233.37,68.63,466,51.26 transform="translate(-37.5 -38.8)" style=fill:none;stroke:#0afc9b;stroke-miterlimit:10;stroke-width:25px;stroke-dasharray:130,5></path><circle class=outer-circle cx=462.5 cy=461.2 r=425 style=fill:none;stroke:#757575;stroke-miterlimit:10;stroke-width:16px;stroke-dasharray:1,15></circle><circle class="inner-circle triangle" cx=462.5 cy=461.2 r=405 style=fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:12px;stroke-dasharray:2,56></circle><path d=M885,500A383.89,383.89,0,0,1,766.19,778.15 transform="translate(-37.5 -38.8)" style=fill:none;stroke:#0afc9b;stroke-miterlimit:10;stroke-width:16px;stroke-dasharray:7,5></path></svg></div>
</div>
<div class=text-container>
<div class=text-overlay>
<div class=greeting> <i>Hello..</i></div><br>
<div class=name>I am <span>Karthik Meda</span></div><br>
<div class=iam>I Design & Code</div>
</div>
</div>
<div class=forward-indicator><span class="forward fa fa-long-arrow-right"></span></div>
</div>
<div class=projects>
<div class=skills>
<div class=skills-overlay>
<div class=tool-chain>
<div class=label>Skills <span><</span><span>/> </span>Tools</div>
<div class=skill>HTML/CSS
<div class="level html"></div>
</div>
<div class=skill>Javascript
<div class="level javascript"></div>
</div>
<div class=skill>jQuery
<div class="level jquery"></div>
</div>
<div class=skill>React - Redux
<div class="level react"></div>
</div>
<div class=skill>NodeJS
<div class="level nodejs"></div>
</div>
<div class=skill>MongoDB
<div class="level mongo"></div>
</div>
<div class=skill>Webpack / Gulp
<div class="level webpack"></div>
</div>
<div class=skill>Photoshop
<div class="level ps"></div>
</div>
<div class=skill>Illustrator
<div class="level ai"></div>
</div>
</div>
</div>
</div>
<div class=projects-wrapper>
<div class=grid-container>
<div class=grid>
<div class="project-21 project">
<div class=overlay>
<div class=count>#21</div>
<div class=description>Pinterest Clone</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React-Redux, NodeJS, MongoDB, Express, Socket.io</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-20 project">
<div class=overlay>
<div class=count>#20</div>
<div class=description>Book Trading Club</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React-Redux, NodeJS, MongoDB, Express, Socket.io</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-19 project">
<div class=overlay>
<div class=count>#19</div>
<div class=description>Night Life Coordination</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React-Redux, NodeJS, Express, Firebase</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-18 project">
<div class=overlay>
<div class=count>#18</div>
<div class=description>Stock Charts</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React-Redux, NodeJS, Express, Firebase</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-17 project">
<div class=overlay>
<div class=count>#17</div>
<div class=description>Voting App</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React-Redux, NodeJS, Express, Firebase</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-16 project">
<div class=overlay>
<div class=count>#16</div>
<div class=description>Socket.io Chat App</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>NodeJS, Express, Socket.io</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-15 project">
<div class=overlay>
<div class=count>#15</div>
<div class=description>Youtube Search</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React, NodeJS</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-14 project">
<div class=overlay>
<div class=count>#14</div>
<div class=description>Camper Leaderboard</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-13 project">
<div class=overlay>
<div class=count>#13</div>
<div class=description>Force Directed Graph</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, D3.js</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-12 project">
<div class=overlay>
<div class=count>#12</div>
<div class=description>Heat Map</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, D3.js</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-11 project">
<div class=overlay>
<div class=count>#11</div>
<div class=description>D3 Bar chart</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, D3.js</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-10 project">
<div class=overlay>
<div class=count>#10</div>
<div class=description>D3 Scatter Plot</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, D3.js</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-09 project">
<div class=overlay>
<div class=count>#9</div>
<div class=description>Recipe Box</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>React</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-08 project">
<div class=overlay>
<div class=count>#8</div>
<div class=description>Javascript Calculator</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-07 project">
<div class=overlay>
<div class=count>#7</div>
<div class=description>Simon Game</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-06 project">
<div class=overlay>
<div class=count>#6</div>
<div class=description>Tic-Tac-Toe</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-05 project">
<div class=overlay>
<div class=count>#5</div>
<div class=description>Wikipedia Viewer</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-04 project">
<div class=overlay>
<div class=count>#4</div>
<div class=description>Pomodoro Clock</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-03 project">
<div class=overlay>
<div class=count>#3</div>
<div class=description>Twitch Tv</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-02 project">
<div class=overlay>
<div class=count>#2</div>
<div class=description>Weather App</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
<div class="project-01 project">
<div class=overlay>
<div class=count>#1</div>
<div class=description>Random Quote Machine</div>
<div class=popup>
<div class="stack fa fa-wrench"> <span>HTML, CSS, jQuery</span></div>
<div class="github fa fa-code"></div>
<div class="live-link fa fa-desktop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=go-back-indicator><span class="back fa fa-long-arrow-left"></span></div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TimelineMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js'></script>
<script >// ********************* //
// Horizontal Layout design and animation inspired from norgram.co **
// ********************* //
$(window).on('load', function(){
verticalBarsAnimation();
sidebarAnimation();
blinkingPrompt();
goBackIndicator();
forwardIndicator();
dialAnimation();
// All Events /----/----/
//Vertical Scrolling
$(".outer-most").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 2);
event.preventDefault();
var left = $(".side-panel").offset().left;
if (sidebarOpen && left < -300) {
setTimeout(function(){
var tl = new TimelineMax();
tl.to('.side-panel', 0.2, {marginLeft: "-75%", ease: Power0.easeOut})
.to(['.sidebar', '.outer-most'], 0.1, {left:'-45'})
.to('.sidebar', 0, {backgroundColor:"rgb(30, 31, 36)", borderRight:"1px solid #393939"})
.to(['.sidebar', '.outer-most'], 0.2, {left: '0'});
TweenMax.to('.outer-most', 0.1, {scrollTo: {x: "0"},ease: Power2.easeOut});
sidebarOpen = false;
sidePanelLeft = '-75%';
}, 100);
}
});
$('.back').click(function(){
var tl = new TimelineMax();
tl.to('.outer-most', .2, {marginLeft: "-60px"})
.to('.outer-most', .1, {marginLeft: "0"})
.to('.outer-most', 1, {scrollTo: {x: "0"},ease: Power2.easeOut});
});
$('.forward').click(function(){
TweenMax.to('.outer-most', 1, {scrollTo: {x: 0.75*$('.outer-most').width()} ,ease: Power2.easeOut});
});
$('.forward').mouseenter(function(){
tiltDial();
});
$('.forward').mouseleave(function(){
tiltDial();
});
$('.overlay').each(function(i, elem){
$(this).mouseenter(function(){
TweenMax.to($(this).children(".popup"), .2, {'top': '40%', ease: Linear.easeNone});
TweenMax.to($(this).children(".count"), 1.5, {'top': '40%', ease: Elastic.easeOut});
TweenMax.to($(this).find(".stack"), 1.5, {'top': '50%', ease: Elastic.easeOut});
TweenMax.to($(this).find(".github"), 1.5, {'bottom': '10%', ease: Elastic.easeOut});
TweenMax.to($(this).find(".live-link"), 1.5, {'bottom': '10%', ease: Elastic.easeOut});
});
$(this).mouseleave(function(){
TweenMax.to($(this).children(".popup"), .2, {'top': '100%', ease: Linear.easeNone});
TweenMax.to($(this).children(".count"), .2, {'top': '0%', ease: Linear.easeNone});
TweenMax.to($(this).find(".stack"), .3, {'top': '100%', ease: Linear.easeNone});
TweenMax.to($(this).find(".github"), .3, {'bottom': '-10%', ease: Linear.easeNone});
TweenMax.to($(this).find(".live-link"), .3, {'bottom': '-10%', ease: Linear.easeNone});
});
});
});
// All functions
//Blinking prompt
var blinkingPrompt = function(){
var tl = new TimelineMax({repeat: -1});
tl.to('.blink', 0.8, {opacity: 0})
.to('.blink', 1, {opacity: 1})
}
var goBackIndicator = function(){
var tl = new TimelineMax({repeat: -1});
tl.to('.back', 2, {delay: 1.5, transform: "translateX(15px)"})
.to('.back', 1.5, {transform: "translateX(0px)", ease: Elastic.easeOut});
}
var forwardIndicator = function(){
var tl = new TimelineMax({repeat: -1});
tl.to('.forward', 2, {delay: 1.5, transform: "translateX(-15px)"})
.to('.forward', 1.5, {transform: "translateX(0px)", ease: Elastic.easeOut});
}
// Sidebar pull indicator
var verticalBarsAnimation = () => {
var tl = new TimelineMax({repeat:-1, repeatDelay:2.5});
tl.to('.v-bar-a', 0.2, {height: '-=10px', ease: Power0.easeIn})
.to('.v-bar-b', 0.2, {height: '-=10px', ease: Power0.easeIn})
.to('.v-bar-a', 0.2, {height: '+=10px', ease: Power0.easeIn})
.to('.v-bar-b', 0.2, {height: '+=10px', ease: Power0.easeIn});
}
// Side panel Pull Animation
var sidebarOpen = false;
var sidePanelLeft = "-75%";
var sidebarAnimation = ()=> {
$('.sidebar').click((e)=>{
e.stopPropagation();
sidebarOpen = sidebarOpen === false ? true : false;
sidePanelLeft = sidePanelLeft === '-75%' ? '0' : '-75%';
if (sidebarOpen) {
var tl = new TimelineMax();
tl
.to(['.sidebar', '.outer-most'], 0.3, {left:'-45'})
.to('.sidebar', 0, {backgroundColor:"#000", color: "#ffffff", borderRight:"1px solid #393939"})
.to(['.sidebar', '.outer-most'], 0.1, {delay: 0.1, left: '0'})
.to('.side-panel',0.2, {marginLeft: sidePanelLeft, ease: Linear.easeIn});
setTimeout(function(){
$("html, body, *").scrollLeft(0);
}, 500);
} else {
var tl = new TimelineMax();
tl.to('.side-panel', 0.2, {marginLeft: sidePanelLeft, ease: Power0.easeOut})
.to(['.sidebar', '.outer-most'], 0.1, {left:'-45'})
.to('.sidebar', 0, {backgroundColor:"rgb(30, 31, 36)", color: "#ffffff", borderRight:"1px solid #393939"})
.to(['.sidebar', '.outer-most'], 0.2, {left: '0'});
$("html, body, *").scrollLeft(0);
}
});
}
// Dial Rotation
var dialAnimation = function(){
TweenMax.set(['.outer-circle', '.inner-circle', '.top-dial'], {transformOrigin:"50% 50%"});
TweenMax.to('.outer-circle', 75, {rotateZtransformOrigin: "center", rotation: -360, ease: Linear.easeNone, repeat: -1})
TweenMax.to('.inner-circle', 100, {rotateZtransformOrigin: "center", rotation: 360, ease: Linear.easeNone, repeat: -1})
};
// Tilt dial on mouse over forward-indicator
var dialTilt = false;
var tiltDial = function(){
if (!dialTilt) {
TweenMax.to('#Layer_1', 0.2, {scale: 0.95, rotation: 35});
dialTilt = true;
} else {
TweenMax.to('#Layer_1', 0.2, {scale: 1, rotation: 0});
dialTilt = false;
}
};
//# sourceURL=pen.js
</script>
</body></html>
