-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (139 loc) · 10.6 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
136
137
138
139
140
141
142
143
144
---
layout: layout.liquid
title: Kenny Cameron - Digital Developer
page-heading: Kenny
css-file: home
homepage: yes
---
{% render "icons" %}
<!-- Image Showcases-->
<section class="showcase" id="showcase">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6 order-lg-2 text-white showcase-img"
style="background-image: url('assets/img/bg-showcase-1.jpg')"
aria-describedby="showcase-1"></div>
<p class="visually-hidden" id="showcase-1">
Photo of me kneeling down next to bright green grass in a garden, there is a wooden fence in the background. I am wearing a white Halo pride short sleeved t-shirt and white ripped jeans, my left arm is exposed showing me Halo glyph tattoos. My hair is the focal point of the photo, being a mixture or bright colors. Orange, Green, Yellow and Pink.
</p>
<div class="col-lg-6 order-lg-1 my-auto showcase-text p-5 p-md-9">
<h2>Web Development</h2>
<p class="fs-6 mt-3">Working in web design for over 20 years and in professional web development for over 10, I found my niche as a prototyper. Operating in between the realms of design and development to make ideas come to life, running quick iterations on design changes and adapting to fluid requirements.</p>
<p class="fs-6 mb-0 mt-1">I've explored a variety of technologies over the years, but nothing compares to the simplicity of HTML, CSS and JavaScript.</p>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 text-white showcase-img"
style="background-image: url('assets/img/bg-showcase-2.jpg')"
aria-describedby="showcase-2"></div>
<p class="visually-hidden" id="showcase-2">
Photograph of the multi-monitor setup I use in my home office, which is largely surrounded with Halo collectibles. Centre top is a large Samsung monitor, below is a Halo Xbox Series X. Either side of the Xbox is a laptop and additional monitor. All screens have a Halo image showing. Top left and right are studio monitor speakers on a shelf along with some Halo collectibles. On the bottom the photo are various Halo mouse mats, a mug, Halo Xbox controller and a midi keyboard and mixing desk.
</p>
<div class="col-lg-6 my-auto showcase-text p-5 p-md-9">
<h2>Community Moderation & Management</h2>
<p class="fs-6 mt-3">Working with communities and helping to build fun and safe environments is passion of mine. I've been moderating and helping to manage communities in a voluntary aspect for over 20 years, working with companies like phpBB and Xbox. It's a challenging role to fill but can be very rewarding.</p>
<p class="fs-6 mb-0 mt-1">Since 2016 I have been a part of the Community Moderation team for Microsoft's First Person Shooter game: Halo. Helping to enforce Xbox and Halo Community Guidelines on forums and live streams, develop and provide guidance for fellow moderators, built various web tools to assist in moderation duties and assist in managing social spaces like Discord.</p>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 order-lg-2 text-white showcase-img"
style="background-image: url('assets/img/bg-showcase-3.jpg')"
aria-describedby="showcase-3"></div>
<p class="visually-hidden" id="showcase-3">
Macro shot of the head and chestplate of the Darkhorse Halo Infinite Master Chief statue.
</p>
<div class="col-lg-6 order-lg-1 my-auto showcase-text p-5 p-md-9">
<h2>Gaming and SME</h2>
<p class="fs-6 mt-3">I'm a gamer, I have been all my life and will be for the rest - from the first time I got my hands on an Atari when I was a kid, to last time I pick up an Xbox controller. My love of gaming and, in particular, the Xbox Community has only grown over the years. </p>
<p class="fs-6 mt-1">Through my hard work and enthusiam on the community side of Halo, I was forunate enough to be invited to programs like Halo's Forerunner Council - a small group of people from a variety of gaming, streaming and community backgrounds who were brought together in secret to provide feedback on Halo Infinite before the game launched. </p>
<p class="fs-6 mb-0 mt-1">An incredible and rewarding experience that provided invaluable insight into the world of game development, experience which I put to good use at every opportunity.</p>
</div>
</div>
</div>
</section>
<!-- Flickr-->
<section class="flickr card-container text-center bg-light py-md-6 py-5" id="photography">
<div class="container">
<h2 class="mb-5">Photography on Flickr</h2>
<p>In my spare time I spend a lot of it taking photographs, capturing little moments in life. I share some of my best on Flickr.</p>
<p>All photography used on this site was taken by me.</p>
<div class="row g-4">
<div class="col-sm-4">
<div class="card">
<a href="https://www.flickr.com/photos/stickerboy/36736682740/in/album-72157661169954813/" title="Tranquility - photo by Kenny Cameron on Flickr" class="flickr-item">
<img src="./assets/img/flickr-1.jpg" class="card-img" alt="Long exposure photo taken in the Portland Japanese Gardens. A view of the pond, waterfall and trees behind it.">
<div class="card-caption d-flex w-100 h-100 align-items-center justify-content-center">
<p class="h3 text-white">Tranquility</p>
</div>
</a>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<a href="https://www.flickr.com/photos/stickerboy/24420913515/in/album-72157661169954813/" title="Gorjuss in the snow - photo by Kenny Cameron on Flickr" class="flickr-item">
<img src="./assets/img/flickr-2.jpg" class="card-img" alt="Shot from behind a woman as she walks through the snow as it falls. She is weating a winter coat and bobble hat, a Gorjuss bag on her shoulder and her left arm is extended out and holding a Gorjust tote style bag in her hand.">
<div class="card-caption d-flex w-100 h-100 align-items-center justify-content-center">
<p class="h3 text-white">Gorjuss</p>
</div>
</a>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<a href="https://www.flickr.com/photos/stickerboy/44523824072/in/datetaken/" title="Waves - photo by Kenny Cameron on Flickr" class="flickr-item">
<img src="./assets/img/flickr-3.jpg" class="card-img" alt="View of waves crashing into a concrete pier on the island of Rhodos, with a backdrop of the ocean. The sky is a light blue, the water at the horizon is a deep blue that gradually gradients through lighter blues and cyans. The view of the pier is straight on and waves reach over 10ft in height, fizzing and splashing.">
<div class="card-caption d-flex w-100 h-100 align-items-center justify-content-center">
<p class="h3 text-white">Waves</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Projects -->
<section class="projects card-container text-center py-md-6 py-5" id="projects">
<div class="container">
<h2 class="mb-5">Web projects</h2>
<p>Some of the personal projects I have worked on.</p>
<div class="row g-4 justify-content-center">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<a href="https://www.kenny.cx/convrtrjs/" class="card h-100">
<h5 class="card-header link-stckr">Convrtr</h5>
<img src="./assets/img/convrtr.png" class="card-img rounded-0" alt="Convrtr home page screenshot">
<div class="card-body">
<p class="card-text text-start">
A simple JavaScript based tool to quickly convert text between different formats.
</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 col-xl-3">
<a href="https://github.com/stickerboy/waypoint-light" class="card h-100">
<h5 class="card-header link-stckr">Waypoint light</h5>
<img src="./assets/img/waypoint.png" class="card-img rounded-0" alt="Halo Waypoint light theme screenshot">
<div class="card-body">
<p class="card-text text-start">
A customised light theme for the official Halo Waypoint forums.
</p>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Call to Action-->
<section class="call-to-action text-white text-center py-md-9 py-7" id="contact">
<div class="container position-relative">
<div class="row justify-content-center">
<div class="col-xl-6">
<h2 class="mb-4"> Ask me for my CV / Resume!</h2>
<div class="col">
<a href="#" class="btn btn-light btn-lg" id="resume">
Send an email
</a>
</div>
</div>
</div>
</div>
</section>