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

Style and copy changes suggested by /r/webdev

Browse Source
This commit is contained in:
Chuck Dries 2017-08-08 14:04:44 -07:00
parent 7f5268d0f4
commit 3abaae7fc5
3 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/style.css
View File

@ -166,7 +166,7 @@ body {
color: white; } color: white; }
#mast a { #mast a {
color: white; color: white;
font-style: italic; } font-style: inherit; }
#mast a:hover { #mast a:hover {
color: #ed1a76; } color: #ed1a76; }
#mast .sub { #mast .sub {
@ -179,8 +179,12 @@ body {
transition-duration: .2s; transition-duration: .2s;
color: #91EFFF; } color: #91EFFF; }
#spaceTakerUpper {
height: 100vh;
background: #202020; }
.small { .small {
background: black; } background: #202020; }
.small .hideable { .small .hideable {
display: none; display: none;
opacity: 0; } opacity: 0; }
@ -206,7 +210,7 @@ body {
background: white; } background: white; }
.nojs #mast { .nojs #mast {
background: black; } background: #202020; }
/* /*
* standalone elements * standalone elements
@ -220,10 +224,10 @@ body {
.slide div .project { .slide div .project {
width: 390px; width: 390px;
padding: 0 0 1em 0; padding: 0 0 1em 0;
border: 1px solid #aaa; border: 1px solid #eee;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
box-shadow: 1px 1px 4px #888; box-shadow: 1px 1px 3px #ddd;
background: white; } background: white; }
.slide div .project .cover { .slide div .project .cover {
height: 15em; height: 15em;
@ -242,8 +246,8 @@ body {
.slide div .project .details .tag { .slide div .project .details .tag {
float: left; float: left;
padding: 0 .3em 0 .3em; padding: 0 .3em 0 .3em;
background: #eee; background: #f3f3f3;
border: 1px solid #ccc; border: 1px solid #ddd;
margin: .2em; margin: .2em;
border-radius: 5px; } border-radius: 5px; }
.slide div .project .details .cat { .slide div .project .details .cat {

28
index.html
View File

@ -17,13 +17,7 @@
<meta name="application-name" content="Chuck Dries" /> <meta name="application-name" content="Chuck Dries" />
<meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="http://chuckdri.es/icons/mstile-144x144.png" /> <meta name="msapplication-TileImage" content="http://chuckdri.es/icons/mstile-144x144.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#spaceTakerUpper {
height: 100vh;
background: black;
}
</style>
</head> </head>
<body> <body>
@ -66,11 +60,10 @@
<a name="about" style="padding-top: 130px"></a> <a name="about" style="padding-top: 130px"></a>
<h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span></h1> <h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span></h1>
<h3>A brief history of Chuck &amp; tech</h3> <h3>A brief history of Chuck &amp; tech</h3>
<p>I'm mostly terrible at writing copy, but I think I'm a pretty good programmer. I've always been "into computers" <p>I'm a computer science student with experience in photography, digital and print graphic design, teaching, and leading.
but I didn't really get into the technical stuff until middle school, where I had to learn about networking and I've been "into computers" my whole life, but I didn't really get into the technical stuff until middle school,
bash to run a minecraft server. Today, I do most of my "real" work in JavaScript (both on the client with VueJS where I had to learn about networking and bash to run a minecraft server. Today, I do most of my work in JavaScript,
and the server with Node + Express), but I've been experimenting with Unity and keeping up with my Minecraft but in my free time I experiment with VR and game design.
habit.
</p> </p>
<!--<h3>A brief history of Chuck &amp; tech</h3> <!--<h3>A brief history of Chuck &amp; tech</h3>
<p>When I was a child I was obsessed with trains and vacuum cleaners. In elementary school my grandma tried to teach me Photoshop. In seventh grade I started teaching myself HTML. Freshman year I started learning the basics of networking and BASH <p>When I was a child I was obsessed with trains and vacuum cleaners. In elementary school my grandma tried to teach me Photoshop. In seventh grade I started teaching myself HTML. Freshman year I started learning the basics of networking and BASH
@ -203,7 +196,8 @@
</div> </div>
</div> </div>
<p>&copy; Chuck Dries 2017</p> <p>&copy; Chuck Dries 2017</p>
<p style="font-family: sans-serif">;)</p> <br>
<!--ewwww-->
</div> </div>
<script> <script>
var last_known_scroll = getScrollY(); var last_known_scroll = getScrollY();
@ -278,6 +272,14 @@
} }
} }
function openSkillTable() {
if (!t) {
st.style.display = "block";
stb.innerText = "Less about me";
t = true;
}
}
function prompt() { function prompt() {
} }

23
sass/style.scss
View File

@ -4,7 +4,8 @@
$width: 800px; $width: 800px;
$grey: #ccc; $grey: #ccc;
$pink: #ed1a76; $pink: #ed1a76;
$greybg: rgba(0, 0, 0, .5); $blue: #91EFFF;
$greybg: #202020;
.reset { .reset {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -55,7 +56,7 @@ body {
color: white; color: white;
a { a {
color: white; color: white;
font-style: italic; font-style: inherit;
} }
a:hover { a:hover {
color: $pink; color: $pink;
@ -74,9 +75,14 @@ body {
} }
} }
#spaceTakerUpper {
height: 100vh;
background: $greybg;
}
//small and large classes are applied to #top //small and large classes are applied to #top
.small { .small {
background: black; background: $greybg;
.hideable { .hideable {
display: none; display: none;
opacity: 0; opacity: 0;
@ -106,12 +112,13 @@ body {
} }
} }
//TODO: fix
.nojs { .nojs {
body { body {
background: white; background: white;
} }
#mast { #mast {
background: black; background: $greybg;
} }
} }
@ -132,10 +139,10 @@ body {
.project { .project {
width: $width/2 - 10; width: $width/2 - 10;
padding: 0 0 1em 0; padding: 0 0 1em 0;
border: 1px solid #aaa; border: 1px solid #eee;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
box-shadow: 1px 1px 4px #888; box-shadow: 1px 1px 3px #ddd;
background: white; background: white;
.cover { .cover {
height: 15em; height: 15em;
@ -159,8 +166,8 @@ body {
.tag { .tag {
float: left; float: left;
padding: 0 .3em 0 .3em; padding: 0 .3em 0 .3em;
background: #eee; background: #f3f3f3;
border: 1px solid #ccc; border: 1px solid #ddd;
margin: .2em; margin: .2em;
border-radius: 5px; border-radius: 5px;
} }