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

added pic of me

Browse Source
This commit is contained in:
Chuck Dries 2017-11-29 20:56:35 -07:00
parent 2c3adcd833
commit 97f823b9ab
3 changed files with 330 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/style.css
View File

@ -119,7 +119,7 @@
margin: 0; margin: 0;
text-indent: 0; } text-indent: 0; }
.widthCenter, .slide > div, .slide p, .widthCenter, .slide, .slide p,
.slide h1, .slide h1,
.slide h2, .slide h2,
.slide h3, .slide h3,
@ -144,7 +144,7 @@
* sections * sections
*/ */
body { body {
font-family: 'Playfair Display', serif; font-family: "Playfair Display", serif;
line-height: 2; } line-height: 2; }
#top { #top {
@ -177,12 +177,12 @@ body {
font-weight: normal; font-weight: normal;
color: #ff429a; color: #ff429a;
transition-property: size; transition-property: size;
transition-duration: .2s; transition-duration: 0.2s;
margin: -18px 0 0 0; } margin: -18px 0 0 0; }
#mast h2 { #mast h2 {
transition-property: size; transition-property: size;
transition-duration: .2s; transition-duration: 0.2s;
color: #91EFFF; color: #91efff;
margin: 0; } margin: 0; }
#spaceTakerUpper { #spaceTakerUpper {
@ -225,7 +225,6 @@ body {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
margin-top: 50px; margin-top: 50px;
/* width wrapping */
/* Project bits */ } /* Project bits */ }
.slide .project { .slide .project {
width: 390px; width: 390px;
@ -253,24 +252,24 @@ body {
padding: 1em 1em 0 1em; } padding: 1em 1em 0 1em; }
.slide .project .details h2 { .slide .project .details h2 {
line-height: 1; line-height: 1;
margin: 0 0 .5em 0; } margin: 0 0 0.5em 0; }
.slide .project .details p { .slide .project .details p {
margin: 0 0 .5em 0; } margin: 0 0 0.5em 0; }
.slide .project .details .tag { .slide .project .details .tag {
float: left; float: left;
padding: 0 .3em 0 .3em; padding: 0 0.3em 0 0.3em;
background: #f3f3f3; background: #f3f3f3;
border: 1px solid #ddd; border: 1px solid #ddd;
margin: .2em; margin: 0.2em;
border-radius: 5px; } border-radius: 5px; }
.slide .project .details .cat { .slide .project .details .cat {
background: #B7EEFF; background: #b7eeff;
border: 1px solid #8AC9DD; } border: 1px solid #8ac9dd; }
.slide .project .details .award { .slide .project .details .award {
float: right; float: right;
background: none; background: none;
border: none; border: none;
margin: 0 0 .5em .5em; } margin: 0 0 0.5em 0.5em; }
.slide .project .details .award div { .slide .project .details .award div {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
@ -284,7 +283,7 @@ body {
font-weight: normal; font-weight: normal;
font-style: italic; } font-style: italic; }
.slide .project .details .award div p { .slide .project .details .award div p {
font-size: .8em; } font-size: 0.8em; }
.slide .project .details .award::before, .slide .project .details .award::before,
.slide .project .details .award::after { .slide .project .details .award::after {
vertical-align: middle; vertical-align: middle;
@ -299,10 +298,10 @@ body {
position: relative; } position: relative; }
.slide .project .details .award::before { .slide .project .details .award::before {
background-image: url(../images/laurelleft.png); background-image: url(../images/laurelleft.png);
left: .09em; } left: 0.09em; }
.slide .project .details .award::after { .slide .project .details .award::after {
background-image: url(../images/laurelright.png); background-image: url(../images/laurelright.png);
right: .11em; } right: 0.11em; }
.slide table { .slide table {
line-height: 1.3; line-height: 1.3;
margin: 0; margin: 0;
@ -318,14 +317,14 @@ body {
font-size: 2em; font-size: 2em;
font-style: italic; } font-style: italic; }
@media (max-width: 800px) { @media (max-width: 800px) {
.slide .widthCenter, .slide > div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 { .slide .widthCenter, .slide .slide, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
margin-left: 12px; margin-left: 12px;
margin-right: 12px; } margin-right: 12px; }
.slide div .project { .slide div .project {
width: 90%; width: 90%;
float: none; float: none;
display: block; display: block;
margin: 0 0 .5em 5%; } } margin: 0 0 0.5em 5%; } }
#skilltablebutton { #skilltablebutton {
text-decoration: underline; text-decoration: underline;
@ -338,7 +337,7 @@ body {
-webkit-animation: 3s ease fadeIn; -webkit-animation: 3s ease fadeIn;
-o-animation: 3s ease fadeIn; -o-animation: 3s ease fadeIn;
animation: 3s ease fadeIn; animation: 3s ease fadeIn;
color: #91EFFF; } color: #91efff; }
@media (max-width: 800px) { @media (max-width: 800px) {
#mast { #mast {
@ -348,4 +347,20 @@ h2 {
font-style: italic; } font-style: italic; }
a { a {
transition-duration: .2s; } transition-duration: 0.2s; }
#picOfMe {
background-image: url("../images/ChuckNew.jpg");
width: 300px;
height: 300px;
float: right;
background-size: cover;
margin: 40px 10px;
border-radius: 150px;
background-position: center center; }
@media (max-width: 600px) {
#picOfMe {
height: 150px;
width: 150px;
border-radius: 75px;
margin: 30px 8px 8px 8px; } }

1
index.html
View File

@ -72,6 +72,7 @@
</div> </div>
<div class="slide" style="margin-top:0px;"> <div class="slide" style="margin-top:0px;">
<a name="about" class="jump"></a> <a name="about" class="jump"></a>
<div id="picOfMe"></div>
<h1>About Me <h1>About Me
<span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span> <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span>
</h1> </h1>

565
sass/style.scss
View File

@ -1,312 +1,329 @@
//setup //setup
@import 'responsive'; @import "responsive";
@import 'animations'; @import "animations";
$width: 800px; $width: 800px;
$grey: #ccc; $grey: #ccc;
$pink: #ff429a; $pink: #ff429a;
$blue: #91EFFF; $blue: #91efff;
$greybg: #202020; $greybg: #202020;
.reset { .reset {
padding: 0; padding: 0;
margin: 0; margin: 0;
text-indent: 0; text-indent: 0;
} }
.widthCenter { .widthCenter {
max-width: $width; max-width: $width;
margin: auto; margin: auto;
} }
/* /*
* Covers for projects section * Covers for projects section
*/ */
@import 'covers'; @import "covers";
/* /*
* sections * sections
*/ */
body { body {
@extend .reset; // font-family: 'Nota-serif', serif; @extend .reset; // font-family: 'Nota-serif', serif;
font-family: 'Playfair Display', serif; font-family: "Playfair Display", serif;
line-height: 2; // margin-bottom: 700px; line-height: 2; // margin-bottom: 700px;
} }
#top { #top {
padding-top: 10px; padding-top: 10px;
width: 100%; width: 100%;
position: fixed; // background: black; position: fixed; // background: black;
z-index: 999; z-index: 999;
div { div {
margin: auto; margin: auto;
max-width: $width; max-width: $width;
}
h2 {
font-weight: normal;
}
} }
h2 {
font-weight: normal;
}
}
#mast { #mast {
margin-top: 10px; margin-top: 10px;
// margin-top:0; // margin-top:0;
background: none; background: none;
line-height: 1.2; line-height: 1.2;
color: white;
a {
color: white; color: white;
a { font-style: inherit; // text-decoration: none;
color: white;
font-style: inherit; // text-decoration: none;
}
a:hover {
color: $pink;
}
.sub {
font-style: italic;
color: $grey;
}
h1{
font-size: 2.8em;
font-style: italic;
font-weight: normal;
color: $pink;
transition-property: size;
transition-duration: .2s;
margin: -18px 0 0 0;
}
h2 {
transition-property: size;
transition-duration: .2s;
color: #91EFFF;
margin: 0;
}
} }
a:hover {
color: $pink;
}
.sub {
font-style: italic;
color: $grey;
}
h1 {
font-size: 2.8em;
font-style: italic;
font-weight: normal;
color: $pink;
transition-property: size;
transition-duration: 0.2s;
margin: -18px 0 0 0;
}
h2 {
transition-property: size;
transition-duration: 0.2s;
color: #91efff;
margin: 0;
}
}
#spaceTakerUpper { #spaceTakerUpper {
height: 100vh; height: 100vh;
background: $greybg; background: $greybg;
} //small and large classes are applied to #top } //small and large classes are applied to #top
.small { .small {
background: $greybg; background: $greybg;
.hideable { .hideable {
display: none; display: none;
opacity: 0; opacity: 0;
}
img {
max-width: 200px;
}
h2 {
font-size: 1.2em;
margin: 5px;
}
p {
margin: 5px;
}
} }
img {
max-width: 200px;
}
h2 {
font-size: 1.2em;
margin: 5px;
}
p {
margin: 5px;
}
}
.large { .large {
img { img {
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
}
.hideable {
opacity: 1;
}
h2 {
font-size: 1.3em;
}
} //TODO: fix
.nojs {
body {
background: white;
}
#mast {
background: $greybg;
}
} }
/* .hideable {
opacity: 1;
}
h2 {
font-size: 1.3em;
}
} //TODO: fix
.nojs {
body {
background: white;
}
#mast {
background: $greybg;
}
}
/*
* standalone elements * standalone elements
*/ */
// the standard section element // the standard section element
.slide { .slide {
@extend .reset; @extend .reset;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
margin-top: 50px; // max-width: $width;
/* width wrapping */ margin-top: 50px;
&>div { // margin: auto;
@extend .widthCenter; @extend .widthCenter;
} /* Project bits */
/* Project bits */ //TODO: un-nest this stuff
//TODO: un-nest this stuff .project {
.project { width: $width/2 - 10;
width: $width/2 - 10; padding: 0 0 1em 0;
padding: 0 0 1em 0; border: 1px solid #eee;
border: 1px solid #eee; border-radius: 5px;
border-radius: 5px; overflow: hidden;
overflow: hidden; box-shadow: 1px 1px 3px #ddd;
box-shadow: 1px 1px 3px #ddd; background: white;
background: white; margin-bottom: 20px;
margin-bottom: 20px; .cover {
.cover { height: 14em;
height: 14em; background-position: center center;
background-position: center center; background-size: cover;
background-size: cover; background-repeat: no-repeat;
background-repeat: no-repeat; margin: 0px;
margin: 0px; padding: 1em;
padding: 1em; video {
video { height: 100%;
height: 100%; width: 100%;
width: 100%;
}
@include respond-to($width) {
height: 45vw;
}
} }
.details { @include respond-to($width) {
padding: 1em 1em 0 1em; height: 45vw;
h2 { }
@extend .reset; }
line-height: 1; .details {
margin: 0 0 .5em 0; padding: 1em 1em 0 1em;
} h2 {
p { @extend .reset;
@extend .reset; line-height: 1;
margin: 0 0 .5em 0; margin: 0 0 0.5em 0;
} }
.tag { p {
float: left; @extend .reset;
padding: 0 .3em 0 .3em; margin: 0 0 0.5em 0;
background: #f3f3f3; }
border: 1px solid #ddd; .tag {
margin: .2em; float: left;
border-radius: 5px; padding: 0 0.3em 0 0.3em;
} background: #f3f3f3;
.cat { border: 1px solid #ddd;
background: #B7EEFF; margin: 0.2em;
border: 1px solid #8AC9DD; border-radius: 5px;
} }
.award { .cat {
float: right; background: #b7eeff;
background: none; border: 1px solid #8ac9dd;
border: none; }
margin: 0 0 .5em .5em; .award {
div { float: right;
display: inline-block; background: none;
text-align: center; border: none;
vertical-align: middle; margin: 0 0 0.5em 0.5em;
div {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 0;
h3 {
margin: 0;
padding: 0; padding: 0;
h3 { font-size: 1.4em;
margin: 0; line-height: 1;
padding: 0; font-weight: normal;
font-size: 1.4em; font-style: italic;
line-height: 1; }
font-weight: normal; p {
font-style: italic; @extend .reset;
} font-size: 0.8em;
p {
@extend .reset;
font-size: .8em;
}
} }
} }
.award::before, }
.award::after { .award::before,
vertical-align: middle; .award::after {
background-image: url(../images/laurelleft.png); vertical-align: middle;
background-size: contain; background-image: url(../images/laurelleft.png);
background-repeat: no-repeat; background-size: contain;
background-position: center center; background-repeat: no-repeat;
display: inline-block; background-position: center center;
content: ""; display: inline-block;
width: 1.6em; content: "";
height: 3em; width: 1.6em;
position: relative height: 3em;
} position: relative;
.award::before { }
background-image: url(../images/laurelleft.png); .award::before {
left: .09em; background-image: url(../images/laurelleft.png);
} left: 0.09em;
.award::after { }
background-image: url(../images/laurelright.png); .award::after {
right: .11em; background-image: url(../images/laurelright.png);
} right: 0.11em;
} }
} }
table { }
line-height: 1.3; table {
margin: 0; line-height: 1.3;
padding: 2px; margin: 0;
border-spacing: 0; padding: 2px;
border-collapse: collapse; border-spacing: 0;
vertical-align: text-top; border-collapse: collapse;
vertical-align: text-top;
}
ul {
margin: 5px;
}
p {
text-indent: 2em;
}
h1 {
font-size: 2em;
font-style: italic; // font-weight: 700;
// margin-top: 1.7em;
}
.grid {
// columns: 2 auto;
}
@include textElements() {
@extend .widthCenter;
}
@include respond-to($width) {
.widthCenter {
margin-left: 12px;
margin-right: 12px;
} }
ul { div {
margin: 5px; // margin: auto;
} // padding: 0;
p { .project {
text-indent: 2em; width: 90%;
} float: none;
h1 { display: block;
font-size: 2em; margin: 0 0 0.5em 5%;
font-style: italic; // font-weight: 700; }
// margin-top: 1.7em;
}
.grid {
// columns: 2 auto;
} }
@include textElements() { @include textElements() {
@extend .widthCenter; // margin-right: .8em;
// margin-left: .8em;
} }
@include respond-to($width) { .grid {
.widthCenter { // columns: 1 auto;
margin-left: 12px;
margin-right: 12px;
}
div {
// margin: auto;
// padding: 0;
.project {
width: 90%;
float: none;
display: block;
margin: 0 0 .5em 5%;
;
}
}
@include textElements() {
// margin-right: .8em;
// margin-left: .8em;
}
.grid {
// columns: 1 auto;
}
} }
} }
}
#skilltablebutton { #skilltablebutton {
text-decoration: underline; text-decoration: underline;
font-size: 1.1em; font-size: 1.1em;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
} }
#scrollprompt { #scrollprompt {
// @include prefix(animation, 1s 1.1s 1 prompt) // @include prefix(animation, 1s 1.1s 1 prompt)
@include prefix(animation, 3s ease fadeIn); @include prefix(animation, 3s ease fadeIn);
color: $blue; color: $blue;
// font-style: italic; // font-style: italic;
} }
@include respond-to($width) { @include respond-to($width) {
#mast { #mast {
padding-left: 1em; padding-left: 1em;
}
} }
}
h2 { h2 {
// font-weight: normal; // font-weight: normal;
font-style: italic; font-style: italic;
} }
a { a {
transition-duration: .2s; transition-duration: 0.2s;
}
#picOfMe {
background-image: url('../images/ChuckNew.jpg');
width: 300px;
height: 300px;
float: right;
background-size: cover;
margin: 40px 10px;
border-radius: 150px;
background-position: center center;
@include respond-to(3*$width/4){
// float:left;
// margin: auto;
height: 150px;
width: 150px;
border-radius: 75px;
margin: 30px 8px 8px 8px;
} }
}