Barron V Brock portfolio

barron-v-brock-portfolio.markdown

Barron V Brock portfolio

A Pen by Barron M Brock on CodePen.

License.

index.html

<div class="container-fluid">
  <!–– my navigation bar ––>
  <nav>
    <ul>
      <li ><a href="#header-text">Home</a></li>
      <li ><a href="#about">About</a></li>
      <li ><a href="#music">Music</a></li>
      <li ><a href="#">Contact</a></li>
    </ul>
  </nav>
  
  <!––my header ––>
  <h2 id="header-text">
    Barron, V, Brock
  </h2>

  <p id="reg-p">
    I have worked in html, css, java script, gml, and java.
  </p> 
  
  <h3 id="projects">
    These are some of the projects I have done.
  </h3> 
    
  <!–– some of my projects and pictures––>
  
  <div class="pic-txt">
      <a href="https://github.com/bmansk8/java-game" target="_blank">
        <img class="project-pictures" src="https://us.123rf.com/450wm/iunewind/iunewind1504/iunewind150400075/39500459-program-basic-code-.jpg?ver=6" alt="java work"> 
        <p class="text-center">my java game repo</p>
      </a>
   </div>
  
   <div class="pic-txt"> 
      <a href="https://github.com/bmansk8/pragmatic" target="_blank">
        <img class="project-pictures" src="https://thumb7.shutterstock.com/display_pic_with_logo/253597/230705539/stock-photo-programming-code-abstract-screen-of-software-developer-computer-script-more-similar-in-my-230705539.jpg" alt="ruby project">
        <p class="text-center">my ruby game repo</p>
      </a>
   </div>
  
   <div class="pic-txt">  
      <a href="https://codepen.io/bmansk14/pen/MVowzL" target="_blank">
        <img class="project-pictures" src="https://www.billboard.com/files/media/john-mayer-aug-2017-billboard-1548.jpg" alt="picture of john mayer">
        <p class="text-center">my tribute page</p>
      </a>
   </div> 

  <!–– the about me section ––>
  <div class="silver-background">
    <h3 id="about" class="h3-sep text-center">
      About me!
    </h3>
  
    <div class="grey-circle-border">
      <p id="about-p">
        I have been coding for 4 years now. I started in gml(aka GameMaker:Studio). Then moved to java for a year. I mostly focused on object oriented programming and some algorithm work as well as orders of operations. I then moved to ruby mine for a brief period of time but never got to familiar with it. I am now currently doing free code camp's full stack development classes in html, css, and javascript. I am also a musician and love playing music. I play in the church band and have played at open mic nights. I also am working on a album so
     <a href="https://soundcloud.com/bmansk14-brock" target="_blank">go check me out</a> on sound cloud! (btw im not one of "THoSe" sound cloud people XD ) 
      </p>
    </div>
  </div>
  
  <!–– embeded music player from soundcloud ––>
  
  <div>
    <h3 class="h3-sep" id="music">This is some of my music</h3>
    <iframe width="500" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/412809531&color=%237c7c7c&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
    
    <iframe width="500" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/412809558&color=%23676764&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
    
    <iframe width="500" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/412809516&color=%23aca8a6&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">              </iframe>
  </div>
  
  <div class="silver-background">
    <h3 class="h3-sep" id="contact">Contact me!</h3>

    <p>Want to get in touch with me? Want to talk about music or coding opportunities? Go ahead! I will respond as soon as I can.</p>
    
    <form action="/send-email">
      <label><input type="radio" name="music-coding" checked>
       Coding</label>
      <label><input type="radio" name="music-coding">
       Music</label>
      <input type="text" placeholder="name" required>
      <input type="text" placeholder="email" required>
      <input type="text" placeholder="phone number" required>
    
      <textarea rows="5" cols="94"
        placeholder="your message" required>
      </textarea>
      
      <button class="btn btn-primary" type="submit">
        <i class="fa fa-paper-plane"></i>Submit</button>
    </form>  
  </div>  
  
  <div class="silver-background">
      <p class="h3-sep text-center">Made by Barron V Brock</p>
  </div>

</div>

script.js

$(document).ready(function() {
    $("#header-text").addClass
    ("text-center h2-margin");
    $("#reg-p").addClass
    ("text-center reg-p-cls");
    $("#projects").addClass
    ("text-center projects-cls");
    $("#about-p").addClass
    ("text-center about-p");
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

body{
  background-color: #D3D3D3;
}

.project-pictures{
    border-color: gray;
    border-width: 2.5px;
    border-style: solid;
    border-radius: 25%;
    width: 400px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.pic-txt{
  display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.h2-margin{
   margin-top: 60px;
   margin-bottom: 20px;
   margin-left: 10px;
}

.reg-p-cls{
  margin-left: 10px;
  font-size: 20px;  
}

.projects-cls{
  margin-top: 60px;
  margin-bottom: 10px;
}

.grey-circle-border{
   border: 3px solid gray;
   padding: 25px;
   border-radius: 50%;
}

.about-p{
   margin-top: 10px;
   margin-left:100px;
   margin-right:100px;
}

.h3-sep{
  margin-top:100px;
}

.silver-background{
  background-color: silver;
}

/* nav is a new thing in html5 for help with nav bars and lets me style only 
this ul/li elemeant */

nav ul{
    list-style-type: none;
    /*list style type dumps the dots */ 
    margin: 0;
    padding: 0;
    /*The overflow property specifies what should happen if content overflows an element's box. */
    overflow: hidden;
    background-color: #C0C0C0;
    position: fixed;
    /*position fixed makes it stay at the spot
      on the screen even if you scroll down 
    */
    top: 0;
    width: 100%;
  
    border: 2px solid #000;
}

nav li{
    border-right: 2px solid #ffffff;
    float: left;
}

nav li a {
    display: block;
    color: black;
    text-align: center;
    /*The CSS padding propertie is used to generate space around an element's content, inside of any defined borders. */
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #A9A9A9;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />