Skip to content

Instantly share code, notes, and snippets.

@rw1982

rw1982/RW-Portfolio-Page.markdown

Created August 5, 2014 00:42
Show Gist options
  • Save rw1982/241fc48a9b4f00c744ee to your computer and use it in GitHub Desktop.
Save rw1982/241fc48a9b4f00c744ee to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by rob w.
Raw
index.html
<!--<!DOCTYPE <html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script type='text/javascript' src='script.js'></script>
<title>Document</title>
</head>-->
<header>
<div class="wrap">
<a href="#hello"><div class="entypo-home logo"></div></a>
<ul>
<a href="#work"><li>portfolio</li></a>
<a href="#skills"><li>skills</li></a>
<a href="#about"><li>about</li></a>
<a href="#lab"><li>contact</li></a>
</ul>
</div>
</header>
<div id="large_image">
<div class="wrap white">
<section id="hello">
<h1>Hello</h1>
<p>My name is Rob Williams. Welcome to my site!</p>
</section>
</div>
</div>
<div class="wrap">
<section id="work">
<h2>Portfolio</h2>
<h4>Professional Design Portfolio</h4>
<p>Samples from various print and interactive projects.</p>
<div class="images">
<img src="http://placehold.it/250x250" alt="img01"/>
<img src="http://placehold.it/250x250" alt="img02"/>
<img src="http://placehold.it/250x250" alt="img03"/>
<img src="http://placehold.it/250x250" alt="img04"/>
<img src="http://placehold.it/250x250" alt="img05"/>
<img src="http://placehold.it/250x250" alt="img06"/>
</div>
</section>
</div>
<div class="wrap">
<section id="skills">
<h2>My Skills</h2>
<h4>Education</h4>
<p>Associates Degree (Graphic Design) – Harrisburg Area Community College</p></br>
Bachelor of Fine Arts (Graphic Design) – Temple University / Tyler School of Art</p></br>
<div id="pattern" class="pattern">
<div class="col-group">
<div>
<li class="entypo-lamp"></li>
<h3>Side-Projects</h3>
<p>Anything goes side-projects</p>
</div>
<div>
<li class="entypo-flag"></li>
<h3>News!</h3>
<p>Updates & Such...</p>
</div>
<div>
<li class="entypo-trophy"></li>
<h3>Notoriety</h3>
<p>Recognition & Awards</p>
</div>
</div>
</div>
<!--End Pattern HTML-->
</section>
</div>
<div class="wrap">
<section id="about">
<h2>About Me</h2>
<h4>Hi, I'm Rob.</h>
<p>I am a designer who is currently based in Philadelphia, PA. I have enjoyed making things since I was a child. In my opinion, nothing feels better than bringing an idea to life. My passion for solid concepts and fine craftsmanship drove me to pursue a carer in design. I attended Tyler School of Art (Temple University), where I received a BFA in Graphic and Interactive Design. </p>
<p>Since graduating, I have been working professionally, both in-house and freelance. Shoot me an email if you are interested in hiring me for freelance design/illustration work, or if you just want to say hi.</p>
<img class="me" src="http://i1278.photobucket.com/albums/y512/robw1982/rwmobile_zps27f8c821.png"" />
<!-- Group of Elements -->
<ul>
<li class="entypo-twitter-circled"></li>
<li class="entypo-facebook-circled"></li>
<li class="entypo-linkedin-circled"></li>
<li class="entypo-dribbble-circled"></li>
<li class="entypo-linkedin-circled"></li>
</ul>
</section>
</div>
<section id="footer">
<div id="logo_footer">
<a href="#hello"><div class="entypo-up-bold logo-->"></div></a>
</div>
<p><em>A Rob Williams Site</em></p><br>
<p>2014</p><br>
</html>
</section>
Raw
RW-Portfolio-Page.markdown
Raw
script.js
$(document).ready(function(){
$('header a').click(function(){
var href = $(this).attr('href');
var id = href.split('#').join('');
$('body, html').animate({
'scrollTop' : $('#' + id).offset().top
});
return false;
});
});
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* responsive */
@media screen and (min-width: 40em) {
.col-group {
overflow: hidden;
}
.col-group > div {
float: left;
width: 30%;
}
}
body{
font-family: 'Raleway', sans-serif;
font-weight:200;
margin: 0;
padding: 0;
}
h1{
font-weight:200;
}
h2{
font-weight:200;
width:50%;
}
h3{
font-weight:200;
}
p{
font-weight:200;
}
/*#a66Ca3*/
::selection {
background: #CFA193; /* Safari */
}
::-moz-selection {
background: #CFA193; /* Firefox */
}
header{
background-color:#2C2C2C;
height:60px;
position:fixed;
width:100%;
overflow:hidden;
}
header .logo{
font-size:40px;
color:white;
padding:5px;
padding-left:10px;
float:left;
}
@-webkit-keyframes Jump {
from {-webkit-transform: translate(0, 0px);}
50% {-webkit-transform: translate(0, 3px);}
to {-webkit-transform: translate(0, 0px);}
}
header .logo:hover {
-webkit-animation-name: Jump;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
header ul{
display:inline;
/* background-color:white;*/
float:right;
padding-top:5px;
}
header ul li{
display:inline;
/* background-color:blue;*/
color:white;
padding:5px;
}
header ul a{
text-decoration:none;
padding:10px 2px 10px 2px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
header ul a:hover{
background-color:#88b2be ;
border-radius:5px;
padding:10px 20px 10px 20px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section{
top:0px;right:0px;bottom:0px;left:0px;
height: 100%;
width: 100%;
/* background-color:lime;*/
padding-top:60px;
border-bottom:1px dotted #D5D5D5;
padding-bottom:40px;
}
section .images{
text-align:center;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.images img{
width:auto;
}
.images img:hover{
}
.wrap{
max-width:760px;
margin:auto;
padding-left:5px;
padding-right:5px;
}
#large_image{
background-image: url('http://i1278.photobucket.com/albums/y512/robw1982/rw-website-bg-image_zps1c434401.jpg');
background-position:center center ;
min-height:400px;
width:100%;
}
#hello{
padding-top:100px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
margin-left:40px;
border-bottom:0px dotted #D5D5D5;
}
#hello h1{
font-weight:400;
}
#hello p{
width:50%;
font-weight:400;
}
.white{
color:white;
}
#skills{
clear:both;
min-height:500px;
}
#skills ul{
/*background-color:green;*/
text-align:left;
margin-left:-40px;
text-weight:bold;
}
#skills li{
font-size:80px;
padding:20px;
list-style:none;
/*background-color:red;*/
color:#D3D3D3;
text-align:center;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#skills li:hover{
color:#94c2cf;
cursor:pointer;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.col-group > div {
padding: 0.5em 0.5em 0;
}
.me {
display: block;
margin: 2em auto;
margin-bottom: 2em;
width: 150px;
height: 150px;
border-radius: 50%;
}
#about ul{
/*background-color:green;*/
text-align:center;
margin-left:-40px;
}
#about ul li{
font-size:50px;
list-style:none;
/*background-color:red;*/
display:inline;
color:#cccccc;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#about ul li:hover{
color:#94c2cf;
cursor:pointer;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#footer{
background-color:#4D4D4D ;
color:white;
text-align:center;
}
@-webkit-keyframes Jumpy {
from {-webkit-transform: translate(0, 0px);}
50% {-webkit-transform: translate(0, 10px);}
to {-webkit-transform: translate(0, 0px);}
}
#footer #logo_footer{
width:38px;
height:45px;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid white;
}
#footer a{
font-size:20px;
color:white;
padding:5px;
padding-left:3px;
width:30px;
margin:auto;
float:left;
color:white;
text-decoration:none;
-webkit-animation-name: Jumpy;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment