-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
2 lines (2 loc) · 12.1 KB
/
index.html
File metadata and controls
2 lines (2 loc) · 12.1 KB
1
2
<!DOCTYPE html> <html lang=en> <head> <title>Justin Nusca</title> <link rel=canonical href=https://justinnusca.com/ /> <meta name=author content="Justin Nusca"/> <meta name=description content="Justin Nusca, Front-end Developer and Web Designer based out of Vancouver, Canada."/> <meta name=referrer content=origin /> <meta property=og:title content="Justin Nusca | Front-end Developer | Vancouver"/> <meta property=og:url content=https://justinnusca.com/ /> <meta property=og:description content="Justin Nusca, Front-end Developer and Web Designer based out of Vancouver, Canada."/> <meta property=og:image content="assets/screenshot.4fd9a6c0.jpg"/> <meta charset=utf-8 /> <meta http-equiv=X-UA-Compatible content="IE=edge"/> <meta name=viewport content="width=device-width"/> <link rel="shortcut icon" href="favicon.png"><style>*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}article,footer,header,section{display:block}.about{margin:0 auto;max-width:1300px;padding:5em 10%;background:#fff}.about__title{color:#e27a7f;margin-bottom:1em}.about__bio{display:inline-block;padding-right:5%;width:65%}@media only screen and (max-width:600px){.about__bio{margin-bottom:2rem;padding:0;width:100%}}.about__photo{border-radius:50%;box-shadow:0 0 0 #e0e0e0;width:35%;-webkit-transition:box-shadow .3s ease,-webkit-transform .3s ease;transition:box-shadow .3s ease,-webkit-transform .3s ease;transition:box-shadow .3s ease,transform .3s ease;transition:box-shadow .3s ease,transform .3s ease,-webkit-transform .3s ease;vertical-align:top;will-change:transform}.about__photo:hover{-webkit-transform:scale3D(1.025,1.025,1);-ms-transform:scale3D(1.025,1.025,1);transform:scale3D(1.025,1.025,1);box-shadow:10px 20px 20px #e0e0e0}@media only screen and (max-width:600px){.about__photo{display:block;margin:0 auto;width:70%}}.header{margin:0 auto;max-width:1300px;padding:5em 10%;background:#444f5d;border-top:.2em solid #f19b9f;box-shadow:inset 0 -20em 20em -10em #39424e;padding:5em 5%;position:relative;text-align:center}.header__title{display:inline-block;margin-bottom:5em;width:15em}.header__name{color:#fff;font-size:2.5em;position:relative}.header__title:not(.show) .header__name{opacity:0}.header__title.show .header__name{-webkit-animation:header-title--animate .5s ease-in-out;animation:header-title--animate .5s ease-in-out;opacity:1}.header__name:after{background-color:#2a313a;bottom:.06em;content:"";height:.04em;left:0;position:absolute;-webkit-transition:opacity .3s ease .5s,-webkit-transform .3s ease .5s;transition:opacity .3s ease .5s,-webkit-transform .3s ease .5s;transition:opacity .3s ease .5s,transform .3s ease .5s;transition:opacity .3s ease .5s,transform .3s ease .5s,-webkit-transform .3s ease .5s;width:100%}.header__title:not(.show) .header__name:after{opacity:0;-webkit-transform:scale3D(0,1,1);-ms-transform:scale3D(0,1,1);transform:scale3D(0,1,1)}.header__title.show .header__name:after{opacity:1;-webkit-transform:scale3D(1,1,1);-ms-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}.header__subtitle{color:#f19b9f;-webkit-transition:opacity .3s ease .6s,-webkit-transform .3s ease .6s;transition:opacity .3s ease .6s,-webkit-transform .3s ease .6s;transition:opacity .3s ease .6s,transform .3s ease .6s;transition:opacity .3s ease .6s,transform .3s ease .6s,-webkit-transform .3s ease .6s}.header__title:not(.show) .header__subtitle{opacity:0;-webkit-transform:translate3D(0,50%,0);-ms-transform:translate3D(0,50%,0);transform:translate3D(0,50%,0)}.header__title.show .header__subtitle{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}.header__canvas{display:block;width:100%}@-webkit-keyframes header-title--animate{0%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1);opacity:0}60%{-webkit-transform:scale3D(1.2,1.2,1);transform:scale3D(1.2,1.2,1);opacity:1}80%{-webkit-transform:scale3D(.9,.9,1);transform:scale3D(.9,.9,1)}to{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}}@keyframes header-title--animate{0%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1);opacity:0}60%{-webkit-transform:scale3D(1.2,1.2,1);transform:scale3D(1.2,1.2,1);opacity:1}80%{-webkit-transform:scale3D(.9,.9,1);transform:scale3D(.9,.9,1)}to{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}}.link{color:#eb6e74;padding:0 0 .2em;position:relative;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;white-space:pre;will-change:color}.link,.link:after{-webkit-transition:all .2s ease;transition:all .2s ease}.link:after{content:"";background:#e0e0e0;height:.2em;left:0;opacity:0;position:absolute;top:100%;width:100%;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);will-change:opacity,transform}.link:focus,.link:hover{color:#f19b9f;outline:0}.link:focus:after,.link:hover:after{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}body{background:#eeefef;color:#444f5d;font-family:Quicksand,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.6;margin:0 auto;max-width:1300px;min-height:100vh;min-width:320px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media only screen and (min-width:600px){body{font-size:1.2em}}@media only screen and (max-width:600px){body{font-size:1em}}h1,h2{font-family:Oswald,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:2em;font-weight:400;letter-spacing:1px}h1,h2,p{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}p+p{margin-top:.5rem}a{text-decoration:none}input,textarea{font-family:Quicksand,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1em;line-height:1.6}
/*# sourceMappingURL=inline.css.map*/</style></head> <body> <header class=header> <div class=header__title data-anim-direction=in data-anim-name=show data-anim-type=scroll> <h1 class=header__name>Justin Nusca</h1> <p class=header__subtitle>Web Developer & Designer</p> </div> <canvas class=header__canvas height=1 id=canvas width=3></canvas> </header> <article class=about> <div class=about__bio> <h2 class=about__title>Hello!</h2> <p>I’m Justin Nusca, an experienced front-end developer knowledgable in javascript and CSS, and a visual designer specializing in UI and UX design. I love crafting products and websites that are delightful to use, and highly functional.</p> <p>Currently, I’m spending my days as a developer and UX Designer at <a class=link href=http://uken.com title="Makers of fine mobile games.">Uken Games</a>, building engrossing experiences on mobile devices for players worldwide.</p> <p>If you have any questions, job inquiries, or nice things to say, feel free to <a class=link href=mailto:njustin@gmail.com title="Just no spam, alright?">get in touch</a>. 👋</p> </div><img alt="A handsome photograph of me." class=about__photo src=assets/me.f456c80e.jpg /> </article> <form action=https://formspree.io/njustin@gmail.com class=contact id=form method=POST> <h2 class=contact__title>Drop Me a Line</h2> <div class=contact__feedback></div> <input name=_subject type=hidden value="Hi there!"/> <input name=_gotcha style=display:none type=text /> <div class=contact__section> <label class=contact__label data-anim-direction=in data-anim-name=show data-anim-type=scroll for=name> Name </label> <input class=contact__field id=name name=name placeholder="Your Name" required spellcheck=false /> <label class=contact__label data-anim-direction=in data-anim-name=show data-anim-type=scroll for=email> Email </label> <input class=contact__field id=email name=email placeholder=you@areawesome.com required spellcheck=false type=email /> </div><div class=contact__section> <label class=contact__label data-anim-direction=in data-anim-name=show data-anim-type=scroll for=message> Message </label> <textarea class=contact__message id=message name=message placeholder="Hi there!" required></textarea> <button class=contact__submit id=form-submit form=form type=submit value=Send> Send <span class=contact__icon--spinner></span> <span class=contact__icon--success>✔</span> </button> </div> </form> <ul class=social-links data-anim-name=show data-anim-type=scroll data-anim-direction=in> <li class=social-link> <a class=social-link__link href=https://twitter.com/justinnusca title="Follow me on Twitter."> <svg aria-labelledby=icon-title--twitter class=social-link__icon role=img> <title id=icon-title--twitter>Twitter Logo</title> <use xlink:href=#social-link--twitter></use> </svg> </a> </li> <li class=social-link> <a class=social-link__link href=https://ca.linkedin.com/in/justinnusca title="View my LinkedIn profile."> <svg aria-labelledby=icon-title--linkedin class=social-link__icon role=img> <title id=icon-title--linkedin>Linkedin Logo</title> <use xlink:href=#social-link--linkedin></use> </svg> </a> </li> <li class=social-link> <a class=social-link__link href=https://github.com/justinnusca title="Fork me on Github."> <svg aria-labelledby=icon-title--github class=social-link__icon role=img> <title id=icon-title--github>Github Logo</title> <use xlink:href=#social-link--github></use> </svg> </a> </li> <li class=social-link> <a class=social-link__link href=https://instagram.com/justinnusca title="Like my Instagram photos."> <svg aria-labelledby=icon-title--instagram class=social-link__icon role=img> <title id=icon-title--instagram>Instagram Logo</title> <use xlink:href=#social-link--instagram></use> </svg> </a> </li> </ul> <footer class=footer> <p>© 2016 Justin Nusca</p> </footer> <svg id=social-link-symbols><symbol id=social-link--instagram viewBox="0 0 154 154"><path d="M77 2c-20.4 0-23 0-31 .5C38 2.8 32.7 4 28 6c-5 2-9.2 4.4-13.4 8.6C10.4 18.8 8 23 6 28c-2 4.6-3.2 10-3.5 18C2 54 2 56.7 2 77s0 23 .5 31c.3 8 1.6 13.4 3.4 18 2 5 4.4 9.2 8.6 13.4 4.2 4.2 8.3 6.7 13.3 8.7 4.6 2 10 3.2 18 3.5 8 .4 10.6.5 31 .5s23 0 31-.5c8-.3 13.4-1.6 18-3.4 5-2 9.2-4.4 13.4-8.6 4.2-4.2 6.7-8.3 8.7-13.3 2-4.6 3.2-10 3.5-18 .4-8 .5-10.6.5-31s0-23-.5-31c-.3-8-1.6-13.4-3.4-18-2-5-4.4-9.2-8.6-13.4C135.2 10.4 131 8 126 6c-4.6-2-10-3.2-18-3.5C100 2 97.3 2 77 2zm0 13.5c20 0 22.4 0 30.3.5 7.3.3 11.3 1.5 14 2.5 3.4 1.4 6 3 8.6 5.6 2.5 2.8 4 5.3 5.5 8.8 1 2.6 2.2 6.6 2.5 14 .4 7.8.5 10.2.5 30.2s0 22.4-.5 30.3c-.3 7.3-1.5 11.3-2.5 14-1.4 3.4-3 6-5.6 8.6-2.8 2.5-5.3 4-8.8 5.5-2.6 1-6.6 2.2-14 2.5-7.8.4-10.2.5-30.2.5s-22.4 0-30.3-.5c-7.3-.3-11.3-1.5-14-2.5-3.4-1.4-6-3-8.6-5.6-2.5-2.8-4-5.3-5.5-8.8-1-2.6-2.2-6.6-2.5-14-.4-7.8-.5-10.2-.5-30.2s0-22.4.5-30.3c.3-7.3 1.5-11.3 2.5-14 1.4-3.4 3-6 5.6-8.6 2.8-2.5 5.3-4 8.8-5.5 2.6-1 6.6-2.2 14-2.5 7.8-.4 10.2-.5 30.2-.5zm0 23c-21.3 0-38.5 17.2-38.5 38.5s17.2 38.5 38.5 38.5 38.5-17.2 38.5-38.5S98.3 38.5 77 38.5zm0 63.5c-13.8 0-25-11.2-25-25s11.2-25 25-25 25 11.2 25 25-11.2 25-25 25zm49-65c0 5-4 9-9 9s-9-4-9-9 4-9 9-9 9 4 9 9z"/></symbol><symbol id=social-link--linkedin viewBox="0 0 154 154"><path d="M141 2H13C7 2 2 6.8 2 12.8v128.4c0 6 5 10.8 11 10.8h128c6 0 11-4.8 11-10.8V12.8c0-6-5-10.8-11-10.8zM35 22.8c7 0 13 5.8 13 13 0 7-6 12.8-13 12.8s-13-5.7-13-13c0-7 6-12.8 13-12.8zM24 58.4H46V130H24V58.4zm36.3-.4h21.4v9.7h.3c3-5.6 10.2-11.5 21-11.5 22.5 0 26.7 14.8 26.7 34v39.3h-22.2V94.7c0-8.3-.2-19-11.6-19-11.7 0-13.4 9-13.4 18.4v35.5H60.3V58z"/></symbol><symbol id=social-link--twitter viewBox="0 0 154 154"><path d="M105.8 16C88.8 16 75 29.8 75 46.8c0 2.4.3 4.7 1 7-25.7-1.3-48.4-13.5-63.6-32.2-2.6 4.6-4 10-4 15.5C8.3 48 13.6 57.3 22 62.8c-5 0-9.8-1.5-14-3.8v.3c0 15 10.6 27.3 24.7 30-2.6.8-5.3 1.2-8 1.2-2 0-4-.2-6-.5 4 12.2 15.4 21 29 21.3-10.7 8.3-24 13.2-38.4 13.2-2.4 0-5 0-7.3-.4 13.6 8.8 29.8 14 47.2 14 56.6 0 87.5-47 87.5-87.7v-4c6-4.3 11.2-9.7 15.3-16-5.5 2.6-11.5 4.2-17.7 5 6.4-3.8 11.3-10 13.6-17-6 3.5-12.7 6-19.7 7.4-5.6-6-13.6-9.7-22.5-9.7"/></symbol><symbol id=social-link--github viewBox="0 0 154 154"><path d="M77 2C35.6 2 2 35.8 2 77.4 2 110.7 23.5 139 53.3 149c3.7.6 5-1.7 5-3.7v-12.8c-21 4.5-25.3-10-25.3-10-3.4-8.8-8.3-11.2-8.3-11.2-6.8-4.6.5-4.5.5-4.5 7.6.5 11.5 7.7 11.5 7.7 6.7 11.5 17.6 8.2 22 6.3.5-5 2.5-8.2 4.6-10-16.6-2-34-8.5-34-37.3 0-8.3 2.8-15 7.6-20.3-1-2-3.5-9.6.6-20 0 0 6.3-2 20.6 7.8 6-1.7 12.4-2.5 18.8-2.5s12.8.8 18.8 2.5c14.3-9.8 20.6-7.7 20.6-7.7 4 10.3 1.5 18 .7 20 5 5.2 7.8 12 7.8 20.2 0 29-17.5 35.3-34.2 37.2 2.7 2.3 5 7 5 14v20.6c0 2 1.3 4.4 5.2 3.6 29.7-10 51.2-38.3 51.2-71.6C152 35.8 118.4 2 77 2"/></symbol></svg> <script type="text/javascript" src="app.82564d14.js"></script></body> </html>