MasonryJS for projects and decent style
This commit is contained in:
parent
1746a35b2a
commit
06497d7c8e
@ -1,2 +1,5 @@
|
||||
#sierra {
|
||||
background-image: url("../images/ChuckNew.jpg"); }
|
||||
|
||||
#virtualKeyality {
|
||||
background-image: url("../images/keyality.jpg"); }
|
||||
|
||||
0
css/responsive.css
Normal file
0
css/responsive.css
Normal file
@ -1,11 +1,17 @@
|
||||
.reset, body, .slide {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
clear: both; }
|
||||
.reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-indent: 0; }
|
||||
|
||||
/*
|
||||
* Covers for projects section
|
||||
*/
|
||||
#sierra {
|
||||
background-image: url("../images/ChuckNew.jpg"); }
|
||||
|
||||
#virtualKeyality {
|
||||
background-image: url("../images/keyality.jpg"); }
|
||||
|
||||
/*
|
||||
* sections
|
||||
*/
|
||||
@ -19,7 +25,8 @@ body {
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: black; }
|
||||
background: black;
|
||||
z-index: 999; }
|
||||
#top div {
|
||||
margin: auto;
|
||||
max-width: 800px; }
|
||||
@ -84,9 +91,6 @@ body {
|
||||
width: 390px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 5px;
|
||||
padding: 0 0 1em 0;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
overflow: hidden; }
|
||||
.slide div .project .cover {
|
||||
height: 15em;
|
||||
@ -95,25 +99,61 @@ body {
|
||||
margin: 0px;
|
||||
padding: 1em; }
|
||||
.slide div .project .details {
|
||||
padding: .5em 1em 0 1em; }
|
||||
padding: 1em 1em 0 1em; }
|
||||
.slide div .project .details h2 {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
line-height: 1;
|
||||
margin: 0 0 .5em 0; }
|
||||
.slide div .project .details p {
|
||||
margin: 0 0 0 0;
|
||||
text-indent: 0; }
|
||||
margin: 0 0 .5em 0; }
|
||||
.slide div .project .details .tag {
|
||||
float: left;
|
||||
padding: 0 .3em 0 .3em;
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
margin: .2em;
|
||||
border-radius: .3em; }
|
||||
.slide div .project .details .tag.upper {
|
||||
margin-top: .5em;
|
||||
float: right; }
|
||||
.slide div .project .details .tag.award {
|
||||
background: #FFFCB7; }
|
||||
border-radius: 5px; }
|
||||
.slide div .project .details .cat {
|
||||
background: #B7EEFF;
|
||||
border: 1px solid #8AC9DD; }
|
||||
.slide div .project .details .award {
|
||||
float: right;
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0 0 .5em .5em; }
|
||||
.slide div .project .details .award div {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 0; }
|
||||
.slide div .project .details .award div h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.6em;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
font-style: italic; }
|
||||
.slide div .project .details .award div p {
|
||||
font-size: .8em; }
|
||||
.slide div .project .details .award::before {
|
||||
vertical-align: middle;
|
||||
background-image: url(../images/laurelleft.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 3em; }
|
||||
.slide div .project .details .award::after {
|
||||
vertical-align: middle;
|
||||
background-image: url(../images/laurelright.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 3em; }
|
||||
.slide div .project:hover {
|
||||
box-shadow: 1px 1px 3px #333; }
|
||||
.slide table {
|
||||
@ -135,6 +175,24 @@ body {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
margin-top: 1.7em; }
|
||||
@media (max-width: 800px) {
|
||||
.slide div {
|
||||
margin: auto;
|
||||
padding: 0; }
|
||||
.slide div .project {
|
||||
width: 95vw;
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 0 .5em 1vw; }
|
||||
.slide p,
|
||||
.slide h1,
|
||||
.slide h2,
|
||||
.slide a {
|
||||
margin: .5em; } }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
#mast {
|
||||
padding-left: 1em; } }
|
||||
|
||||
h2 {
|
||||
font-style: italic; }
|
||||
|
||||
BIN
images/keyality.jpg
Normal file
BIN
images/keyality.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
images/laurelleft.png
Normal file
BIN
images/laurelleft.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
images/laurelright.png
Normal file
BIN
images/laurelright.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
BIN
images/laurelwreath.psd
Normal file
BIN
images/laurelwreath.psd
Normal file
Binary file not shown.
54
index.html
54
index.html
@ -5,6 +5,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Chuck Dries</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://chuckdri.es/icons/apple-touch-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://chuckdri.es/icons/apple-touch-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://chuckdri.es/icons/apple-touch-icon-72x72.png" />
|
||||
@ -119,18 +120,53 @@
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1>Projects & Experience</h1>
|
||||
<div>
|
||||
<div class="grid" data-masonry='{ "itemSelector": ".project", "columnWidth": 400 }'>
|
||||
<div class="project">
|
||||
<div class="cover" id="sierra">
|
||||
<div class="cover" id="virtualKeyality">
|
||||
</div>
|
||||
<div class="details">
|
||||
<span class="award tag upper">Hackathon winner</span>
|
||||
<h2>Project Name</h2>
|
||||
<p class="description">Project description</p>
|
||||
<span class="tag">Tech</span>
|
||||
<span class="tag">Design</span>
|
||||
<span class="tag">Javascript</span>
|
||||
<span class="tag">NodeJs</span>
|
||||
<div class="award">
|
||||
<div>
|
||||
<h3>1st Place</h3>
|
||||
<p>Desert Hacks 2017</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Virtual Keyality</h2>
|
||||
<p>A VR typing game.</p>
|
||||
<p>The idea started as something of a joke, but after prototyping we realized that we stumbled upon a killer feature: when you're wearing the headset, you can't see your keyboard. </p>
|
||||
<p><a href="https://github.com/James-Quigley/deserthacks">View on GitHub</a></p>
|
||||
<span class="tag cat">Tech</span>
|
||||
<span class="tag cat">Design</span>
|
||||
<span class="tag">Unity</span>
|
||||
<span class="tag">C#</span>
|
||||
<span class="tag">Virtual Reality</span>
|
||||
<span class="tag">SteamVR</span>
|
||||
<span class="tag">Hackathon projects</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project">
|
||||
<div class="cover" id="virtualKeyality">
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="award">
|
||||
<div>
|
||||
<h3>3rd Place</h3>
|
||||
<p>Opportunity Hack 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Volunteer Management Portal</h2>
|
||||
<p>A MEAN web app for nonprofits.</p>
|
||||
<p>Opportunity Hack is a charity hackathon where hackers are paired with nonprofits to solve the real world problems they face. The Lost Our Home pet rescue needed a better way to track volunteers and encourage volunteers to keep coming
|
||||
back. Our solution revolved around easy to access scheduling and volunteer-hour leaderboards to encourage first time volunteers to return.</p>
|
||||
<p><a href="https://github.com/Opportunity-Hack-2016-AZ/Team15">View on GitHub</a></p>
|
||||
<span class="tag cat">Tech</span>
|
||||
<span class="tag cat">Design</span>
|
||||
<span class="tag">NodeJS</span>
|
||||
<span class="tag">MongoDB</span>
|
||||
<span class="tag">ExpressJS</span>
|
||||
<span class="tag">Bootstrap</span>
|
||||
<span class="tag">Web</span>
|
||||
<span class="tag">Hackathon projects</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
// covers.scss
|
||||
// EDIT THIS
|
||||
#sierra {
|
||||
background-image: url("../images/ChuckNew.jpg");
|
||||
}
|
||||
|
||||
#virtualKeyality {
|
||||
background-image: url("../images/keyality.jpg");
|
||||
}
|
||||
5
sass/responsive.scss
Normal file
5
sass/responsive.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@mixin respond-to($breakpoint) {
|
||||
@media (max-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
107
sass/style.scss
107
sass/style.scss
@ -1,14 +1,20 @@
|
||||
//setup
|
||||
@import 'responsive';
|
||||
$width: 800px;
|
||||
$grey: #ccc;
|
||||
$pink: #ed1a76;
|
||||
$greybg: rgba(0, 0, 0, .5);
|
||||
.reset {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
clear: both;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Covers for projects section
|
||||
*/
|
||||
|
||||
@import 'covers';
|
||||
|
||||
/*
|
||||
@ -28,6 +34,7 @@ body {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: black;
|
||||
z-index: 999;
|
||||
div {
|
||||
margin: auto;
|
||||
max-width: $width;
|
||||
@ -104,7 +111,7 @@ body {
|
||||
* standalone elements
|
||||
*/
|
||||
|
||||
// the standard section element */
|
||||
// the standard section element
|
||||
.slide {
|
||||
@extend .reset;
|
||||
padding: 0px;
|
||||
@ -119,9 +126,6 @@ body {
|
||||
width: $width/2 - 10;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 5px;
|
||||
padding: 0 0 1em 0;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
overflow: hidden;
|
||||
.cover {
|
||||
height: 15em;
|
||||
@ -131,14 +135,15 @@ body {
|
||||
padding: 1em;
|
||||
}
|
||||
.details {
|
||||
padding: .5em 1em 0 1em;
|
||||
padding: 1em 1em 0 1em;
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@extend .reset;
|
||||
line-height: 1;
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 0 0;
|
||||
text-indent: 0;
|
||||
@extend .reset;
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
.tag {
|
||||
float: left;
|
||||
@ -146,14 +151,57 @@ body {
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
margin: .2em;
|
||||
border-radius: .3em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tag.upper {
|
||||
margin-top: .5em;
|
||||
.cat {
|
||||
background: #B7EEFF;
|
||||
border: 1px solid #8AC9DD;
|
||||
}
|
||||
.award {
|
||||
float: right;
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0 0 .5em .5em;
|
||||
div {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.6em;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
.tag.award {
|
||||
background: #FFFCB7;
|
||||
p {
|
||||
@extend .reset;
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.award::before {
|
||||
vertical-align: middle;
|
||||
background-image: url(../images/laurelleft.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 3em;
|
||||
}
|
||||
.award::after {
|
||||
vertical-align: middle;
|
||||
background-image: url(../images/laurelright.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -184,6 +232,31 @@ body {
|
||||
margin: auto;
|
||||
margin-top: 1.7em;
|
||||
}
|
||||
@include respond-to($width) {
|
||||
div {
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
.project {
|
||||
width: 95vw;
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 0 .5em 1vw;
|
||||
;
|
||||
}
|
||||
}
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
a {
|
||||
margin: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to($width) {
|
||||
#mast {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user