-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
188 lines (181 loc) · 9.95 KB
/
Copy pathindex.html
File metadata and controls
188 lines (181 loc) · 9.95 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Benedict Bull">
<meta name="description" content="A demo site for applying to the Founders & Coders winter cohort">
<meta property="og:title" content="Benedict Bull's demo site">
<meta property="og:description" content="A demo site for applying to the Founders & Coders winter cohort">
<title>Benedict Bull's demo site</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="lightbox-gallery.css">
<link rel=icon href=/favicon.png>
<style>
@import url('https://fonts.googleapis.com/css?family=Jura');
@font-face {
font-family: HelveticaNeueLTStd;
src:url("/fonts/HelveticaNeueLTStd.otf");
}
</style>
</head>
<body>
<header>
<div>
<ul>
<li><a href="https://github.com/2xtimes" target="_blank"><img class="nav" src="/images/social/github.png"></a></li>
<li><a href="https://www.freecodecamp.org/fccc0c6fa97-1ee6-476b-8a9c-c9c572b2df83" target="_blank"><img class="nav" src="/images/social/freecodecamp.png"></a></li>
<li><a href="https://www.codewars.com/users/trustfools" target="_blank"><img class="nav" src="/images/social/codewars.png"></a></li>
</ul>
</div>
<div>
<p> Hello world, I am...</p>
<div><h1>Benedict Bull</h1>
<!--<img class="me-pic" src="/images/me.png"></div>-->
<p>Welcome to my Coders & Founders website</p>
</div>
</header>
<main>
<section id="artwork-section">
<p>I used to work at Phonica Records, managing their website, it was mainly CMS management, but I did get my first tastes of coding, well, just some HTML, CSS etc, nothing too fancy (But I liked it).
After that I went to work at Pearson where I also managed a website, working in a Scrum/XP environment. I co-ordinated the small development team we worked with and learnt the basics of Digital Product Management. Here's some work I did there presented via lightbox:
</p>
<div>
<div class="row">
<div class="column">
<img src="/images/ia_ux_sketch_small.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="/images/digital_design_and_ux_work_small.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="/images/digital_design_and_web_management_small.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="/images/ux_ia_development_work_small.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
</div>
<div id="myGallery" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="galleryImage">
<div class="numbertext">1 / 4</div>
<img src="/images/ia_ux_sketch.jpg" style="width:100%">
</div>
<div class="galleryImage">
<div class="numbertext">2 / 4</div>
<img src="/images/digital_design_and_ux_work.jpg" style="width:100%">
</div>
<div class="galleryImage">
<div class="numbertext">3 / 4</div>
<img src="/images/digital_design_and_web_management.jpg" style="width:100%">
</div>
<div class="galleryImage">
<div class="numbertext">4 / 4</div>
<img src="/images/ux_ia_development_work.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption">Some examples of the work I did for Pearson.</p>
</div>
<div class="column">
<img class="thumbnail-image" src="img1.jpg" onclick="currentSlide(1)" alt="IA & UX Brainstorming">
</div>
<div class="column">
<img class="thumbnail-image" src="img2.jpg" onclick="currentSlide(2)" alt="Digital Design & UX work">
</div>
<div class="column">
<img class="thumbnail-image" src="img3.jpg" onclick="currentSlide(3)" alt="Digital Design & Web Management work for Pearson">
</div>
<div class="column">
<img class="thumbnail-image" src="img4.jpg" onclick="currentSlide(4)" alt="UX & IA development work">
</div>
</div>
</div>
</div>
<p>Really I always wanted to be making or building things myself though, so I left to try and learn to be a developer. In my spare time I do the artwork for the record label Unknown To The Unknown, here are some examples that help fill in this javascript gallery:</p>
<div class="gallery">
<img class="images" src="/images/uttu091_contactless_facebookcover.jpg">
<img class="images" src="/images/hotshit042_djclea_facebookcover.jpg">
<img class="images" src="/images/uttu089_photonz_facebookcoverv2.jpg">
<img class="images" src="/images/uttu092_ludwig_facebookcover.jpg">
<img class="images" src="/images/corsica_facebook_retina_withhaus_invert.jpg">
</div>
</section>
<section id="music-section">
<p>I also do some music stuff. Feel free to listen to some here, while you check out my site, the first one is fairly pumping:</p>
<div class="container">
<div class="soundcloud-embed">
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/408031236&color=%23ff7b00&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<p>This one is a bit more chilled</p>
<div class="soundcloud-embed">
<iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2FLostContinent%2Fchapter-i-the-journey%2F" frameborder="0" ></iframe>
</div>
</div>
</section>
<section id="website-section">
<p>What I really want to do now, is code.</p>
</section>
</main>
<footer>
<button type="button" class="block" id="github-profile"><a href="https://github.com/2xtimes" target="_blank">Thanks for checking out my website. My Github profile is here.</a></button>
<button type="button" class="block" id="freecodecamp-profile"><a href="https://www.freecodecamp.org/fccc0c6fa97-1ee6-476b-8a9c-c9c572b2df83" target="_blank">You can find me on Freecodecamp here.</a></button>
<button type="button" class="block" id="codewars-profile"><a href="https://www.codewars.com/users/trustfools" target="_blank">And you can find me on Codewars here.</a></button>
</footer>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("images");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500);
}
</script>
<script>
// Open the Modal
function openModal() {
document.getElementById('myGallery').style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById('myGallery').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("galleryImage");
var dots = document.getElementsByClassName("thumbnail-image");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>