Portfolio of Aline C. R. Souza - Web developer.
A Pen by ALINE C. R. SOUZA on CodePen.
Last active
July 1, 2016 13:48
-
-
Save alinecrsouza/fdba87f2e674a4da23608913a451041e to your computer and use it in GitHub Desktop.
Portfolio (nav-bar default)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 protected]"> | |
| <!-- /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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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 = ["linecrsouza", "gmail", "com", ".", "@", "//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>'); | |
| } | |
| }); | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****** 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; | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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