-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathapps.html
167 lines (154 loc) · 10.6 KB
/
apps.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
<!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">Apps</h1>
<div class="row center">
<h5 class="header col s12 white-text">Angular Stuff</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/app-tweeter.png" title="Tweeter AngularJS App"><img src="images/app-tweeter.png" alt="Tweeter AngularJS App" class="portfolio-project"></a>
<h5>Tweeter</h5>
<p>Tweeter is currently a (mostly) non-functioning app sitting on an AngularJS skeleton. So far it's been used as a design study using Semantic UI. A flat, fun and clean user interface was the goal, and Angular functionality beyond switching views may be added later. The app is now hosted on Firebase.</p>
<p>Another goal was to get some use out of Semantic's scripting power. Scripts are implemented for modals, dropdowns, and accordions. Semantic-UI was added to the root directory bower.json as a dependency, and was written into the Gruntfile.js for inclusion in the build. The layout has only been tested on iPhone 6.</p>
</div>
<div class="visit-site">
<a href="https://tweetersocial.firebaseapp.com/#/" id="download-button" class="btn-large waves-effect waves-light" target="_blank">Visit Site</a><br><br>
</div>
</div>
</div>
</div>
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col m12">
<div class="icon-block">
<a href="#" data-featherlight="images/app-slackerchat.png" title="Slack AngularJS Clone App"><img src="images/app-slackerchat.png" alt="Slack AngularJS Clone App" class="portfolio-project"></a>
<h5>Slackerchat</h5>
<p>Slackerchat is a partially functional Angular Slack clone. The app is now hosted on Firebase and is using the Semantic-UI pattern library. Currently you can register, create a profile, create channels, post to channels, and direct message other users.</p>
<p>The app was built to explore some additional AngularJS functionality, and also is a UI material design study using a subtle color palette. There are a few lingering mobile layout issues with the sidebar menu, and some functionality is still missing. Mobile formatting is currently only tested for iPhone6.</p>
<p>In order to use the app, you can register or login with the username <b>[email protected]</b> and password <b>test</b>.</p>
</div>
<div class="visit-site">
<a href="https://slackerchat.firebaseapp.com/#/channels/-JrdsDxNsh8ZG5HEubTW/messages" id="download-button" class="btn-large waves-effect waves-light" target="_blank">Visit Site</a><br><br>
</div>
</div>
</div>
</div>
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col m12">
<div class="icon-block">
<a href="#" data-featherlight="images/app-supersonic.png" title="SuperSonic AngularJS App"><img src="images/app-supersonic.png" alt="SuperSonic AngularJS App" class="portfolio-project"></a>
<h5>SuperSonic</h5>
<p>In my process of learning the ins and outs of AngularJS, SuperSonic was built as a collection of bits of AngularJS functionality. I started with angular-seed and built out my project directories using Yeoman. Bower was used to install all of my component dependencies including ngResource for services in order to connect with a Firebase API as a backend.</p>
<p>One of the main challenges of this Angular project was integrating Semantic-UI as a pattern library. Semantic-UI uses Gulp as its installer, and my project's build process was using Grunt. A combination of manual install, rewriting the Gruntfile, and accessing Semantic webfonts from a CDN made the integration possible.</p>
<p>This app is a work in progress, and currently users can create a profile, add posts and links, and post comments. This app will probably serve as a testbed for playing with new Angular functionality. Currently the layout has only been tested on iPhone 6.</p>
</div>
<div class="visit-site">
<a href="https://sweltering-heat-8723.firebaseapp.com/#/" id="download-button" class="btn-large waves-effect waves-light" target="_blank">Visit Site</a><br><br>
</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>