-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpersonal.html
196 lines (177 loc) · 9.94 KB
/
personal.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Personal work</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="content">
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function () {
$("#nav-placeholder").load("navbar.html");
});
</script>
<!--end of Navigation bar-->
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Personal</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active">Personal</li>
</ol>
<div class="row">
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://youtu.be/_xlaHZkwqII"><img class="card-img-top"
src="https://jcass149.github.io/IMAGES/RubikCube.jpg" alt=""></a>
<div class="card-body">
<h4 class="card-title"><a href="https://youtu.be/_xlaHZkwqII">Rubik's Cube</a></h4>
<p class="card-text">Learning at a young age how a seemingly infinite number of possible
cube
arrangements (43,252,003,274,489,856,000 to be exact) could be solved, consistently,
through
applying multiple simple algorithms blew my mind- and still does to this day!</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="https://jcass149.github.io/IMAGES/football2.jpg"
alt=""></a>
<div class="card-body">
<h4 class="card-title"><a href="#">Football enthusiast</a></h4>
<p class="card-text">I have always had a strong passion for "The Beautiful Game"; playing,
coaching, refereeing, spectating and running a 150+ member football club as president.
Though my true admiration for the game comes from seeing the positive effect it can have
on
communities, families and individuals of any age.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="https://jcass149.github.io/IMAGES/TT.png" alt=""></a>
<div class="card-body">
<h4 class="card-title"><a href="#">Table tennis player</a></h4>
<p class="card-text">Though football is may main sport, I have also been involved in the
creation (and league domination) of a 6-man table-tennis team. Venturing into a new
sport
has been a great opportunity to learn some new skills, picking up some invaluable
memories
on the way.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://youtu.be/Qzq_bYFW5to"><img class="card-img-top"
src="https://jcass149.github.io/IMAGES/Guitar.png" alt=""></a>
<div class="card-body">
<h4 class="card-title"><a href="https://youtu.be/Qzq_bYFW5to">Self-taught guitar player</a>
</h4>
<p class="card-text">Though definitely not the greatest guitarist, I pride myself on my
ability
to approach personal set challenges and my drive to be better than my former self. Click
the
link to listen to a short piece I created.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://youtu.be/oMqnPivy9Tc"><img class="card-img-top"
src="https://jcass149.github.io/IMAGES/RubikCube2.jpg" alt=""></a>
<div class="card-body">
<h4 class="card-title"><a href="https://youtu.be/oMqnPivy9Tc">Irregular Rubik's Cube</a>
</h4>
<p class="card-text">Having learnt the algorithms for the original Rubik's cube many years
ago,
i recently set myself a challenge of applying these skills to a new more complex
problem.
With time and practice, the solution clicked into place.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active"
style="background-image: url('https://jcass149.github.io/IMAGES/northvssouth.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item"
style="background-image: url('https://jcass149.github.io/IMAGES/Bungee.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item"
style="background-image: url('https://jcass149.github.io/IMAGES/Boatrace.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-body">
<h4 class="card-title"><a href="#">Charity work</a></h4>
<p class="card-text">I believe that no matter how busy our lives may get, we always have
time to
give something back. As well as taking part in many charity events, I also run an annual
charity football match in Durham. If you'd like to learn more, please <a
href="https://jcass149.github.io/contact.html">get in touch</a>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!--Footer-->
<div id="footer-placeholder">
</div>
<script>
$(function () {
$("#footer-placeholder").load("footer.html");
});
</script>
<!--end of Footer-->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>