/
index.html
135 lines (133 loc) · 7.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karl Diab's Portfolio</title>
<meta name="description" content="A collection of Karl Diab's open-source web projects using various languages
and frameworks such as HTML, CSS, JavaScript, Bootstrap, jQuery and AngularJS">
<meta name="keywords" content="HTML,CSS,JavaScript,AngularJS,jQuery,Bootstrap">
<meta name="author" content="Karl Diab">
<script>
$('.carousel').carousel({
interval: 7500
});
</script>
<script src="js/htmlinjections.js"></script>
</head>
<body>
<div id="navigation"></div>
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel slide col-xs-12 bg-info" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/3DPointPlotter"><img src="images/PointsPlotterPreview.png" alt="Points Plotter Preview" /></a>
<div class="infoPanel">
<h3>3D Point Plotter</h3>
<p>A flexible 3D point plotter utility that allows for the easy plotting and viewing of up to
thousands of points. The plotter features a changable axis and point size to accommodate a
dataset of any scale.</p>
<strong>This project uses:</strong>
<ul>
<li><span>three.js</span></li>
<li><span>JavaScript</span></li>
<li><span>Bootstrap</span></li>
<li><span>HTML</span></li>
</ul>
</div>
</div>
<div class="item">
<a href="/BitcoinMiningCalculator"><img src="images/miningcalcpreview.png" alt="Bitcoin Calculator Preview" /></a>
<div class="infoPanel">
<h3>Bitcoin Mining Calculator</h3>
<p>An easy to use utility used to calculate a Bitcoin miner's potential profits in BTC and multiple fiat
currencies. The calculator fetches price and Bitcoin network data from the internet
and only requires the hash rate (speed of mining) from the user. A projected future profit
chart is created dynamically and displayed instantly.</p>
<strong>This project uses:</strong>
<ul>
<li><span>AngularJS</span></li>
<li><span>jQuery</span></li>
<li><span>Chart.js</span></li>
<li><span>JavaScript</span></li>
<li><span>Bootstrap</span></li>
<li><span>HTML</span></li>
</div>
</div>
<div class="item">
<a href="/YoutubeAlarmClock"><img src="images/alarmclockpreview.png" alt="YouTube Alarm Clock Preview" /></a>
<div class="infoPanel">
<h3>Youtube Alarm Clock</h3>
<p>A utility that redirects to a Youtube video (or any other website) at
a specified time.
</p>
<strong>This project uses:</strong>
<ul>
<li><span>jQuery</span></li>
<li><span>JavaScript</span></li>
</ul>
</div>
</div>
<div class="item">
<a href="/JS3DRenderEngine"><img src="images/3DRendererPreview.png" alt="3D Renderer Preview" /></a>
<div class="infoPanel">
<h3>Pure JavaScript 3D Engine</h3>
<p>A very simple engine that builds 3D objects and displays them from a variable vantage point.
Built entirely in JavaScript with no additional libraries. The purpose of this project
was to better understand the mechanics of more advanced graphics libraries.</p>
<strong>This project uses:</strong>
<ul>
<li><span>JavaScript</span></li>
<li><span>Bootstrap</span></li>
<li><span>HTML</span></li>
</ul>
</div>
</div>
<div class="item">
<a href="/JavaScriptHouse"><img src="images/JSHousePreview.png" alt="JavaScript House Preview" /></a>
<div class="infoPanel">
<h3>JavaScript House Project</h3>
<p>A simple JavaScript project featuring a house with dynamically generated smoke. This was created to
learn to use the HTML 5 canvas and JavaScript animation techniques.
</p>
<strong>This project uses:</strong>
<ul>
<li><span>JavaScript</span></li>
<li><span>Bootstrap</span></li>
<li><span>HTML</span></li>
</ul>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 footerleft">
</div>
<div class="col-xs-6 footerright">
<a href="https://github.com/karldiab/KarlDiabsWebsite">Source Code</a>
</div>
</div>
</div>
</body>
</html>