Skip to content

Instantly share code, notes, and snippets.

@RJNY

RJNY/index.html

Created December 24, 2017 06:28
Show Gist options
  • Save RJNY/29b839c128f5ed59f87b4f05607dc3be to your computer and use it in GitHub Desktop.
Save RJNY/29b839c128f5ed59f87b4f05607dc3be to your computer and use it in GitHub Desktop.
Download ZIP
David Clayman template revisions
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>David Clayman. Developing Rails Engineer.</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<div id="fb-root"></div>
<!-- jQuery & bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- stellar -->
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<!-- custom CSS & JS -->
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="js/work.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar">
<nav>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top nav-tabs" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="project-name navbar-brand">
<a href="#" alt="Home page link">David Clayman</a>
</div> <!-- end project-name -->
</div><!-- end navbar header -->
<div class="nav navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#carousel-example-generic">Home</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work <span class="caret"></span></a>
<ul class="dropdown-menu work-dropdown">
<!-- list items dynamically generated here -->
</ul>
</li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</div><!-- end nav -->
</div><!-- end nav container -->
</div><!-- end navbar -->
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://www.placehold.it/800x600" alt="Image of Desktop Workspace & Computer">
<div class="carousel-caption">
Where your work gets done.
</div>
</div>
<div class="item">
<img src="https://www.placehold.it/800x600" alt="Typewriter Image">
<div class="carousel-caption">
Careful attention to design specifications.
</div>
</div>
<div class="item">
<img src="https://www.placehold.it/800x600" alt="Another Desktop Workspace with Orange Chair">
<div class="carousel-caption">
Execution guaranteed.
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Studious Engineering</h2>
<p>Once an SAP Programmer and Teacher, Web Programming is now my sole focus and passion. When you have a job that requires meticulous attention to detail, you can call on me to engineer the solution.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="top" title="More information">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
Project work frequently consumes me. With the right offer on hand, I can commit 40 hours a week to project needs.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="top" title="More information">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>Career changer and full stack web developer looking to advance my present skill set. My ideal goal is to find work within the world of edtech.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="top" title="More information">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
<hr>
</div> <!-- /container -->
<div class="container" id="about">
<div class="header">
<h1>About Me</h1>
</div><!-- end header -->
<div class="col-md-4">
<img src="https://www.placehold.it/800x600" alt="Drawing of David" class="img-responsive">
</div><!-- end image -->
<div class="col-md-4 intro">
<h2>Introduction</h2>
<p>I'm a full-stack web developer living in <a href="#" title="I'm living in Boca Raton, to be precise." data-toggle="tooltip">South Florida</a>.</p>
</div><!-- end introduction -->
<div class="col-md-4 skill">
<h3>My Skills</h3>
<ul id="skill-list">
<li>React</li>
<li>Node.js</li>
<li>Javascript ES6</li>
<li>Ruby on Rails</li>
<li>Ruby</li>
<li>SQL</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div><!-- end skill -->
<div class="main-text">
<h3>My Story</h3>
<p>Since graduating from The University of Chicago in 2007, I've enjoyed working for clients as an SAP Programmer in the United States, France, and Canada. Following those adventures, I went back to school to train as a science teacher, but ultimately found the career was not the right fit. So I'm now back in front of a terminal, engaged in full-stack web programming.</p>
</div><!-- end main-text -->
</div> <!-- end container about -->
<div class="container" id="work-container">
<div class="header">
<h1>Work</h1>
</div><!-- container header -->
<div id="work" class="row">
</div><!-- row -->
</div><!-- container -->
<div class="container" id="video">
<div class="header">
<h1>Video Introduction</h1>
</div>
<iframe width="560" height="315" src="//www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>
<div class="container faq" id="faq"
<div class="header">
<h1 class="learn-more">Learn More</h1>
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Review Resume</button>
</div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h1>Resume</h1>
<hr>
<embed id="resume" src="resume.pdf" class="modalembed">
</div>
</div>
</div>
</div>
<div id="accordion" class="container">
<h4><span class="glyphicon glyphicon-pencil"></span> Why did you decide to become a web developer?</h4>
<div>
<p>
To be honest, I tried my hand at several careers, including legacy systems programming and teaching, before I found my way into web programming. I like the creativity, specificity, flexibility, and relative security that the career provides.
</p>
</div>
<h4><span class="glyphicon glyphicon-pencil"></span> What is your design process?</h4>
<div>
<p>
After meeting with my clients and learning of their goals, I work with them to finalize a set of design requirements. From there, I execute to meet all the specifications on the timeline that we agreed upon.
</p>
</div>
<h4><span class="glyphicon glyphicon-pencil"></span> Who are your clients?</h4>
<div>
<p>
My clients may come from a wide range of industries. At this stage in my career, I'm hungry for work, and not terribly selective about the industry that my client comes from. That said, I refuse to work for vice industries, like alcohol or tobacco, and on the flip side, I'd prefer above all to work for charities, edtech, or healthcare firms.
</p>
</div>
</div>
<div id="contact" data-stellar-background-ratio="0.5">
<div class="container">
<div class="col-md-4">
<div>
<div id="meet-me">
<h3><span class="glyphicon glyphicon-road"></span>Want to meet?</h3>
</div>
<div class="address" id="address">
<div id="map"></div>
<p></br>
BOCA RATON, FL</br>
+1 (312) 414 - 7628</br>
</p>
</div> <!-- end address div -->
</div> <!-- end div -->
</div> <!-- end first div-->
<div id="write-me" class="col-lg-8 col-md-8">
<div class="header">
<h3><span class="glyphicon glyphicon-pencil"></span> Drop me a line!</h3>
I'm rarely far away from my email, and I check my email at least 3 times a day.
<form method='post'><input type='hidden' name='form-name' value='form 1' />
<div class="form-group" class="col-md-4">
<label for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter your name." id="name" autocomplete="name">
</div>
<div class="form-group" class="col-md-4">
<label for="telephone">Telephone</label>
<input id="telephone" type="text" class="input-medium bfh-phone form-control" placeholder="+1 (321) 252-9626" autocomplete="tel">
</div>
<div class="form-group">
<label for="e-mail">* E-mail</label>
<input type="email" class="form-control" placeholder="Your email address here." id="e-mail" autocomplete="email" required="required">
</div>
<label for="message">* Message</label>
<textarea style="resize:none" cols="40" rows="5" class="form-control message-box" placeholder="Your message here." id="message" required="required"></textarea>
<p id="char-count"></p>
<p id="visible-comment"></p>
<button type="submit" class="btn btn-default" id="message-submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- ============================= -->
<footer>
<div id="share-buttons">
<div id="twitter-button">
<a class="twitter-follow-button" href="https://twitter.com/adamtheclayman" data-show-screen-name="false" data-show-count="false">Follow @adamtheclayman</a>
</div>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
</div>
<div id="copyright">&copy; David Clayman 02017</div>
</footer>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcyiS0dLXEF8N7tp2m4bqkFFWyqDZOCjI&callback=initMap" async defer></script>
</body>
</html>
Raw
scripts.js
// Before Document Load
// Facebook Like Button
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Twitter Share Button
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
// Map Section
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 26.3453, lng: -80.1687},
zoom: 9
});
var marker = new google.maps.Marker({
position: {lat: 26.3453, lng: -80.1687},
map: map
});
}
// On Document Load
$(document).ready(function() {
// Smooth scrolling
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
if (href != undefined && href != '#') {
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
}
});
// Accordion
$( function() {
$("#accordion").accordion();
});
// There's an error ("a.IndexOf is not a function") loading the Stellar Parallax Library. Requires a work-around.
// Stellar Parallax Feature
// $("#contact").stellar();
$(function() {
$('[data-toggle*="tooltip"]').tooltip();
});
// Display ongoing character count when user types in message box
$(".message-box").on("keyup", function() {
var charCount = $(".message-box").val().length;
$("#char-count").html(charCount);
console.log(charCount);
if (charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "white");
}
});
// Messsage-Submit Event Listener
$("#message-submit").on("click", function() {
var comment = $('.message-box').val();
if (comment === "") {
$(".message-box").css("border", "2px solid red");
} else {
$(".message-box").css("border", "1px solid white");
$("#visible-comment").html(comment);
$(".message-box").hide();
}
return false;
});
// Work Section
for(var i = 0; i < works.length; i++) {
$("#work").append(
"<div class='work-img-wrapper col-xs-6 col-sm-3' id='work" + i + "'>\
<a href='#" + works[i].url + "' class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'>\
<p class='proj-title'>Title:</p> '" + works[i].title + "'\
</span>\
</a>\
</div>"
);
$("ul.dropdown-menu").append("<li><a href='#work"+i+"'>work "+i+"</a></li>");
var images = $("#work img");
if (i%2 === 0) {
$(images[i]).css("border", "2px solid DodgerBlue");
} else {
$(images[i]).css("border", "2px solid salmon");
};
};
$(".work-img").mouseenter( function() {
$(".info", this).show();
}).mouseleave(function () {
$(".info", this).hide();
});
});
Raw
styles.css
/* Universal */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
h1, h2, h3, p, li {
font-family: Helvetica, Arial, sans-serif;
}
.body {
/* position: relative; */
background-color: #fffeea;
color: #34495e;
}
.header h1 {
text-align: center;
}
.image img {
width: 100%;
}
/* Navigation */
.project-name {
text-transform: uppercase;
}
.project-name a {
color: white;
}
/* Jumbotron & Carousel */
.carousel-caption {
color: #111;
font-style: bold;
font-family: Futura, sans-serif;
}
.jumbotron {
background-image: url(../img/landscape.jpg);
background-size: cover;
}
.jumbotron p {
color: white;
}
/* Intro Section */
.intro p {
font-family: Helvetica, Arial, sans-serif;
font-size: 3em;
font-weight: 100;
-webkit-margin-before: 0;
}
.main-text {
clear: both;
padding-top: 60px;
}
.skills {
background-color: #5AD4C2;
color: #FFF;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
#skill-list {
margin-left: 50px;
}
/* Work Section */
.work-img {
display: block;
margin: auto;
max-width: 200px;
position: relative;
}
.work-img-wrapper {
margin: 10px 0;
}
.info {
position: absolute;
top: 15%;
left: 22%;
color: #fff;
font-family: Futura;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
display: none;
}
.proj-title {
font-weight: 100;
}
/* Learn More */
.learn-more {
text-align: left;
float: left;
}
.modal-button {
float: right;
padding: 15px;
}
.modalembed {
height: 500px;
width: 100%;
padding: 10px;
}
.ui-state-active {
color: #000;
}
#accordion {
margin-top: 10px;
margin-bottom: 10px;
}
/* Map Page */
#map {
height: 300px;
width: 100%;
}
/* Contact Page */
#contact {
background-image: url("https://www.placehold.it/800x600");
background-attachment: fixed;
background-size: cover;
color: white;
padding-top: 40px;
padding-bottom: 40px;
font-family: Helvetica, Arial, sans-serif;
}
#email {
margin: 30px;
color: white;
text-align: center;
font-size: 1.5em;
font-weight: bold;
display: block;
}
#email a {
color: white;
}
/* .form-control { */
/* width: 80%; */
/* } */
.jumbotron #address p {
padding: 30px;
margin: 30px;
color: #E87600;
text-align: center;
font-size: 2em;
font-weight: bold;
display: block;
}
#telephone {
color: black;
}
/* Video Page */
#video {
margin: 0 auto;
}
#video iframe {
width: 100%;
max-width: 560px;
}
/* Footer */
.footer {
display: block;
margin: auto;
}
.footer a:active {
color: #E87600;
}
.footer a:visited {
color: purple;
}
#share-buttons {
display: block;
margin: auto;
width: 100%;
}
#copyright {
display: block;
margin: auto;
width: 100%;
text-align: center;
}
#fb-like {
display: block;
margin: auto;
width: 100%;
}
#twitter-button {
display: block;
margin: auto;
width: 5%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment