...
 
Commits (1)
......@@ -25,6 +25,7 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/home.js" async></script>
<script src="/js/portfolio.js" async></script>
<!-- Twitter card -->
<meta name="twitter:card" content="{% if page.image %}summary_large_image{% else %}summary{% endif %}">
......
---
title: "Noided Media"
image: "noided-media/noided-media-logo.svg"
thumbnail: "noided-media/noided-media-thumbnail.svg"
role: "Lead Designer"
description: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."
link: "http://www.noided.media"
date: "July 2014 Present"
---
......@@ -36,10 +36,6 @@
}
}
.portfolio-project-information {
}
.portfolio-project-title {
margin: 0;
font-weight: 500;
......@@ -105,3 +101,45 @@
font-weight: 400;
color: transparentize($text-color, 0.5);
}
#portfolio-lightbox-container {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.5);
&.active {
display: block;
}
}
#portfolio-lightbox {
display: none;
position: fixed;
top: 10vh;
left: 10vw;
width: 80vw;
height: 80vh;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.5);
overflow-y: auto;
&.active {
display: block;
}
}
#portfolio-lightbox-image {
position: relative;
display: inline;
width: 100%;
height: auto;
img {
max-height: 200px;
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1280 639" style="enable-background:new 0 0 1280 639;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#EF4637;}
.st2{fill:#4286F7;}
.st3{fill:#31AA52;}
.st4{fill:#333333;}
</style>
<rect id="White_background" x="2" class="st0" width="1278" height="639"/>
<g>
<path class="st1" d="M280.7,241.4c-10.7,0-19.3,8.7-19.3,19.3v19.3h19.3c10.7,0,19.3-8.7,19.3-19.3
C300,250.1,291.4,241.4,280.7,241.4z"/>
<path class="st2" d="M238.8,241.4c-10.7,0-19.3,8.7-19.3,19.3c0,10.7,8.7,19.3,19.3,19.3h19.3v-19.3
C258.2,250.1,249.5,241.4,238.8,241.4z"/>
<path class="st3" d="M238.8,283.3c-10.7,0-19.3,8.7-19.3,19.3c0,10.7,8.7,19.3,19.3,19.3c10.7,0,19.3-8.7,19.3-19.3v-19.3H238.8z"
/>
<path class="st4" d="M314.8,359.9l-35.2-47.1v47.1h-18.3v-76.6h17.2l35.3,47.3v-47.3H332v76.6H314.8z M420.9,321.3
c0,22.3-17.7,39.3-41.5,39.3c-23.6,0-41.4-16.8-41.4-39.3c0-22.3,17.7-38.8,41.4-38.8C403.2,282.5,420.9,299.1,420.9,321.3z
M358,321.5c0,12.9,10,22.9,21.7,22.9c11.8,0,21.2-10,21.2-22.9c0-12.9-9.4-22.6-21.2-22.6C367.9,298.8,358,308.5,358,321.5z
M428,359.7v-76.6h19.5v76.6H428z M488,283.2c24.1,0,40.7,15.5,40.7,38.3c0,22.6-16.8,38.3-41.5,38.3H455v-76.6H488z M474.5,344.2
h13.9c11.9,0,20.5-9.2,20.5-22.6c0-13.6-9-22.9-21.3-22.9h-13V344.2z M779.9,359.8l-0.1-49.8l-18.4,42.1h-12.7L730.4,310v49.8H713
v-76.7h21.3l20.8,45.6l20.8-45.6h21.2v76.7H779.9z M823.9,298.6v15.2h36.5v15.3h-36.5v15.4h40.5v15.3h-59.9v-76.6h59.9v15.3H823.9z
M904.1,283.2c24.1,0,40.7,15.5,40.7,38.3c0,22.6-16.8,38.3-41.5,38.3h-32.2v-76.6H904.1z M890.6,344.3h13.9
c11.9,0,20.5-9.2,20.5-22.6c0-13.6-9-22.9-21.3-22.9h-13V344.3z M554.5,298.6v15.2H591v15.3h-36.5v15.4H595v15.3H535v-76.6H595
v15.3H554.5z M634.7,283.2c24.1,0,40.7,15.5,40.7,38.3c0,22.6-16.8,38.3-41.5,38.3h-32.2v-76.6H634.7z M621.2,344.3h13.9
c11.9,0,20.5-9.2,20.5-22.6c0-13.6-9-22.9-21.3-22.9h-13V344.3z M952.2,359.8v-76.6h19.5v76.6H952.2z M1002.8,345.7l-5.6,14.1h-20
l33-76.6h20l32.3,76.6h-20.8l-5.5-14.1H1002.8z M1019.6,302.6l-11.2,28.3h22.1L1019.6,302.6z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Artboard_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 240 800 800" enable-background="new 0 240 800 800" xml:space="preserve">
<rect y="240" fill="#333333" width="800" height="800"/>
<g>
<path fill="#EF4637" d="M403.6,356.3c-47.1,0-85.4,38.2-85.4,85.4v85.4h85.4c47.1,0,85.4-38.2,85.4-85.4S450.7,356.3,403.6,356.3z"
/>
<path fill="#4286F7" d="M216.3,356.3c-47.1,0-85.4,38.2-85.4,85.4s38.2,85.4,85.4,85.4h85.4v-85.4
C301.6,394.6,263.4,356.3,216.3,356.3z"/>
<path fill="#31AA52" d="M216.3,543.6c-47.1,0-85.4,38.2-85.4,85.4c0,47.1,38.2,85.4,85.4,85.4s85.4-38.2,85.4-85.4v-85.4H216.3z"/>
<path fill="#FFFFFF" d="M583.8,923.7L408.9,689.6v234.1h-90.7V543.5h85.3l175.4,234.6V543.5h90.2v380.2H583.8z"/>
</g>
</svg>
This diff is collapsed.
This diff is collapsed.
......@@ -147,7 +147,7 @@ image: /images/ConnorSheaPhotoTwitter.png
<div id="portfolio-list-container" class="tab-content tc-tab-1 current">
<ul>
{% for project in site.portfolio reversed limit:5 %}
{% for project in site.portfolio reversed offset:1 limit:5 %}
<li class="home-list-item portfolio-list-item">
<div class="home-list-item-image">
<picture>
......
function portfolioLightbox() {
$("#portfolio-list li").click(function() {
var portfolioItem = new Object();
portfolioItem.name = $(this).attr('data-name');
portfolioItem.description = $(this).attr('data-description');
portfolioItem.role = $(this).attr('data-role');
portfolioItem.date = $(this).attr('data-date');
portfolioItem.logo = $(this).attr('data-logo');
console.log(portfolioItem);
$("#portfolio-lightbox-container").addClass("active");
$("#portfolio-lightbox").addClass("active");
$("#portfolio-lightbox-img").attr("src", portfolioItem.logo);
});
}
var ready = function() {
portfolioLightbox();
};
$(document).ready(ready);
......@@ -6,9 +6,9 @@ permalink: /portfolio/
<div class="portfolio">
<ul>
<ul id="portfolio-list">
{% for project in site.portfolio reversed %}
<li class="portfolio-project-list-item">
<li class="portfolio-project-list-item" data-name="{{ project.title }}" data-description="{{ project.description }}" data-role="{{ project.role }}" data-date="{{ project.date }}" data-logo="/images/portfolio/{{ project.image }}">
<div class="portfolio-project-thumbnail">
<picture>
<source srcset="/images/portfolio/{{project.thumbnail}}">
......@@ -30,4 +30,14 @@ permalink: /portfolio/
{% endfor %}
</ul>
<div id="portfolio-lightbox-container">
<div id="portfolio-lightbox">
<div id="portfolio-lightbox-image">
<img id="portfolio-lightbox-img">
</div>
<div id="portfolio-lightbox-name"></div>
<div id="portfolio-lightbox-description"></div>
</div>
</div>
</div>