-
Notifications
You must be signed in to change notification settings - Fork 5
/
portfolio.html
168 lines (154 loc) · 11.7 KB
/
portfolio.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta name="keywords" content="web development, web developer, web page developer, ecommerce web design, ecommerce website design, ecommerce site design, ecommerce web site design, ecommerce website designer, website ecommerce design, ecommerce website developer, ecommerce website, ecommerce website builder, ecommerce websites, best ecommerce website builder, ecommerce website development, best ecommerce website, best ecommerce websites, ecommerce website developers, ecommerce website developer, create ecommerce website, website ecommerce, ecommerce website cost, websites with ecommerce, websites ecommerce, ecommerce website solutions, creating ecommerce website, professional ecommerce website, website builder, website builders, responsive ecommerce design">
<meta name="description" content="Here are my projects as a responsive front end web developer and designer. The majority of my experience is with ecommerce websites, but I also am proficient in Bootstrap, Foundation and other responsive web design platforms.">
<meta name="author" content="Todd Williams">
<title>Todd Williams - Front End Developer - Material Design Portfolio Work</title>
<!-- CSS -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400italic,700italic,700,400' rel='stylesheet' type='text/css'>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="//cdn.rawgit.com/noelboss/featherlight/1.2.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" />
<script type="text/javascript" src="js/latest-tweet.js"></script>
</head>
<body>
<nav class="default-primary-color z-depth-5" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="/" class="brand-logo"><img src="images/logo.svg" class="logo" alt="Logo" /></a>
<ul class="right">
<li><a href="/sites.html">Sites</a></li>
<li><a href="/apps.html">Apps</a></li>
<li><a href="/ui-design.html">UI Design</a></li>
<li><a href="/blog.php">Blog</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="title"><div class="sidenav-header"><span class="helper"></span><img src="images/logo.svg" class="sidebar-logo" alt="Sidebar Logo" />Todd Williams</div></li>
<li class="waves-effect waves-dark"><a href="/">Home</a></li>
<li class="waves-effect waves-dark"><a href="/sites.html">Sites</a></li>
<li class="waves-effect waves-dark"><a href="/apps.html">Apps</a></li>
<li class="waves-effect waves-dark"><a href="/ui-design.html">UI Design</a></li>
<li class="waves-effect waves-dark"><a href="/blog.php">Blog</a></li>
<li class="waves-effect waves-dark"><a href="/about.html">About</a></li>
<li class="waves-effect waves-dark"><a href="/contact.html">Contact</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav>
<div id="sub-header" class="dark-primary-color z-depth-1">
<img src="images/logo.svg" class="logo-large" alt="logo large" />
<h1 class="header center white-text">Sites</h1>
<div class="row center">
<h5 class="header col s12 white-text">My Most Recent Work</h5>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col m12">
<div class="icon-block">
<a href="#" data-featherlight="images/usalight.png" title="USALight.com Responsive Ecommerce Site"><img src="images/usalight.png" alt="USALight.com" class="portfolio-project"></a>
<h5>USALight</h5>
<p>USALight.com wanted a responsive site designed to replace their aging 2010 site. High priorities included flattening the company logo and creating a unified color palette for the whole site. The old site desperately needed white space and more distinct levels of visual dominance.</p>
<p>This is one of the very few large fully responsive ecommerce sites out there and was launched in March 2015. The company wanted to keep its current Volusion ecommerce platform but wanted the site to scale on laptops, tablets and phones.</p>
<p>I started by stripping a basic Volusion template down to its bare nuts and bolts, then built the HTML back up to match the approved design prototype. Once the design was completed I wrote some Javascript to hide and display the sidebar search filters depending upon the user's location on the site. Grunt was used for other Javascript tasking in order to optimize the CSS.</p>
</div>
<div class="visit-site">
<a href="http://www.usalight.com/" id="download-button" class="btn-large waves-effect waves-light" target="_blank">Visit Site</a><br><br>
</div>
<div class="icon-block">
<a href="#" data-featherlight="images/union-church.png" title="Union Church Responsive Website"><img src="images/union-church.png" alt="Union Church" class="portfolio-project"></a>
<h5>Union Church</h5>
<p>Union Church of Riverside, CA wanted a new site designed from the mobile up with RWD, as their current site does not scale well with tablets. A monochromatic design was chosen to reflect what was communicated as the seriousness of their mission. Bootstrap is being used as the framework on which to build this responsive site, and a single page scrolling nav suited their desires for their main content and support page.</p>
</div>
<div class="visit-site">
<a href="http://www.unionriverside.org/" id="download-button" class="btn-large waves-effect waves-light" target="_blank">Visit Site</a><br><br>
</div>
<div class="icon-block">
<a href="#" data-featherlight="images/prpaper.png" title="PR Paper Corporate Site"><img src="images/prpaper.png" alt="P&R Paper" class="portfolio-project"></a>
<h5>P&R Paper</h5>
<p>P&R Paper's corporate website needed an update in 2010, and I was happy to give their old site a face lift. Joomla was chosen as the CMS that they now use to make site updates. The platform is a bit unforgiving, but I was able to force it to accept the design prototype that carried with it their original color palette. The logo was recreated in Illustrator since they had no vector source and it needed a freshening.</p>
<p>I trained their content creator on using the backend in order to add new products, but alas company turnover has put someone new in the position that needs training in order to format the new content correctly. This will explain some formatting issues with new product lines on the homepage. This was a freelance side-project.</p>
</div>
<div class="visit-site">
<a href="http://www.prpaper.com/" class="btn-large waves-effect waves-light" target="_blank">Visit Site</a><br><br>
</div>
<div class="icon-block">
<a href="#" data-featherlight="images/DSAdvocates_guarantee.png" title="Divorce Shield Advocate Network"><img src="images/dsan.png" alt="Divorce Shield Advocate Network" class="portfolio-project" width="1137"></a>
<h5>Divorce Shield Advocate Network</h5>
<p>Divorce Shield Advocate Network was a 2010 startup that needed a corporate site built on the 960 Grid System. The company is no longer in business, and the site is no longer hosted online. The header and footer had already been completed, and I was responsible for the design of all the interior content. I created custom icon sets and 3D image content in order to meet their design specifications.</p>
</div>
<div class="visit-site">
<a href="https://web.archive.org/web/20110111105359/http://www.dsadvocates.com/" class="btn-large waves-effect waves-light" target="_blank">Visit Archived Site</a><br><br>
</div>
<!--<div class="icon-block">
<a href="#" data-featherlight="images/ballard.png" title="Ballard Plumbing"><img src="images/ballard.png" alt="Ballard Plumbing" class="portfolio-project"></a>
<h5>Ballard Plumbing</h5>
<p>Ballard Plumbing needed a simple site for customers to access their services and contact information. The owner wanted a site that was easy for novices to update content in, so Weebly was chosen to allow them to easily update their site's content when needed. The site uses a customized Weebly template.</p>
</div>
<div class="visit-site">
<a href="http://www.ballardplumbingandair.com/" class="btn-large waves-effect waves-light" target="_blank">Visit Site</a>
</div>-->
</div>
</div>
</div>
</div>
<footer class="page-footer accent-color">
<div class="container">
<div class="row">
<div class="col l4 s12">
<div class="social-icons">
<h5 class="white-text center">Let's Connect!</h5>
<p class="grey-text text-lighten-4 center">I love connecting with other developers and designers. Follow me on Twitter, friend request me on Facebook, or contact me on LinkedIn. I would love to hear from you!</p>
<div class="center">
<a href="https://twitter.com/toddlerwilliams" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="http://www.linkedin.com/in/toddcwilliams" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://github.com/toddler4372" target="_blank"><i class="fa fa-github"></i></a>
<a href="https://www.facebook.com/profile.php?id=1467081438" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="mailto:[email protected]" target="_top"><i class="fa fa-envelope"></i></a>
</div>
</div>
</div>
<div class="col l4 s12">
<div class="quick-bio">
<h5 class="white-text center">Quick Bio</h5>
<p class="grey-text text-lighten-4 center">I am a Front End Developer living in Redlands, CA. I love creating clean, usable, responsive websites. My passions are family, sports, guitar, and new web technology.</p>
<div class="center">
<img src="images/bio-photo-small.png" class="bio-photo-small" alt="Bio Photo" />
</div>
</div>
</div>
<div class="col l4 s12">
<div class="quick-bio">
<h5 class="white-text center">Latest Tweet</h5>
<div id="example1"></div>
<div class="center">
<i class="fa fa-twitter"></i>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container center">
©2015 Todd Williams. All Rights Reserved.
</div>
</div>
</footer>
<!-- Scripts-->
<script type="text/javascript" src="js/twitterFetcher_min.js"></script>
<script type="text/javascript" src="js/exampleUsage.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.2.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>