Commit 233d203a authored by Connor Shea's avatar Connor Shea 🏄

Fairly large update to the site

Home page redone, footer removed
parent 39429395
......@@ -3,6 +3,7 @@ title: Connor Shea
description: "User Interface Designer & Developer from Colorado."
baseurl: ""
url: "https://connorshea.github.io"
twitter_username: connorjshea
permalink: /blog/:title
exclude:
- README.md
......@@ -12,4 +13,4 @@ markdown: kramdown
collections:
portfolio:
permalink: /portfolio/:title/
permalink: /portfolio/:title/
\ No newline at end of file
<footer class="site-footer">
<div class="wrapper">
<a href="{{ "/feed.xml" | prepend: site.baseurl }}">RSS</a>
</div>
</footer>
......@@ -19,4 +19,18 @@
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png"/>
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/home.js" async></script>
<!-- Twitter card -->
<!-- <meta name="twitter:card" content="{% if page.image %}summary_large_image{% else %}summary{% endif %}">
<meta name="twitter:site" content="@{{ site.twitter_username }}">
<meta name="twitter:creator" content="@{{ site.twitter_username }}">
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 200 }}{% else %}{{ site.description }}{% endif %}">
{% if page.image %}
<meta name="twitter:image:src" content="{{ page.image | prepend: site.baseurl | prepend: site.url }}">
{% endif %} -->
</head>
......@@ -11,8 +11,6 @@
{{ content }}
</div>
{% include footer.html %}
</body>
</html>
......@@ -13,8 +13,6 @@
</div>
</div>
{% include footer.html %}
</body>
</html>
......@@ -5,14 +5,10 @@
<body class="home">
{% include header.html %}
<div class="page-content">
{{ content }}
</div>
{% include footer.html %}
</body>
</html>
......@@ -4,4 +4,5 @@ image: "wavhead-logo.svg"
role: "Lead Front-end Developer"
description: "Nullam id dolor id nibh ultricies vehicula ut id elit."
link: "http://www.noided.media/WavHead/"
date: "September - October 2014"
---
......@@ -4,4 +4,5 @@ image: "imagehex-logo.svg"
role: "Lead Front-end Developer"
description: "Nullam id dolor id nibh ultricies vehicula ut id elit."
link: "http://www.imagehex.com"
date: "July 2014 - Present"
---
......@@ -4,4 +4,5 @@ image: "fictiondock-logo.png"
role: "Lead Front-end Developer"
description: "Nullam id dolor id nibh ultricies vehicula ut id elit."
link: "http://www.fictiondock.com"
date: "June 2015 - Present"
---
......@@ -4,4 +4,5 @@ image: "pcgamingwiki-logo.svg"
role: "Lead Web Developer/Designer"
description: "Nullam id dolor id nibh ultricies vehicula ut id elit."
link: "http://pcgamingwiki.com"
date: "January - August 2015"
---
......@@ -22,11 +22,13 @@
}
.site-title {
font-size: 26px;
font-size: 24px;
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
margin-top: 8px;
padding: 0;
letter-spacing: -0.5px;
font-weight: 200;
color: #333;
opacity: 0.7;
transition: 200ms opacity;
......
.home {
animation: fadeInDown 1200ms ease 1 normal forwards;
> .page-content {
display: flex;
flex-flow: column wrap;
width: 100%;
.site-header {
border-bottom: 0;
@media screen and (min-width: 1000px) {
flex-flow: row nowrap;
width: 60%;
max-width: 1000px;
margin: auto;
margin-top: 50px;
}
}
}
.home-column {
display: block;
flex: 1;
}
.site-footer {
border-top: 0;
.home-title-container {
padding: 25px 0;
display: block;
margin: auto;
text-align: center;
margin-top: 20px;
font-family: $header-font-family;
p {
text-transform: uppercase;
text-align: center;
font-size: 24px;
font-weight: 500;
}
}
......@@ -15,10 +42,17 @@
position: relative;
margin: auto;
border-radius: 50%;
width: 300px;
height: 300px;
overflow: hidden;
pointer-events: none;
max-width: 300px;
max-height: 300px;
width: 70vw;
height: 70vw;
@media screen and (min-width: 1000px) {
width: 300px;
height: 300px;
}
}
@keyframes fadeInDown {
......@@ -32,3 +66,101 @@
transform: none;
}
}
.home-tabs {
border-bottom: 1px solid rgba(0,0,0,0.25);
width: 100%;
text-align: center;
padding-top: 40px;
font-family: $header-font-family;
li {
list-style: none;
margin: 0 20px;
cursor: pointer;
display: inline-block;
padding: 0 5px;
padding-bottom: 5px;
&.current {
border-bottom: 2px solid rgba(0,0,0,0.5);
}
}
}
.home-list-container {
margin-top: 20px;
width: 100%;
margin: auto;
@media screen and (min-width: 600px) {
width: 400px;
margin-top: 40px;
}
}
.tab-content {
display: none;
&.current {
display: block;
}
ul {
list-style: none;
}
}
.home-list-item {
border-bottom: 1px solid rgba(0,0,0,0.15);
padding: 8px 10px;
color: #333;
font-size: 14px;
transition: background-color 250ms;
&:hover {
background-color: rgba(0,0,0,0.05);
cursor: pointer;
}
a {
font-size: 14px;
text-decoration: none;
color: #333;
}
.home-list-item-title {
font-size: 16px;
font-weight: 500;
a {
font-size: 16px;
}
}
.home-list-item-subtitle {
font-size: 14px;
font-weight: 400;
a {
font-weight: 500;
}
}
}
.view-more {
text-align: center;
width: 100%;
font-weight: 400;
padding: 12px;
a {
color: #333;
text-decoration: none;
display: inline-block;
&:hover {
text-decoration: underline;
}
}
}
......@@ -2,7 +2,49 @@
layout: home
---
<picture class="self-image">
<source srcset="{{ '/images/ConnorSheaPhoto.png' | prepend: site.baseurl }}" type="image/png">
<img src="{{ '/images/ConnorSheaPhoto.png' | prepend: site.baseurl }}" alt="Connor Shea">
</picture>
<div class="home-column">
<div class="home-title-container">
<p>{{ site.title }}</p>
</div>
<picture class="self-image">
<source srcset="{{ '/images/ConnorSheaPhoto.png' | prepend: site.baseurl }}" type="image/png">
<img src="{{ '/images/ConnorSheaPhoto.png' | prepend: site.baseurl }}" alt="Connor Shea">
</picture>
</div>
<div class="home-column">
<div class="home-list-container">
<ul id="home-tabs" class="home-tabs">
<li data-tab="tab-1" class="home-tab current">Portfolio
<li data-tab="tab-2" class="home-tab">Blog
</ul>
<div id="portfolio-list-container" class="tab-content tc-tab-1 current">
<ul>
{% for project in site.portfolio reversed limit:5 %}
<li class="home-list-item">
<p class="home-list-item-title">{{ project.title }}</p>
<p class="home-list-item-subtitle"><span class="portfolio-project-date">{{ project.date }}</span> · <span class="portfolio-project-role">{{ project.role }}</span></p>
</li>
{% endfor %}
<li class="view-more"><a href="{{ '/portfolio' | prepend: site.baseurl }}">View more...</a></li>
</ul>
</div>
<div id="blog-list-container" class="tab-content tc-tab-2">
<ul>
{% for post in site.posts %}
<li class="home-list-item">
<a href="{{ post.url | prepend: site.baseurl }}">
<p class="home-list-item-title">{{ post.title }}</p>
<p class="home-list-item-subtitle">{{ post.date | date: "%B %-d, %Y" }}</p>
</a>
</li>
{% endfor %}
<li class="view-more"><a href="{{ '/blog' | prepend: site.baseurl }}">View more...</a></li>
</ul>
</div>
</div>
</div>
function tabbedMenu() {
$('ul#home-tabs li').click(function() {
var tabid = $(this).attr('data-tab');
$('ul#home-tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('.tc-' + tabid).addClass('current');
});
}
var ready = function() {
tabbedMenu();
};
$(document).ready(ready);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment