-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
226 lines (198 loc) · 7.57 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
<!DOCTYPE HTML>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Chris Wood</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>Home</strong></a>
<ul class="icons">
<li><a href="https://www.instagram.com/confidentcopy" target="_blank"
class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://www.linkedin.com/in/thischriswood" target="_blank"
class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="mailto:[email protected]" target="_blank" class="icon fa-envelope"><span
class="label">email</span></a>
<li><a href="https://contentandux.org/" target="_blank" class="icon brands fa-slack"><span
class="label">Slack</span></a></li>
</li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<div class="content">
<header>
<h1>Hi, I’m Chris Wood</h1>
<p>UX Writer</p>
</header>
<h2>I write for digital products, creating confidence through copy.</h2>
</ul>
<ul class="actions">
<li><a href="#my-work" class="button big">My work</a></li>
<li><a href="#listen-watch" class="button big">My talks</a></li>
</ul>
</div>
<span class="image object">
<img src="images/me-headshot.jpg" alt="" />
</span>
</section>
<!-- Section -->
<!-- The 'Read the full story' links on this page can all go to the same page, but with each section having it's own anchor.-->
<section>
<header class="major">
<h2 id="my-work">My work</h2>
</header>
<div class="features">
<article>
<span class="icon solid fa-compass"></span>
<div class="content">
<h3>Leading on voice, tone, and style</h3>
<p>The challenge was to reduce inconsistencies, save time, and align messaging across
departments. Creating a well-organized style guide was an important part of the
solution.
<a href="../html5up-editorial/generic.html"> Read the full story</a></p>
</div>
</article>
<article>
<span class="icon solid fa-globe"></span>
<div class="content">
<h3>Designing globally accessible UI copy</h3>
<p>When you can't localise your content, how do you reach a global audience? By setting
high standards for readability and finding practical ways to maintain them.
<a href="#">Read the full story</a></p>
</div>
</article>
<article>
<span class="icon solid fa-medal"></span>
<div class="content">
<h3>Championing strategic support content</h3>
<p>Good support content needs to be as easy to maintain as it is to use. Achieving this
goal involved shopping for a CMS, developing hand-written code, and learning about
the wonderful world of static-site generators. <a href="#">Read the full story</a>
</p>
</p>
</div>
</article>
<article>
<span class="icon solid fa-handshake"></span>
<div class="content">
<h3>Building cross-functional relationships</h3>
<p> 'No one achieves success alone' - and making connections with Sales, Marketing,
and Technology all helped me build a better understanding of what makes a product
really work. <a href="#">Read the full story</a></p>
</p>
</div>
</article>
</div>
</section>
<!-- Section -->
<section>
<header class="major">
<h2 id="listen-watch">My talks on UX Writing</h2>
</header>
<div class="posts">
<article>
<a href="#" class="image"><img src="images/podcast-mic.jpg" alt="" /></a>
<h3>What is UX writing? </h3>
<p>My guest appearance on the ISTC podcast to discuss my role as a UX writer in the
education
sector.</p>
<ul class="actions">
<li><a href="generic.html" class="button primary">Listen</a></li>
<li><a href="generic.html" class="button">More on UXW</a></li>
</ul>
</article>
<article>
<a href="#" class="image"><img src="images/webinar.jpg" alt="" /></a>
<h3>5 tips for good digital writing</h3>
<p>A light-hearted presentation given at an annual conference to raise awareness of the
value of UX content.</p>
<ul class="actions">
<li><a href="generic.html" class="button primary">Watch</a></li>
<li><a href="#" class="button icon solid fa-download">Download the slide deck</a></li>
</ul>
</article>
<!--article>
<a href="#" class="image"><img src="images/pic03.jpg" alt="" /></a>
<h3>Tempus ullamcorper</h3>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam
facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>
<ul class="actions">
<li><a href="generic.html" class="button">More</a></li>
</ul>
</article>
<article>
<a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
<h3>Sed etiam facilis</h3>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam
facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>
<ul class="actions">
<li><a href="generic.html" class="button">More</a></li>
</ul>
</article>
<article>
<a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>
<h3>Feugiat lorem aenean</h3>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam
facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>
<ul class="actions">
<li><a href="generic.html" class="button">More</a></li>
</ul>
</article>
<article>
<a href="#" class="image"><img src="images/pic06.jpg" alt="" /></a>
<h3>Amet varius aliquam</h3>
<p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam
facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p>
<ul class="actions">
<li><a href="generic.html" class="button">More</a></li>
</ul>
</article-->
</div>
<hr class="major" />
<!--Contact info -->
<section>
<header class="major">
<h2>Contact me</h2>
</header>
<p>You can find me via the social links at the top of this page or using these contact details.
Thanks for your visit.</p>
<ul class="contact">
<li class="icon solid fa-envelope"><a
href="mailto:chris@chriswoodwrites"></a>[email protected]</a></li>
<li class="icon solid fa-map-marker-alt">Oxford, UK<br />
</ul>
</section>
<hr />
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Chris Wood. All rights reserved. Images: <a
href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5
UP</a>.</p>
</footer>
</section>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>