Skip to content

Instantly share code, notes, and snippets.

@s3nh

s3nh/index.html

Created July 17, 2020 06:53
Show Gist options
  • Save s3nh/d5ae9c818e5c4b0175f706bea7a1316e to your computer and use it in GitHub Desktop.
Save s3nh/d5ae9c818e5c4b0175f706bea7a1316e to your computer and use it in GitHub Desktop.
Download ZIP
portfolio with angular
Raw
index.html
<body ng-app="app">
<!--header-->
<div id="header">
<div class="container cont-header txt-title txt-md" >
<span class="header-left">Kyla Vana</span>
<ul class="header-right">
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<!--portfolio app-->
<div>
<div ng-controller="portfolioController" class="container cont-portfolio" id="portfolio">
<div ng-repeat="content in portfolioItems" class="content">
<div class="content-wrap" onclick="expand_lb(this)">
<div class="frontface">
<div class="image">
<img src='https://kylavana.github.io/port_items/{{content.image_cover}}' alt="portfolio image"/></div>
</div>
<!--end front-->
<div class="backface">
<div>
<h1 class="txt-title txt-lg">{{content.title}}</h1>
<h2 class="txt-md">{{content.subtitle}}</h2>
</div>
<noscript>
</noscript>
</div>
<!--end back-->
</div>
<!--end content-wrap-->
<div class="lightbox">
<div class="lightbox-content">
<div class="lightbox-text">
<button class="close txt-title" onclick="close_lb()"></button>
<h1 class="txt-lg txt-title">{{content.title}}</h1>
<h2 class="txt-title txt-md" style="color:#69656e;">{{content.subtitle}}</h2>
<p class="txt-md" style="white-space:pre-wrap;">{{content.desc}}</p>
<a href={{content.link}} class="lightbox-link"><i class={{content.link_class}}></i><span>{{content.link_txt}}</span></a>
</div>
<div class="lightbox-image">
<a ng-repeat="i in content.image_set" href='{{i[1]}}' title="{{i[3]}}"><img class="img-defer" defer-img='https://kylavana.github.io/port_items/{{i[0]}}' src="nope" alt="portfolio image"/>{{i[2]}}</a>
</div>
</div>
</div>
<!--end modal-->
</div>
<!--end content-->
</div>
<!--end controller/container-->
</div>
<!--end portfolio app-->
<hr>
<!--about section-->
<div class="container" id="about">
<div class="section-wrapper">
<h1 class="txt-title txt-lg">My background</h1>
<p class="txt-md aboutme">I'm a professional graphic designer and illustrator with over seven years of experience. Additionally, I have nearly six years of experience in web design and font-end development. My aesthetic tends towards clean lines, inviting colors and overall less-is-more mentality. I graduated from Miami University (Oxford Ohio) with a Bachelor's degree of Arts in Architecture. After College, I worked in the architectural field for over two years, but ultimately decided to pursue a career in graphic/web design which has allowed me to more fully utilize my creative skills. Through my experience in both fields, I have developed a wide skillset that can bring a unique and fresh perspective to your team or project.</p>
<h1 class="txt-title txt-lg skillset-title">Skillset</h1>
<div class="skill-wrapper">
<div class="skill-item">
<div class="skill-pic"><img src="https://kylavana.github.io/icon_dsgn.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_dsgn.png'" alt="graphic design icon" height="100%" width="100%"></div>
<div class="skill-txt">
<h2 class="txt-title txt-sm">Illustration</h2>
<p>I have done professional illustrations for over 7 years. My work includes everything from detailed technical illustrations to icons and pixel artwork. I am very experienced with Adobe Photoshop, Adobe Illustrator, GIMP, and Inkscape.</p>
</div>
</div>
<!--end skill-item-->
<div class="skill-item">
<div class="skill-pic"><img src="https://kylavana.github.io/icon_illus.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_illus.png'" alt="illustration icon" height="100%" width="100%"></div>
<div class="skill-txt">
<h2 class="txt-title txt-sm">Graphic Design</h2>
<p>Posters, booklets, brochures, infographics and icons are just a few types of collateral I have worked on. I am skilled with Adobe InDesign, Adobe Acrobat, and Scribus. Additionally, I have experience working with professional printers to see projects through production.</p>
</div>
</div>
<!--end skill-item-->
<div class="skill-item">
<div class="skill-pic"><img src="https://kylavana.github.io/icon_webdev.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_webdev.png'" alt="web development icon" height="100%" width="100%"></div>
<div class="skill-txt">
<h2 class="txt-title txt-sm">Web Development</h2>
<p>With nearly 6 years of experience in front end design and development, I am fluent with HTML, CSS, and Javascript. I have experience working with the jQuery and Angular libraries, as well as CSS preprocessors like SCSS. Additionally, I am familiar with writing php and working with Wordpress and sql databases.</p>
</div>
</div>
<!--end skill-item-->
<div class="skill-item">
<div class="skill-pic"><img src="https://kylavana.github.io/icon_misc.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_misc.png'" alt="addition skills icon" height="100%" width="100%"></div>
<div class="skill-txt">
<h2 class="txt-title txt-sm">Additional Skills</h2>
<p>Throughout my career, I have developed several additional skills including: Animation (web and flash), 3D modeling (Sketchup) and video editing (Adobe Premier). I am also skilled with traditional media such as charcoal and watercolor.</p>
</div>
</div>
<!--end skill-item-->
</div>
<!--emd skill-wrapper-->
</div>
<!--end section-wrapper-->
</div>
<!--end about container-->
<hr>
<!--contact-->
<div class="container" id="contact">
<div class="section-wrapper">
<div class="cont-item-wrapper">
<div class="cont-item">
<a href="mailto:[email protected]">
<img src="https://kylavana.github.io/icon_email.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_email.png'" alt="email icon" width="100" height="100">
<p class="txt-title cont-text">Send me an email</p>
</a>
</div>
<!--emd cont item-->
<div class="cont-item">
<a href="https://www.linkedin.com/profile/preview?locale=en_US&trk=prof-0-sb-preview-primary-button">
<img src="https://kylavana.github.io/icon_linkedin.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_linkedin.png'" alt="linkedin icon" width="100" height="100">
<p class="txt-title cont-text">LinkedIn</p>
</a>
</div>
<!--emd cont item-->
<div class="cont-item">
<a href="https://kylavana.github.io/kyla_vana_resume.pdf">
<img src="https://kylavana.github.io/icon_resume.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_resume.png'" alt="resume icon" width="100" height="100">
<p class="txt-title cont-text">Resume</p>
</a>
</div>
<!--emd cont item-->
<div class="cont-item">
<a href="http://issuu.com/kyla.v/docs/kyla_portfolio">
<img src="https://kylavana.github.io/icon_issuu.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_issuu.png'" alt="issuu icon" width="100" height="100">
<p class="txt-title cont-text">issuu</p>
</a>
</div>
<!--emd cont item-->
<div class="cont-item">
<a href="https://codepen.io/kvana/public/">
<img src="https://kylavana.github.io/icon_codepen.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_codepen.png'" alt="codepen icon" width="100" height="100">
<p class="txt-title cont-text">Codepen</p>
</a>
</div>
<!--emd cont item-->
<div class="cont-item">
<a href="http://www.coroflot.com/kylav/portfolio">
<img src="https://kylavana.github.io/icon_coroflot.svg" onerror="this.onerror=null; this.src='https://kylavana.github.io/icon_coroflot.png'" alt="Coroflot icon" width="100" height="100">
<p class="txt-title cont-text">Coroflot</p>
</a>
</div>
<!--emd cont item-->
</div>
<!--emd skill wrapper-->
</div>
<!--emd section-wrapper-->
</div>
<!--end contact container-->
<div class="footer">
<div class="date-wrapper"><span class="txt-title date" ng-controller="yearController">©Kyla Vana {{date | date:'yyyy'}}</span></div>
</div>
</body>
Raw
portfolio-with-angular.markdown
Raw
script.js
// Define the `portfolioApp` module
var app = angular.module("app", []);
//define `yearController`
app.controller('yearController', function ($scope) {
$scope.date = new Date();
});
// Define the `portfolioController`
app.controller('portfolioController', function ($scope) {
$scope.portfolioItems = [
{
title: 'Technical Illustrations',
subtitle: 'Visualizing Building and Infrastructure Systems',
image_cover:'tech_ill_cover.jpg',
image_set: [['port_lurie.jpg', '/port_items/port_lurie_big.jpg', "Mechanical Floor of the Lurie Children's Hospital of Chicago", 'See full size'], ['nrel_redb.jpg', '/port_items/nrel_redb_big.jpg', "Cut-away view of the Energy Systsems Intragration Facility at the National Renewable Energy Laboratory (Golden, CO)", 'See full size'], ['port_utmb.jpg', '/port_items/port_utmb_big.jpg', "Proposed new infrastructure tunnels for the University of Texas Medical Branch (Galveston, TX)", 'See full size']],
desc:"These illustrations were done for Affiliated Engineers, Inc. to be used in presentations to prospective clients. Complex engineered systems are simplified and shown in context, making them more accessible to a non-technical audience.\nAll of the illustrations started as 3D models in Sketchup, post-processing was done in Adobe Illustrator and Photoshop to improve line quality and add depth and texture.",
link:'no',
link_class:'',
link_txt:'',
},
{
title: 'Ads & Brochures',
subtitle: 'Various Projects',
image_cover:'auto_test_ad_cover.gif',
image_set: [['auto_test_ad.gif', '/port_items/auto_test_ad_big.png', 'Engineering Services advertisement in "Automotive Testing Magazine"', 'See full size'], ['recruitment_brch.png', '/port_items/recruitment_brch.pdf', 'College recruiting brochure for Affiliated Engineers, Inc.', 'View the brochure'], ['water_brch.png', '/port_items/water_brch.pdf', 'Water use optimization brochure', 'View the brochure']],
desc:"Marketing collateral designed for Affiliated Engineers, Inc. These pieces represent a collaborative effort – copy was provided by a creative writer, and photos were purchased from professional photographers. I was drew the icons/illustrations in Adobe Illustrator, and laid everything out in Adobe InDesign. Additionally, I was responsible for preparing the files for production and working with the professional printers/magazine editors.",
link:'no',
link_class:'',
link_txt:'',
},
{
title: 'Doomhold',
subtitle: 'Video Game Development',
image_cover:'port_vgame.gif',
image_set: [['port_vgame.gif', 'https://codepen.io/kvana/pen/YNYOGo', '', 'Download the demo']],
desc:"Doomhold is a Retro action/RPG video game currently in development. I am doing all the programming as well as creating all of the art assets for the project. The demo is currently available for windows 7+.",
link:'https://codepen.io/kvana/',
link_class:'icon-dl',
link_txt:'Download the demo'
},
{
title: 'Traditional Media',
subtitle: 'Drawings and Prints',
image_cover:'port_fist.gif',
image_set: [['port_fist.gif', '/port_items/fistprint_big.jpg', 'Linoleum Print', 'See full size'], ['castle.jpg', '/port_items/caste_big.jpg', 'Cardiff Castle, Wales - Charcoal on paper', 'See full size'], ['eye.jpg', '/port_items/eyeprint_big.jpg', 'Linoleum Print', 'See full size']],
desc:"Personal projects done with traditional media, specifically charcoal and linoleum print. These are two of my favorite media to work with - I enjoy the methodical, reductive process of printmaking, while charcoal is perfect for quick, expressive sketching.",
link:'no',
link_class:'',
link_txt:'',
},
{
title: 'Happy Birthday, FiL!',
subtitle: 'Digital Booklet',
image_cover:'fil_anm_cake.gif',
image_set: [['fil_anm_cake.gif', 'http://www.aeieng.com/images/misc/fil_bday.html', '', 'View the booklet'], ['fil_anm_stars.gif', 'http://www.aeieng.com/images/misc/fil_bday.html', '', 'View the booklet'], ['fil_anm_brainpwr.gif', 'http://www.aeieng.com/images/misc/fil_bday.html', '', 'View the booklet']],
desc:"A web-based booklet celebrating the 1-year anniversary of Affiliated Engineers, Inc.'s new knowledge sharing platform (nick-named FiL). The booklet features a user driven page-turning effect (only on desktops) and animation to help bring the illustrations to life. The illustrations were drawn with Adobe Illustrator, and animated by css.",
link:'http://www.aeieng.com/images/misc/fil_bday.html',
link_class:'icon-link',
link_txt:'View the booklet',
},
{
title: 'Infographics',
subtitle: 'Visualizing Information',
image_cover:'infographic_cover.png',
image_set: [['dist_nrg.png', '/port_items/dist_nrg_big.png', 'Advancement of district energy technology', 'See full size'], ['telehealth.png', '/port_items/telehealth_big.jpg', 'Development and decentralization of healthcare delivery in the United States', 'See full size'], ['circle_diag.jpg', '/port_items/circle_diag_big.jpg', 'Workflow diagram - Affiliated Engineers, Inc.', 'See full size']],
desc:"The ability to communicate information is becoming increasingly important. Therefore, I try to represent data in my infographics in a clean and approachable manner.",
link:'no',
link_class:'',
link_txt:'',
},
{
title: 'Graphic Art',
subtitle: 'Various Projects',
image_cover:'port_abso.gif',
image_set: [['port_abso.gif', '/port_items/port_abso.gif', 'Sticker Artwork - tradeshow swag', 'See full size'], ['adapt_or_die.gif', 'http://securitytechnologyexecutive.epubxp.com/i/870734-sep-oct-2017', 'Cover artwork for "Security Technology Executive" Magazine (Sept 2017 issue)', 'Read the magazine'], ['feather_weight.gif', '/port_items/feather_weight.gif', 'Artwork for article about vehicle lightweighting in "Automotive Testing Magazine"', 'See full size'], ['chili_cookoff.png', '/port_items/chili_cookoff_big.gif', 'Artwork for chili cook-off poster', 'See full size']],
desc:"Visually impactful artwork designed to grab the viewer's attention. All pieces were drawn in Adobe Illustrator.",
link:'no',
link_class:'',
link_txt:'',
},
{
title: 'Intelligent Buildings',
subtitle: 'Booklet Design and Illustration',
image_cover:'ib_book.gif',
image_set: [['ib_book.gif', 'http://issuu.com/kyla.v/docs/ib_booklet?workerAddress=ec2-54-224-253-214.compute-1.amazonaws.com', 'Cover', 'Read the booklet'], ['ib_book2.jpg', 'http://issuu.com/kyla.v/docs/ib_booklet?workerAddress=ec2-54-224-253-214.compute-1.amazonaws.com', 'Inside spread', 'Read the booklet']],
desc:"This booklet was created as marketing collateral for Affiliated Engineers Inc.'s Intelligent Building (IB) Group. The IB group specializes in optimizing data to improve building energy efficiency and lower maintenance costs. In addition to designing the layout of the booklet, I also drew all of the icons, illustrations, and infographics.",
link:'https://codepen.io/kvana/',
link_class:'icon-link',
link_txt:'Read the booklet'
},
{
title: 'Codpen Projects',
subtitle: 'Experiments and Demos',
image_cover:'codpen_cover.jpg',
image_set: [['gen_art.jpg', 'https://codepen.io/kvana/pen/YNYOGo', 'Generative art', 'View the demo'], ['port_dnj.gif', 'https://codepen.io/kvana/pen/PbGaqo', 'Simple RPG built with Javascript', 'View the demo'], ['spr_edit.gif', 'https://codepen.io/kvana/pen/WjrELz', 'Sprite editor built with javascript and <canvas>', 'View the demo']],
desc:"Codepen is a great tool for creating demos and learning code, I use it nearly every day to test an idea or learn something new. These are just a few of the projects I’ve built in Codpen, please visit my profile to see more!",
link:'https://codepen.io/kvana/',
link_class:'icon-link',
link_txt:'View my Profile'
},
];
});
// End Angular Module
/*///LIGHTBOX/////*/
var userscroll;
//open lightbox
function expand_lb(clicked_el) {
userscroll = document.documentElement.scrollTop;
window.scrollTo(0, 0);
//add expand class
var lb_el = clicked_el.nextElementSibling;
if (lb_el.classList){
lb_el.classList.add('expand');
}else{
lb_el.className += ' ' + 'expand';
}
//add container hide
var container = document.querySelectorAll(".container");
[].forEach.call(container, function(el1) {
if (container.classList)
el1.classList.add('container-hide');
else
el1.className += ' ' + 'container-hide';
});
fn_load_portimgs(lb_el);
};
//close lightbox
function close_lb() {
//remove expand class
var lbs = document.querySelectorAll(".lightbox.expand");
[].forEach.call(lbs, function(el2) {
el2.className = el2.className.replace(/\bexpand\b/, "");
});
//remove container hide class
var cont_hide = document.querySelectorAll(".container.container-hide");
[].forEach.call(cont_hide, function(el3) {
el3.className = el3.className.replace(/\bcontainer-hide\b/, "");
});
window.scrollTo(0, userscroll);
};
//call window scrolled function
window.onscroll = function(){
win_scroll();
};
function win_scroll() {
var scroll_top = (document.documentElement && document.documentElement.scrollTop) ||
document.body.scrollTop;
var win_height = window.innerHeight;
var skills = document.querySelectorAll('.skill-pic');
for (i = 0; i < skills.length; i++) {
var top = skills[i].offsetTop
if (top < scroll_top + (win_height/1.5)){
if (skills[i].classList)
skills[i].classList.add('in-view');
else
skills[i].className += ' ' + 'in-view';
}
}
}
/*///DEFER LOAD///*/
function fn_load_portimgs(lb){
var lb_con = lb.children[0];
var lb_img = lb_con.children[1];
var lb_a = lb_img.children;
for (i = 0; i < lb_a.length; i++) {
var img = lb_a[i].children[0];
img.setAttribute("src", img.getAttribute("defer-img"));
}
}
/*///SMOOTH SCROLL///*/
initSmoothScrolling();
function initSmoothScrolling() {
var duration = 400;
var pageUrl = location.hash ?
stripHash(location.href) :
location.href;
delegatedLinkHijacking();
//directLinkHijacking();
function delegatedLinkHijacking() {
document.body.addEventListener('click', onClick, false);
function onClick(e) {
var target = e.target;
if (!isInPageLink(target)) {
var output = isInPageLinkRecurse(target);
if(output != false) {
target = output;
} else {
return;
}
}
e.stopPropagation();
e.preventDefault();
jump(target.hash, {
duration: duration,
callback: function() {
setFocus(target.hash);
}
});
}
}
function directLinkHijacking() {
[].slice.call(document.querySelectorAll('a'))
.filter(isInPageLink)
.forEach(function(a) {
a.addEventListener('click', onClick, false);
});
function onClick(e) {
e.stopPropagation();
e.preventDefault();
jump(e.target.hash, {
duration: duration
});
}
}
function isInPageLink(n) {
return n && n.tagName.toLowerCase() === 'a' &&
n.hash.length > 0 &&
stripHash(n.href) === pageUrl;
}
var count = 0;
var isInPageLinkRecurse = function recurse (target) {
var parent = target.parentElement;
var linkFound = isInPageLink(parent);
if (linkFound) {
count = 0;
return parent;
} else if (count < 4){
count++;
return recurse(parent);
} else {
count = 0;
return linkFound;
}
};
function stripHash(url) {
return url.slice(0, url.lastIndexOf('#'));
}
function isCssSmoothSCrollSupported() {
return 'scrollBehavior' in document.documentElement.style;
}
// Adapted from:
// https://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
function setFocus(hash) {
var element = document.getElementById(hash.substring(1));
if (element) {
if (!/^(?:a|select|input|button|textarea)$/i.test(element.tagName)) {
element.tabIndex = -1;
}
element.focus();
}
}
}
function jump(target, options) {
var
start = window.pageYOffset,
opt = {
duration: options.duration,
offset: options.offset || 0,
callback: options.callback,
easing: options.easing || easeInOutQuad
},
distance = typeof target === 'string' ?
opt.offset + document.querySelector(target).getBoundingClientRect().top :
target,
duration = typeof opt.duration === 'function' ?
opt.duration(distance) :
opt.duration,
timeStart, timeElapsed;
requestAnimationFrame(function(time) {
timeStart = time;
loop(time);
});
function loop(time) {
timeElapsed = time - timeStart;
window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));
if (timeElapsed < duration)
requestAnimationFrame(loop);
else
end();
}
function end() {
window.scrollTo(0, start + distance);
if (typeof opt.callback === 'function')
opt.callback();
}
// Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
function easeInOutQuad(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b
}
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
Raw
style.css
body {
margin: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background:white;
color:#222;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size:1em;
font-weight:normal;
margin: 0;
padding: 0;
}
p{
line-height:1.25em;
}
a{
text-decoration:none;
color:#222;
}
hr{
margin-bottom:20px;
padding:0;
border:none;
border-top:1px solid #ccc;
height:1px;
}
.txt-title{
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
text-transform:uppercase;
font-weight:bold;
}
.txt-sm{
font-size:1em;
}
.txt-md{
font-size:1.25em;
}
.txt-lg{
font-size:1.75em;
}
.container {
width: 90%;
max-width: 960px;
margin: 0px auto;
outline:none;
}
.cont-portfolio{
column-width: 290px;
column-gap: 15px;
margin-top:15px;
min-height:100vh;
text-align:center;
}
#header{
transition:all .3s ease;
}
.cont-header{
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
padding-top:5px;
padding-bottom:5px;
}
.container-hide {
height: 0 !important;
min-height:0 !important;
overflow: hidden;
margin:0;
padding:0;
}
.header-left{
display:inline-block;
vertical-align:middle;
margin-bottom:15px;
}
ul.header-right{
list-style:none;
padding:0;
margin:0;
}
ul.header-right li{
margin:0;
border:2px solid #222;
float:left;
margin-left:5px;
font-size:4vw;
}
ul.header-right:first-child{
margin-left:0px;
}
ul.header-right li a{
float:left;
padding:10px;
transition: color .3s ease;
position: relative;
overflow: hidden;
}
ul.header-right li a:before{
content: "";
position: absolute;
z-index: -1;
background: #222;
height: 0px;
width: 0px;
border-radius: 50%;
top:-120px;
left:-120px;
}
ul.header-right li a:hover{
color:white;
transition: color .2s ease-out .2s;
}
ul.header-right li a:hover:before {
height:350px;
width:350px;
transition: all .5s ease-out;
}
@media only screen and (min-width: 600px) {
#header{
border-bottom:2px solid rgba(255,255,255,0);
}
.cont-header{
flex-direction:row;
}
.header-left{
margin-bottom:0px;
}
ul.header-right li{
font-size:1em;
}
}
/*PORTFOLIO ITEMS*/
.content{
opacity:0;
}
/*everything below here is deferred*/
.content{
margin-bottom:15px;
display: inline-block;
column-break-inside: avoid;
opacity:1;
}
.content-wrap {
cursor: pointer;
position: relative;
height: 100%;
width: 100%;
max-width:400px;
transition: all 0.5s ease;
font-size:0;
}
.backface {
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: #222;
visibility: hidden;
box-sizing: border-box;
overflow: hidden;
background:white;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size:1rem;
padding:10px;
border:4px solid #222;
}
.backface h1 {
margin-bottom:1em;
display:inline-block;
position:relative;
}
.backface h1:after{
content:"•••";
position:absolute;
bottom:-1em;
left:50%;
transform:translateX(-50%);
}
.content-wrap:hover .frontface {
visibility: hidden;
}
.content-wrap:hover .backface {
visibility: visible;
transform: rotateY(0deg);
transition: all .3s ease-out;
}
.content-wrap img {
width: 100%;
height: auto;
}
/*PORTFOLIO LIGHTBOX*/
.lightbox {
width: 100%;
position: absolute;
left: 0;
top:-100vh;
height:0px;
min-height:0px;
background: #222;
opacity: 0;
z-index: -1;
color: white;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
overflow: hidden;
transition: top .3s ease-out;
}
.lightbox.expand {
z-index: 350;
height: auto;
min-height: 100vh;
opacity: 1;
top:0px;
}
.lightbox-content {
max-width: 1000px;
margin: 0 auto;
display:block;
padding-left:50px;
padding-right:50px;
text-align:left;
}
.lightbox-text {
margin-right:0px;
box-sizing:border-box;
margin-bottom:50px;
}
.lightbox-image a{
margin-bottom:25px;
display:block;
color:white;
}
.lightbox-image a[title="See full size"]{
cursor:zoom-in;
}
.lightbox-image a img {
width: 100%;
height: auto;
vertical-align:top;
box-shadow:0 0 3px black;
}
.lightbox .close {
background: none;
outline: none;
cursor: pointer;
color:white;
transition: all .2s ease;
border:1px solid #222;
position: relative;
margin-top: 0;
margin-left: 0;
width: 2.5em;
height: 2.5em;
padding:0;
}
.lightbox .close:before{
content: '';
position: absolute;
top: 1.1em;
left:0px;
width: 100%;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.lightbox .close:after{
content: '';
position: absolute;
top: 1.1em;
left:0px;
width: 100%;
height: 1px;
background-color: currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.lightbox .close:hover{
border:1px solid white;
transform:scale(1.1);
}
/*big phone*/
@media only screen and (min-width: 600px) {
}
/*tablet*/
@media only screen and (min-width: 800px) {
}
/*desktop*/
@media only screen and (min-width: 1000px) {
.lightbox-content{
display:flex;
flex-wrap:wrap;
}
.lightbox-text {
margin-right:50px;
flex: 0 0 23em;
}
.lightbox-image {
flex:1;
}
}
/*LIGHTBOX LINKS*/
.lightbox-link{
background:none;
display:inline-block;
padding:7px;
box-sizing:border-box;
color:white;
border:1px solid white;
transition: all .3s ease-out;
text-decoration:none;
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
}
.lightbox-link[href=no] {
display:none;
}
.lightbox-link:hover{
color:#222;
background:white;
}
.lightbox-link span{
margin-left:1.6em;
}
/*new stuff*/
i{
color:white;
}
i.icon-link{
position: absolute;
margin-left: 8px;
margin-top: 10px;
width: 7px;
height: 1px;
background-color: currentColor;
transform: rotate(-45deg);
transition: all .3s ease-out;
}
i.icon-link:before {
content: '';
position: absolute;
top: -3px;
left: -7px;
width: 8px;
height: 5px;
border-radius: 2px;
border: solid 1px currentColor;
}
i.icon-link:after {
content: '';
position: absolute;
top: -3px;
right: -7px;
width: 8px;
height: 5px;
border-radius: 2px;
border: solid 1px currentColor;
}
i.icon-dl{
position: absolute;
margin-left: 3px;
margin-top: 12px;
width: 13px;
height: 4px;
border-radius: 1px;
border: solid 1px currentColor;
border-top: none;
transition: all 0s ease-out;
}
i.icon-dl:before {
content: '';
position: absolute;
left: 6px;
top: -9px;
width: 1px;
height: 10px;
background-color: currentColor;
transition: all .3s ease-out;
}
i.icon-dl:after {
content: '';
position: absolute;
left: 4px;
top: -4px;
width: 4px;
height: 4px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: rotate(135deg) translateY(0px);
transition: all .3s ease-out;
}
i.icon-pic{
position: absolute;
margin-left: 2px;
margin-top: 2px;
width: 15px;
height: 15px;
border-radius: 2px;
border: solid 1px currentColor;
transition: all .3s ease-out;
}
i.icon-pic:before {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 2px;
height: 2px;
border-radius: 50%;
border: solid 1px currentColor;
}
i.icon-pic:after {
content: '';
position: absolute;
left: 2px;
top: 9px;
width: 12px;
height: 8px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: rotate(-45deg);
}
i.icon-play{
position: absolute;
margin-left: 2px;
margin-top: 9px;
width: 13px;
height: 8px;
border-radius: 2px;
border: solid 1px currentColor;
}
i.icon-play:before{
content: '';
position: absolute;
left: 4px;
top: -10px;
width: 3px;
height: 3px;
border-radius: 50%;
border: solid 1px currentColor;
transition: all .2s ease;
}
i.icon-play:after{
content: '';
position: absolute;
left: 6px;
top: -6px;
width: 3px;
height: 9px;
border-left: solid 1px currentColor;
transform-origin: 0% 100%;
transition: all .2s ease;
}
/*animate on hover*/
.lightbox-link:hover i{
color:#222;
}
.lightbox-link:hover i.icon-link{
transform:rotate(315deg);
}
.lightbox-link:hover i.icon-dl:before{
transform:translateY(4px);
}
.lightbox-link:hover i.icon-dl:after{
transform:rotate(135deg) translate(2px,-2px);
}
.lightbox-link:hover i.icon-pic{
transform:scale(1.2);
}
.lightbox-link:hover i.icon-play:before{
transform:translateX(3px);
}
.lightbox-link:hover i.icon-play:after{
transform:rotate(15deg);
}
/*ABOUT AND CONTACT*/
#about, #contact{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
}
.aboutme{
margin-bottom:50px;
}
.skillset-title{
margin-bottom:15px;
}
.skill-item{
margin-bottom:30px;
padding-right:20px;
box-sizing:border-box;
display:flex;
}
@keyframes skillpic {
0% { transform:scale(.5); opacity:0; }
40% { transform:scale(1.1); opacity:1; }
100% { transform:scale(1); opacity:1;}
}
.skill-pic{
flex: 0 0 150px;
height:150px;
margin-right:10px;
opacity:0;
}
.skill-txt{
flex:1;
}
.in-view{
animation: skillpic 1s ease forwards;
}
.skill-row:nth-of-type(1) > .skill-item:nth-of-type(1) > div{
animation-delay: 0s;
}
.skill-row:nth-of-type(1) > .skill-item:nth-of-type(2) > div{
animation-delay: .25s;
}
.skill-row:nth-of-type(2) > .skill-item:nth-of-type(1) > div{
animation-delay: .5s;
}
.skill-row:nth-of-type(2) > .skill-item:nth-of-type(2) > div{
animation-delay: .75s;
}
.skill-txt h2{
padding-bottom:5px;
margin-bottom:5px;
}
.skill-txt p{
margin:0;
padding:0;
}
/*contact*/
.cont-item-wrapper{
margin:0 auto;
margin-top:30px;
margin-bottom:30px;
display: flex;
flex-direction: row;
justify-content:space-around;
flex-wrap:ltr;
flex-flow: row wrap;
max-width: 600px;
}
.cont-item{
position:relative;
width:170px;
box-sizing:border-box;
margin-bottom:55px;
z-index:10;
text-align:center;
}
.cont-item a{
display:block;
width:100%;
transition:all .6s ease;
}
.cont-item a img{
position:relative;
background:white;
z-index:20;
}
.cont-text{
position:absolute;
top:0px;
padding:0;
margin:0;
transition:all .3s ease;
width:100%;
z-index:1;
opacity:0;
}
.cont-item a:hover .cont-text{
top: 100%;
opacity:1;
}
@media only screen and (min-width: 800px) {
.skill-wrapper{
display:flex;
flex-wrap:wrap;
}
.skill-item{
flex: 0 0 50%;
}
}
/*FOOTER*/
.footer{
text-align:center;
width:100%;
height:45px;
margin-top:-45px;
z-index:1;
overflow:hidden;
background-color:#222;
}
.date-wrapper{
display:table;
vertical-align:bottom;
background:white;
height:100%;
padding-left:10px;
padding-right:10px;
margin:0 auto;
}
.date{
display:table-cell;
vertical-align:middle;
height:100%;
font-size:.8em;
white-space: nowrap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment