-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathen.jade
More file actions
281 lines (278 loc) · 14.2 KB
/
en.jade
File metadata and controls
281 lines (278 loc) · 14.2 KB
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
doctype html
<html lang='en'>
head
meta(charset='UTF-8')
title William Malo - Web Developer
link(rel="apple-touch-icon", sizes="57x57", href="/apple-touch-icon-57x57.png")
link(rel="apple-touch-icon", sizes="60x60", href="/apple-touch-icon-60x60.png")
link(rel="apple-touch-icon", sizes="72x72", href="/apple-touch-icon-72x72.png")
link(rel="apple-touch-icon", sizes="76x76", href="/apple-touch-icon-76x76.png")
link(rel="apple-touch-icon", sizes="114x114", href="/apple-touch-icon-114x114.png")
link(rel="apple-touch-icon", sizes="120x120", href="/apple-touch-icon-120x120.png")
link(rel="apple-touch-icon", sizes="144x144", href="/apple-touch-icon-144x144.png")
link(rel="apple-touch-icon", sizes="152x152", href="/apple-touch-icon-152x152.png")
link(rel="apple-touch-icon", sizes="180x180", href="/apple-touch-icon-180x180.png")
link(rel="icon", type="image/png", href="/favicon-32x32.png", sizes="32x32")
link(rel="icon", type="image/png", href="/android-chrome-192x192.png", sizes="192x192")
link(rel="icon", type="image/png", href="/favicon-96x96.png", sizes="96x96")
link(rel="icon", type="image/png", href="/favicon-16x16.png", sizes="16x16")
link(rel="manifest", href="/manifest.json")
link(rel="mask-icon", href="/safari-pinned-tab.svg", color="#5bbad5")
meta(name="msapplication-TileColor", content="#ffffff")
meta(name="msapplication-TileImage", content="/mstile-144x144.png")
meta(name="theme-color", content="#ffffff")
script(src='//codepen.io/assets/libs/prefixfree.min.js')
link(rel="stylesheet",href="css/en.css")
.social
a(href='https://twitter.com/William_Malo')
svg(xmlns='http://www.w3.org/2000/svg', width='26', height='28', viewbox='0 0 26 28')
path(fill='#262626', d='M25.312 6.375q-1.047 1.531-2.531 2.609.016.219.016.656 0 2.031-.594 4.055t-1.805 3.883-2.883 3.289-4.031 2.281-5.047.852q-4.234 0-7.75-2.266.547.063 1.219.063 3.516 0 6.266-2.156-1.641-.031-2.938-1.008t-1.781-2.492q.516.078.953.078.672 0 1.328-.172-1.75-.359-2.898-1.742t-1.148-3.211v-.063q1.062.594 2.281.641-1.031-.688-1.641-1.797t-.609-2.406q0-1.375.688-2.547 1.891 2.328 4.602 3.727t5.805 1.555q-.125-.594-.125-1.156 0-2.094 1.477-3.57t3.57-1.477q2.188 0 3.687 1.594 1.703-.328 3.203-1.219-.578 1.797-2.219 2.781 1.453-.156 2.906-.781z')
a(href='https://github.com/williammalo')
svg(xmlns='http://www.w3.org/2000/svg', width='26', height='28', viewbox='0 0 26 28')
path(fill='#262626', d='M10 19q0 .625-.195 1.281t-.672 1.188-1.133.531-1.133-.531-.672-1.188-.195-1.281.195-1.281.672-1.188 1.133-.531 1.133.531.672 1.188.195 1.281zm10 0q0 .625-.195 1.281t-.672 1.188-1.133.531-1.133-.531-.672-1.188-.195-1.281.195-1.281.672-1.188 1.133-.531 1.133.531.672 1.188.195 1.281zm2.5 0q0-1.875-1.078-3.187t-2.922-1.313q-.641 0-3.047.328-1.109.172-2.453.172t-2.453-.172q-2.375-.328-3.047-.328-1.844 0-2.922 1.313t-1.078 3.187q0 1.375.5 2.398t1.266 1.609 1.906.938 2.188.461 2.328.109h2.625q1.281 0 2.328-.109t2.188-.461 1.906-.938 1.266-1.609.5-2.398zm3.5-2.75q0 3.234-.953 5.172-.594 1.203-1.648 2.078t-2.203 1.344-2.656.742-2.68.344-2.609.07q-1.219 0-2.219-.047t-2.305-.195-2.383-.469-2.141-.805-1.891-1.266-1.344-1.797q-.969-1.922-.969-5.172 0-3.703 2.125-6.188-.422-1.281-.422-2.656 0-1.813.797-3.406 1.687 0 2.969.617t2.953 1.93q2.297-.547 4.828-.547 2.312 0 4.375.5 1.641-1.281 2.922-1.891t2.953-.609q.797 1.594.797 3.406 0 1.359-.422 2.625 2.125 2.5 2.125 6.219z')
a.codepen(href='http://codepen.io/WilliamMalo/')
svg(xmlns='http://www.w3.org/2000/svg', width='28', height='28', viewbox='0 0 28 28')
path(fill='#262626', d='M3.375 18.266l9.422 6.281v-5.609l-5.219-3.484zm-.969-2.25l3.016-2.016-3.016-2.016v4.031zm12.797 8.531l9.422-6.281-4.203-2.812-5.219 3.484v5.609zm-1.203-7.703l4.25-2.844-4.25-2.844-4.25 2.844zm-6.422-4.297l5.219-3.484v-5.609l-9.422 6.281zm15 1.453l3.016 2.016v-4.031zm-2.156-1.453l4.203-2.812-9.422-6.281v5.609zm7.578-2.813v8.531q0 .641-.531 1l-12.797 8.531q-.328.203-.672.203t-.672-.203l-12.797-8.531q-.531-.359-.531-1v-8.531q0-.641.531-1l12.797-8.531q.328-.203.672-.203t.672.203l12.797 8.531q.531.359.531 1z')
.pad
.logo
svg(xmlns='http://www.w3.org/2000/svg', width='33', height='20', viewbox='0 0 33 20')
path.logo-W(d='M1 1v.313h1.301l6.291 17.16h.385l4.373-11.654 4.332 11.654h.361l4.354-11.654 2.072-5.818h-.385l-4.373 11.654-4.332-11.654h-.361l-4.354 11.654-4.291-11.342h1.447v-.313z')
path.logo-M(d='M8.592 18.473h.385l4.373-11.654 4.332 11.654h.361l4.354-11.654 4.291 11.342h-1.447v.313h6.82v-.313h-1.301l-6.291-17.16h-.385l-4.373 11.654-4.332-11.654h-.361l-4.354 11.654z')
h1.center WILLIAM MALO
h3.center Programmer, Artist, Nerd
hr
h1.center Web Development and Design
.row
.pad.fourth
p
img(src='http://maloweb.com/illustrations/illustration4.svg', alt='')
p.short.center Designs that fit your company branding.
.pad.fourth
p
img(src='http://maloweb.com/illustrations/illustration1.svg', alt='')
p.short.center A tailored experience for every screen size.
.pad.fourth
p
img(src='http://maloweb.com/illustrations/illustration3.svg', alt='')
p.short.center Attention to detail, pages that load fast, fluid animations.
.pad.fourth.bp1-hide.bp2-show
p
img(src='http://maloweb.com/illustrations/illustration2.svg', alt='')
p.short.center
strong Contact Me:
br
a(href='mailto:info@maloweb.com') info@maloweb.com
.pad.bp0-hide.bp1-show.bp2-hide.center.no-pad-top
strong Contact Me:
a(href='mailto:info@maloweb.com') info@maloweb.com
hr.no-top-margin
.row
.pad-side.fourth
p
a(href='http://signshophelper.com')
img.fancyborder(src='http://maloweb.com/clients/signshop.jpg', alt='')
h4 Signshop Helper
p
| This e-commerce website needed to be as fast as possible to maximize sales. It was obsessively optimized to paint in less than half a second.
p
| The site uses a custom search system that displays results instantly, as you type, even on underpowered mobile devices.
p
a(href='http://signshophelper.com') signshophelper.com
.pad-side.fourth
p
a(href='http://tsyf.com/en')
img.fancyborder(src='http://maloweb.com/clients/sylvester.jpg', alt='')
h4
| Sylvester
i &
| Forget
p
| I had lots of beautiful images to work with, and I made them the focus of every page.
p
| This site closely follows the branding of the company. The navigation bar and the heading font copy the look of the logo, and I made sure to include the company's mascot somewhere tasteful.
p
a(href='http://tsyf.com/en') tsyf.com
.pad-side.fourth
p
a(href='http://actionqc.com')
img.fancyborder(src='http://maloweb.com/clients/action.jpg', alt='')
h4.bp2-hide Action Utility Quebec
p.bp2-hide My first client, a trailer dealer in Quebec.
p.bp2-hide
| I had lots of constraints for this project, I had to closely follow the company's branding guidelines and I didn't have many good images. I had to get creative with what I had, and I like to think that I pulled it off.
p
a(href='http://actionqc.com') actionqc.com
.pad-side.fourth.bp1-hide.bp2-show.bp3-hide
p
a(href='http://tdi.maloweb.com')
img.fancyborder(src='http://maloweb.com/clients/tdi.jpg', alt='')
h4.bp2-hide Toronto Digital Imaging
p.bp2-hide
| A proof of concept that was never actually used as the official website of the company.
p.bp2-hide
| It's an experiment on how to make galleries and sliders as fast and as fluid as possible. I'm especially proud of the portfolio page.
p.bp3-hide
a(href='http://tdi.maloweb.com') tdi.maloweb.com
hr
h1.center Contributions
.row
.pad.fourth
a(href='http://groupedynamite.com')
img.fancyborder(src='http://maloweb.com/clients/gd.jpg', alt='')
p
h4 Groupe Dynamite
p
| for
a(href="http://ecorce.ca") Écorce
.pad.fourth.bp1-hide.bp2-show
a(href='http://camps.qc.ca/')
img.fancyborder(src='http://maloweb.com/clients/camps.jpg', alt='')
p
h4 ACQ
p
| for
a(href="http://ecorce.ca") Écorce
//.pad.fourth
a(href='http://nezpourvivre.com/')
img.fancyborder(src='http://maloweb.com/clients/npv.jpg', alt='')
p
h4 Nez pour vivre
p
| for
a(href='http://zdg.ca') Zeste de Genie
.pad.fourth
a(href='https://www.maifandgo.fr')
img.fancyborder(src='http://maloweb.com/clients/maif.jpg', alt='')
p
h4 MAIF and GO
p
| for
a(href='http://zdg.ca') Zeste de Genie
.pad.fourth
a(href='http://www.dopdopsalon.com/staff.php')
img.fancyborder(src='http://maloweb.com/clients/dopdop.jpg', alt='')
p
h4 Dop Dop Salon staff page
p
| for
a(href='http://www.mywebsitespot.com') My Website Spot
hr
h1.center Code Projects
.row
.pad.fourth
p
a(href='http://codepen.io/WilliamMalo/pen/xCyFH')
img.fancyborder(src='http://maloweb.com/projects/baseline.png', alt='')
h4 Baseline Grid
p
| A nice boilerplate to start off a website, it has features that are rare in baseline grids like tables and forms.
.pad.fourth
p
a(href='http://codepen.io/WilliamMalo/pen/QbQKqJ')
img.fancyborder(src='http://maloweb.com/projects/burger.png', alt='')
h4 William's Famous Burgers
p A burger menu that animates smoothly between states and uses no javascript.
.pad.fourth.bp2-hide
p
a(href='http://maloweb.com/snippets/terraindemo')
img.fancyborder(src='http://maloweb.com/projects/collision.png', alt='')
h4 Javascript Collision Engine
p A pixel perfect collision engine that tries to be as performant as possible.
.pad.fourth.bp1-hide
p
a(href='https://github.com/williammalo/husl-glsl')
img.fancyborder(src='http://maloweb.com/projects/huslglsl.jpg', alt='')
h4 HUSL GLSL
p
| GLSL port of HUSL, a human-friendly alternative to HSL.
.auto-col.pad.no-pad-top
ul
li.bp2-show
a(href='http://maloweb.com/snippets/terraindemo') Javascript Collision Engine
li.bp1-show
a(href='https://github.com/williammalo/husl-glsl') HUSL GLSL
li
a(href='http://codepen.io/WilliamMalo/pen/fcCjm') Javascript Image Filter Tool
li
a(href='https://github.com/williammalo/docpad-plugin-babel') Babel plugin for docpad
li
a(href='http://codepen.io/WilliamMalo/pen/BhzxL') Mini JQuery Boilerplate
li
a(href='http://codepen.io/WilliamMalo/pen/FkpvA') Simple Grid System
li
a(href='http://codepen.io/WilliamMalo/pen/wBpQYB') Transition Tool
li
a(href='http://codepen.io/WilliamMalo/pen/qbFup') Javascript Bit Arrays
li
a(href='https://gist.github.com/williammalo') Github Gists
li
a(href='https://gist.github.com/williammalo/2727112') Indentation Parsing
li
a(href='https://gist.github.com/williammalo/2698303') URL Query String Parsing
li
a(href='https://gist.github.com/williammalo/2816659') Array Methods on NodeLists
li
a(href='https://gist.github.com/williammalo/2239095') Metric System Values
li
a(href='https://gist.github.com/williammalo/2221488') Global Math
li
a(href='https://gist.github.com/williammalo/2188750') Vendor Prefixer
li
a(href='https://github.com/williammalo/chaindom.js') Tiny Chainvas Replacement
hr
h1.center Minecraft Projects
.row
.fourth.pad
h4 WillPack Resource Pack
p
a(href='http://willcraft.org')
img.fancyborder(src='http://pack.maloweb.com/shot1.png', alt='')
.fourth.pad
h4 Minecraft Font tool
p
a(href='http://codepen.io/WilliamMalo/pen/CbJeF')
img.fancyborder(src='http://maloweb.com/projects/minefont.png', alt='')
.fourth.pad
h4 W.I.P. City
p
a(href='http://www.planetminecraft.com/project/wip-town/')
img.fancyborder(src='http://pack.maloweb.com/shot3.png', alt='')
.fourth.pad
h4 Vanilla Shaders
ul
li
a(href='http://www.planetminecraft.com/mod/shader-and-lightmap-edit-for-conquest-texturepack/') Download
li
a(href='http://www.minecraftforum.net/forums/mapping-and-modding/resource-packs/resource-pack-discussion/1255965-grars-guide-to-vanilla-shaders-wip') Tutorial
//
<hr>
<h1 class="center">Articles</h1>
<article>
<h2> <span>How to improve your OSX experience</span>
</h2>
<p><del>Mac os</del><ins class="over">OSX</ins> is great, but some of the default options really annoy me. Here are the settings I change when I get a new machine:</p>
<ul>
<li>No popup when running apps for the first time:<code class="language-bash">defaults write com.apple.LaunchServices LSQuarantine -bool false</code></li>
<li>Enable text selection in quicklook:<code class="language-bash">defaults write com.apple.finder QLEnableTextSelection -bool true</code></li>
<li>No popup when renaming file extensions:<code class="language-bash">defaults write com.apple.finder FXEnableExtensionChangeWarning -bool false</code></li>
<li>Make exposé not group windows by app:<code class="language-bash">defaults write com.apple.dock expose-group-by-app -bool false</code></li>
<li>In finder, search in current directory by default:<code class="language-bash">defaults write com.apple.finder FXDefaultSearchScope -string "SCcf"</code></li>
<li>
Disable spolight menu icon
(Good if you use Quicksilver or Alfred.):<code class="language-bash">mv /System/Library/CoreServices/Search.bundle /System/Library/CoreServices/Search.bundle.bak</code>
</li>
</ul>
</article>
<h2>Hashtag links that don't scroll the page.</h2>
<p>
Hashtag links are great for storing state without using javascript, but in most browsers, the page scrolls to the target element when you click the link.
I wanted to use the ":target" selector in css to make javascript-less menus and tabs, but this behavior got in the way.
I found that making the target element "position:fixed" fixes the problem in all browsers.
Then you can style any element coming after the target like this:
</p>
<code class="language-css">#realtarget:target~#faketarget{color:blue}</code>
<p>I made a little demo of this technique on codepen. Every link will target the #foo element and turn links blue, without scrolling the page. <a href="http://codepen.io/WilliamMalo/pen/ifbsK">codepen.io/WilliamMalo/pen/ifbsK</a>
</p>
script.
document.body.lang = 'en';
//# sourceURL=pen.js