chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Organize CSS, SASS, images

Browse Source 
Also begin restyling project cards
This commit is contained in:
Chuck Dries 2017-03-20 01:48:53 -07:00
parent 6e2c0428bb
commit 0bde78da0c
16 changed files with 74 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.vscode/tasks.json vendored
View File

@ -2,8 +2,11 @@
// See https://go.microsoft.com/fwlink/?LinkId=733558 // See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format // for the documentation about the tasks.json format
"version": "0.1.0", "version": "0.1.0",
"command": "sass", "command": "gulp",
"isShellCommand": true, "tasks": [{
"args": ["style.scss", "style.css"], "taskName": "default",
"showOutput": "always" "isBuildCommand": true,
"showOutput": "always",
"isBackground": true
}]
} }

2
covers.css
View File

@ -1,2 +0,0 @@
#sierra {
background-image: url("ChuckNew.jpg"); }

4
covers.scss
View File

@ -1,4 +0,0 @@
// covers.scss
#sierra {
background-image: url("ChuckNew.jpg");
}

2
css/covers.css Normal file
View File

@ -0,0 +1,2 @@
#sierra {
background-image: url("../images/ChuckNew.jpg"); }

24
style.css → css/style.css
View File

@ -4,8 +4,11 @@
clear: both; } clear: both; }
#sierra { #sierra {
background-image: url("ChuckNew.jpg"); } background-image: url("../images/ChuckNew.jpg"); }
/*
* sections
*/
body { body {
font-family: serif; font-family: serif;
font-size: 1em; font-size: 1em;
@ -73,30 +76,29 @@ body {
.slide div { .slide div {
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
text-align: center;
/* Project bits */ } /* Project bits */ }
.slide div .project { .slide div .project {
transition-duration: .2s; transition-duration: .2s;
width: 390px; width: 390px;
border: 1px solid #333; border: 1px solid #aaa;
border-radius: 5px; border-radius: 5px;
padding: 0px; padding: 0px;
display: inline-block; display: inline-block;
margin: 3px; } margin: 3px;
overflow: hidden; }
.slide div .project .cover { .slide div .project .cover {
height: 300px; height: 300px;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
margin: 0px; } margin: 0px; }
.slide div .project .cover h2 { .slide div .project h2 {
text-align: center; margin: .5em 0 0 1em;
background: rgba(0, 0, 0, 0.5); padding: 0; }
color: white; } .slide div .project p {
margin: 0 0 0 1.5em;
text-indent: 0; }
.slide div .project:hover { .slide div .project:hover {
box-shadow: 1px 1px 3px #333; } box-shadow: 1px 1px 3px #333; }
.slide div p,
.slide div table {
text-align: left; }
.slide table { .slide table {
line-height: 1.3; line-height: 1.3;
margin: 0; margin: 0;

19
gulpfile.js
View File

@ -1,9 +1,22 @@
var gulp = require('gulp'); var gulp = require('gulp');
var sass = require('gulp-sass'); var sass = require('gulp-sass');
var connect = require('gulp-connect');
gulp.task('default', function() { gulp.task('default', function() {
connect.server({
port: 3000,
livereload: true
});
gulp.watch("./sass/*.scss", ['style', 'reload']);
gulp.watch("*.html", ['reload']);
})
gulp.task('style', function() {
// place code for your default task here // place code for your default task here
gulp.src('*.scss') gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError)) .pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./')); .pipe(gulp.dest('./css/'));
}); });
gulp.task('reload', function() {
gulp.src('*.html')
.pipe(connect.reload());
})

0
Chuck.jpg → images/Chuck.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 MiB

After

Width:  |  Height:  |  Size: 4.1 MiB

0
ChuckNew.jpg → images/ChuckNew.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

0
cd.ai → images/cd.ai
View File

0
cd.png → images/cd.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
chuck2.png → images/chuck2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.0 MiB

After

Width:  |  Height:  |  Size: 8.0 MiB

52
index.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Chuck Dries</title> <title>Chuck Dries</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/style.css">
<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="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="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" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://chuckdri.es/icons/apple-touch-icon-72x72.png" />
@ -30,7 +30,7 @@
<div style="display:table-cell;vertical-align:middle;"> <div style="display:table-cell;vertical-align:middle;">
<div id="mast"> <div id="mast">
<h1 style="display:none;">Chuck Dries</h1> <h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries"> <img src="images/cd.png" alt="Chuck Dries">
<h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2> <h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
<div class="hideable"> <div class="hideable">
<p>Digital Developer, <span class="sub">The State Press</span></p> <p>Digital Developer, <span class="sub">The State Press</span></p>
@ -56,8 +56,8 @@
<p>I'm a Computer Science student and Hackathon winner at Arizona State University and I'm interested in the intersection of technology and art. I pride myself in taking a diverse set of interest and my pixel perfect lovingly handcrafted 💯% good <p>I'm a Computer Science student and Hackathon winner at Arizona State University and I'm interested in the intersection of technology and art. I pride myself in taking a diverse set of interest and my pixel perfect lovingly handcrafted 💯% good
stuff 👍👌 HTML. These days, you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p> stuff 👍👌 HTML. These days, you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p>
<p>This website is still an active development project, pls don't judge too harshly.</p> <p>This website is still an active development project, pls don't judge too harshly.</p>
<h1 id="skills">Skills <a id="skilltablebutton" style="text-decoration: underline; font-style: italic; font-weight: normal; font-size: 14px;" onclick="toggleSkillTable()">hide</a></h1> <div id="skilltable" style="display:none; ">
<div id="skilltable"> <h1 id="skills">Skills</h1>
<table> <table>
<tr> <tr>
<td class="ld">The <span style="font-style:italic">Internet</span></td> <td class="ld">The <span style="font-style:italic">Internet</span></td>
@ -114,51 +114,30 @@
</tr> </tr>
</table> </table>
</div> </div>
<div><a id="skilltablebutton" style="text-decoration: underline; font-size: 1.1em; font-style: italic; font-weight: normal;" onclick="toggleSkillTable()">More about me ></a>
</div>
</div> </div>
<div class="slide"> <div class="slide">
<h1>Projects &amp; Experience</h1> <h1>Projects &amp; Experience</h1>
<div> <div>
<div class="project"> <div class="project">
<div class="cover" id="sierra"> <div class="cover" id="sierra">
<!-- centering container --> </div>
<div style="display:table;width:100%;height:100%;margin:0px;"> <h2>Project Name</h2>
<div style="display:table-cell;vertical-align:middle;margin:0px;"> <p>Project description</p>
<h2>Project Sierra</h2> </div>
</div> <div class="project">
</div> <div class="cover" id="sierra">
</div> </div>
<p>Project description</p> <p>Project description</p>
</div> </div>
<div class="project"> <div class="project">
<div class="cover" id="sierra"> <div class="cover" id="sierra">
<!-- centering container -->
<div style="display:table;width:100%;height:100%;margin:0px;">
<div style="display:table-cell;vertical-align:middle;margin:0px;">
<h2>Project Sierra</h2>
</div>
</div>
</div> </div>
<p>Project description</p> <p>Project description</p>
</div> </div>
<div class="project"> <div class="project">
<div class="cover" id="sierra"> <div class="cover" id="sierra">
<!-- centering container -->
<div style="display:table;width:100%;height:100%;margin:0px;">
<div style="display:table-cell;vertical-align:middle;margin:0px;">
<h2>Project Sierra</h2>
</div>
</div>
</div>
<p>Project description</p>
</div>
<div class="project">
<div class="cover" id="sierra">
<!-- centering container -->
<div style="display:table;width:100%;height:100%;margin:0px;">
<div style="display:table-cell;vertical-align:middle;margin:0px;">
<h2>Project Sierra</h2>
</div>
</div>
</div> </div>
<p>Project description</p> <p>Project description</p>
</div> </div>
@ -266,7 +245,7 @@
<script> <script>
var last_known_scroll = getScrollY(); var last_known_scroll = getScrollY();
var queueing = false; var queueing = false;
var t = true; var t = false;
var st = document.getElementById("skilltable"); var st = document.getElementById("skilltable");
var stb = document.getElementById("skilltablebutton"); var stb = document.getElementById("skilltablebutton");
document.addEventListener("scroll", function() { document.addEventListener("scroll", function() {
@ -284,6 +263,7 @@
sc(last_known_scroll); sc(last_known_scroll);
//execute scroll style modifications
function sc(ypos) { function sc(ypos) {
var wheight = window.innerHeight; var wheight = window.innerHeight;
@ -329,11 +309,11 @@
function toggleSkillTable() { function toggleSkillTable() {
if (t) { if (t) {
st.style.display = "none"; st.style.display = "none";
stb.innerText = "show"; stb.innerText = "More about me";
t = false; t = false;
} else { } else {
st.style.display = "block"; st.style.display = "block";
stb.innerText = "hide"; stb.innerText = "Less about me";
t = true; t = true;
} }
} }

1
package.json
View File

@ -10,6 +10,7 @@
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-sass": "^3.1.0", "gulp-sass": "^3.1.0",
"lite-server": "^2.2.2" "lite-server": "^2.2.2"
} }

4
sass/covers.scss Normal file
View File

@ -0,0 +1,4 @@
// covers.scss
#sierra {
background-image: url("../images/ChuckNew.jpg");
}

29
style.scss → sass/style.scss
View File

@ -10,9 +10,11 @@ $greybg: rgba(0, 0, 0, .5);
} }
@import 'covers'; @import 'covers';
//
//sections /*
// * sections
*/
body { body {
@extend .reset; @extend .reset;
font-family: serif; font-family: serif;
@ -108,35 +110,34 @@ body {
div { div {
max-width: $width; max-width: $width;
margin: auto; margin: auto;
text-align: center;
/* Project bits */ /* Project bits */
.project { .project {
transition-duration: .2s; transition-duration: .2s;
width: $width/2 - 10; width: $width/2 - 10;
border: 1px solid #333; border: 1px solid #aaa;
border-radius: 5px; border-radius: 5px;
padding: 0px; padding: 0px;
display: inline-block; display: inline-block;
margin: 3px; margin: 3px;
overflow: hidden;
.cover { .cover {
height: 300px; height: 300px;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
margin: 0px; margin: 0px;
h2 { }
text-align: center; h2 {
background: $greybg; margin: .5em 0 0 1em;
color: white; padding: 0;
} }
p {
margin: 0 0 0 1.5em;
text-indent: 0;
} }
} }
.project:hover { .project:hover {
box-shadow: 1px 1px 3px #333; box-shadow: 1px 1px 3px #333;
} }
p,
table {
text-align: left;
}
} }
table { table {
line-height: 1.3; line-height: 1.3;

7
style.css.map
View File

@ -1,7 +0,0 @@
{
"version": 3,
"mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;ACPf,OAAQ;EACJ,gBAAgB,EAAE,mBAAmB;;ADazC,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA7BT,KAAK;;AAiCb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAzCN,OAAO;EA2CV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA9CN,IAAI;EAgDP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB;;GAEG;AAGH,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,oBAAoB;EACpB,UAAI;IACA,SAAS,EA3GT,KAAK;IA4GL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,kBAAkB;IAClB,mBAAS;MACL,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,MAAM,EAAE,cAAc;MACtB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,0BAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,6BAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EA3HrB,kBAAiB;UA4HN,KAAK,EAAE,KAAK;IAIxB,yBAAe;MACX,UAAU,EAAE,gBAAgB;IAEhC;oBACM;MACF,UAAU,EAAE,IAAI;EAGxB,YAAM;IACF,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,GAAG;IACZ,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,QAAQ;EAE5B,SAAG;IACC,MAAM,EAAE,GAAG;EAEf,QAAE;IACE,WAAW,EAAE,GAAG;IAChB,SAAS,EAxJT,KAAK;IAyJL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EA9JT,KAAK;IA+JL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
"sources": ["style.scss","covers.scss"],
"names": [],
"file": "style.css"
}