Skip to content

Instantly share code, notes, and snippets.

@alinecrsouza

alinecrsouza/Portfolio (nav-bar default).markdown

Last active July 1, 2016 13:48
Show Gist options
  • Save alinecrsouza/fdba87f2e674a4da23608913a451041e to your computer and use it in GitHub Desktop.
Save alinecrsouza/fdba87f2e674a4da23608913a451041e to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio (nav-bar default)
Raw
index.html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" role="navigation" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="home-menu" class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li id="works-menu"><a href="#works"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Works</a></li>
<li id="about-menu"><a href="#about"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
<li id="contact-menu"><a href="#contact"><span class="fa fa-envelope-o" aria-hidden="true"></span> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="btn btn-social-icon" href="https://github.com/alinecrsouza"><i class="fa fa-github"></i></a></li>
<li> <a class="btn btn-social-icon btn-linkedin" href="https://br.linkedin.com/in/alinecrsouza"><i class="fa fa-linkedin"></i></a></li>
<li><a class="btn btn-social-icon btn-twitter" href="https://twitter.com/alinecrsouza"><i class="fa fa-twitter"></i></a></li>
<li> <a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/alinecrsouza"><i class="fa fa-facebook"></i></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div id="header" class="col-sm-8 col-md-9">
<p style="padding:20px;"></p>
<h1 id="welcome">Hi, my name is <span style="color:#005099">Aline Souza</span> & I'm a Web Developer.</h1>
</div>
<div class="col-sm-4 col-md-3">
<img id="photo" src="http://i.imgur.com/Wxfp3MH.png" alt="A picture of Aline Souza">
</div>
</div>
</div>
</header>
<article class="container">
<section id="works" class="row row-content">
<div class="col-xs-12 col-sm-12">
<div class="text-center">
<h2>My Works</h2>
</div>
<div class="row first-row">
<p class="text-center subtitle">I have worked on dozens of projects so I have picked only the latest for you.</p>
<p style="padding:10px;"></p>
<div class="col-xs-12 col-sm-4">
<a href="#" class="thumbnail">
<img src="https://placehold.it/250x250" alt="Coming soon!">
</a>
<div class="text-center">
<h5>Coming soon!</h5>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<a href="#" class="thumbnail">
<img src="https://placehold.it/250x250" alt="Coming soon!">
</a>
<div class="text-center">
<h5>Coming soon!</h5>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<a href="#" class="thumbnail">
<img src="https://placehold.it/250x250" alt="Coming soon!">
</a>
<div class="text-center">
<h5>Coming soon!</h5>
</div>
</div>
</div>
<div class="row">
<p style="padding:10px;"></p>
<div class="col-xs-12 col-sm-4">
<a href="#" class="thumbnail">
<img src="https://placehold.it/250x250" alt="Coming soon!">
</a>
<div class="text-center">
<h5>Coming soon!</h5>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<a href="#" class="thumbnail">
<img src="https://placehold.it/250x250" alt="Coming soon!">
</a>
<div class="text-center">
<h5>Coming soon!</h5>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<a href="#" class="thumbnail">
<img src="https://placehold.it/250x250" alt="Coming soon!">
</a>
<div class="text-center">
<h5>Coming soon!</h5>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="row row-content">
<div class="col-xs-12 col-sm-12"> <div class="text-center">
<h2 align=center>About me</h2>
</div>
<div class="row first-row">
<section id="who-am-i" class="col-xs-12 col-sm-8">
<h3>Who am I?</h3>
<p class="first-row">I am a passionate, enthusiastic and hard working Full Stack Web Developer, with over six years of professional experience. My skills cover both back-end and front-end development. </p>
<p>I am comfortable working with the key programming technologies, which power the internet. I have experience with HTML5, CSS3, JavaScript and related technologies, including Bootstrap, Sass/Less and JQuery, which enable responsive design and rich front-end development. I am also familiar with server-side/back-end technologies such as PHP, interacting with SQL databases.</p>
<!--<p>Currently I am a M.S. student at the Professional Master's Degree in Industrial Engineering and Computer Systems on the Federal Fluminense University, with emphasis in Computer Systems. I also have a Bachelor's in Computer Science at the Federal Fluminense University. </p>-->
<p>For the last six years, I have been working as a Web Developer/Programmer in the town hall of my city, developing systems responsable for generating and maintaining records of the participants in social and cultural programs. <!--I am now keen to expand my professional ability and to seek new challenges in the web development field.--></p>
<p><!--I am especially good at organizing things. I can work hard until I achieve the goals I set to myself.--> My current goal is became a Full-Stack Hero. Therefore, I am enrolled in two Full-Stack Certifications and a PHP+Laravel certification. In a few months, I hope to take my first steps into open source projects, with the help of the Free Code Camp community.</p>
</section>
<section id="skills" class="col-xs-12 col-sm-4">
<h3>Skills</h3>
<div class="first-row"></div>
<div class="progress">
<div class="progress-bar dark-blue" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (success)</span>
</div>
<span class="progress-type">PHP</span>
<span class="progress-completed">80%</span>
</div>
<div class="progress">
<div class="progress-bar light-blue" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
<span class="sr-only">95% Complete (success)</span>
</div>
<span class="progress-type">HTML5</span>
<span class="progress-completed" style="color: #fff;">95%</span>
</div>
<div class="progress">
<div class="progress-bar dark-blue" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (success)</span>
</div>
<span class="progress-type">CSS3</span>
<span class="progress-completed">80%</span>
</div>
<div class="progress">
<div class="progress-bar light-blue" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (success)</span>
</div>
<span class="progress-type">Javascript</span>
<span class="progress-completed">60%</span>
</div>
<div class="progress">
<div class="progress-bar dark-blue" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (success)</span>
</div>
<span class="progress-type">Bootstrap</span>
<span class="progress-completed">80%</span>
</div>
<div class="progress">
<div class="progress-bar light-blue" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (success)</span>
</div>
<span class="progress-type">Git</span>
<span class="progress-completed">60%</span>
</div>
<div class="progress">
<div class="progress-bar dark-blue" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (success)</span>
</div>
<span class="progress-type">SQL</span>
<span class="progress-completed">60%</span>
</div>
<div class="progress">
<div class="progress-bar light-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
<span class="progress-type">Jquery</span>
<span class="progress-completed">40%</span>
</div>
<!--<div class="progress">
<div class="progress-bar dark-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
<span class="progress-type">Sass/Less</span>
<span class="progress-completed">40%</span>
</div>-->
</section>
</div>
</div>
</section>
<section id="contact" class="row row-content">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<div class="text-center">
<h2>Contact Me</h2>
</div>
<div class="row first-row">
<p class="subtitle">Want to get in touch with me? Just fill the form below and I’ll reply back as soon as possible. Cheers!</p>
<p style="padding:10px;"></p>
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<form id="contact-form" action="#" method="post" role="form">
<div class="form-group">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" class="form-control" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input type="email" name="Email" id="Email" class="form-control" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea name="Message" id="Message" class="form-control" cols="30" rows="6" placeholder="Enter your message" required></textarea>
</div>
<!-- CONFIG -->
<input class="is-hidden" type="text" name="_gotcha">
<input type="hidden" name="_subject" value="New submission!">
<input type="hidden" name="_cc" value="email@cc.com">
<!-- /CONFIG -->
<div class="form-group">
<input class="submit btn btn-default" type="submit" value="Send">
</div>
</form>
</div>
</div>
</div>
</section>
</article>
<footer>
<p style="padding:50px;"></p>
<div class="container">
<div class="row row-footer">
<div class="col-xs-12 col-sm-6">
<p class="foot-content" style="padding: 40px 20px 30px 20px;">© 2016 Aline da Cruz Rodrigues Souza - All Rights Reserved.</p>
</div>
<div class="col-xs-12 col-sm-6">
<div class="nav navbar-nav navbar-right" style="padding: 30px 20px;">
<a class="btn btn-social-icon btn-github" href="https://github.com/alinecrsouza"><i class="fa fa-github-square big-icon"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="https://br.linkedin.com/in/alinecrsouza"><i class="fa fa-linkedin-square big-icon"></i></a>
<a class="btn btn-social-icon btn-twitter" href="https://twitter.com/alinecrsouza"><i class="fa fa-twitter-square big-icon"></i></a>
<a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/alinecrsouza"><i class="fa fa-facebook-square big-icon"></i></a>
<!--<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>-->
</div>
</div>
</div>
</div>
</footer>
</body>
Raw
Portfolio (nav-bar default).markdown
Raw
script.js
$(document).ready(function() {
$("#navbar li").on("click", function() {
$("#navbar li").removeClass("active");
$(this).addClass("active");
});
});
/*$(document).on('scroll',function(){ if($(document).scrollTop()==$('#works').offset().top){
$("#navbar li").removeClass("active"); $("#works").addClass("active");
}
});*/
$(window).scroll(function() {
if ($(this).scrollTop() < $('#works').offset().top) {
$('#navbar li').removeClass('active');
$('#home-menu').addClass('active');
}
if ($(this).scrollTop() >= $('#works').offset().top) {
$('#navbar li').removeClass('active');
$('#works-menu').addClass('active');
}
if ($(this).scrollTop() >= $('#about').offset().top) {
$('#navbar li').removeClass('active');
$('#about-menu').addClass('active');
}
if ($(this).scrollTop() >= $('#contact').offset().top) {
$('#navbar li').removeClass('active');
$('#contact-menu').addClass('active');
}
});
var mail = function(){
var parts = ["&#108;&#105;&#110;&#101;&#99;&#114;&#115;&#111;&#117;&#122;&#97;", "gmail", "com", "&#46;", "&#64;", "//formspree.io/"];
var url = parts[5] + parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
return(decodeHtmlEntity(url));
}
var decodeHtmlEntity = function(str) {
return str.replace(/&#(\d+);/g, function(match, dec) {
return String.fromCharCode(dec);
});
};
var $contactForm = $('#contact-form');
$contactForm.submit(function(e) {
e.preventDefault();
$.ajax({
url: mail(),
method: 'POST',
data: $(this).serialize(),
dataType: 'json',
beforeSend: function() {
$contactForm.append('<div class="alert alert--loading">Sending message…</div>');
},
success: function(data) {
$contactForm.find('.alert--loading').hide();
$contactForm.append('<div class="alert alert--success">Message sent!</div>');
},
error: function(err) {
$contactForm.find('.alert--loading').hide();
$contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
/****** General Styles *********/
body {
padding: 50px 0 0 0;
z-index: 0;
background-color: #F7F6F4;
font-family: "Roboto",Helvetica,Arial,sans-serif;
color: #555;
font-weight: 400;
letter-spacing: 1.2px;
font-size: 12px;
}
h1{
font-size: 3.5em !important;
}
h2{
color: #333;
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px #000000;
display: inline-block;
border-bottom: solid 5px #B4A28F;
line-height: 1.1;
margin-bottom: 0;
padding-bottom: 10px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: .06em;
font-size: 2.6em !important;
}
h3{
color: #555;
font-family: 'Roboto Slab', serif;
display: inline-block;
border-bottom: solid 3px #B4A28F;
line-height: 1.1;
margin-bottom: 0;
padding-bottom: 10px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: .06em;
font-size: 2.1em !important;
}
/****** Navigation Style *********/
.navbar-default {
background-color: #F7F6F4;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .08em;
color: #ffffff;
border-bottom: solid 1px #7C7062;
font-family: 'Roboto Slab',serif;
}
.navbar-default .navbar-nav>li>a {
color: #555;
font-weight: bold;
letter-spacing: .08em;
border-top: solid 5px transparent;
}
.navbar-default .navbar-nav > .active > a {
border-top: solid 5px #B4A28F;
background-color: #1A62A3;
color: #FFF;
}
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
background-color: #005099;
color: #ffffff;
}
/****** Header Style *********/
.row-header {
margin: 0 auto;
padding: 0 0;
}
.jumbotron {
margin: 0 auto;
padding: 50px 30px;
background-color: rgba(180,162,143,0.7);
background-image: url('http://i.imgur.com/lMHXdG4.jpg');
color: #005099;
}
#welcome{
text-shadow: 0 1px 2px rgba(0,0,0,.6);
font-family: 'Roboto Slab', serif;
color: #333;
line-height: 1.1;
}
#photo{
width: 100%;
height: auto;
}
/****** Body Style *********/
.row-content {
margin: 0 auto;
padding-top: 50px;
}
.first-row{
padding-top:40px;
}
.text-center {
text-align: center;
}
.is-hidden{
display:none;
}
.subtitle{
font-size: 1.2em !important;
}
/****** Progress Bar Style *********/
.progress {
position: relative;
height: 25px;
background-color: #E0EAF4;
}
.progress > .progress-type {
position: absolute;
left: 0px;
font-weight: 800;
padding: 3px 30px 2px 10px;
color: rgb(255, 255, 255);
background-color: rgba(255,255,255,.2)!important;
}
.progress > .progress-completed {
position: absolute;
right: 0px;
font-weight: 800;
padding: 3px 10px 2px;
color: #555;
}
.dark-blue{
background-color: #005099;
}
.light-blue{
background-color: #1A62A3;
}
/****** Footer Style *********/
.row-footer {
margin: 0 auto;
padding: 5px 0;
background-color: #B4A28F;
}
.footer-content{
padding: 30px 20px 30px 20px;
}
.big-icon{
font-size: 2em !important;
color:#005099;
}
/****** Media Queries *********/
@media screen and (min-width:480px){
body{
font-size: 13px !important;
}
}
@media screen and (max-width: 767px) and (min-width:480px){
#photo{
width: 80%;
margin: 0 auto;
}
}
@media screen and (min-width:768px){
body{
font-size: 14px !important;
}
}
@media screen and (min-width:992px){
body{
font-size: 15px !important;
}
}
@media screen and (min-width:1200px){
body{
font-size: 16px !important;
}
}
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