-
Notifications
You must be signed in to change notification settings - Fork 0
/
web-design.html
117 lines (117 loc) · 5.74 KB
/
web-design.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1">
<title>Benjamin Woodruff's Web Design Projects | 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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" 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" style="background-color: var(--dark-gray); color: white">Web Design</a>
<a id="con" href="digital-content.html">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 HTML5, CSS3, JavaScript, and jQuery (mostly for UI animations). Also able to customize WordPress sites, optimize for users and search engines (SEO), and upgrade product pages with Schema.org metadata for more appealing search engine results.
</p>
</header><!-- end header -->
<section id="content">
<article id="unfolding-app-site" class="project">
<h2>
<a href="unfolding-app-site.html">Unfolding AR Game Website</br>Design with WordPress</a>
</h2>
<div class="featured-image">
<a href="unfolding-app-site.html">
<img src="img/unfolding-app-site.png" alt="a thumbnail image depicting the website design my team created for The Historic Trust's augmented reality game design project">
</a>
</div>
<p>
An advanced <a href="https://dtc-wsuv.org/projects/unfold/" target="_blank">WordPress-based website 🗗</a> created on the Jupiter6 theme by the Senior Seminar class of the Creative Media and Digital Culture Program here at WSUV for <a href="https://thehistorictrust.org/" target="_blank">The Historic Trust 🗗</a>. The website features content with a historic focus that highlights the amazing growth and development of Vancouver, WA in relation to the <a href="unfolding.html">AR game</a> we also created for them.
</p>
</article><!-- end project -->
<article id="professional-blog" class="project">
<h2>
<a href="https://prodigimedia.wordpress.com/" target="_blank">Prodigimedia: Professional</br>Digital Media Blog</a>
</h2>
<div class="featured-image">
<a href="https://prodigimedia.wordpress.com/" target="_blank">
<img src="img/prodigimedia.png" alt="a screenshot of my professional digital media blog">
</a>
</div>
<p>
A WordPress website created to host my blog articles for a web content creation class, which were useful in helping me develop my skills as a Web Specialist.
</p>
</article><!-- end panoramic travel log project -->
<article id="accessibility-web-dev" class="project">
<h2>
<a href="accessibility-web-development.html">Accessibility Website Development</a>
</h2>
<div class="featured-image">
<a href="accessibility-web-development.html">
<img src="img/accessibility-web-dev.PNG" alt="a thumbnail image depicting a brain icon representing web accessibility for cognitive disabilities">
</a>
</div>
<p>
A multimedia demonstration of designing for people with cognitive disabilities while making use of Web Design and Development best practices through JavaScript programming and CSS Variables.
</p>
</article><!-- end accessibility web dev project -->
<article id="panoramic-travel-log" class="project">
<h2>
<a href="panoramic-travel-log.html">Panoramic Travel Log</a>
</h2>
<div class="featured-image">
<a href="panoramic-travel-log.html">
<img src="img/pano-icon.png" alt="a thumbnail image depicting a panoramic 360 degree view">
</a>
</div>
<p>
A responsive, Google Street View API integrated web application that showcases some of my world travels and major life events.
</p>
</article><!-- end panoramic travel log project -->
<article id="legal-pad-app" class="project">
<h2>
<a href="legal-pad-app.html">Legal Pad Web App</a>
</h2>
<div class="featured-image">
<a href="legal-pad-app.html">
<img src="img/legal-pad-app.png" alt="a thumbnail image depicting a legal-size notepad which has long sheets of paper bound together at the top">
</a>
</div>
<p>
A personal project that is still in progress and allows users to create notes, save them to their browser's local memory using the HTML Web Storage API, JSON to convert the note objects to strings, and jQuery for animations.
</p>
</article><!-- end legal pad web app 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 -->