-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebar-skills.php
117 lines (117 loc) · 5.13 KB
/
sidebar-skills.php
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
<!-- sidebar -->
<aside role="sidebar" class="one-fourth right">
<!-- skills -->
<section class="skills">
<header>
<h2>Skills <span class="visible-desktop">(hover for comments!)</span> <span class="hidden-desktop">(tap for comments!)</span></h2>
<button class="btn absolute right top hidden-tablet-horiz">Show/Hide</button>
</header>
<article class="hidden-tablet-vert">
<header><h3>Digital</h3></header>
<ul>
<li rel="tooltip" title="I've designed websites of all kinds, including web apps, public-facing websites, and ecommerce sites. I love to help people get things done." data-placement="top">
<h4>Web & UX Design</h4>
<div class="progress">
<div class="bar" style="width: 90%;"></div>
</div>
</li>
<li rel="tooltip" title="When I design websites, I make them look good for all screen sizes. I can also adapt older designs for all screen sizes." data-placement="top">
<h4>Responsive Design</h4>
<div class="progress">
<div class="bar" style="width: 80%;"></div>
</div>
</li>
<li rel="tooltip" title="I can't code for iOS or Android, but I design beautiful interfaces and code in HTML5." data-placement="top">
<h4>App Design</h4>
<div class="progress">
<div class="bar" style="width: 70%;"></div>
</div>
</li>
<li rel="tooltip" title="I love coding and staying up-to-date with the latest versions of HTML & CSS3." data-placement="top">
<h4>Valid HTML5 & CSS3</h4>
<div class="progress">
<div class="bar" style="width: 85%;"></div>
</div>
</li>
<li rel="tooltip" title="I have heavy amounts of experience with JavaScript and various frameworks, including jQuery and AngularJS." data-placement="top">
<h4>JavaScript</h4>
<div class="progress">
<div class="bar" style="width: 75%;"></div>
</div>
</li>
<li rel="tooltip" title="I have used PHP to create many public-facing websites, as well as to prototype new designs very quickly." data-placement="top">
<h4>PHP & MySQL</h4>
<div class="progress">
<div class="bar" style="width: 50%;"></div>
</div>
</li>
<li rel="tooltip" title="I'm still in the process of learning Ruby on Rails but have some experience with it." data-placement="top">
<h4>Ruby on Rails</h4>
<div class="progress">
<div class="bar" style="width: 10%;"></div>
</div>
</li>
<li rel="tooltip" title="I have a lot of experience with designing email newsletters. I create scalable designs that look good on small & large screens." data-placement="top">
<h4>Email Design</h4>
<div class="progress">
<div class="bar" style="width: 85%;"></div>
</div>
</li>
</ul>
</article>
<article class="hidden-tablet-vert">
<header><h3>Print & Branding</h3></header>
<ul>
<li rel="tooltip" title="I've designed, printed, & cut many high-quality posters. I've also done screenprinting!" data-placement="top">
<h4>Poster Design</h4>
<div class="progress">
<div class="bar" style="width: 50%;"></div>
</div>
</li>
<li rel="tooltip" title="I can design and bind books; I've even designed some covers for Scholastic. In my spare time, I enjoy making notebooks." data-placement="top">
<h4>Book Design</h4>
<div class="progress">
<div class="bar" style="width: 50%;"></div>
</div>
</li>
<li rel="tooltip" title="I've designed two separate magazines and many promotional flyers." data-placement="top">
<h4>Editorial Design</h4>
<div class="progress">
<div class="bar" style="width: 45%;"></div>
</div>
</li>
<li rel="tooltip" title="I enjoy designing packaging for products, but don't have the opportunity to do so very often." data-placement="top">
<h4>Packaging Design</h4>
<div class="progress">
<div class="bar" style="width: 30%;"></div>
</div>
</li>
<li rel="tooltip" title="I've created several logos for different brands. Building an identity for a company is amazing." data-placement="top">
<h4>Logo Design</h4>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
</li>
<li rel="tooltip" title="I love figuring out new ways to design & fold-up information." data-placement="top">
<h4>Newsletter Design</h4>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
</li>
<li rel="tooltip" title="Finding new ways to convey important information in such a small amount of space is a challenge I enjoy." data-placement="top">
<h4>Business Card Design</h4>
<div class="progress">
<div class="bar" style="width: 70%;"></div>
</div>
</li>
<li rel="tooltip" title="I don't get to design stationery very often, but I do have an intense fondness for it." data-placement="top">
<h4>Letterhead Design</h4>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
</li>
</ul>
</article>
<div class="clearfix"></div>
</section>
</aside>