Skip to content

Instantly share code, notes, and snippets.

@RJNY

RJNY/index.html

Created June 16, 2018 12:54
Show Gist options
  • Save RJNY/4a7b8e5eba674785c5100a410d0003a0 to your computer and use it in GitHub Desktop.
Save RJNY/4a7b8e5eba674785c5100a410d0003a0 to your computer and use it in GitHub Desktop.
Download ZIP
michael szott gist
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hello World!</title>
<!-- Latest compiled and minified CSS -->
<!-- reset browser default css with normalize -->
<link rel="stylesheet" href="css/normalize.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<!-- <script>src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script> -->
<!-- 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]-->
<!-- Latest compiled and minified CSS -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- <script type="text/javascript" src="scripts2.js"></script> -->
<!-- link required per lesson 2.6
<link a href=...js/scripts.js"js files</a>.
-->
</head>
<body data-spy="scroll" data-target=".navbar">
<div id="fb-root"></div>
<!-- nav bar starts here -->>
<div class="navbar navbar-inverse navbar-fixed-top" 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="projectName navbar-brand">
<a href="#">Michael Szott</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#faq-container">
<strong>FAQ</strong>
</a>
</li>
<li>
<a href="#contact-container">
<strong>Contact</strong>
</a>
</li>
<li>
<a href="#work-container">
<strong>Work</strong>
</a>
</li>
<li>
<a href="#about-container">
<strong>About</strong>
</a>
</li>
<li>
<a href="#home">
<strong>Home</strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container anchor" id="sliding-container">
<!--carousel code from bootstrap below -->
<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="img/placeholder.png" alt="soccer ball">
<div class="carousel-caption">
<h1>
<strong>Play.</strong>
</h1>
<p>Teach. Learn. Live.</p>
</div>
</div>
<div class="item">
<img src="img/placeholder.png" alt="laptop computer">
<div class="carousel-caption">
<p>Dedicated, focused follow-through.</p>
<h1>
<strong>Work.</strong>
</h1>
</div>
</div>
<div class="item">
<img src="img/placeholder.png" alt="mountain clouds">
<div class="carousel-caption">
<h1>
<strong>Explore.</strong>
</h1>
<p>Get outside. Experience. Enjoy.</p>
</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>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>A variety of teaching and other professional experiences will serve as an excellent backdrop to web development.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="See more of my portfolio and get a sense of my work!">View details &raquo;</button>
</div>
<!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>Go above and beyond. Learn about and utilize additional resources beyond CF course. Make it awesome! </p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="See what I'm working on now and some future ideas!">View details &raquo;</button>
</div>
<!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>Keep up with all due dates, stay on track, be active on Slack and connecting with other students.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Highlights from the CareerFoundry course!">View details &raquo;</button>
</div>
<!-- /col -->
</div>
<!-- /row -->
<hr>
</div>
</div>
<div class="container anchor" id="about-container">
<h1>About Mike</h1>
<div class="row" id="mywork">
<!--may need to create 12 total of these below, with col-md-3-->
<div class="col-md-4">
<img class="img-responsive" src="img/placeholder.png" alt="waterfall">
</div>
<div class="col-md-4">
<p>Mike is a beginning web developer and avid
<a href="#" title="Hiking, biking, and seeing amazing places are always on the list of todo's! From mountains to oceans and everywhere in between, Mike seeks to visit, enjoy, understand, and work to protect our amazing natural spaces."
id="outdoor_explorer">outdoor explorer</a>. He enjoys sports of all kinds and tinkering with the landscape at his house. Over the years,
Mike has seen how tech can help make the world a better place.</p>
</div>
<div class="col-md-4">
<h3 >Skills</h3>
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
<li>Ruby</li>
<li>Javascript</li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="song_desc">
<p>One of my favorite places I've ever travelled to is Hawaii. Check out this classic Hawaiian
tune performed by Playing
For Change, a collaboration of artists.</p>
</div>
</div>
<div class="col-sm-6">
<iframe src="https://www.youtube.com/embed/uDa0YmZD0Jk"
width="100%"
height="auto"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
</div>
<!--<div class="Hawaii_islands">
<img src="img/palm_tree.png" class="img-responsive">
</div> -->
<div class="container"> <!-- container for that centered look -->
<div class="row"> <!-- rows parent div for columns -->
<div class="col-sm-6"> <!-- first column, 6/12 columns wide -->
<div class="iframe-container">
<iframe
width="100%"
height="450"
frameborder="0"
style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDVTDTM0MOlHID1NyRcqERzwsz3rKDmifo &q=DBAP,Durham+NC"
alt="Durham Bulls Athletic Park Map"
allowfullscreen>
</iframe>
</div>
<!-- the class make-me-responsive is responsible for setting the width 100% OF IT'S PARENT -->
</div>
<div class="col-sm-6"> <!-- second column, also 6/12 columns wide -->
<div class="iframe-container">
<iframe
width="100%"
height="450"
frameborder="0"
style="border:0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3231.4761999769216!2d-79.07973455037381!3d35.91084238004389!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89acc317312edd21%3A0xcab8651875c82103!2sCarrboro+Farmers+Market!5e0!3m2!1sen!2sus!4v1527683061216" allowfullscreen id="carrboro_map"
alt="Map of Carrbor Farmer's Market">
</iframe>
</div>
</div>
</div>
<div>
<p id="maps_text" class="col-sm-6">Two favorite local places are the Durham Bull baseball park and the Carrboro Farmer's Market. Lots of summer fun to be had in central NC!</p>
</div>
<div class="container anchor" id="work-container">
<div class="work_header">
<h1>Work Samples</h1>
</div>
<!-- <div class="work_header">
<h1>Work</h1>
</div> -->
<div class="row" id="work"></div>
</div>
<!-- <div class="col-md-6"><a href="Favorites_Project/fav_index.html" target="_BLANK"class="img-responsive"><img src="img/calculator.jpg"></a></div>
<div class="col-md-6"><img src="img/palm_tree.png" class="img-responsive"></div>
<div class="col-md-6"><img src="img/placeholder.png" class="img-responsive"></div>
<div class="col-md-6"><img src="img/palm_tree.png" class="img-responsive"></div>
-->
</div>
</div>
<div class="container anchor" id="contact-container">
<div class="row">
<div class="col-md-4 contact-info">
<h1>
<strong>
<u>Connect with me:</u>
</strong>
</h1>
<h1>Mike Szott</h1>
<h2>
<span class="glyphicon glyphicon-earphone "></span> (206) 962-0409</h2>
<h2>
<span class="glyphicon glyphicon-envelope "></span> [email protected]</h2>
</div>
<div class="col-md-6 col-md-offset-2" id="contact-form">
<!--<h1 class="leave-msg"> </h1> -->
<form method='post'><input type='hidden' name='form-name' value='form 1' />
<div class="form-group">
<label for="name-box"> * Your Name:</label>
<input placeholder="Your Name" class="form-control" type="text" minlength="2" maxlength="50" id="name-box" required="required">
</div>
<div class="form-group">
<label for="email-box"> * Your Email :</label>
<input placeholder="Enter your email" class="form-control" type="email" required="required" minlength="4" maxlength="50"
id="email-box">
</div>
<div class="form-group">
<label for="phone"> Phone # (optional) :</label>
<input placeholder="Enter your phone" class="form-control" type="text" minlength="10" maxlength="20" id="phone-box">
</div>
<div>
<label for="message-box"> * Your Message Here:</label>
<textarea placeholder="Your message here" class="form-control" cols="40" rows="5" required="required"
minlength="1" maxlength="350" id="message-box"></textarea>
<p id="visible-comment"> </p>
<p id="char-count"> </p>
<button type="submit" class="btn btn-success" id="button-test">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="container" id="faq-container">
<h1>
<u>Frequently Asked Questions</u>
</h1>
<div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-leaf "></span>
Why did you want to be a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Web development gives me the opportunity to explore and work in a variety of industries. Tech touches everything these days,
from the IOT data analysis to database management to UX. I've come to see that we can work to make our world
a better place through responsible use of technology.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-leaf "></span>
What about your background will help you in web development?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
A blend of teaching, business and accounting, and coaching experience will allow me to add value to teams in a variety of
ways. I've been central parts of large and small organizations and have consistently been a great listener
and team player.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-leaf "></span>
How has the transition to web development been?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Challenging, busy, and excellent. It's been a great time to make a number of changes in my routine beyond just scheduling
and sticking to a study routine. Exercise, networking, and healthy cooking have become a part of the routine.
So, it's been more of a holistic change in lifestyle, with web development being just one of the core pieces.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<span class="glyphicon glyphicon-leaf "></span>
In what industries within tech do you see yourself working in?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Therein lies the beauty of tech. Just about any industry or organization I'd be excited about working for has tech needs
and opportunities. I'm drawn to non-profits, public sector work or working for municipalities like the local
town or city, parks and rec, school districts, universities, or financial work.
</div>
</div>
</div>
</div>
</div>
<h2 class="learn-more">Click Here to Learn More</h2>
<div class="modal-button">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Knowledge</button>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="Resume" id="my-resume">Snapshot Resume</h4>
</div>
<div class="modal-body">
<embed id="mike_resume" src="img/placeholder.png">
<h4>
<u>Education</u>
</h4>
<ul>
<li>Post-Baccalaureate Certificate in Accounting, Robert Morris College 2000</li>
<li>BS Education, University of Vermont 1996</li>
</ul>
<h4>
<u>Work Experience Highlights</u>
</h4>
<ul>
<li>15 years experience classroom teaching K-12 schools</li>
<li>Several years accounting and banking work prior to teaching</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer>
<p class="copyright">&copy; Mike Szott 2018</p>
<div class="twitter">
<a href="https://twitter.com/intent/tweet?screen_name=michael_szott&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-show-count="false">Tweet to @michael_szott</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="80" data-layout="standard" data-action="like"
data-size="small" data-show-faces="true" data-share="true">Mike on Facebook</div>
<div class="linkedin">
<a href="https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME" rel="nofollow" target="_blank">
<img src="https://download.linkedin.com/desktop/add2profile/buttons/en_US.png " alt="LinkedIn Add to Profile button">
</a>
</div>
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<script src="js/work.js"></script> -->
<script src="js/scripts2.js"></script>
<script src="js/work.js"></script>
</body>
</html>
Raw
scripts2.js
$(document).ready(function() {
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('carrboro_map'), {
center: {lat: 35.910144, lng: -79.075289},
zoom: 8
});
}
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
$("#message-box").on("keyup", function() {
var charCount = $("#message-box").val().length;
$("#char-count").html(charCount);
if (charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "black");
}
//.val msg-box red border work below
if (charCount.length === "0") {
$("#message-box").css("background", "red");
} else {
$("#message-box").css("border", "2px solid red");
}
});
$("#button-test").on("click", function() {
var comment = $("#message-box").val();
$("#visible-comment").html(comment);
return false;
});
$("#button-test").on("click", function() {
console.log("clicked");
return false;
});
$("#message-box").css("background", "aqua");
$(function () {
$(['outdoor_explorer']).tooltip();
$('[data-toggle="tooltip"]').tooltip();
});
// alert("hello");
//Twitter
!(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");
(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.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
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;
});
}
return false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment