1
Fork 0

Add projects to index

This commit is contained in:
Jake Howard 2016-05-29 23:23:55 +01:00
parent eac8189aed
commit 0563b4dec3
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 45 additions and 86 deletions

View file

@ -75,90 +75,21 @@
<section class="no-padding" id="projects">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category">
Category
</div>
<div class="project-name">
Project Name
{% for project in INDEX_PROJECTS %}
<div class="col-lg-4 col-sm-6">
<a href="{{ project.url }}" class="portfolio-box image" data-image="{{ project.image }}">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-name">
<h2>
{{ project.name }}
</h2>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div cass="project-category">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
</a>
</div>
{% endfor %}
</div>
<div class="row">
<div class="col-xs-12 text-center">

View file

@ -32,8 +32,9 @@ LINKS = (('Pelican', 'http://getpelican.com/'),
('You can modify those links in your config file', '#'),)
# Social widget
import social
SOCIAL = social.generate()
import links
SOCIAL = links.social()
INDEX_PROJECTS = links.index_projects()
# Disable some pages
TAG_URL = False

View file

@ -1,10 +1,12 @@
from collections import namedtuple
from random import shuffle
SocialLink = namedtuple('SocialLink', ['name', 'url', 'icon'])
SocialLink = namedtuple("SocialLink", ["name", "url", "icon"])
ProjectLink = namedtuple("ProjectLink", ["name", "url", "image"])
def generate():
def social():
return {
"github": SocialLink("GitHub", "https://github.com/RealOrangeOne", "fa-github"),
"twitter": SocialLink("Twitter", "https://twitter.com/RealOrangeOne", "fa-twitter"),
@ -12,3 +14,12 @@ def generate():
"instagram": SocialLink("Instagram", "https://instagram.com/RealOrangeOne", "fa-instagram"),
"youtube": SocialLink("YouTube", "https://youtube.com/user/TheOrangeOneOfficial", "fa-youtube")
}
def index_projects():
projects = [
ProjectLink("Student Robotics", "/robotics/", "https://c2.staticflickr.com/8/7711/17122633430_e1b599fe47.jpg"),
ProjectLink("Dotfiles", "/projects/dotfiles/", "http://jleajones.com/assets/images/dotfiles.png")
]
shuffle(projects)
return projects

View file

@ -1 +1,7 @@
import './creative';
$('.image').each(function () {
const ele = $(this);
console.log('ITTERATING', ele.data('image'));
ele.css('background-image', 'url(' + ele.data('image') + ')');
});

View file

@ -2,4 +2,8 @@
background-color: $brand-grey-dark;
max-width: initial;
min-height: 300px;
.portfolio-box-caption {
background-color: transparentize($brand-orange, 0.3);
}
}

View file

@ -39,3 +39,9 @@ p a {
.btn i {
margin: 0 3px;
}
.image {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}