forked from toddler4372/Portfolio-Site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (133 loc) · 8.31 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
<!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="responsive web development, backend developer portfolio, creative front end developer, front end developer blogs, front end developer portfolio site, front end developer websites, front end web developer, front end web developer portfolio, front end web development, web developer front end, web development front end, web front end developer, web front end development, web developer front end, web development front end, work from home front end developer, Google Material Design, Flat Design Portfolio, Material Design Portfolio, Material Design Examples, Google Fonts, Modern Web Design Portfolio">
<meta name="description" content="Welcome to my Front End Development Portfolio Site. It is built using a Google Material Design spec, has an integrated Wordpress Blog, along with custom Javascript throughout.">
<meta name="author" content="Todd Williams">
<title>Todd Williams - Front End Developer - Material Design Portfolio</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">
<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">Todd Williams</h1>
<div class="row center">
<h5 class="header col s12 white-text">Front End Developer/UI Designer</h5>
</div>
<div class="row center">
<a href="/sites.html" id="download-button" class="btn-large waves-effect waves-light button-color">Sites</a>
<a href="/apps.html" id="download-button" class="btn-large waves-effect waves-light button-color">Apps</a>
<a href="/ui-design.html" id="download-button" class="btn-large waves-effect waves-light button-color">Designs</a><br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center accent-color-text"><i class="mdi-social-people"></i></h2>
<h5 class="center">Agile</h5>
<p class="light">I am accustomed to following an Agile development process when working with teams. I am used to working in tandem with Product Owners, Designers, UX, backend development, and QA. Flowing communication between myself and other members of the team allows me to work efficiently while avoiding needless backtracking which could bottleneck the process.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center accent-color-text"><i class="mdi-action-view-quilt"></i></h2>
<h5 class="center">Creative</h5>
<p class="light">I start all my logo art on a sketchpad, and develop site wireframes either on a sketchpad or Photoshop. When working on my own, to keep the design direction of the project in focus I'll create a style guide for all the elements the site could potentially display. Icon, logo, and other graphical art is created in Illustrator, while Sublime Text, Photoshop and Chrome Dev Tools are used to begin fleshing out the site layout once all functionality is in place.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center"><i class="technical"></i></h2>
<h5 class="center">Technical</h5>
<p class="light">Sublime Text is my editor of choice for adding markup, styles and Javascript to my sites and applications. If I'm building an application, AngularJS has become my framework of choice. For websites, Yeoman has recently become a great scaffolding tool that I use to structure my projects, and GruntJS is used for Javascript tasking such as optimizing and combining CSS files.</p>
</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="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>