Skip to content

Instantly share code, notes, and snippets.

@0xHorace

0xHorace/Personal Portfolio .markdown

Last active July 23, 2016 03:41
Show Gist options
  • Save 0xHorace/31ed72e7c6f11ada08cd14c838b16961 to your computer and use it in GitHub Desktop.
Save 0xHorace/31ed72e7c6f11ada08cd14c838b16961 to your computer and use it in GitHub Desktop.
Download ZIP
Personal Portfolio
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<!--Site Navigation Menu-->
<ul>
<div class="name">
<li>Jackson Roach</li>
</div>
<li><a href="#section1">About Me</a></li>
<li><a href="#section2">Portfolio</a></li>
<li><a href="#section3">Contact</a></li>
</ul>
<!--About Me Section-->
<br>
<br>
<br>
<div class="about" id="section1">
<h1>About Me</h1>
<img src="http://i.imgur.com/hlh5uMO.jpg">
<p>My name is Jackson and I am passionate about programming. Even though I've been working in education for the last couple of years and I would like to shift gears towards computer science. While I have always been intellectually curious, my thirst
for programming knowledge is seemingly unquenchable. There is just so much I want to learn and not enough time in a day. At this point I have been introduced to the basics of languages such as HTML and CSS, jQuery, Ruby, SQL, and Git but I'm exploring
more and more every day. Thanks for visiting my portfolio and feel free to connect with me!
</p>
</div>
<!--Portfolio-->
<div class="portfolio" id="section2">
<h1>Portfolio</h1>
<div class="marcus">
<a href="http://codepen.io/JacksonElo/pen/LkdBLk"><img src="http://i.imgur.com/kFdl53q.jpg" height="375px" width="500px"></a>
</div>
</div>
<!--Contact-->
<div class="contact" id="section3">
<h2>Contact</h2>
<div class="social">
<!--LinkedIn-->
<a href="https://www.linkedin.com/in/roachjackson
"><img src="http://i.imgur.com/h26Ims4.png" title="source: imgur.com" height="50px" width="50px" /></a>
<!--Github-->
<a href="https://github.com/JacksonElo"><img src="http://i.imgur.com/Y9cjhcq.png" title="source: imgur.com" height="50px" width="50px" /></a>
<!--Twitter-->
<a href="https://twitter.com/JacksonElo"><img src="http://i.imgur.com/3jrF289.png" title="source: imgur.com" height="50px" width="50px" /></a>
</div>
</div>
</body>
Raw
Personal Portfolio .markdown
Raw
scripts
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
body {
background-color: #a9a9a9;
font-family: Verdana;
color: black;
}
div.name {
text-align: left;
font-size: 100px;
color: white;
}
p {
text-indent: 50px;
margin: 25px 50px 50px 50px;
font-size: 20px;
}
ul {
background-color: #333;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
position: fixed;
height: 75px;
width: 100%;
}
li {
float: left;
display: inline;
text-decoration: underline;
font-size: 20px;
padding: 10px;
background-color: #333;
}
li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
li a:hover {
background-color: white;
color: black;
}
li a.active {
background-color: white;
color: black;
}
div.about {
background-color: #2f4f4f;
background-size: cover;
text-align: center;
padding: 75px;
color: white;
}
div.portfolio {
text-align: center;
color: white;
background-color: #a9a9a9;
background-size: cover;
padding: 50px 0px 50px 0px;
}
div.marcus {
text-align: center;
}
div.contact {
text-align: center;
padding: 50px 0px 0px 0px;
color: white;
background-color: #b33c00;
}
div.social {
text-align: center;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment