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>

67
sass/style.scss
View File

@ -1,10 +1,10 @@
//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;
@ -20,14 +20,14 @@
* 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;
} }
@ -68,13 +68,13 @@
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;
} }
} }
@ -130,11 +130,10 @@
@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() {
@ -308,5 +306,24 @@
} }
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;
}
} }