-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathen.html
231 lines (231 loc) · 15.3 KB
/
en.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
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
<!DOCTYPE html><html lang='en'>
<head>
<meta charset="UTF-8">
<title>William Malo - Web Developer</title>
<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"></script>
<link rel="stylesheet" href="css/en.css">
</head>
<div class="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"></path>
</svg></a><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"></path>
</svg></a><a href="http://codepen.io/WilliamMalo/" class="codepen">
<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"></path>
</svg></a></div>
<div class="pad">
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="20" viewbox="0 0 33 20">
<path 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" class="logo-W"></path>
<path 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" class="logo-M"></path>
</svg>
</div>
<h1 class="center">WILLIAM MALO</h1>
<h3 class="center">Programmer, Artist, Nerd</h3>
</div>
<hr>
<h1 class="center">Web Development and Design</h1>
<div class="row">
<div class="pad fourth">
<p><img src="http://maloweb.com/illustrations/illustration4.svg" alt=""></p>
<p class="short center">Designs that fit your company branding.</p>
</div>
<div class="pad fourth">
<p><img src="http://maloweb.com/illustrations/illustration1.svg" alt=""></p>
<p class="short center">A tailored experience for every screen size.</p>
</div>
<div class="pad fourth">
<p><img src="http://maloweb.com/illustrations/illustration3.svg" alt=""></p>
<p class="short center">Attention to detail, pages that load fast, fluid animations.</p>
</div>
<div class="pad fourth bp1-hide bp2-show">
<p><img src="http://maloweb.com/illustrations/illustration2.svg" alt=""></p>
<p class="short center"><strong>Contact Me:</strong><br><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="pad bp0-hide bp1-show bp2-hide center no-pad-top"><strong>Contact Me:</strong><a href="mailto:[email protected]">[email protected]</a></div>
<hr class="no-top-margin">
<div class="row">
<div class="pad-side fourth">
<p><a href="http://signshophelper.com"><img src="http://maloweb.com/clients/signshop.jpg" alt="" class="fancyborder"></a></p>
<h4>Signshop Helper</h4>
<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>
<p>The site uses a custom search system that displays results instantly, as you type, even on underpowered mobile devices.</p>
<p><a href="http://signshophelper.com">signshophelper.com</a></p>
</div>
<div class="pad-side fourth">
<p><a href="http://tsyf.com/en"><img src="http://maloweb.com/clients/sylvester.jpg" alt="" class="fancyborder"></a></p>
<h4>Sylvester <i>&</i> Forget</h4>
<p>I had lots of beautiful images to work with, and I made them the focus of every page.</p>
<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>
<p><a href="http://tsyf.com/en">tsyf.com</a></p>
</div>
<div class="pad-side fourth">
<p><a href="http://actionqc.com"><img src="http://maloweb.com/clients/action.jpg" alt="" class="fancyborder"></a></p>
<h4 class="bp2-hide">Action Utility Quebec</h4>
<p class="bp2-hide">My first client, a trailer dealer in Quebec.</p>
<p class="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>
<p><a href="http://actionqc.com">actionqc.com</a></p>
</div>
<div class="pad-side fourth bp1-hide bp2-show bp3-hide">
<p><a href="http://tdi.maloweb.com"><img src="http://maloweb.com/clients/tdi.jpg" alt="" class="fancyborder"></a></p>
<h4 class="bp2-hide">Toronto Digital Imaging</h4>
<p class="bp2-hide">A proof of concept that was never actually used as the official website of the company.</p>
<p class="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>
<p class="bp3-hide"><a href="http://tdi.maloweb.com">tdi.maloweb.com</a></p>
</div>
</div>
<hr>
<h1 class="center">Contributions</h1>
<div class="row">
<div class="pad fourth"><a href="http://groupedynamite.com"><img src="http://maloweb.com/clients/gd.jpg" alt="" class="fancyborder"></a>
<p></p>
<h4>Groupe Dynamite</h4>
<p>for <a href="http://ecorce.ca">Écorce</a></p>
</div>
<div class="pad fourth bp1-hide bp2-show"><a href="http://camps.qc.ca/"><img src="http://maloweb.com/clients/camps.jpg" alt="" class="fancyborder"></a>
<p></p>
<h4>ACQ</h4>
<p>for <a href="http://ecorce.ca">Écorce</a></p>
</div>
<!--.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
-->
<div class="pad fourth"><a href="https://www.maifandgo.fr"><img src="http://maloweb.com/clients/maif.jpg" alt="" class="fancyborder"></a>
<p></p>
<h4>MAIF and GO</h4>
<p>for <a href="http://zdg.ca">Zeste de Genie</a></p>
</div>
<div class="pad fourth"><a href="http://www.dopdopsalon.com/staff.php"><img src="http://maloweb.com/clients/dopdop.jpg" alt="" class="fancyborder"></a>
<p></p>
<h4>Dop Dop Salon staff page</h4>
<p>for <a href="http://www.mywebsitespot.com">My Website Spot</a></p>
</div>
</div>
<hr>
<h1 class="center">Code Projects</h1>
<div class="row">
<div class="pad fourth">
<p><a href="http://codepen.io/WilliamMalo/pen/xCyFH"><img src="http://maloweb.com/projects/baseline.png" alt="" class="fancyborder"></a></p>
<h4>Baseline Grid</h4>
<p>A nice boilerplate to start off a website, it has features that are rare in baseline grids like tables and forms.</p>
</div>
<div class="pad fourth">
<p><a href="http://codepen.io/WilliamMalo/pen/QbQKqJ"><img src="http://maloweb.com/projects/burger.png" alt="" class="fancyborder"></a></p>
<h4>William's Famous Burgers</h4>
<p>A burger menu that animates smoothly between states and uses no javascript.</p>
</div>
<div class="pad fourth bp2-hide">
<p><a href="http://maloweb.com/snippets/terraindemo"><img src="http://maloweb.com/projects/collision.png" alt="" class="fancyborder"></a></p>
<h4>Javascript Collision Engine</h4>
<p>A pixel perfect collision engine that tries to be as performant as possible.</p>
</div>
<div class="pad fourth bp1-hide">
<p><a href="https://github.com/williammalo/husl-glsl"><img src="http://maloweb.com/projects/huslglsl.jpg" alt="" class="fancyborder"></a></p>
<h4>HUSL GLSL</h4>
<p>GLSL port of HUSL, a human-friendly alternative to HSL.</p>
</div>
</div>
<div class="auto-col pad no-pad-top">
<ul>
<li class="bp2-show"><a href="http://maloweb.com/snippets/terraindemo">Javascript Collision Engine</a></li>
<li class="bp1-show"><a href="https://github.com/williammalo/husl-glsl">HUSL GLSL</a></li>
<li><a href="http://codepen.io/WilliamMalo/pen/fcCjm">Javascript Image Filter Tool</a></li>
<li><a href="https://github.com/williammalo/docpad-plugin-babel">Babel plugin for docpad</a></li>
<li><a href="http://codepen.io/WilliamMalo/pen/BhzxL">Mini JQuery Boilerplate</a></li>
<li><a href="http://codepen.io/WilliamMalo/pen/FkpvA">Simple Grid System</a></li>
<li><a href="http://codepen.io/WilliamMalo/pen/wBpQYB">Transition Tool</a></li>
<li><a href="http://codepen.io/WilliamMalo/pen/qbFup">Javascript Bit Arrays</a></li>
<li><a href="https://gist.github.com/williammalo">Github Gists</a></li>
<li><a href="https://gist.github.com/williammalo/2727112">Indentation Parsing</a></li>
<li><a href="https://gist.github.com/williammalo/2698303">URL Query String Parsing</a></li>
<li><a href="https://gist.github.com/williammalo/2816659">Array Methods on NodeLists</a></li>
<li><a href="https://gist.github.com/williammalo/2239095">Metric System Values</a></li>
<li><a href="https://gist.github.com/williammalo/2221488">Global Math</a></li>
<li><a href="https://gist.github.com/williammalo/2188750">Vendor Prefixer</a></li>
<li><a href="https://github.com/williammalo/chaindom.js">Tiny Chainvas Replacement</a></li>
</ul>
</div>
<hr>
<h1 class="center">Minecraft Projects</h1>
<div class="row">
<div class="fourth pad">
<h4>WillPack Resource Pack</h4>
<p><a href="http://willcraft.org"><img src="http://pack.maloweb.com/shot1.png" alt="" class="fancyborder"></a></p>
</div>
<div class="fourth pad">
<h4>Minecraft Font tool</h4>
<p><a href="http://codepen.io/WilliamMalo/pen/CbJeF"><img src="http://maloweb.com/projects/minefont.png" alt="" class="fancyborder"></a></p>
</div>
<div class="fourth pad">
<h4>W.I.P. City</h4>
<p><a href="http://www.planetminecraft.com/project/wip-town/"><img src="http://pack.maloweb.com/shot3.png" alt="" class="fancyborder"></a></p>
</div>
<div class="fourth pad">
<h4>Vanilla Shaders</h4>
<ul>
<li><a href="http://www.planetminecraft.com/mod/shader-and-lightmap-edit-for-conquest-texturepack/">Download</a></li>
<li><a href="http://www.minecraftforum.net/forums/mapping-and-modding/resource-packs/resource-pack-discussion/1255965-grars-guide-to-vanilla-shaders-wip">Tutorial</a></li>
</ul>
</div>
</div>
<!--
<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
</script>