Personal Portfolio Webpage

index.html

html
  head
    title Evolution Web Design

  body
    .container
      .row
        .col-md-12
          nav.navbar.navbar-default(role='navigation')
            .col-md-12
              .navbar-header
                a.navbar-brand(href='#') Jean González
              ul.nav.navbar-nav.navbar-right
                li
                  a(href='#home') Home
                li
                  a(href='#about') About
                li
                  a(href='#portfolio') Portfolio
                li
                  a(href='https://evolutioncode.wordpress.com/') Blog
                li
                  a(href='#contact') Contact
      .col-lg-12
        .intro-message.text-center
          a(name='home')
          h1
            | Evolution Web Design
            h1
              h4 Making The Future Happen
              hr.intro-divider
              ul#topSocial.list-inline.intro-social-buttons
                li
                  a.btn.btn-block.btn-social.btn-linkedin(href='https://www.linkedin.com/in/jcarlogonzalez', role='button')
                    span.fa.fa-linkedin
                    | LinkedIn
                li
                  a.btn.btn-block.btn-social.btn-github(href='https://github.com/Jean13', role='button')
                    span.fa.fa-github
                    | GitHub
                li
                  a.btn.btn-block.btn-danger.btn-social(href='http://www.freecodecamp.com/jean13', role='button')
                    span.fa.fa-fire
                    | Free Code Camp
        .jumbotron
          a(name='about')
          h2 Evolution Web Design				
          .col-md-4
            a(href='https://www.linkedin.com/in/jcarlogonzalez')
              img.img-responsive.img-circle(src='https://avatars0.githubusercontent.com/u/7730514?v=3&s=460')
          p#intro1
            | I'm a 
            a(href='https://github.com/Jean13', target='_blank') self-taught
            |  web designer, developer and investor based in New York City.
          p#intro2
            | I'm currently managing an investment partnership and finishing my Finance and Financial Law degree.
          p#intro3
            | I'm also looking for a job in finance or fintech, where I can apply my knowledge and experience in investing, law and programming.
          p#intro4
            | I want to apply my skills to create new systems in the financial sector and improve the way we conduct everyday transactions. An ambitious goal, yes, but life-changing inventions are made by those who have dreams and the determination to realize them.
          p
            b Competencies
          p#cl
            b Computer Languages & Frameworks:
            |  Python, JavaScript, MongoDB, Express.js, Angular.js, Node.js, React.js, jQuery, Agile, Git, HTML5-CSS3.
          p#ek
            b Experience & Knowledge:
            |  American Law, British Law, Cryptography, Distressed Debt Investing, Equities Investing, Foreign Exchange, Project Management, Property Management, Residential Real Estate, Virtual Currencies, Web Design.
          p#lang
            b Languages:
            |  English, Mandarin Chinese, Spanish.
        .text-center
          a(name='portfolio')
          h2#evolPort Evolution Portfolio
          p
            | Below you will find some of my recent work.
        hr.intro-divider
        .container-fluid
          .row
            .col-md-4
              h2.text-center 						Free Code Camp					
              a(href='http://www.freecodecamp.com/jean13')
                img.img-responsive(src='http://okunasi.com/wp-content/uploads/crypto.jpgitok9ujy9lp')
              p
                | Exercises and projects built using the MEAN/MERN stack.
            .col-md-4
              h2.text-center Python					
              a(href='https://github.com/Jean13/Basic-Python/commit/879ec67675a8c2bb2dcba35b9fb6a6564024b0a2')
                img.img-responsive(src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Python.svg/480px-Python.svg.png')
              p
                | A text-based mini game written in Python. If you access other code in the repository you will find exercises and other mini games. If you access my other repositories you will find artificial intelligence and Bitcoin code.
            .col-md-4
              h2.text-center 						Blog					
              a(href='https://evolutioncode.wordpress.com/')
                img.img-responsive(src='https://cdn0.iconfinder.com/data/icons/medical-7/512/brain_v3-512.png')
                p
              |         My progress in programming, finance and languages. I also post updated work and thoughts.
          .row
            .col-md-4
              h2.text-center 						Motivational Quote Generator
              a(href='http://codepen.io/Jean13/full/qbOvEe')
                img.img-responsive(src='https://evolutioncode.files.wordpress.com/2016/01/screen-shot-2016-01-20-at-2-09-12-pm.png')
              p
                | A random quote generator with multiple sharing options.
            .col-md-3#javaCalc
              h2.text-center JavaScript Calculator					
              a(href='http://codepen.io/Jean13/full/dGVWvj')
                img.img-responsive(src='https://evolutioncode.files.wordpress.com/2016/01/screen-shot-2016-01-20-at-2-10-06-pm.png')
              p
                | A simple JavaScript calculator.
            .col-md-4#localWeath
              h2.text-center 						Local Weather Application
              a(href='http://codepen.io/Jean13/full/wMPXpb')
                img.img-responsive(src='https://evolutioncode.files.wordpress.com/2016/01/screen-shot-2016-01-20-at-2-10-15-pm.png')
                p
              |         A local weather application with temperatures in Fahrenheit and Celsius, as well as cloudiness, humidity and wind information.

          .jumbotron#downJumbo
            a(name='contact')
            h2.text-center Contact Me
            hr.intro-divider
            .row
              .col-xs-5
                h2.text-center(style='font-size: 25px') E-mail
                #left-contact.well
                  h2.text-center(style='font-size: 20px') jcarlogonz@gmail.com
              .col-xs-6.col-xs-offset-1
                h2.text-center(style='font-size: 25px') Social Media
                #right-contact.well
                  a.btn.btn-block.btn-social.btn-linkedin(href='https://www.linkedin.com/in/jcarlogonzalez', role='button')
                    span.fa.fa-linkedin
                    | LinkedIn
                  a.btn.btn-block.btn-social.btn-github(href='https://github.com/Jean13', role='button')
                    span.fa.fa-github
                    | GitHub
                  a.btn.btn-block.btn-danger.btn-social(href='http://www.freecodecamp.com/jean13', role='button')
                    span.fa.fa-fire
                    | Free Code Camp
        footer
          .container
            .row
              .col-md-12
                ul.list-inline
                  li
                    a(href='#home') Home
                  li.footer-menu-divider •
                  li
                    a(href='#about') About
                  li.footer-menu-divider •
                  li
                    a(href='#portfolio') Portfolio
                  li.footer-menu-divider •
                  li
                    a(href='https://evolutioncode.wordpress.com/') Blog
                  li.footer-menu-divider •
                  li
                    a(href='#contact') Contact
                p.copyright.text-muted.small Copyright © Jean C. González 2015. All Rights Reserved.

Personal Portfolio Webpage.markdown

Personal Portfolio Webpage

My first personal portfolio webpage.

A Pen by Jean on CodePen.

License.

style.css

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Merriweather|Righteous|Tinos|Orbitron|Sarala|);

$lightBlack: #292f36;

h1 {
  font-family: 'Merriweather';
}

h2 {
  font-family: 'Orbitron';
  font-size: 26px;
}

h4 {
  font-family: 'Righteous';
}

p {
  font-family: 'Sarala';
}

p#intro1,p#intro2,p#intro3,p#intro4,p#cl,p#ek,p#lang {
  font-size: 19px;
}

.navbar-header {
  font-family: 'Sarala';
}

.navbar-nav {
  font-family: 'Orbitron';
}

.list-inline {
  font-family: 'Orbitron';
  
}

#topSocial {
  margin-bottom: 3%;
}

#evolPort {
  margin-top: 3%;
}

#javaCalc {
  margin-left: 4%;
}

#localWeath {
  margin-left: 3%;
}

#downJumbo {
  margin-top: 3%;
}

.copyright {
  font-family: 'Tinos';
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/css-social-buttons/1.1.1/css/zocial.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />