Skip to content

Instantly share code, notes, and snippets.

@themonster2015

themonster2015/index.html

Last active September 27, 2016 08:21
Show Gist options
  • Save themonster2015/830b54ceb2b55b0ede5dcf7efe76c2ec to your computer and use it in GitHub Desktop.
Save themonster2015/830b54ceb2b55b0ede5dcf7efe76c2ec to your computer and use it in GitHub Desktop.
Download ZIP
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>Kervin Vasquez!</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- google font raleway -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<!-- 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]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<!--navbar starts-->
<nav class="nav 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="#">Kervin Vasquez</a>
</div>
<!--end project Name-->
</div>
<!-- end navbar header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- navbar collapse -->
</div>
<!-- end nav container-->
</nav>
<!-- end navbar-->
<!-- JUMBOTRON
<div class="jumbotron header intro">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="avatar">
<img src="img/me.png" alt="Developer Avatar">
</div>
<h1>Kervin Vasquez, Web Developer</h1>
<p>I am a <strong>professional</strong> and creative Web Developer involved with latest web design trends and technologies best practices. Coding is my passion, and creating solutions is my profession.</p>
</div>
</div>
</div>
</div>
-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<!-- /container -->
<div class="section-wrap" id="home">
<div class="container-fluid">
<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/hero1.jpg" alt="developer desk">
<div class="carousel-caption">
<h1>Kervin Vasquez, Web Developer</h1>
<p>I am a <strong>professional</strong> and creative Web Developer involved with latest web design trends and technologies best practices. Coding is my passion, and creating solutions is my profession.</p>
</div>
</div>
<div class="item">
<img src="img/hero2.jpg" alt="developer desk">
<div class="carousel-caption">
<h1>Frontend Developer</h1>
<p>Specialized on the use of HTML, CSS, and Javascript. Experience with multiple responsive frameworks. </p>
</div>
</div>
<div class="item">
<img src="img/hero3.jpg" alt="developer desk">
<div class="carousel-caption">
<h1>Backend Developer</h1>
<p>Experience on building dynamic applications with backend languages like Ruby on Rails and PHP </p>
</div>
</div>
<!-- You can add comments here-->
</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>
<!-- CAROUSEL CONTAINER -->
<div class="container">
<div id="goals-section" class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="glyphicon glyphicon-check">
</div>
<h2>Course Goals</h2>
<p>My goal is to improve my technical skills, and get hired as an web developer. I would like to star my own business someday.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<!-- /col -->
<div class="col-md-4 col-sm-6 col-xs-6">
<div class="glyphicon glyphicon-eye-open">
</div>
<h2>Portfolio Concept</h2>
<p>I have experience with the fundamentals of web development. I would like to show my passion for clean code, and elegant styling. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<!-- /col -->
<div class="col-md-4 col-sm-6 col-xs-6">
<div class="glyphicon glyphicon-time">
</div>
<h2>Project Goals</h2>
<p>I would like to commit myself to work on these projects at least 30 hours a week, and also code whenever I get a chance. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
</div>
<!-- /end home setion-->
<!-- WORK SECTION-->
<div class="section-wrap" id="work">
<div class="jumbotron header">
<div class="container ">
<div class="row">
<div class="col-md-12">
<h1>Work</h1>
<p>Here you can find some examples of my most recent work.</p>
</div>
</div>
</div>
</div>
<!-- end header -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="project card">
<img class="img-responsive" src="img/im1.jpg" id="work1">
<div>
<h4>Work in progress</h4></div>
</div>
</div>
</div>
</div>
</div>
<!-- FAQ SECTION-->
<div class="section-wrap" id="faq">
<div class="jumbotron header">
<div class="container ">
<div class="row">
<div class="col-md-12">
<h1>FAQ</h1>
<p>These are some of the questions that I get asked frequently, but if you have any other doubt just let me know!</p>
</div>
</div>
</div>
</div>
<!-- end header -->
<div class="container">
<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-plus"></span> How did you get started with computers?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
I remember using my first computer when I was 5 years old, back to the windows 3.0 days. It's been 19 years after that and ever since then I've thought of computers as one the best tools that we can have. Later in my life when I was deciding what career
to choose I realized that I really enjoyed working with computers and I wanted to learn how to program them based on people's needs so their life could become easier. That's why I studied computer information system engineering.
</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-plus"></span> Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
I decided to become a Web Developer after I realized that Internet is the network that connects us all thus it's the fastest and more reliable plattaform to share things the people!
</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-plus"></span> Who are your clients?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
I've worked for different kind of clients, all the way from personal sites, small businesses, non-profit organizations, and enterprise level sites. I really enjoy working for non-profit organizations most of the time, because I feel that by the simple
fact of creating a web page for them I'm contributing to their growth.
</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-plus"></span> Do you like any other platform besides Web Development?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Of course I do! I first got started on software development by building small desktop applications using C# and I have some experience with Swift for iOS development. If I could learn a new language every day definitely I would do it.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
<span class="glyphicon glyphicon-plus"></span> Would you encourage others to learn coding?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
YES! It's the best decision that you can take for your career. It's not an easy path but it's a really rewarding one. Just give a try!
</div>
</div>
</div>
</div>
<!-- end accordion -->
</div>
<!-- end container -->
</div>
<div class="section-wrap" id="about">
<!-- ABOUT ME SECTION-->
<div class="jumbotron header">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>About Me</h1>
<p>My passion is to create solutions and solve puzzles through the use of code. Coffee gives me energy. I love the beach.</p>
</div>
</div>
</div>
</div>
<!-- end header -->
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<img class="top-img card img-responsive" src="img/playa.jpg" alt="Poneloya beach">
</div>
<div class="col-md-6 col-xs-12">
<div class="skills card">
<h2>My Skills</h2>
<ul id="skill-list">
<li>Responsive Design</li>
<li>Version Control</li>
<li>Test Driven Development</li>
<li>HTML, CSS, JavaScript, Ruby, SQL, Swift</li>
</ul>
</div>
<!-- end skills section -->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 main-text">
<h2>My Story</h2>
<p>My name is Kervin Vasquez, and this is my first project createad during the frontend section of careersfoundry's web development course. I'm a Web Developer with experience in different programming languages inclunding desktop and mobile oriented.</p>
<p>
I studied information system engineering focused on desktop application. This is how I learned to always have a "programmer" mindset. I discovered that most problems have a logical solution, and a logical series of steps to solve it. </p>
<p>As a web designer and developer, my objective is to make a positive impact on clients, co-workers, and the internet using my skills and experience to design compellin, useful and attractive websites. I enjoy working with teams or by myself
on projects that involve a mix of web and graphic design, web development, database management or any other kind of challenging yet fun enviroment. When it's necessary to keep up with new technologies or even learn something from scratch
I'm always eager to do it. I believe that every problem has a great solution, and that it's never to late to learn something new!</p>
</div>
<!-- end main text -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<div class="section-wraper" id="contact">
<div class="jumbotron contact-section">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="avatar">
<img src="img/me.png" alt="Developer Avatar">
</div>
<h2 class="title">Kervin Vasquez, Web Developer</h2>
<p><strong>Hey!</strong> Do you need help with a small project? Do you need need help with a giant project!? Or maybe you are learning web development and you have a question. <strong>Don't hesitate</strong> to reach me out. I'm here to help
you.</p>
</div>
<div class="col-md-6 contact-info">
<h1>Contact Info</h1>
<p>You can email me, call me, or if you simply want to keep up to date with my most recent work, you can follow me through my social channels.</p>
<span class="glyphicon glyphicon-envelope"></span>
<strong>[email protected]</strong>
<span class="glyphicon glyphicon-earphone"></span>
<strong>(818) 555-5555</strong>
<div class="social">
<div class="button"><a href="#">Twitter</a></div>
<div class="button"><a href="#">Linkedin</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Green Jocote &copy; 2016</p>
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function() {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
Raw
styles.css
/*General Styles*/
* {
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
body {
color: #3d094b;
position: relative;
}
.section-wrap {
padding-top: 50px;
}
/********************/
.jumbotron {
background-image: url("../img/bg.jpg");
background-size: cover;
background-attachment: fixed;
z-index: 0;
text-align: center;
padding-top: 0px;
}
/*Home page Styles*/
.avatar {
background-color: #fbae20;
margin: 0 auto 7%;
width: 30%;
border-radius: 5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.avatar img {
width: 100%;
padding: 6%;
}
.jumbotron strong {
color: #fbae20;
}
#goals-section {
text-align: center;
font-size: 1.25em;
margin-bottom: 20px;
}
#goals-section .glyphicon {
font-size: 4em;
border: 3px solid #fbae20;
border-radius: 50%;
padding: 0.5em;
}
@media (max-width: 991px) {
.avatar {
width: 60%;
}
}
/*Work section styling*/
.project {
width: 95%;
margin: auto;
padding: 1%;
text-align: center;
}
#work .col-md-3, #work .col-xs-6 {
padding-bottom: 1%;
}
/*About Page Styling*/
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main-text {
position: relative;
font-size: 1.4em;
padding: 5%
}
.top-img {
border-radius: 5px;
}
.skills {
background-color: #fbae20;
color: #fff;
border-radius: 5px;
height: 27.6vh;
padding: 5%;
}
#skill-list {
text-align: left;
font-size: 1.3em;
}
@media (min-width: 1200px) {
.skills {
height: 33.5vh;
}
}
/*FOOTER SECTION*/
footer {
left: 0px;
bottom: 0px;
height: 50px;
width: 100%;
background-color: #fbae20;
padding: 15px;
}
footer p {
padding-left: 20px;
font-size: 1.1em;
}
/*Contact Section*/
.contact-section {
margin-bottom: 0px;
text-align: center;
overflow: scroll;
padding-top: 60px;
}
.contact-section .avatar {
width: 80%;
}
.title {
font-size: 2.5em;
}
.contact-section p {
text-align: justify;
}
.contact-info {
border: 5px solid;
border-radius: 5%;
height: 75vh;
padding: 50px;
}
.contact-info strong {
font-size: 2em;
color: snow;
text-shadow: 0px 0px 25px rgba(10, 0, 0, 1);
}
.contact-info a:hover {
text-decoration: none;
}
.contact-info .glyphicon {
font-size: 3em;
margin: 0.8em;
display: block;
margin-bottom: 0;
}
.social {
margin: 8%;
}
.social .button {
display: inline;
margin: 5%;
font-size: 1.4em;
border: 3px solid;
padding: 2%;
border-radius: 5%;
}
.social a {
color: #fbae20
}
/*FAQ Section*/
.header {
height: auto;
}
.header h1 {
color: white;
text-shadow: 0px 0px 25px rgba(10, 0, 0, 1);
}
.header p {
font-family: Helvetica, Arial, sans-serif;
font-size: 2.2em;
font-weight: lighter;
-webkit-margin-before: 0;
}
/*COLLAPSE */
.panel-body {
font-family: font-family: 'Raleway', Verdana, Geneva, sans-serif;
font-size: 1.2em;
}
.panel-default>.panel-heading {
background-color: #fbae20;
color: aliceblue;
}
.panel-title {
font-family: font-family: 'Raleway', Verdana, Geneva, sans-serif;
font-weight: 700;
text-shadow: 0px 0px 25px rgba(10, 0, 0, 0.3);
font-size: 1.6em;
}
/*Typography*/
a {
font-family: 'Raleway', Helvetica, Futura, Arial, sans-serif;
}
h1, h2, h3 {
font-family: 'Raleway', Futura, Helvetica, Arial, sans-serif;
}
.skills h2 {
text-align: center;
text-transform: uppercase;
color: #3d094b;
margin-top: 0;
}
.main-text h2 {
text-align: center;
}
/*Navigation Menu*/
.projectName {
text-transform: uppercase;
}
.projectName a {
color: white;
font-weight: 700;
text-decoration: none;
}
.projectName a:hover {
color: gray;
text-decoration: none;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
background-color: #fbae20;
}
.nav {
background-color: #3d094b;
z-index: 999;
}
.nav a {
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
border-radius: 5%;
}
.nav a:hover {
transition: color 600ms;
-webkit-transition: color 600ms;
-ms-transition: color 600ms;
}
/*CAROUSEL STYLING*/
.carousel {
margin-left: -15px;
margin-right: -15px;
margin-bottom: 30px;
}
.carousel-caption {
background-color: rgba(0, 0, 0, 0.5);
}
.carousel-caption strong {
color: #fbae20;
}
.carousel-caption p {
font-size: 1.3em;
}
.carousel-caption h1 {
font-size: 4em;
text-shadow: -1px -1px 15px rgba(0, 0, 0, 1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment