Ella's Portfolio

ella-s-portfolio.markdown

Ella's Portfolio

A Pen by Ella Baron on CodePen.

License.

index.html

<nav class="navbar navbar-default navbar-fixed-top topnav">
  <div class="container-fluid topnav">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-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>
      <a class="navbar-brand topnav" href="#contact">Ella Baron</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li>
        <a href="#portfolio">Portfolio<span class="caret"></span></a>
        <ul class="dropdown-menu topnav">
          <li>
            <a href="#frontend">Front End Development<span class="caret"></span></a>
            <ul class="dropdown-menu topnav">
              <li><a href="#basic">Basic Projects</a></li>
              <li><a href="#intermediate">Intermediate Projects</a></li>
              <li><a href="#advanced">Advanced Projects</a></li>
            </ul>
          </li>
          <li>
            <a href="#visualization">Data Visualization<span class="caret"></span></a>
            <ul class="dropdown-menu topnav">
              <li><a href="#react">React Projects</a></li>
              <li><a href="#datavisualization">Data Visualization Projects</a></li>
            </ul>
          </li>
          <li>
            <a href="#backend">Back End Development<span class="caret"></span></a>
            <ul class="dropdown-menu topnav">
              <li><a href="#api">API Projects</a></li>
              <li><a href="#dynamicweb">Dynamic Web Application Projects</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li><a href="#nonprofit">Nonprofit Projects</a></li>
        </ul>
      </li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
  </div>
</nav>

<div class="container-fluid section text-center">
  <div class="row">
    <div class="col-xs-12">
      <div class="well">
        <h1 id="home">Ella Baron Portfolio Page</h1>
        <h3>Exercise project for FreeCodeCamp</h3>
        <hr class="inside-portfolio">
        <ul class="list-inline">
          <!-- li>
            <a href="https://twitter.com/EllaCodeCamp" target="_blank" class="btn btn-default btn-lg">
              <i class="fa fa-twitter fa-fw"></i>
              <span class="network-name">Twitter</span>
            </a>
          </li -->
          <li>
            <a href="https://github.com/ellacodecamp" target="_blank" class="btn btn-default btn-lg ">
              <i class="fa fa-github fa-fw"></i>
              <span class="network-name">Github</span>
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/in/ellabaron" target="_blank" class="btn btn-default btn-lg">
              <i class="fa fa-linkedin fa-fw"></i>
              <span class="network-name">Linkedin</span>
            </a>
          </li>
          <li>
            <a href="https://www.freecodecamp.com/ellacodecamp" target="_blank" class="btn btn-default btn-lg">
              <i class="fa fa-fire fa-fw"></i>
              <span class="network-name">freeCodeCamp</span>
            </a>
          </li>
        </ul>
      </div> <!-- well -->
    </div> <!-- col-xs-12 -->
  </div> <!-- row -->
</div> <!-- container-fluid -->
<hr>
<div class="container-fluid section">
  <div class="row">
    <div class="col-xs-9">
      <div class="well">
        <h1 id="about">About me</h1>
        </br>
        <p class="lead">
          Hi, I'm a software developer learning frontend web development. My primary area of expertise is mostly in backend development. The languages I am most comfortable using are C/C++. Trying out web development is new and challenging for me.</br></br>
          <b>Core Competences:</b> backend development</br>
          <b>Languages:</b> C/C++ - proficient, Javascript, Python, Perl, shell script - moderately proficient</br>
          <b>Learning:</b> CCS3, Bootstrap3, JQuery
        </p>
      </div> <!-- well -->
    </div> <!-- col-xs-9 -->
  </div> <!-- row -->
</div> <!-- container-fluid -->
<hr>
<div class="container-fluid section text-center">
  <div class="row">
    <div class="col-xs-12">
      <div class="well">
        <h1 id="portfolio">Portfolio</h1>
        <br>
        <p>
          List of portfolio projects. Finished projects show website. The rest are placeholders.
        </p>
        <hr class="inside-portfolio">
        <h2 id="frontend">Front End Development</h2>
        <hr class="inside-portfolio">
        <h3 id="basic">Basic Projects</h3>
        <hr class="inside-portfolio">
        <h3 id="intermediate">Intermediate Projects</h3>
        <hr class="inside-portfolio">
        <h3 id="advanced">Advanced</h3>
        <hr class="inside-portfolio">
        <h2 id="visualization">Data Visualization</h2>
        <hr class="inside-portfolio">
        <h3 id="react">React Projects</h3>
        <hr class="inside-portfolio">
        <h3 id="datavisualization">Data Visualization Projects</h3>
        <hr class="inside-portfolio">
        <h2 id="backend">Back End Development</h2>
        <hr class="inside-portfolio">
        <h3 id="api">API Projects</h3>
        <hr class="inside-portfolio">
        <h3 id="dynamicweb">Dynamic Web Application Projects</h3>
        <hr class="inside-portfolio">
        <hr class="inside-portfolio">
        <h3 id="nonprofit">Nonprofit Projects</h3>
      </div> <!-- well -->
    </div> <!-- col-xs-12 -->
  </div> <!-- row -->
</div> <!-- container-fluid -->
<hr>
<div class="container-fluid section text-center">
  <div class="row">
    <div class="col-xs-12">
      <div class="well">
        <h1 id="contact">Contact</h1>
        <hr class="inside-portfolio">
        </br>
        <p class="lead">
          My email address: ellabaron@pobox.com
        </p>
      </div> <!-- well -->
    </div> <!-- col-xs-9 -->
  </div> <!-- row -->
</div> <!-- container-fluid -->
<!-- hr -->
<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <ul class="list-inline">
          <li>
            <a href="#">Home</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#about">About</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#portfolio">Portfolio</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

script.js

$(document).ready(function() {
   $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
  
  var codepen_id = Object.freeze({
    "TITLE": 0,
    "PEN_ID": 1
  });
  
  var codepen_projects = {
    "basic": [
      ["Tribute", "KVYBWj"]
    ],
    "intermediate": [
      ["Random Quote Machine", "qbpqBa"],
      ["Local Weather", "zrQNvY"],
      ["Wikipedia Viewer", "JXPpqm"],
      ["TwitchTV JSON API", "QNwvVW"]
    ],
    "advanced": [
      ["JavaScript Calculator", "jWYQvB"],
      ["Pomodoro Clock", "jWxyNd"],
      ["Tic Tac Toe Game", "qZOVNX"],
      ["Simon Game", "pyNjdK"]
    ],
    "react": [
      ["Markdown Previewer", "RamaQM"],
      ["Camper Leaderboard", "GqgNNK"],
      ["Recepe Box", "YWyqgg"],
      ["The Game of Life", "XKdvqO"],
      ["Roguelike Dungeon Crawler Game", "Wxqjaw"]
    ],
    "datavisualization": [
      ["Visualize Data with a Bar Chart", "GjmrXE"],
      ["Visualize Data with a Scatterplot Graph", "bwRzLW"],
      ["Visualize Data with a Heat Map", "xEXLNX"],
      ["Show Relationship with a Force Directed Graph", "pEdXJw"],
      ["Map Data Across the Globe", "wzjKgb"]
    ]
  };
  
  function createProjectItem(site_title, link_site, iframe_site, github_site) {
    var project = $("<div class=\"single-project\"></div>");
    var iframe = $("<div class=\"project-iframe\"></div>");
    var overlay = $("<div class=\"site-overlay\"></div>");
    var data = $("<div class=\"project-data\"></div>");
    var title = $("<h4 class=\"project-title\"></h4>");
    if (link_site != "") {
      var link = $("<a href=\"" + link_site + "\" target=\"_blank\" class=\"project-link\"></a>");
      var site = $("<iframe title=\"" + site_title + "\" src=\"" + iframe_site + "\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin\"></iframe>");
      iframe.append(link);
      iframe.append(site);
      if (github_site != "") {
        var github_title = $("<h4 class=\"project-title\"></h4>");
        github_title.html("<a href=\"" + github_site + "\" target=\"_blank\">GitHub</a>");
        data.append(github_title);
      }
      title.html("<a href=\"" + link_site + "\" target=\"_blank\">" + site_title + "</a>");
    } else {
      title.html(site_title);
    }
    data.prepend(title);
    iframe.append(overlay);
    project.append(iframe);
    project.append(data);
    return project;
  }
  
  function createPenGrid(key) {
    var grid = $("<div class=\"project-grid\"></div>");
    for (var item in codepen_projects[key]) {
      var project_item = codepen_projects[key][item];
      var link_site = "";
      var iframe_site = "";
      if (project_item[codepen_id.PEN_ID] != "") {
        link_site = "https://codepen.io/ellacodecamp/pen/" + project_item[codepen_id.PEN_ID];
        iframe_site = "https://s.codepen.io/ellacodecamp/fullcpgrid/" + project_item[codepen_id.PEN_ID];
      }
      var project = createProjectItem(project_item[codepen_id.TITLE], link_site, iframe_site, "");
      grid.append(project);
    }
    $("#" + key).after(grid);
  }
  
  for (var key in codepen_projects) {
    if (codepen_projects.hasOwnProperty(key)) {
      createPenGrid(key);
    }
  }

  var cloud9_id = Object.freeze({
    "TITLE": 0,
    "NAME": 1,
    "HEROKU_PATH": 2
  });

  var cloud9_projects = {
    "api": [
      ["Timestamp Microservice", "timestamp", ""],
      ["Request Header Parser Microservice", "header-parser", "api/whoami"],
      ["URL Shortener Microservice", "url-shortener", ""],
      ["Image Search Abstraction Layer", "image-search", "api/latest/imagesearch/"],
      ["File Metadata Microservice", "file-metadata", ""],
    ],
    "dynamicweb": [
      ["Voting App", "", ""],
      ["Nightlife Coordination App", "", ""],
      ["Chart the Stock Market", "", ""],
      ["Manage a Book Trading Club", "", ""],
      ["Pinterest Clone", "", ""]
    ]
  };

  function createCloud9Grid(key) {
    var grid = $("<div class=\"project-grid\"></div>");
    for (var item in cloud9_projects[key]) {
      var project_item = cloud9_projects[key][item];
      var link_site = "";
      var github_site = "";
      if (project_item[cloud9_id.NAME] != "") {
        link_site = "https://" + project_item[cloud9_id.NAME] + "-ellacodecamp.herokuapp.com/";
        if (project_item[cloud9_id.HEROKU_PATH]) {
          link_site += project_item[cloud9_id.HEROKU_PATH];
        }
        github_site = "https://github.com/ellacodecamp/" + project_item[cloud9_id.NAME];
      }
      var project = createProjectItem(
                      project_item[cloud9_id.TITLE],
                      link_site,
                      link_site,
                      github_site);
      grid.append(project);
    }
    $("#" + key).after(grid);
  }
  
  for (var key in cloud9_projects) {
    if (cloud9_projects.hasOwnProperty(key)) {
      createCloud9Grid(key);
    }
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/jquery.smartmenus.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/addons/bootstrap/jquery.smartmenus.bootstrap.min.js"></script>

style.css

body, h1, h2, h3, h4, h5, h6, figcaption, a {
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

body {
  padding-top: 70px;
}

.section {
  padding-top: 20px;
}

.center {
  text-align: center;
}

.topnav {
    font-size: 14px;
    border-bottom: 1px outset rgba(192, 192, 192, 0.5);
    background: rgba(192, 192, 192, 0.9);
    box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
}

.topnav ul.navbar-nav li a {
  background: rgba(28, 28, 28, 0.1);
  color: #4f5d6e;
}

.topnav .navbar-brand {
  background: rgba(28, 28, 28, 0.1);
  color: #4f5d6e;  
}

.topnav ul.navbar-nav li a:hover,
.topnav ul.navbar-nav li a:focus {
  background: rgba(255, 255, 255, 0.5);
  color: #4f5d6e;  
}

.topnav .navbar-brand:hover,
.topnav .navbar-brand:focus {
  background: rgba(255, 255, 255, 0.5);
  color: #4f5d6e;  
}

hr.inside-portfolio {
  border-width: 10px;
  border-color: rgba(200, 200, 200, 0.6);
}

footer {
  background: rgba(192, 192, 192, 0.9);
  padding-top: 15px;
}

footer a {
  color: #4f5d6e;
}

footer a:hover {
  color: #4f5d6e;
}

:target:before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

.project-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}

.single-project {
  width: 24%;
  border: 4px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background-color: rgba(192, 192, 192, 0.9);
  overflow: hidden;
  margin-bottom: 25px;
  position: relative;
}

@media (max-width: 830px) {
  .single-project {
    width: 49%;
  }
}

.project-iframe {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  margin: 0 auto;
  border: 2px solid #4f5d6e;
}

.project-iframe iframe {
  width: 301%;
  height: 301%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  transform: scale(0.33);
  transform-origin: top left;
  transition: opacity 0.4s ease;
  visibility: visible;
  opacity: 1;
  z-index: 0;
}

.project-link {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 0 !important;
  z-index: 2;
}

.project-iframe > .site-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 1;
  z-index: 1;
}

.single-project:hover .project-iframe .site-overlay {
  background: rgba(192, 192, 192, 0.5);
}

.single-project:hover .project-iframe {
  border: 1px solid rgba(0, 0, 0, 0.9);
}

.project-data {
  position: relative;
  font-size: 0.85em;
  white-space: nowrap;
  padding: 8px 10px 4px;
  background: rgba(192, 192, 192, 0.9);
  z-index: 3;  
}

.project-data .project-title {
  color: #4f5d6e;
  font-size: 1.0rem;
  margin: 4px 0 12px 0;
  white-space: pre-line;
}

.project-data a {
  color: #4f5d6e;
  transition: 0.2s;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/addons/bootstrap/jquery.smartmenus.bootstrap.min.css" rel="stylesheet" />