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

55
css/style.css

@ -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

@ -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>

145
sass/style.scss

@ -1,37 +1,37 @@
//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;
@ -43,9 +43,9 @@
h2 { h2 {
font-weight: normal; font-weight: normal;
} }
} }
#mast { #mast {
margin-top: 10px; margin-top: 10px;
// margin-top:0; // margin-top:0;
background: none; background: none;
@ -62,28 +62,28 @@
font-style: italic; font-style: italic;
color: $grey; color: $grey;
} }
h1{ h1 {
font-size: 2.8em; font-size: 2.8em;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
color: $pink; color: $pink;
transition-property: size; transition-property: size;
transition-duration: .2s; transition-duration: 0.2s;
margin: -18px 0 0 0; margin: -18px 0 0 0;
} }
h2 { h2 {
transition-property: size; transition-property: size;
transition-duration: .2s; transition-duration: 0.2s;
color: #91EFFF; color: #91efff;
margin: 0; 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;
@ -99,9 +99,9 @@
p { p {
margin: 5px; margin: 5px;
} }
} }
.large { .large {
img { img {
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
@ -112,29 +112,28 @@
h2 { h2 {
font-size: 1.3em; font-size: 1.3em;
} }
} //TODO: fix } //TODO: fix
.nojs { .nojs {
body { body {
background: white; background: white;
} }
#mast { #mast {
background: $greybg; 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%;
// max-width: $width;
margin-top: 50px; margin-top: 50px;
/* width wrapping */ // margin: auto;
&>div {
@extend .widthCenter; @extend .widthCenter;
}
/* Project bits */ /* Project bits */
//TODO: un-nest this stuff //TODO: un-nest this stuff
.project { .project {
@ -166,29 +165,29 @@
h2 { h2 {
@extend .reset; @extend .reset;
line-height: 1; line-height: 1;
margin: 0 0 .5em 0; margin: 0 0 0.5em 0;
} }
p { p {
@extend .reset; @extend .reset;
margin: 0 0 .5em 0; margin: 0 0 0.5em 0;
} }
.tag { .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;
} }
.cat { .cat {
background: #B7EEFF; background: #b7eeff;
border: 1px solid #8AC9DD; border: 1px solid #8ac9dd;
} }
.award { .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;
div { div {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
@ -204,7 +203,7 @@
} }
p { p {
@extend .reset; @extend .reset;
font-size: .8em; font-size: 0.8em;
} }
} }
} }
@ -219,15 +218,15 @@
content: ""; content: "";
width: 1.6em; width: 1.6em;
height: 3em; height: 3em;
position: relative position: relative;
} }
.award::before { .award::before {
background-image: url(../images/laurelleft.png); background-image: url(../images/laurelleft.png);
left: .09em; left: 0.09em;
} }
.award::after { .award::after {
background-image: url(../images/laurelright.png); background-image: url(../images/laurelright.png);
right: .11em; right: 0.11em;
} }
} }
} }
@ -268,8 +267,7 @@
width: 90%; width: 90%;
float: none; float: none;
display: block; display: block;
margin: 0 0 .5em 5%; margin: 0 0 0.5em 5%;
;
} }
} }
@include textElements() { @include textElements() {
@ -280,33 +278,52 @@
// columns: 1 auto; // 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;
} }
}