jrtechs
/
jrtechs-github-graphs
mirror of https://github.com/jrtechs/github-graphs.git
1
0
Fork 0
Code Issues 0 Releases 1 Wiki Activity
Browse Source

Redesign about page

pull/4/head
Sebastian Gutierrez 4 years ago
parent
5dc958c2f2
commit
ab063c6062
8 changed files with 85 additions and 149 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -45
      public/about.css
  2. +82
    -104
      public/about.html
  3. BIN
      public/img/email.png
  4. +1
    -0
      public/img/email.svg
  5. +1
    -0
      public/img/github-circle.svg
  6. BIN
      public/img/github.png
  7. +1
    -0
      public/img/linkedin-box.svg
  8. BIN
      public/img/linkedin.png

+ 0
- 45
public/about.css View File

@ -1,45 +0,0 @@
#content {
top: 120px;
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
#content-title {
position: relative;
top: 20%;
height: 80px;
background-color: rgb(208, 208, 208);
border-radius: 20px 20px 0px 0px
}
#content-body {
position: relative;
background-color: rgb(242, 242, 242);
border-radius: 0px 0px 20px 20px;
}
.avatar {
border-radius: 10px 10px 10px 10px !important;
top: 10px;
position: relative;
width: 70%;
}
.links {
padding: 10px;
}
.links a {
text-decoration: none;
}
.link-ico {
width: 40px;
}
@media (max-width: 767px) {
#content-title {
height: 40px;
}
}

+ 82
- 104
public/about.html View File

@ -8,7 +8,15 @@
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./about.css" />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
@ -31,118 +39,88 @@
</div>
</nav>
<div>
<div id="content" class="container">
<div id="content-title">
<h1 class="big-title text-center">What is this?</h1>
</div>
<div id="content-body" class="container">
<p style="padding: 10px;">
This is an interactive website which allows you to make various graphs of information from
the GitHub network. Currently the site generates three types of graphs-- the most popular and entertaining
of which is the friends graph. The friends graph helps you visualize clusters of friends/collaborators on GitHub.
This can be used to spot clusters within organizations and schools.
</p>
<p style="padding: 10px;">
This is an open source project, all the source code can be found on GitHub.
New collaborators are always welcomed; look at our GitHub repository for contributing guidelines.
</p>
</div>
<div id="content-title">
<h1 class="big-title text-center">Why did you make this?</h1>
<div class="main">
<div class="container">
<div class="row py-5">
<div class="col-md-6 offset-md-3 text-center text-white">
<h1 class="font-weight-bold">What is this?</h1>
<p>This is an interactive website which allows you to make various graphs of information from
the GitHub network. Currently the site generates three types of graphs-- the most popular and entertaining of which is the friends graph. The friends graph helps you visualize clusters of friends/collaborators on GitHub.This can be used to spot clusters within organizations and schools.</p>
<p>This is an open source project, all the source code can be found on GitHub. New collaborators are always welcomed; look at our GitHub repository for contributing guidelines.</p>
</div>
</div>
<div id="content-body" class="container">
<p style="padding: 10px;">
This project was completed in 24 hours for participation in <a class="plink" href="https://brickhack.io/">BrickHack V</a> at the Rochester Institute of Technology.
We hope that this project will make people more interested in learning about big data analytics.
The visual aspect of this website makes learning about topics such as clustering and graph databases more intuitive.
</p>
<div class="row py-5">
<div class="col-md-6 offset-md-3 text-center">
<h2 class="font-weight-bold">Why did you make this?</h2>
<p>This project was completed in 24 hours for participation in <a class="plink" href="https://brickhack.io/">BrickHack V</a> at the Rochester Institute of Technology. We hope that this project will make people more interested in learning about big data analytics. The visual aspect of this website makes learning about topics such as clustering and graph databases more intuitive.</p>
</div>
</div>
<div id="content-title" style="border-radius: 20px;">
<h1 class="big-title text-center">Developers</h1>
</div>
<div class="container">
<div class="row">
<div class="col">
<h2 class="h1 font-weight-bold text-center">Developers</h2>
</div>
</div>
<div class="card-deck">
<div class="card rounder">
<img class="avatar mx-auto d-block" src="https://avatars0.githubusercontent.com/u/13894625?s=400&v=4" />
<div class="card-header text-center m-title">
Jeff
</div>
<div class="card-body">
<p>
Managed a majority of the work with the backend, pulling data from GitHub and generating the graphs with visJS.
</p>
</div>
<div class="links row text-center">
<div class="col">
<a href="https://github.com/jrtechs">
<img class="link-ico" src="./img/github.png" />
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/jrtechs/">
<img class="link-ico" src="./img/linkedin.png" />
</a>
</div>
<div class="col">
<a href="mailto:jeffery@jrtechs.net">
<img class="link-ico" src="./img/email.png" />
</a>
<div class="row py-4">
<div class="col-md-4">
<div class="card">
<img class="card-img" src="https://avatars0.githubusercontent.com/u/13894625?s=400&v=4" alt="Jeff">
<div class="card-body">
<h3 class="card-title">Jeff</h3>
<p>Managed a majority of the work with the backend, pulling data from GitHub and generating the graphs with visJS.</p>
<div class="d-flex text-decoration-none">
<a class="mr-3" href="https://github.com/jrtechs">
<img src="img/github-circle.svg" alt="">
</a>
<a class="mr-3" href="https://www.linkedin.com/in/jrtechs/">
<img src="img/linkedin-box.svg" alt="">
</a>
<a href="mailto:jeffery@jrtechs.net">
<img src="img/email.svg" alt="">
</a>
</div>
</div>
</div>
</div>
<div class="card rounder">
<img class="avatar mx-auto d-block" src="https://avatars0.githubusercontent.com/u/32306409?s=400&v=4" />
<div class="card-header text-center m-title">
Bryce
</div>
<div class="card-body">
<p>
Worked on pulling API data from GitHub to create the mini-profile display and some graph work.
</p>
</div>
<div class="links row text-center">
<div class="col">
<a href="https://github.com/theshmurph">
<img class="link-ico" src="./img/github.png" />
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/theshmurph">
<img class="link-ico" src="./img/linkedin.png" />
</a>
</div>
<div class="col">
<a href="mailto:brshmurphy@gmail.com">
<img class="link-ico" src="./img/email.png" />
</a>
<div class="col-md-4">
<div class="card">
<img class="card-img" src="https://avatars0.githubusercontent.com/u/32306409?s=400&v=4" alt="Bryce">
<div class="card-body">
<h3 class="card-title">Bryce</h3>
<p>Worked on pulling API data from GitHub to create the mini-profile display and some graph work.</p>
<div class="d-flex text-decoration-none">
<a class="mr-3" href="https://github.com/theshmurph">
<img src="img/github-circle.svg" alt="">
</a>
<a class="mr-3" href="https://www.linkedin.com/in/theshmurph">
<img src="img/linkedin-box.svg" alt="">
</a>
<a href="mailto:brshmurphy@gmail.com">
<img src="img/email.svg" alt="">
</a>
</div>
</div>
</div>
</div>
<div class="card rounder">
<img class="avatar mx-auto d-block" src="https://avatars3.githubusercontent.com/u/32624140?s=400&v=4" />
<div class="card-header text-center m-title">
Alex
</div>
<div class="card-body">
<p>
Worked on the front-end design of the website, responsible for a majority of the html and css elements.
</p>
</div>
<div class="links row text-center">
<div class="col">
<a href="https://github.com/CetaceanNation">
<img class="link-ico" src="./img/github.png" />
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/a-noel/">
<img class="link-ico" src="./img/linkedin.png" />
</a>
</div>
<div class="col">
<a href="mailto:axn5966@rit.edu">
<img class="link-ico" src="./img/email.png" />
</a>
<div class="col-md-4">
<div class="card">
<img class="card-img" src="https://avatars3.githubusercontent.com/u/32624140?s=400&v=4" alt="Alex">
<div class="card-body">
<h3 class="card-title">Alex</h3>
<p>Worked on the front-end design of the website, responsible for a majority of the html and css elements.</p>
<div class="d-flex text-decoration-none">
<a class="mr-3" href="https://github.com/CetaceanNation">
<img src="img/github-circle.svg" alt="">
</a>
<a class="mr-3" href="https://www.linkedin.com/in/a-noel/">
<img src="img/linkedin-box.svg" alt="">
</a>
<a href="mailto:axn5966@rit.edu">
<img src="img/email.svg" alt="">
</a>
</div>
</div>
</div>
</div>

BIN
public/img/email.png View File

Before After
Width: 512  |  Height: 512  |  Size: 6.9 KiB

+ 1
- 0
public/img/email.svg View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="#2b3137" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>

+ 1
- 0
public/img/github-circle.svg View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#2b3137"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>

BIN
public/img/github.png View File

Before After
Width: 512  |  Height: 512  |  Size: 8.4 KiB

+ 1
- 0
public/img/linkedin-box.svg View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#2b3137"><path d="M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z" /></svg>

BIN
public/img/linkedin.png View File

Before After
Width: 512  |  Height: 512  |  Size: 8.6 KiB

Write Preview
Loading…
Cancel
Save