Created
August 4, 2022 07:53
-
-
Save frankhn/476ed766f9e7e1d63f9a0f1636c6ae05 to your computer and use it in GitHub Desktop.
Revisions
-
frankhn created this gist
Aug 4, 2022 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,7 @@ Ella's Portfolio ---------------- A [Pen](https://codepen.io/ellacodecamp/pen/PPWBmj) by [Ella Baron](https://codepen.io/ellacodecamp) on [CodePen](https://codepen.io). [License](https://codepen.io/license/pen/PPWBmj). 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,183 @@ <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: [email protected] </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">⋅</li> <li> <a href="#about">About</a> </li> <li class="footer-menu-divider">⋅</li> <li> <a href="#portfolio">Portfolio</a> </li> <li class="footer-menu-divider">⋅</li> <li> <a href="#contact">Contact</a> </li> </ul> </div> </div> </div> </footer> 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,144 @@ $(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); } } }); 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,4 @@ <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> 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,168 @@ 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; } 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,4 @@ <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" />