-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·142 lines (138 loc) · 8.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brodie Farrell-Oates</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A tech obsessed guy from the bottom of the world.">
<meta name="author" content="Brodie Farrell-Oates">
<!-- Preview window tags -->
<meta property="og:title" content="Brodie Farrell-Oates">
<meta property="og:description" content="A tech obsessed guy from the bottom of the world.">
<meta property="og:image" content="img/brodie.jpeg">
<meta property="og:url" content="https://brodiefarrell.dev">
<style>
body {
background: linear-gradient(-45deg, #0d012f, #023831, #0d012f, #023831);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body class="bg-dark text-white">
<main>
<div class="px-4 my-5 text-center">
<img class="d-block mx-auto mb-3" src="img/brodie.jpeg" width="200px;" alt="Studio headshot image of Brodie" style="border-radius: 100%;" loading="eager">
<h1 class="fw-bold py-3">Brodie Farrell-Oates</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Why hello there 👋<br> I'm Brodie. I love everything digital. You can find me making websites, software, games and more... if it involves bits - I'm in!</p>
</div>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5 ">
<span><a class="badge bg-dark py-2 px-3 text-decoration-none" href="http://www.linkedin.com/in/brodiefarrell">LinkedIn</a></span>
<span><a class="badge bg-dark py-2 px-3 text-decoration-none" href="https://www.instagram.com/brodiefarrell">Instagram</a></span>
<span><a class="badge bg-dark py-2 px-3 text-decoration-none" href="https://github.com/brodiefarrell">Github</a></span>
<span ><a class="badge bg-dark py-2 px-3 text-decoration-none" href="https://brodiefarrell.itch.io">Itch.io</a></span>
</div>
</div>
<!-- About me -->
<div class="col-12 col-lg-6 px-4 mx-auto">
<hr>
<h2 class="fw-bold py-3 text-center">About me</h2>
<p class="lead mb-4">
I currently work with the Australian Antarctic Division as a full stack web developer.
</p>
<p class="lead mb-4">
I'm also part of the founding team at <a class='link-light' href='https://www.cycleinspect.com'>Cycle Inspect</a>,
leading the development of the public and partner facing digitial assets.
</p>
<p class="lead mb-4">
Before my development life I worked for <a class="link-light" href="http://www.sush.com.au">Sush</a>, maintaining and improving the IT infrastructure as the business grew from 30 to 80+ staff.
</p>
<p class="lead mb-4">
I also founded <a class="link-light" href="http://boundless.agency">Boundless Agency</a> in 2017 as a divergance into artist and event management.
</p><br>
</div>
<div class="col-12 col-lg-6 row px-4 mx-auto">
<hr>
<h2 class="fw-bold py-3 text-center">Previous work</h2>
<!-- Cycle Inspect -->
<div class="card mx-3 bg-dark mb-3 mx-auto px-0 shadow">
<img class="card-img-top" src="img/cycleinspect.png" alt="Screenshot of cycleinspect.com.au">
<div class="card-body px-5">
<h5 class="card-title mt-3">Cycle Inspect</h5>
<p class="card-text">
Wokring as part of the founding team, leading the development of Cycle Inspect's public and partner-facing digital properties.
</p>
<a class='btn btn-outline-light stretched-link my-2' href="https://cycleinspect.com.au">Visit site</a>
</div>
</div>
<!-- AAD -->
<div class="card bg-dark mb-3 mx-auto px-0 shadow">
<img class="card-img-top" src="img/AAD.png" alt="Screenshot of antarctica.gov.au" loading="lazy">
<div class="card-body px-5">
<h5 class="card-title mt-3">Australian Antarctic Program</h5>
<p class="card-text">
Managing both the internal & external web presence of the Australian Antarctic Division. Including developing the intranet used onboard the RSV <em>Nuyina</em> ice breaker vessel.
</p>
<p class="card-text">
Working primarily in HTML, SCSS, JS and PHP through the ProcessWire content management framework.
</p>
<a class='btn btn-outline-light stretched-link my-2' href="https://antarctica.gov.au">Visit site</a>
</div>
</div>
<!-- Huon Bush Retreats -->
<div class="card bg-dark mb-3 mb-5 mx-auto px-0 shadow">
<img class="card-img-top" src="img/huonbush.png" alt="Screenshot of huonbushretreats.com">
<div class="card-body px-5">
<h5 class="card-title mt-3">Huon Bush Retreats</h5>
<p class="card-text">
A great eco-friendly place to stay & experience nature in the Huon Valley. They're located in the beautiful Mount Misery Reserve.
</p>
<p class="'card-text">
The old site was dated, not particularly friendly for mobile devices and had links to 4 (...yes 4!) different booking systems throughout the site.
We stripped it right back to the basics, made it mobile friendly, easy to edit and much faster to load.
</p>
<p class="card-text">
Powered by ProcessWire and written in trusty PHP.
</p>
<a class='btn btn-outline-light stretched-link my-2' href="https://huonbushretreats.com">Visit site</a>
</div>
</div>
<!-- Don't Touch the Laser -->
<div class="card bg-dark mb-3 mb-5 mx-auto px-0 shadow">
<img class="card-img-top" src="img/donttouchlaser.gif" alt="Don't Touch the Laser Gameplay - Animated GIF" loading="lazy">
<div class="card-body px-5">
<h5 class="card-title mt-3">Don't Touch the Laser</h5>
<p class="card-text">Battle waves of enemies with your laser stuck on, just try not to hit yourself.</p>
<p class="card-text">A WebGL game built in Unity for a UTAS project.</p>
<a class='btn btn-outline-light stretched-link my-2' href="https://brodiefarrell.itch.io/please-dont-touch-the-laser">Play on itch.io</a>
</div>
</div>
<!-- Sush -->
<div class="card bg-dark mb-3 mb-5 mx-auto px-0 shadow">
<img class="card-img-top" src="img/sush.PNG" alt="Screenshot of Sush website, showing the homepage." loading="lazy">
<div class="card-body px-5">
<h5 class="card-title mt-3">Sush</h5>
<p class="card-text">Developed the landing page and online presence for Sush's multiple business fronts - Sush, Sush Track, Sushimatic and Samurai Knights.</p>
<p class="card-text">Online ordering powered by Square Online.</p>
<a class='btn btn-outline-light stretched-link my-2' href="http://www.sush.com.au">Visit site</a>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>