-
Notifications
You must be signed in to change notification settings - Fork 0
/
digital-content.html
132 lines (132 loc) · 5.24 KB
/
digital-content.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1">
<title>Digital Content Projects by Benjamin Woodruff | Web Designer</title>
<link rel="icon" href="img/profile-icon.png" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<script src="script.js"></script><!-- for the menu functionality -->
</head>
<body>
<header>
<div id="title-row">
<h1>
<a href="index.html">Benjamin Woodruff</a>
</h1>
<button id="menu">
☰<!-- hamburger icon -->
<span class="visually-hidden">Navigation Menu</span>
</button>
</div>
<nav id="nav" class="visually-hidden">
<div id="skills-nav-row">
<a id="ux" href="index.html">User Experience</a>
<a id="web" href="web-design.html">Web Design</a>
<a id="con" href="digital-content.html" style="background-color: var(--dark-gray); color: white">Digital Content</a>
</div>
<div id="pages-nav-row">
<a id="contact" href="mailto:[email protected]">Contact</a>
<a id="about" href="https://dtc-wsuv.org/bwoodruff16/resume/">About</a>
</div>
</nav>
<p>
A passionate Web Designer skilled in research, planning, design, and project management for 2D animations, animatics, Integrated Marketing Communications strategy, infographics, and technical, business, and web writing.
</p>
</header><!-- end header -->
<section id="content">
<article id="web-accessibility-infographic" class="project">
<h2>
<a href="img/web-accessibility-infographic.png" target="_blank">Web Accessibility Infographic</a>
</h2>
<div class="featured-image">
<a href="img/web-accessibility-infographic.png" target="_blank">
<img src="img/web-accessibility-infographic.png" alt="a thumbnail image depicting my web accessibility infographic project">
</a>
</div>
<p>
An illustrated infographic that explains how to improve web interfaces to better support users with cognitive disabilities, which ultimately helps everyone!
</p>
</article><!-- end web accessibility infographic project -->
<article id="web-accessibility-motion-graphic" class="project">
<h2>
<a href="https://vimeo.com/261981793" target="_blank">Web Accessibility Motion Graphic Animation</a>
</h2>
<div class="iframe">
<iframe
src="https://player.vimeo.com/video/261981793"
width="640"
height="360"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
</div>
<p>
A 2D animation that explains why cognitive disabilities are the kind that should be focused on in Web Accessibility concerns and how failure and success in this area affects everyone.
</p>
</article><!-- end web accessibility infographic project -->
<article id="reality-spectrum-infographic" class="project">
<h2>
<a href="reality-spectrum-infographic.png" target="_blank">Reality Spectrum Infographic</a>
</h2>
<div class="featured-image">
<a href="img/reality-spectrum-infographic.png" target="_blank">
<img src="img/reality-spectrum-infographic.png" alt="a thumbnail image depicting my reality spectrum infographic project">
</a>
</div>
<p>
An illustrated infographic that explains the differences between various parts of the reality spectrum.
</p>
</article><!-- end reality spectrum infographic project -->
<article id="fossil-animatic" class="project">
<h2>
<a href="https://vimeo.com/242670010" target="_blank">Fossil Q Smartwatch Animatic
</a>
</h2>
<div class="iframe border">
<iframe
src="https://player.vimeo.com/video/242670010"
width="640"
height="360"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
</div>
<p>
An animated series of still drawings used to represent the basic concept of a proposed commercial for the Fossil Q Smartwatches.
</p>
</article><!-- end project -->
<article id="la-plongee-storytelling" class="project">
<h2>
<a href="https://vimeo.com/264945786" target="_blank">La Plongée Storytelling Animation</a>
</h2>
<div class="iframe border">
<iframe
src="https://player.vimeo.com/video/264945786"
width="640"
height="360"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
</div>
<p>
A Storytelling project to help encourage people to not fear what is different through the story of a six-year-old girl discovering tropical fish in the Caribean for the first time.
</p>
</article><!-- end project -->
</section><!-- end content -->
<footer>
<h2>Thanks for Stopping by!</h2>
<div id="footer-row">
<a id="copyright" href="https://dtc-wsuv.org/bwoodruff16/resume/">
© <script type="text/javascript">document.write(new Date().getFullYear());</script> by Benjamin Woodruff
</a>
<a id="return-to-top" href="#">Return to Top</a>
<a id="resume" href="https://drive.google.com/file/d/13LzKTYmMtf4GRQLwIFynXDWhD2UOBmQQ/view?usp=sharing">PDF Resumé</a>
</div>
</footer><!-- end footer -->
</body><!-- end body -->
</html><!-- end html -->