-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
230 lines (167 loc) · 10.3 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
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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="about.css">
<script src="index.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Carter+One&family=Castoro&family=Gentium+Book+Plus&family=Hanken+Grotesk&family=Inter+Tight&family=Roboto+Slab&family=Yatra+One&display=swap" rel="stylesheet">
<title>Portfolio - Chris Timms</title>
</head>
<body>
<div class="backbtn"><a href="#header">BACK</a></div>
<header id="header" class="header_main">
<!-- <nav class="menucontainer"> -->
<a href="#about" class="button about">
<div class="firstInner">
<div class="btnName">ABOUT</div>
<div class="righttoLeft">Who I am and what I do</div>
</div>
</a>
<a href="#work" class="button work">
<div class="firstInner">
<div class="btnName">WORK</div>
<div class="righttoLeft">Some examples of work</div>
</div>
</a>
<a href="#contact" class="button contact">
<div class="firstInner">
<div class="btnName">CONTACT</div>
<div class="righttoLeft">Get in touch</div>
</div>
</a>
<a href="#" id="access_settings" class="button settings access_settings">
<div class="firstInner">
<div class="btnName">SETTINGS</div>
<div class="righttoLeft">Choose your access settings</div>
</div>
</a>
<!-- </nav> -->
</header>
<dialog class="modal" id="modal">
<h2>Choose your access settings</h2>
<p><span class="span_title">FONT SIZE:</span>
<button id="fsb1" class="asbtn">1X</button>
<button id="fsb2" class="asbtn">1.5X</button>
<button id="fsb3" class="asbtn">2X</button>
</p>
<p><span class="span_title">FONTS:</span>
<button id="ffb1" class="asbtn">Hanken Grotesk</button>
<button id="ffb2" class="asbtn">Garamond</button>
<button id="ffb3" class="asbtn">Eskool</button>
<button id="ffb4" class="asbtn">Neutralface</button>
<button id="ffb5" class="asbtn">Yatra One</button>
<button id="ffb6" class="asbtn">Youngserif</button>
</p>
<p><span class="span_title">COLOUR SCHEME:</span>
<button id="csb1" class="asbtn">Original</button>
<button id="csb2" class="asbtn">Night</button>
<button id="csb3" class="asbtn">White/Blue/orange</button>
</p>
<h3><button class="close-modal">CLOSE</button></h3>
</dialog>
<main class="container">
<section id="about" class="section">
<h1>ABOUT</h1>
<img id="portrait" src="https://github.com/chriscotimms/website/blob/main/img/chris.png?raw=true" alt="portrait of middle aged white man"></img>
<article class="article1">
<p>I'm a Front-End Web Developer with an interest in Accessibility.</br></br>
I have a fine art background, and want to learn and help contribute to developing the best practices of accessible approaches and solutions to Web Development.</p>
</article>
</section>
<!-- <div id="circle">MENU (cursor follow) </div> -->
<section id="work" class="section">
<h1>WORK</h1>
<h2 id="fc">Founders and Coders Projects</h2>
<article id="odvar" class="article1">
<h2><a href="https://chriscotimms.github.io/game4/">ODVAR: A Javascript-built RPG Game</a></h2>
<img src="img/odvarMain.png" alt="Screenshot of RPG Computer Game.">
<p>A top-down RPG following Odvar, a variable character who is trying to find their way.</p>
<p>Based on a youtube tutorial series by Drew Conley, I have implemented a lot of accessibility features, often missing from javascript based games.</p>
<img src="img/odvar1.png" alt="Screenshot of RPG Computer Game.">
<p>An access panel relays the position of the character in the room, and feeds back collision information when walking into objects or walls (a bit like alt tags for images).</p>
<img src="img/odvar2.png" alt="Screenshot of RPG Computer Game.">
<p>I've also introduced room descriptions, which describe a space and the characters position within it when it is first entered by the character.</p>
<p><a href="https://chriscotimms.github.io/game4/">Launch Website</a>/<a href="https://github.com/chriscotimms/game4">Github</a></p>
</article>
<article id="website" class="article1">
<h2>
<a href="https://chriscotimms.github.io/website/">Application Website for Founders and Coders</a>
</h2>
<img src="img/website2.png" alt="Screenshot of Personal Website project for FOunders and coders application.">
<p>A basic portfolio style website implementing some accessible features in javascript, such as an "access settings" panel, allowing the user to adjust colour schemes, font size and style, as well as adding tab, esc and enter key functionality for greater ease of keyboard navigation.</p>
<p><a href="https://chriscotimms.github.io/website/">Launch Website</a>/<a href="https://github.com/chriscotimms/website">Github</a></p>
</article>
<article id="pong" class="article1">
<h2><a href="https://chriscotimms.github.io/game3/">Basic "Pong" style audio access game</a></h2>
<img src="img/PaddleSynth.png" alt="Screenshot of Pong Game prototype.">
<p>Using the native synthesiser in vanilla Javascript. The ball's pitch changes depending on x and y location. The paddle updates its position with a sound relative to the x position of the ball.</p>
<p><a href="https://chriscotimms.github.io/game3/">Launch Website</a>/<a href="https://github.com/chriscotimms/game3">Github</a></p>
</article>
<article id="moviedata" class="article1">
<h2><a href="https://chriscotimms.github.io/moviedata/">Movie Data Project</a></h2>
<img src="img/moviedata.png" alt="Screenshot of website with images from Wes Anderson movies.">
<p>Sorting Objects and Arrays based on radio button selections in Javascript.</p><p>I added a comment section which is held in local storage memory until the user refreshes the page.</p>
<p><a href="https://chriscotimms.github.io/moviedata/">Launch Website</a>/<a href="https://github.com/chriscotimms/moviedata">Github</a></p>
</article>
<article id="memorygame" class="article1">
<h2><a href="https://chriscotimms.github.io/game/">Memory Game Project</a></h2>
<img src="img/memorygame.png" alt="Screenshot of website with images from Wes Anderson movies.">
<p>This project was produced for the Founders and Coders application in Spring 2023.</p>
<p>In reponse for a basic game to be made in javascript, it uses a basic framework for a memory card game, and tries to develop javascript responses to the lack of accessibility for most Javascript games. </p>
<p>This includes the creation of aria and tabindex labels in objects that are created in the DOM, the use of Tab, Enter and Arrow keys as well as mousevents to navigate the game.</p>
<p><a href="https://chriscotimms.github.io/game/">Launch Website</a>/<a href="https://github.com/chriscotimms/game">Github</a></p>
</article>
<h2 id="fl">Freelance Websites</h2>
<article id="freelance" class="article1">
<h2><a href="https://chriscotimms.github.io/miketimms/">Mike Timms</a></h2>
<img src="img/mt.png" alt="Screenshot of Mike Timms website index page.">
<p>Actor's portfolio website showcasing Headshots, Biography, and a Showreel, using simple anchor navigation.</p>
</article>
<article id="freelance2" class="article1">
<h2><a href="https://chriscotimms.github.io/TW/">Thomas Watson</a></h2>
<img src="img/tw.png" alt="Screenshot of Thomas Watsons website index page.">
<p>Artist's website indexing several disparate projects on one page, using a basic show/hide menu.</p>
</article>
</section>
<section id="dev" class="section">
<h1>HOW I GOT HERE</h1>
<article class="article1">
<a href="https://freecodecamp.org/certification/fccfa809b29-d770-4796-a1de-fbad9ddd661f/responsive-web-design">FreeCodeCamp Responsive Webdesign Certificate</a>
</article>
<article class="article1">
<a href="https://www.codewars.com/users/chriscotimms">Codewars </br>
<img src="https://www.codewars.com/users/chriscotimms/badges/large">
</a>
</article>
<article class="article1">
<a href="https://github.com/chriscotimms">Github</a>
</article>
<article class="article1">
<a href="https://codepen.io/your-work/">Codepen</a>
</article>
</section>
<section id="from" class="section">
<h1>FROM/Previous career/education</h1>
<article class="article1">
I studied fine art, a BA in Dublin's National art college and a Masters in Goldsmiths, with distinctions in both.
</article>
<article class="article1">
As part of my work in Tate, I was hired to produce an Audio-description guide for one of the artworks. This involved participating in training with VocalEyes, developing and editing the script and recording with a team.
</article>
<article class="article1">
Various projects have included a public project implementing an audio-based mesh-network using skype, a project exploring streetview as an interface, and digital animations for a variety of projects, including contributing to the visuals for an MGMT tour.
</article>
</section>
<section id="contact" class="section">
<h1>CONTACT</h1>
<article class="article1"><a href="mailto:[email protected]">chriscotimms(@)gmail.com</a></article>
</section>
</main>
<footer>
</footer>
</body>
</html>