-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
187 lines (181 loc) · 13.5 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
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
---
color-scheme-switch: true
---
{% include body-start.html %}
<header class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--trendy-af c-{{ site.ns }}-plane--xlarge-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-small c-{{ site.ns }}-plane--v-inset-xlarge">
<div class="c-{{ site.ns }}-plane-background" style="opacity: 0.1">
<img src="src/img/hero-walk.jpg" alt="">
</div>
<div class="c-{{ site.ns }}-plane-deck c-{{ site.ns }}-plane-deck--upper">
<div class="c-{{ site.ns }}-plane-deck__content">
<div class="c-{{ site.ns }}-plane-deck__content__item c-{{ site.ns }}-plane-deck__content__item--end">
<label for="color-scheme" class="cs-{{ site.ns }}-switch">
<span class="cs-{{ site.ns }}-switch__text">
Switch color scheme
</span>
</label>
</div>
</div>
</div>
<div class="c-{{ site.ns }}-plane-cabin">
<div class="u-{{ site.ns }}-text-align-center">
<span class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall" aria-hidden="true">Design System • Web Accessibility</span>
<h1 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--display" aria-label="Mike Mai, designer and coder specializing in design system and web accessibility." style="line-height: 1;">
<div aria-hidden="true">
Designer & Coder
</div>
</h1>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--large">Mike Mai designs with HTML and CSS</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">
<a class="c-{{ site.ns }}-button" href="#bio">This Is Mai Story</a>
</p>
</div>
</div>
<div class="c-{{ site.ns }}-plane-deck c-{{ site.ns }}-plane-deck--lower">
<div class="c-{{ site.ns }}-plane-deck__content">
<span class="c-{{ site.ns }}-plane-deck__content__item">
<span class="c-{{ site.ns }}-text c-{{ site.ns }}-text--xsmall">© Mike Mai Network</span>
</span>
<span class="c-{{ site.ns }}-plane-deck__content__item">
<span class="c-{{ site.ns }}-text c-{{ site.ns }}-text--xsmall">Since 1984</span>
</span>
</div>
</div>
</header>
<aside class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--trendy c-{{ site.ns }}-plane--article-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-medium c-{{ site.ns }}-plane--v-inset-xlarge cs-{{ site.ns }}-dark" aria-labelledby="mission-statement">
<div class="c-{{ site.ns }}-plane-background">
<img src="src/img/hero-walk.jpg" alt="" loading="lazy">
</div>
<div class="c-{{ site.ns }}-plane-cabin">
<h2 class="u-{{ site.ns }}-visuallyhidden" id="mission-statement">Mission Statement</h2>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--lede">Great design requires both form and function. Favoring one over the other will greatly affect a design’s ability to communicate. Striking a balance between the two is something I dwell on every single day.</p>
</div>
</aside>
<main class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--article-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-medium c-{{ site.ns }}-plane--v-inset-xxlarge" id="bio">
<article class="c-{{ site.ns }}-plane-cabin">
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--xxlarge">Designer</h2>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">I have been working as a designer for 13+ years. I received my BFA in graphic design from Massachusetts College of Art and Design, where I developed my passion for typography. That passion drove me to what I wanted to pursue professionally: designing for the web. Because the web is 99% text <mark>(unverified <emoji>😅</emoji>)</mark>, typography is the most important foundation of any given website. Picking typefaces and typesetting are my first tasks when starting any web projects.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Many think that design is all about aesthetics, but a wise mentor once told me that “design is about solving problems, first and foremost”. My obsession of becoming a true designer drove me to what I am today: designing for the accessible web. While polished typographic styles create good forms, more is needed: functions. And more importantly, the experience of said functions. I mull over the user experience of every design I create, making sure they are usable, useful, and inclusive.</p>
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--xxlarge">& Coder</h2>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Regardless what you are designing, it is important to pick the right tool. For the web, that tool is code.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">What is better than working in the exact medium that you are designing for? Nothing. That is the reason I learned to code. I see HTML and CSS as a design tool, just like Adobe XD, Sketch, or Figma, but it is a tool that does not create a layer of abstraction. If one can read and write HTML and CSS, one can fully understand the limitations of the current web technologies. When equipped with such knowledge, a designer can easily rapid prototype designs that stay true to their intentions. Great designers pay attention to the smallest details, and the right tool enables them to massage the design as much as possible.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Not only do I design with code, I also design in the code. Semantics is a big deal on the web, it leads to better performance, better accessibility, and better SEO. While it is technically possible to build a website with just a bunch of <code class="c-{{ site.ns }}-code"><div></code>s—a generic element that carries no semantics, it is important to know that there are close to 100 HTML elements available for use. If a design has a specific information architecture visually, the same must be represented in code.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Always remember: <span class="c-{{ site.ns }}-text c-{{ site.ns }}-text--large"><em>form</em> <span class="c-{{ site.ns }}-text c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy">&</span> <strong>function</strong>.</span></p>
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--xxlarge">Design Systems</h2>
<ul class="c-{{ site.ns }}-list c-{{ site.ns }}-list--unordered">
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://boltdesignsystem.com" class="c-{{ site.ns }}-link">Bolt Design System</a>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="{{ site.url }}/typesettings" class="c-{{ site.ns }}-link">Typesettings.css</a>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://codepen.io/mikemai2awesome/pen/KKvMZVz" class="c-{{ site.ns }}-link">SuperMinimalCSS</a>
</div>
</li>
</ul>
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--xxlarge">Fun Side Projects</h2>
<ul class="c-{{ site.ns }}-list c-{{ site.ns }}-list--unordered">
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="{{ site.url }}/blog" class="c-{{ site.ns }}-link">Command Shift 3</a> <em>(my blog)</em>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://codepen.io/mikemai2awesome/pen/wvpLNjb" class="c-{{ site.ns }}-link">To All The Buttons I Designed Before</a>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://mikemai.s3.amazonaws.com/network/backup/remake-america-online.html" class="c-{{ site.ns }}-link">Remake 1998</a> <em>(in the style of mikemai.net)</em>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://helveticasux.com" class="c-{{ site.ns }}-link">Helvetica Sux</a>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://iloveeurostile.com" class="c-{{ site.ns }}-link">I Love Eurostile</a> <em>(font broken <emoji>😢</emoji>, will fix soon)</em>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://noprobono.info" class="c-{{ site.ns }}-link">NoProBono.info</a>
</div>
</li>
<li class="c-{{ site.ns }}-list__item">
<div class="c-{{ site.ns }}-text c-{{ site.ns }}-text--small">
<a href="https://links.mikemai.net" class="c-{{ site.ns }}-link">Hao Collection</a>
</div>
</li>
</ul>
<img src="src/img/head-8bit.png" alt="" width=40 height=40 class="c-{{ site.ns }}-avatar c-{{ site.ns }}-avatar--block c-{{ site.ns }}-avatar--transparent c-{{ site.ns }}-avatar--medium">
</article>
</main>
<aside class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--article-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-medium c-{{ site.ns }}-plane--v-inset-xlarge cs-{{ site.ns }}-dark" aria-labelledby="colophon">
<div class="c-{{ site.ns }}-plane-background">
<img src="src/img/hero-childhood.jpg" alt="" loading="lazy">
</div>
<div class="c-{{ site.ns }}-plane-cabin">
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--lede" id="colophon">Colophon</h2>
<ul class="c-{{ site.ns }}-end-credits">
<li class="c-{{ site.ns }}-end-credits__item">
<span>Mike Mai</span>
<span><emoji>🤓</emoji> Himself</span>
</li>
<li class="c-{{ site.ns }}-end-credits__item">
<span>Heading Font</span>
<span>Bungee Inline</span>
</li>
<li class="c-{{ site.ns }}-end-credits__item">
<span>Body Font</span>
<span>Spectral</span>
</li>
<li class="c-{{ site.ns }}-end-credits__item">
<span>Small Cap Font</span>
<span>Alegreya Sans SC</span>
</li>
<li class="c-{{ site.ns }}-end-credits__item">
<span>Portrait Photography</span>
<span>Ben Gebo</span>
</li>
</ul>
</div>
</aside>
<footer>
<div class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--trendy c-{{ site.ns }}-plane--article-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-medium c-{{ site.ns }}-plane--v-inset-xxlarge">
<div class="c-{{ site.ns }}-plane-cabin">
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--xlarge">Contact</h2>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Call +1 (978)912-0881 or email boss[at]mikemai.net.</p>
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--xlarge">Press Kit</h2>
<ul class="c-{{ site.ns }}-list c-{{ site.ns }}-list--unordered">
<li class="c-{{ site.ns }}-list__item">
Portrait: <a class="c-{{ site.ns }}-link" href="{{ site.s3 }}/2017/[email protected]">900px wide</a>
</li>
<li class="c-{{ site.ns }}-list__item">
Portrait: <a class="c-{{ site.ns }}-link" href="{{ site.s3 }}/2017/[email protected]">1280px wide</a>
</li>
<li class="c-{{ site.ns }}-list__item">
Portrait: <a class="c-{{ site.ns }}-link" href="{{ site.s3 }}/2017/[email protected]">2000px wide</a>
</li>
<li class="c-{{ site.ns }}-list__item">
Profile: <a class="c-{{ site.ns }}-link" href="{{ site.s3 }}/2017/img-profile.jpg">500px wide</a>
</li>
<li class="c-{{ site.ns }}-list__item">
Logo: <a class="c-{{ site.ns }}-link" href="{{ site.s3 }}/assets/img/ios/h/touch-icon-ipad-retina.png">144px wide</a>
</li>
</ul>
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--xlarge">Previously on…</h2>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block"><a class="c-{{ site.ns }}-link" href="{{ site.url }}/320">320 x 320</a></p>
</div>
</div>
</footer>
{% include body-end.html %}