Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@sjengle
sjengle committed Apr 13, 2020
0 parents commit 738ec61
Show file tree
Hide file tree
Showing 4 changed files with 395 additions and 0 deletions.
12 changes: 12 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# README

<https://usf-cs360-spring2020.github.io/template-bulma/>

![Profile Image](profile.png)

**Name:** Your Name
**Email:** <[email protected]>

This is a template website using [Bulma](https://bulma.io/), [FontAwesome](https://origin.fontawesome.com/) for icons, and [Github Pages](). Designed to be modified (including this README file).

*Template based on: <https://github.com/usf-cs360-spring2020/template-bulma>*
Binary file added favicon.ico
Binary file not shown.
383 changes: 383 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,383 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- TODO: Change title -->
<title>Website Template</title>

<!-- Load Bulma from CDN (consider saving it to repository instead) -->
<!-- https://bulma.io/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

<!-- Load Font Awesome 5 (free) icons -->
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

<body>

<!-- Page header -->
<!-- https://bulma.io/documentation/layout/hero/ -->
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<!-- TODO: Change title -->
<h1 class="title">Website Title</h1>
<!-- TODO: Change subtitle -->
<h2 class="subtitle">Website Subtitle</h2>
</div>
</div>
</section>
<!-- End page header -->

<!-- Page navigation -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<!-- TODO: Change link to repository homepage if needed -->
<!-- TODO: Change which navbar-item is-active if needed -->
<a class="navbar-item is-active" href="index.html">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</a>

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="main-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>

<div id="main-menu" class="navbar-menu has-text-weight-medium">
<!-- Left navbar items -->
<div class="navbar-start">
<a class="navbar-item" href="#data" title="Data">
<span class="icon"><i class="fas fa-table"></i></span>
<span>Data</span>
</a>

<!-- TODO: Modify or remove dropdown -->
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Visualizations
</a>

<div class="navbar-dropdown">
<a class="navbar-item">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span>Line Chart</span>
</a>
<a class="navbar-item">
<span class="icon"><i class="fas fa-chart-area"></i></span>
<span>Area Chart</span>
</a>

<hr class="navbar-divider">

<a class="navbar-item">
<span class="icon"><i class="fas fa-chart-bar"></i></span>
<span>Bar Chart</span>
</a>
<a class="navbar-item">
<span class="icon"><i class="fas fa-chart-pie"></i></span>
<span>Pie Chart</span>
</a>
</div>
</div>
</div>

<!-- Right navbar items -->
<div class="navbar-end">
<!-- TODO: Update as needed -->
<a class="navbar-item" href="#about" title="About">
<span class="icon"><i class="fas fa-tasks"></i></span>
<span>Grade</span>
</a>

<a class="navbar-item" href="#about" title="About">
<span class="icon"><i class="fas fa-info-circle"></i></span>
<span>About</span>
</a>
</div>
</div>
</div>
</nav>
<!-- End page navigation -->

<section class="section">
<div class="container">
<!-- Begin page content -->
<div class="content">
<h1 class="title">
<!-- TODO: Change page title -->
Page Title
</h1>
<p class="subtitle">
<!-- TODO: Change page subtitle -->
Page Subtitle
</p>

<p>This would be an excellent place to describe what this page is for, what to find in different sections, describe any motivation or theme behind your visualizations, and so on.</p>

<p>You should not use this template unless you intend to customize it. Make it your own. Keep in mind this simple template is over 300 lines! You can see other examples of websites using Bulma at their showcase: <a href="https://bulma.io/expo/">bulma.io/expo/</a>.</p>

<h2 id="data">Data</h2>

<p>Include some detailed information about the dataset here. You should <a href="#">add a link</a> to the original dataset. You might also want to quote the license:</p>

<blockquote>
<p>
"This data is made available under the Public Domain Dedication and License v1.0 whose full text can be found at: <a href="http://www.opendatacommons.org/licenses/pddl/1.0/">www.opendatacommons.org/licenses/pddl/1.0/</a>"
</p>
<cite>Put a citation here, possibly link to the dataset license information directly.</cite>
</blockquote>

<p>In addition to including a link to the source and license, you should describe the data. You might want a list of some sort to enumerate the different types of columns:</p>

<ol>
<li><strong>Column Name:</strong> Give a description of the column, including its type and possible range of values.</li>

<li><strong>Column Name:</strong> Give a description of the column, including its type and possible range of values.</li>

<li><strong>Column Name:</strong> Give a description of the column, including its type and possible range of values.</li>

<li><strong>Column Name:</strong> Give a description of the column, including its type and possible range of values.</li>
</ol>

<p>This will of course differ depending on the assignment and data.</p>

<h3 id="wrangling">Wrangling</h3>

<p>Perhaps you had to do some data wrangling to the original dataset to prepare it for visualization. This would be a great place to discuss some of that wrangling.

<pre>
You can even put code into these pre blocks.
It will preserve whitespace.
That is helpful for formatted code.
</pre>

<p>You can alternatively embed a Gist if you want. There is an "embed" button on <a href="https://gist.github.com/octocat/6cad326836d38bd3a7ae">the Gist page</a> and results in something like this:</p>

<script src="https://gist.github.com/octocat/6cad326836d38bd3a7ae.js"></script>

<h2 id="visualizations">Visualizations</h2>

<p>Ideally not everything would be on a single page like this example. Instead, you might want to put each section in its own webpage. You would need to carefully replicate the page template (with the header, navbar, and footer) and make the necessary updates. For example, you want the "About" navbar item to be considered active on an "About" web page.</p>

<p>For now this is just a demo. The buttons below do not go anywhere, but can be easily changed to link to different visualization pages.</p>

<p class="buttons">
<a class="button is-large is-success" href="#">
<span class="icon is-medium">
<i class="fas fa-chart-line"></i>
</span>
<span>Line Chart</span>
</a>

<a class="button is-large is-primary" href="#">
<span class="icon is-medium">
<i class="fas fa-chart-area"></i>
</span>
<span>Area Chart</span>
</a>

<a class="button is-large is-info" href="#">
<span class="icon is-medium">
<i class="fas fa-chart-bar"></i>
</span>
<span>Bar Chart</span>
</a>

<a class="button is-large is-link" href="#">
<span class="icon is-medium">
<i class="fas fa-chart-pie"></i>
</span>
<span>Pie Chart</span>
</a>
</p>

<!-- https://github.com/vega/vega-embed#basic-example -->
<p>It is possible to embed some visualizations directly here too. Here is <a href="https://github.com/vega/vega-embed#basic-example">an example</a> using Vega-Lite:</p>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="vis"></div>

<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
vegaEmbed('#vis', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>

<h4>Instructions</h4>

<p>You will likely need to include instructions on how to interpet and use the visualization. In the case above, if you click the three dots <i class="fas fa-ellipsis-h has-text-grey-light "></i> above it will open a menu where you can either save the visualization to a SVG or PNG, or alternatively open it up in the online Vega Editor.</p>

<h4>Discussion</h4>

<p>You may also need other sections, like a discussion section, per-visualization section on data wrangling, and others. Because of the extra content and code visualizations take, it might be worthwhile to break up your pages into one home page and then one page per visualization.</p>

<span class="heading">Acknowledgements</span>

<p>
<a href="#">Link to insiration</a><br/>
<a href="#">Link to StackOverflow snippet</a>
</p>

<p class="is-6">
<em>Thanks to Person Name for their suggestion to do something with the visualization.</em>
</p>

<h2 id="grade">Grade</h2>

<!-- TODO: Remove custom style if no longer needed -->
<style>
table.grades tbody tr td:nth-child(1),
table.grades tbody tr td:nth-child(2) {
text-align: center;
}
</style>

<!-- TODO: Change or remove table -->
<!-- https://bulma.io/documentation/elements/table/ -->
<table class="table is-hoverable is-bordered grades">
<thead>
<tr>
<th>Letter</th>
<th>Done?</th>
<th>Description</th>
</tr>
</thead>

<tbody>
<tr>
<td>D</td>
<td><i class="has-text-success fas fa-check-circle"></i></td>
<td>Discussion of how this grade level was satisfied. Exactly how this section should look will depend on the assignment in question. There is no requirement for formatting in this way. This is just an example of what a table element might look like for this informaiton.</td>
</tr>

<tr>
<td>C</td>
<td><i class="has-text-success fas fa-check-circle"></i></td>
<td>Discussion of how this grade level was satisfied.</td>
</tr>

<tr>
<td>B</td>
<td><i class="has-text-warning far fa-check-circle"></i></td>
<td>Discussion of how this grade level was satisfied.</td>
</tr>

<tr>
<td>A</td>
<td><i class="has-text-danger fas fa-times-circle"></i></td>
<td>Discussion of how this grade level was not satisfied.</td>
</tr>
</tbody>

</table>

<h2 id="about">About</h2>

<!-- Profile box -->
<!-- https://bulma.io/documentation/layout/media-object/ -->
<article class="media">
<!-- TODO: Replace with profile photo -->
<figure class="media-left">
<p class="image is-128x128"><img class="is-rounded" src="profile.png"></p>
</figure>

<div class="media-content">
<div class="content">
<!-- TODO: Replace with contact information -->
<p>
<strong>Full Name</strong><br/>
CS Major, <a href="https://www.usfca.edu/">University of San Francisco</a><br/>
<em>Expected Graduation: 20??</em><br/>
<i class="fas fa-envelope"></i> <a href="mailto:[email protected]">[email protected]</a>
</p>

<!-- TODO: Replace with brief biography -->
<p>
Here is a brief bio about yourself. A good rule of thumb is to include at least one technical tidbit (favorite area or course within computer science), and one fun tidbit (such as loving dogs).
</p>

<!-- TODO: Replace or remove tags -->
<!-- https://bulma.io/documentation/elements/tag/ -->
<div class="heading">Skills</div>

<div class="tags">
<span class="tag">Python</span>
<span class="tag">C</span>
<span class="tag">Java</span>
<span class="tag">JavaScript</span>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">SVG</span>
</div>
</div>
</div>
</article>
<!-- End profile box -->

</div>
<!-- End page content -->
</div>
</section>

<!-- Page footer -->
<!-- https://bulma.io/documentation/layout/footer/ -->
<footer class="footer">
<div class="content has-text-centered is-size-7">
<p>
<a href="#top">
<span class="fas fa-arrow-up"></span>
<span class="has-text-weight-medium">Back to Top</span>
</a>
</p>

<p>
<!-- TODO: Change to link to your Github repository -->
<a href="https://github.com/usf-cs360-spring2020/template-bulma" class="button is-small" style="padding-left: 1em; padding-right: 1em;">
<i class="fab fa-github-alt"></i>&nbsp;<strong>Github</strong>
</a>

<a href="https://fontawesome.com/" class="button is-small" style="padding-left: 1em; padding-right: 1em;">
<i class="fab fa-font-awesome"></i>&nbsp;<strong>FontAwesome</strong>
</a>

<a href="https://bulma.io" class="button is-small">
<img src="https://bulma.io/images/made-with-bulma--semiblack.png" alt="Made with Bulma" width="128" height="24">
</a>
</p>
</div>
</footer>
<!-- End page footer -->

<!-- Mobile menu responsiveness -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
<!-- End mobile menu responsiveness -->
</body>

</html>
Binary file added profile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 738ec61

Please sign in to comment.