-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathold_index.html
More file actions
210 lines (207 loc) · 11.8 KB
/
old_index.html
File metadata and controls
210 lines (207 loc) · 11.8 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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Data -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML,CSS,Javascript,JS,Ruby,Developer,Brisbane,Bootstrap,Web development, inclusive developer, accessibility specialist, accessibility consultant">
<meta name="description" content="Inclusive Web Developer based in Brisbane, Australia.">
<!-- External StyleSheets & Dependencies-->
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- My StyleSheet-->
<link rel="stylesheet" href="styles/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Title that appears in tab -->
<title>Jordan Morris - Accessibility Specialist</title>
</head>
<body>
<!-- Beginning of Navigation -->
<nav class="navComponent">
<ul class="navComponent">
<!-- ul is floated right so links are in reverse order -->
<li><a href="#contactSection" class="navComponent navComponentRight"> Contact </a></li>
<li><a href="#portfolio" class="navComponent"> Projects</a> </li>
<li><a href="#headMain" class="navComponent navComponentLeft"> Home </a></li>
</ul>
</nav>
<!-- End of navigation -->
<!-- Beginning of header and title -->
<div id="headMain">
<div id="headContent">
<h1> Jordan Morris </h1>
<h2>Web Developer | Accessibility Specialist</h2>
<h3> Creating <span
class="txt-rotate"
data-period="2000"
data-rotate='[ "accessibility.", "new worlds.", "freedom.", "inclusiveness.", "community.", "opportunities.", "solutions."]'></span> </h3>
<a href="#contactSection"> <button type="button" id="contactButton"> Contact Me </button> </a>
</div>
</div>
<!-- End of header and title -->
<!-- Beginning of main body -->
<div id="mainContainer">
<div class="breaker"> </div>
<!-- Beginning of mission section -->
<div id="mission">
<h2> My Mission </h2>
<p>Digital empowerment can provide access to community, information, education and other vital services. I am working to create a more accessible world through web-based software development.</p>
<!-- Beginning of mission objectives -->
<div id="missionObjectives">
<ul>
<li>
<div class="objective">
<h3> <i class="fas fa-globe" aria-hidden="true"></i> Web Development Skills </h3>
<p> Currently my learned languages include C#, .Net, HTML5, CSS3, JavaScript, React, TypeScript, Ruby and Rails. I have experience in startups, education and consulting using agile methodology. I pride myself on consistently learning and experimenting which has led to personal experience in Unity, game development, python and cyber-security. </p>
</div>
</li>
<li>
<div class="objective">
<h3> <i class="fab fa-accessible-icon" aria-hidden="true"></i> Accessibility Skills </h3>
<p> Accessibility is my driving point for being a developer and the purpose within my work. I have extensive accessibility consulting experience for a variety of ASX500 companies, state and federal government entities and small to large not-for-profit enterprises. Particular points
of interest include accessible semantic code, universal design, accessibility guidelines and standards. I aim to deliver an experienced, pragmatic and sensitive approach to achieving accessibility based outcomes within a diverse range of teams. In all my work I aim to create a discussion on accessibility and inclusiveness. </p>
</div>
</li>
<li>
<div class="objective">
<h3> <i class="fas fa-users" aria-hidden="true"></i> Community </h3>
<p>Opportunity in technology is wasted without giving, interacting and expanding the local community, especially those traditionally underrepresented. I am proud to be a co-organiser of BrisTechNewbies and a regular speaker at local meetups.</p>
</div>
</li>
</ul>
</div>
<!-- end of mission objectives -->
</div>
<!-- end of mission section -->
<!-- Beginning of projects section -->
<div class="breaker"> </div>
<div id="portfolio">
<h2 > Find My Work </h2>
<div class="contactContainer">
<div class="gridItem">
<a aria-label="Go to my github" href="https://github.com/jawdinmorris">
<p> <i class="fab fa-github cIcon" aria-hidden="true"></i> <br> Github </p>
</a>
</div>
<div class="gridItem">
<a aria-label="Go to my codepen" href="https://codepen.io/jawdinmorris/">
<p> <i class="fab fa-codepen cIcon" aria-hidden="true"> </i> <br> Codepen </p>
</a>
</div>
<div class="gridItem">
<a aria-label="Go to my medium" href="https://medium.com/@jordanandrewmorris1">
<p> <i class="fab fa-medium cIcon" aria-hidden="true"> </i> <br> Medium </p>
</a>
</div>
<div class="gridItem">
<a aria-label="Go to my LinkedIn page" href="https://www.linkedin.com/in/jordanandrewmorris/">
<p> <i class="fab fa-linkedin cIcon" aria-hidden="true"></i> <br> LinkedIn </p>
</a>
</div>
</div>
<div id="leftRightFlow">
<div class="breaker"></div>
<h2> My Projects </h2>
<!-- Beginning of indvidual cards -->
<div class="testCard">
<a aria-label="Go to external Node Web Scraper page" href="http://" target="_blank"><h3> Node Web Scraper </h3>
<img src="images/webScraper.gif" alt="Gif showing Node Web Scraper" class="cardimg" id="nPic">
<p style="padding-left: 20px;">Data Web Scraper created as a challenge using Node.js, Express and Cheerio. </p>
<p>Tech:<i class="fab fa-node" aria-label="Node"> </i> <i class="fab fa-js-square" aria-label="Javascript"></i></p> </a>
</div>
<div class="testCard">
<a aria-label="Go to external Volumeteer page" href="http://volumeteer.herokuapp.com" target="_blank"><h3> Volumeteer </h3>
<img src="images/volumeteer.gif" alt="Gif showing VolumeteerApp" class="cardimg" id="vPic">
<p style="padding-right: 20px;">Two-sided marketplace created end-to-end in Ruby On Rails. Many Things With Many Hands.</p>
<p>Tech:<i class="fas fa-gem" aria-label="Ruby"> </i> <i class="fab fa-html5" aria-label="HTML5"></i> <i class="fab fa-js-square" aria-label="Javascript"></i><i class="fab fa-css3-alt" aria-label="CSS3"></i></p> </a>
</div>
<div class="testCard">
<a aria-label="Go to external GithubFinder page" href="https://ca-github-finder.netlify.app/" target="_blank"><h3> Github Finder </h3>
<img src="images/gitFinder.gif" alt="Gif showing GithubFinder" class="cardimg" id="gPic">
<p style="padding-left: 20px;">One Page React App designed to filter and find Github pages. Used for managing groups.</p>
<p>Tech:<i class="fab fa-react" aria-label="React"></i> <i class="fab fa-html5" aria-label="HTML5"></i> <i class="fab fa-js-square" aria-label="Javascript"></i> <i class="fab fa-css3-alt" aria-label="CSS3"></i></p> </a>
</div>
<div class="testCard">
<a aria-label="Go to external Paper Blaster page" href="https://www.kongregate.com/games/Guinner11/paper-blaster" target="_blank"><h3> Paper Space </h3>
<img src="images/paperBlaster.gif" alt="Gif showing Paper Blaster Game" class="cardimg" id="pPic">
<p style="padding-right: 20px;">Javascript driven game based on Atari Asteroids.</p>
<p>Tech:<i class="fab fa-html5" aria-label="HTML5"></i> <i class="fab fa-js-square" aria-label="Javascript"></i></p> </a>
</div>
<div class="testCard">
<a aria-label="Go to external Ratatat page" href="https://jawdinmorris.github.io/Ratatat/" target="_blank"><h3> Ratatat </h3>
<img src="images/ratatat.gif" alt="Gif showing Ratatat Game" class="cardimg" id="rPic">
<p style="padding-left: 20px;">A soundboard game created using paper.js and howler.js</p>
<p>Tech:<i class="fab fa-css3-alt" aria-label="CSS3"></i> <i class="fab fa-html5" aria-label="HTML5"></i> <i class="fab fa-js-square" aria-label="Javascript"></i></p> </a>
</div>
<div class="testCard">
<a aria-label="Go to external colour game" href="https://jawdinmorris.github.io/TheColourPickerGame/" target="_blank"><h3> The Colour Picker Game </h3>
<img src="images/colorPicker.gif" alt="Gif showing Colour Picker Game" class="cardimg" id="cPic">
<p style="padding-right: 20px;">A game created to learn Colour Codes and basic JS</p>
<p>Tech: <i class="fab fa-css3-alt" aria-label="CSS3"></i> <i class="fab fa-html5" aria-label="HTML5"></i> <i class="fab fa-js-square" aria-label="Javascript"></i></p> </a>
</div>
<div class="testCard">
<a aria-label="Go to external West World mock screen" href="https://jawdinmorris.github.io/west-world-splash/" target="_blank"><h3> West World Splash </h3>
<img src="images/westWorld.gif" alt="Gif showing WestWorld splash screen" class="cardimg" id="wPic">
<p style="padding-left: 20px;"> A mock screen created for West World Season 2 </p>
<p>Tech: <i class="fab fa-css3-alt" aria-label="CSS3"></i> <i class="fab fa-html5" aria-label="HTML5"></i></p> </a>
</div>
<div class="testCard">
<a aria-label="Go to external ruby app repo" href="https://github.com/jawdinmorris/Ruby-Tester" target="_blank"><h3>Ruby Application </h3>
<img src="images/rubyTester.gif" alt="Gif showing Ruby Quiz Application" class="cardimg" id="ruPic">
<p style="padding-right: 20px;"> A Ruby Application developed for my first assessment at Coder Academy </p>
<p>Tech: <i class="fas fa-gem" aria-label="Ruby"></i></p> </a>
</div>
<!-- End of indvidual cards -->
</div>
<!-- end of projects section -->
</div>
<!-- Breaker added to stop Flex behaviour -->
<div class="breaker"></div>
<!-- Beginning of contact section -->
<div id="contactSection">
<h2> Contact Me </h2>
<!-- Beginning of contact details -->
<h3> Follow me: </h3>
<div class="contactContainer">
<div class="gridItem">
<a aria-label="Go to my LinkedIn page" href="https://www.linkedin.com/in/jordanandrewmorris/">
<p> <i class="fab fa-linkedin cIcon" aria-hidden="true"></i> <br> LinkedIn </p>
</a>
</div>
<div class="gridItem">
<a aria-label="Go to my Twitter page" href="https://twitter.com/JawdinMorris">
<p> <i class="fab fa-twitter cIcon" aria-hidden="true"></i> <br> Twitter </p>
</a>
</div>
</div>
<h3> Contact me: </h3>
<div class="contactContainer">
<div class="gridItem">
<a aria-label="External link to send email" href="mailto:jordanandrewmorris1@gmail.com" alt="Mailing link">
<p> <i class="fas fa-envelope cIcon" aria-hidden="true"></i> <br> Write me an email</p>
</a>
</div>
<div class="gridItem">
<a aria-label="External link to call me" href="tel:0406009731" alt="Phone link">
<p> <i class="fas fa-phone cIcon" aria-hidden="true"></i> <br> Give me a call</p>
</a>
</div>
</div>
<!-- end of contact details -->
</div>
<!-- End of contact section -->
<!-- Beginning of footer -->
<div id="footer">
<div class="gridContainer">
<div class="gridItem"><img src="images/logo.png"></div>
<div class="gridItem"> © Copyright Jordan Morris 2022</div>
<div class="gridItem">Thanks for stopping by!</div>
</div>
</div>
<!-- End of footer -->
</div>
<!-- End of main body -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/script.js"></script>
</html>