Website for visualizing a persons github network.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

160 lines
7.7 KiB

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <title>GitHub Graphs</title>
  7. <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  8. <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  9. <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">
  10. <link rel="stylesheet" href="./style.css" />
  11. <link rel="stylesheet" href="./about.css" />
  12. </head>
  13. <body>
  14. <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
  15. <div id="header-title">
  16. <a href="./index.html">
  17. <img id="logo" src="./logo.svg" />
  18. </a>
  19. </div>
  20. <div id="navigation">
  21. <ul class="nav">
  22. <li class="nav-item">
  23. <a href="./GraphGenerator.html">
  24. Generate graphs
  25. </a>
  26. </li>
  27. <div class="nav-sep"></div>
  28. <li class="nav-item">
  29. <a href="https://github.com/jrtechs/github-graphs">
  30. View on GitHub
  31. </a>
  32. </li>
  33. <div class="nav-sep"></div>
  34. <li class="nav-item">
  35. <a href="./about.html">
  36. About
  37. </a>
  38. </li>
  39. </ul>
  40. </div>
  41. </div>
  42. <div>
  43. <div id="content" class="container">
  44. <div id="content-title">
  45. <h1 class="big-title text-center">What is this?</h1>
  46. </div>
  47. <div id="content-body" class="container">
  48. <p style="padding: 10px;">
  49. This is an interactive website which allows you to make graphs of the github network.
  50. Currently we have three types of graphs-- the most popular of which is our friends graph.
  51. The friends graphs helps you visualize clusters of friends/collaborators on GitHub.
  52. This can be used to spot clusters within organizations and schools.
  53. </p>
  54. <p style="padding: 10px;">
  55. This is an open source project, all the source code can be found on github.
  56. New collaborators are always welcomed; look at our github repository for contributing guidelines.
  57. </p>
  58. </div>
  59. <div id="content-title">
  60. <h1 class="big-title text-center">Why did you make this?</h1>
  61. </div>
  62. <div id="content-body" class="container">
  63. <p style="padding: 10px;">
  64. 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.
  65. We hope that this project will make people more interested in learning about big data analytics.
  66. The visual aspect of this website makes learning about topics such as clustering and graph databases more intuitive.
  67. </p>
  68. </div>
  69. <div id="content-title" style="border-radius: 20px;">
  70. <h1 class="big-title text-center">Developers</h1>
  71. </div>
  72. <div class="card-deck">
  73. <div class="card rounder">
  74. <img class="avatar mx-auto d-block" src="https://avatars0.githubusercontent.com/u/13894625?s=400&v=4" />
  75. <div class="card-header text-center m-title">
  76. Jeff
  77. </div>
  78. <div class="card-body">
  79. <p>
  80. I did a large chunk of work with the backend pulling data from github and generating the graphs with visJS.
  81. </p>
  82. </div>
  83. <div class="links row text-center">
  84. <div class="col">
  85. <a href="https://github.com/jrtechs">
  86. <img class="link-ico" src="./img/github.png" />
  87. </a>
  88. </div>
  89. <div class="col">
  90. <a href="https://www.linkedin.com/in/jrtechs/">
  91. <img class="link-ico" src="./img/linkedin.png" />
  92. </a>
  93. </div>
  94. <div class="col">
  95. <a href="mailto:jeffery@jrtechs.net">
  96. <img class="link-ico" src="./img/email.png" />
  97. </a>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="card rounder">
  102. <img class="avatar mx-auto d-block" src="https://avatars0.githubusercontent.com/u/32306409?s=400&v=4" />
  103. <div class="card-header text-center m-title">
  104. Bryce
  105. </div>
  106. <div class="card-body">
  107. <p>
  108. Worked on pulling api data from github to create the mini profile display and some graphs.
  109. </p>
  110. </div>
  111. <div class="links row text-center">
  112. <div class="col">
  113. <a href="https://github.com/theshmurph">
  114. <img class="link-ico" src="./img/github.png" />
  115. </a>
  116. </div>
  117. <div class="col">
  118. <a href="https://www.linkedin.com/in/theshmurph">
  119. <img class="link-ico" src="./img/linkedin.png" />
  120. </a>
  121. </div>
  122. <div class="col">
  123. <a href="mailto:brshmurphy@gmail.com">
  124. <img class="link-ico" src="./img/email.png" />
  125. </a>
  126. </div>
  127. </div>
  128. </div>
  129. <div class="card rounder">
  130. <img class="avatar mx-auto d-block" src="https://avatars3.githubusercontent.com/u/32624140?s=400&v=4" />
  131. <div class="card-header text-center m-title">
  132. Alex
  133. </div>
  134. <div class="card-body">
  135. <p>
  136. Worked on the front end design of the website and designed graphic art for this website.
  137. </p>
  138. </div>
  139. <div class="links row text-center">
  140. <div class="col">
  141. <a href="https://github.com/CetaceanNation">
  142. <img class="link-ico" src="./img/github.png" />
  143. </a>
  144. </div>
  145. <div class="col">
  146. <a href="https://www.linkedin.com/in/a-noel/">
  147. <img class="link-ico" src="./img/linkedin.png" />
  148. </a>
  149. </div>
  150. <div class="col">
  151. <a href="mailto:axn5966@rit.edu">
  152. <img class="link-ico" src="./img/email.png" />
  153. </a>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </body>
  161. </html>