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.
 
 
 

139 lines
5.5 KiB

<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom styling</title>
<script src="./dist/vis.js"></script>
<link href="./dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family: purisa, 'comic sans', cursive;
}
.vis-timeline {
border: 2px solid blue;
font-family: purisa, 'comic sans', cursive;
font-size: 12pt;
background: #E8E8E8;
}
.vis-item {
border-color: #0B002B;
background-color: #88BAFF;
font-size: 15pt;
color: black;
box-shadow: 5px 5px 20px rgba(47,27,0, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: #2C3E50;
background-color: #498FBE;
}
.vis-time-axis .vis-text {
color: #0B002B;
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: #88BAFF;
}
.vis-labelset .vis-label
{
color: black;
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #0B002B;
}
</style>
</head>
<body>
<p>
The style of the Timeline can be fully customized via CSS:
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var groups = new vis.DataSet([
{id: 0, content: 'Education', value: 1},
{id: 1, content: 'Work Experience', value: 2},
{id: 2, content: 'Major Projects', value: 3},
{id: 3, content: 'Blog Posts', value: 4}
]);
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
//education
{id: 0, group: 0, start: new Date(2013,7,1), end: new Date(2017,5,15), content: 'High School'},
{id: 1, group: 0, start: new Date(2017,7,1), end: new Date(2021,4,15), content: 'RIT: Computer Science'},
//work experience
{id: 2, group: 1, start: new Date(2016,5,1), end: new Date(2017,0,1), content: 'Hoffends App Developer'},
{id: 3, group: 1, start: new Date(2017,0,1), end: new Date(2018,0,1), content: 'Pioneer App Developer and Maltster'},
{id: 4, group: 1, start: new Date(2018,4,1), end: new Date(2018,7,1), content: 'Co Op ISE Research Assistant'},
{id: 5, group: 1, start: new Date(2019,0,1), end: new Date(2019,7,1), content: 'Co Op ISE Research Assistant'},
{id: 6, group: 1, start: new Date(2015,5,1), end: new Date(2015,6,1), content: 'East Side West Side Head Camp Counselor'},
{id: 7, group: 1, start: new Date(2018,2,1), end: new Date(2019,0,1), content: 'IT Support Specialist'},
{id: 8, group: 1, start: new Date(2019,7,1), end: new Date(2020,0,1), content: 'Teachers Assistant'},
{id: 9, group: 1, start: new Date(2018,7,1), end: new Date(2019,0,1), content: 'Note Taker'},
//projects
{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;">'},
{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;">'},
{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;">'},
{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;">'},
{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;">'},
{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;">'},
{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;">'},
{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;">'},
{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;">'},
{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;">'},
]);
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
margin: {
item: 20,
axis: 40
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>