Personal portfolio website created with bootstrap.
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.

138 lines
5.5 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Custom styling</title>
  5. <script src="./dist/vis.js"></script>
  6. <link href="./dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  7. <style type="text/css">
  8. body {
  9. font-family: purisa, 'comic sans', cursive;
  10. }
  11. .vis-timeline {
  12. border: 2px solid blue;
  13. font-family: purisa, 'comic sans', cursive;
  14. font-size: 12pt;
  15. background: #E8E8E8;
  16. }
  17. .vis-item {
  18. border-color: #0B002B;
  19. background-color: #88BAFF;
  20. font-size: 15pt;
  21. color: black;
  22. box-shadow: 5px 5px 20px rgba(47,27,0, 0.5);
  23. }
  24. .vis-item,
  25. .vis-item.vis-line {
  26. border-width: 3px;
  27. }
  28. .vis-item.vis-dot {
  29. border-width: 10px;
  30. border-radius: 10px;
  31. }
  32. .vis-item.vis-selected {
  33. border-color: #2C3E50;
  34. background-color: #498FBE;
  35. }
  36. .vis-time-axis .vis-text {
  37. color: #0B002B;
  38. padding-top: 10px;
  39. padding-left: 10px;
  40. }
  41. .vis-time-axis .vis-text.vis-major {
  42. font-weight: bold;
  43. }
  44. .vis-time-axis .vis-grid.vis-minor {
  45. border-width: 2px;
  46. border-color: #88BAFF;
  47. }
  48. .vis-labelset .vis-label
  49. {
  50. color: black;
  51. }
  52. .vis-time-axis .vis-grid.vis-major {
  53. border-width: 2px;
  54. border-color: #0B002B;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <p>
  60. The style of the Timeline can be fully customized via CSS:
  61. </p>
  62. <div id="visualization"></div>
  63. <script type="text/javascript">
  64. var container = document.getElementById('visualization');
  65. var groups = new vis.DataSet([
  66. {id: 0, content: 'Education', value: 1},
  67. {id: 1, content: 'Work Experience', value: 2},
  68. {id: 2, content: 'Major Projects', value: 3},
  69. {id: 3, content: 'Blog Posts', value: 4}
  70. ]);
  71. // note that months are zero-based in the JavaScript Date object
  72. var items = new vis.DataSet([
  73. //education
  74. {id: 0, group: 0, start: new Date(2013,7,1), end: new Date(2017,5,15), content: 'High School'},
  75. {id: 1, group: 0, start: new Date(2017,7,1), end: new Date(2021,4,15), content: 'RIT: Computer Science'},
  76. //work experience
  77. {id: 2, group: 1, start: new Date(2016,5,1), end: new Date(2017,0,1), content: 'Hoffends App Developer'},
  78. {id: 3, group: 1, start: new Date(2017,0,1), end: new Date(2018,0,1), content: 'Pioneer App Developer and Maltster'},
  79. {id: 4, group: 1, start: new Date(2018,4,1), end: new Date(2018,7,1), content: 'Co Op ISE Research Assistant'},
  80. {id: 5, group: 1, start: new Date(2019,0,1), end: new Date(2019,7,1), content: 'Co Op ISE Research Assistant'},
  81. {id: 6, group: 1, start: new Date(2015,5,1), end: new Date(2015,6,1), content: 'East Side West Side Head Camp Counselor'},
  82. {id: 7, group: 1, start: new Date(2018,2,1), end: new Date(2019,0,1), content: 'IT Support Specialist'},
  83. {id: 8, group: 1, start: new Date(2019,7,1), end: new Date(2020,0,1), content: 'Teachers Assistant'},
  84. {id: 9, group: 1, start: new Date(2018,7,1), end: new Date(2019,0,1), content: 'Note Taker'},
  85. //projects
  86. {group: 2, start: new Date(2016,2,0,23,0,0), content: '<div>Panda Quotes</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  87. {group: 2, start: new Date(2016,5,0,23,0,0), content: '<div>Tanks Game</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  88. {group: 2, start: new Date(2017,1,0,23,0,0), content: '<div>Musical Floppy Drives</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  89. {group: 2, start: new Date(2017,5,0,23,0,0), content: '<div>Club Panda</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  90. {group: 2, start: new Date(2017,9,0,23,0,0), content: '<div>Hoffends</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  91. {group: 2, start: new Date(2017,11,0,23,0,0), content: '<div>Tiger OS</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  92. {group: 2, start: new Date(2018,0,0,23,0,0), content: '<div>What the Trend</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  93. {group: 2, start: new Date(2018,2,0,23,0,0), content: '<div>Bash Manager</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  94. {group: 2, start: new Date(2018,0,3,23,0,0), end: new Date(2019,0,1), content: '<div>Node JS Blog</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  95. {group: 2, start: new Date(2018,7,0,23,0,0), content: '<div>Steam Friend\'s Graph</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'},
  96. ]);
  97. var options = {
  98. // option groupOrder can be a property name or a sort function
  99. // the sort function must compare two groups and return a value
  100. // > 0 when a > b
  101. // < 0 when a < b
  102. // 0 when a == b
  103. groupOrder: function (a, b) {
  104. return a.value - b.value;
  105. },
  106. margin: {
  107. item: 20,
  108. axis: 40
  109. }
  110. };
  111. var timeline = new vis.Timeline(container);
  112. timeline.setOptions(options);
  113. timeline.setGroups(groups);
  114. timeline.setItems(items);
  115. </script>
  116. </body>
  117. </html>