-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·199 lines (178 loc) · 8.27 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
188
189
190
191
192
193
194
195
196
197
198
199
---
layout: default
title: "Michael Mckeever - Freelance Digital Designer & Front-end Developer, Belfast"
description: "The portfolio of Michael Mckeever a freelance digital designer and front-end developer, Belfast and remote. Available for hire."
id: "index"
---
<svg id="bigAssCross" class="icon icon-header light-gray absolute o-70 dn">
<use xlink:href="#icon-cross"></use>
</svg>
<div class="mw7 center pv3 pv4-m pv5-l ph4 ph0-l">
<h1 class="f3 f1-ns serif fw-9 mt0 mt4-ns mb4 mb6-ns black lh-title">Freelance digital designer & front-end developer.</h1>
<section class="cf mb4 mb5-ns">
<div class="fl w-100 w-30-ns">
<h2 class="lh-copy-lg-ns mb3 mb0-ns f8 gray ttu tracked ma0">Who?</h2>
</div>
<div class="fl w-100 w-70-ns {{site.paragraph_classes}}">
<p class="mt0 lh-copy-lg">I’m Michael Mckeever, a digital designer & front-end developer hailing from Belfast but working remotely with clients around the globe. I help agencies, startups & businesses bring their products to life through effective design & performant code.
<br><a id="show1" class="ttu tracked b gray f8 link hover-blue" href="javascript:void(0)">See more?</a></p>
<p id="about1" class="lh-copy-lg dn">Previously, I pushed pixels with the talented duo at <a class="{{site.link_classes}}" href="//littlethunder.co">Little Thunder Co</a>. and graduated from the University of Ulster with a First Class Honours in Interactive Design in 2015.
<br>
<a id="show2" class="ttu tracked b gray f8 link hover-blue" href="javascript:void(0)">And more?</a>
</p>
<p id="about2" class="lh-copy-lg dn">Outside of the internet, I like to lift heavy things, listen to 🏠 🎵, drink 🍺 and eat 🍔 🍔.</p>
</div>
</section>
<section class="flex flex-column flex-row-ns mb4 mb5-ns">
<div class="w-100 w-30-ns">
<h2 class="f8 gray ttu tracked ma0 mb3 mb0-ns">What?</h2>
</div>
<div class="w-100 w-70-ns">
<div class="flex flex-column flex-row-l">
<div class="w-100 w-50-l">
<ul class="list pl0 ma0 {{site.paragraph_classes}}">
<li class="mb3">UX Design</li>
<li class="mb3">Product Design</li>
<li class="mb3">Front-end Development</li>
<li class="mb3">Brand Identity</li>
</ul>
</div>
<div class="w-100 w-50-l pl4-l">
<ul class="list pl0 ma0 {{site.paragraph_classes}}">
<li class="mb3">E-Commerce</li>
<li class="mb3">CMS Integration</li>
<li class="mb3">Performance Optimisation</li>
<li class="mb3">Technical SEO</li>
</ul>
</div>
</div>
</div>
</section>
<section class="flex flex-column flex-row-ns mb4 mb5-ns">
<div class="w-100 w-30-ns">
<h2 class="f8 gray ttu tracked ma0 mb3 mb0-ns">Where?</h2>
</div>
<div class="w-100 w-70-ns">
<div class="flex flex-row">
<div class="w-50">
<ul class="list pl0 ma0 {{site.paragraph_classes}}">
<li class="mb3">
<a class="link hover-blue active-black link-arrow near-black" href="{{site.social.twitter.url}}{{site.social.twitter.username}}" title="Follow me on Twitter">Twitter</a>
</li>
<li class="mb3">
<a class="link hover-blue active-black link-arrow near-black" href="{{site.social.github.url}}{{site.social.github.username}}" title="Follow me on Github">Github</a>
</li>
</ul>
</div>
<div class="w-50 pl4">
<ul class="list pl0 ma0 {{site.paragraph_classes}}">
<li class="mb3">
<a class="link hover-blue active-black link-arrow near-black" href="{{site.social.dribbble.url}}{{site.social.dribbble.username}}" title="Follow me on dribbble">Dribbble</a>
</li>
<li class="mb3">
<a class="link hover-blue active-black link-arrow near-black" href="{{site.social.instagram.url}}{{site.social.instagram.username}}" title="Follow me on Instagram">Instagram</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="flex flex-column flex-row-ns mb4">
<div class="w-100 w-30-ns">
</div>
<div class="w-100 w-70-ns relative {{site.paragraph_classes}}">
<span class="status dib bg-orange mr1 v-mid br-100 absolute"></span>
<p class="ma0 dib">I have limited availability. <a class="{{site.link_classes}}" href="{{site.baseurl}}/hire-me">Check my availability</a></p>
</div>
</section>
</div>
<section class="bw1 b--light-gray bt bb pv3">
<div class="mw7 center pv4 pv5-ns ph4 ph0-l">
<section class="cf">
<div class="fl w-100 w-30-ns">
<h2 class="lh-copy-lg-ns mb3 mb0-ns f8 gray ttu tracked ma0">Case Studies</h2>
</div>
<div class="fl w-100 w-70-ns">
{% assign projects = site.projects | where: "featured", true %}
{% for project in projects reversed limit: 3 %}
<article class="mb5">
<h3 class="f4 ma0 mb1 normal">
<a class="link near-black hover-blue dib" href="{{project.url}}">
{{project.title}}
{%if project.role contains "Design"%}
<svg class="icon ml1 icon-xs pink v-mid" title="Design">
<use xlink:href="#icon-triangle"></use>
</svg>
{%endif%}
{%if project.role contains "UX"%}
<svg class="icon ml1 icon-xs light-green v-mid" title="UX">
<use xlink:href="#icon-square"></use>
</svg>
{%endif%}
{%if project.role contains "Front-end Development"%}
<svg class="icon ml1 icon-xs blue v-mid" title="Front-end Development">
<use xlink:href="#icon-polygon"></use>
</svg>
{%endif%}
</a>
</h3>
<ul class="list gray list-horizontal-disc f7 b pa0 ma0 mb1">
<li class="dib mv1 mr1">{{ project.role | join: ', ' }}</li>
</ul>
</article>
{%endfor%}
<a class="ttu tracked b gray f8 link hover-blue" href="{{site.baseurl}}/projects">View all</a>
</div>
</section>
</div>
</section>
<section class="pv3 bw1 b--light-gray bb">
<div class="mw7 center pt4 pt5-ns ph4 ph0-l">
<div class="cf mb3 mb5-ns">
<div class="fl w-100 w-30-ns">
<h2 class="lh-copy-lg-ns mb3 mb0-ns f8 gray ttu tracked ma0">Side Projects</h2>
</div>
<div class="fl w-100 w-70-ns">
{% for post in site.side_projects %}
<article class="mb5">
<h3 class="f4 near-black ma0 mb1 normal lh-copy">
<a class="near-black hover-blue link link-arrow dib" href="{{post.url}}">
{{post.title}}
</a>
</h3>
<ul class="list gray list-horizontal-disc f7 b pa0 ma0 mb1">
<li class="dib mv1 mr1">{{post.description}}</li>
<!-- {%if post.categories%} {%for category in post.categories%}<li class="dib mv1 mr1"><a class="link gray hover-near-black" href="{{site.baseurl}}/category/{{category}}">{{category | prepend: "#"}}</a></li>{%endfor%}{%endif%} -->
</ul>
</article>
{%endfor%}
</div>
</div>
</div>
</section>
<section class="pv3">
<div class="mw7 center pv4 pv5-ns ph4 ph0-l">
<div class="cf mb3 mb5-ns">
<div class="fl w-100 w-30-ns">
<h2 class="lh-copy-lg-ns mb3 mb0-ns f8 gray ttu tracked ma0">Writing</h2>
</div>
<div class="fl w-100 w-70-ns">
{% for post in site.posts %}
<article class="mb5">
<h3 class="f4 near-black ma0 mb1 normal lh-copy">
<a class="near-black hover-blue link link-arrow dib" href="{{post.url}}">
{{post.title}}
</a>
</h3>
<ul class="list gray list-horizontal-disc f7 b pa0 ma0 mb1">
<li class="dib mv1 mr1">{{post.date | date: "%d %B %Y"}}</li>
<!-- {%if post.categories%} {%for category in post.categories%}<li class="dib mv1 mr1"><a class="link gray hover-near-black" href="{{site.baseurl}}/category/{{category}}">{{category | prepend: "#"}}</a></li>{%endfor%}{%endif%} -->
</ul>
</article>
{%endfor%}
<a class="ttu tracked b gray f8 link hover-blue" href="{{site.baseurl}}/blog">View all</a>
</div>
</div>
</div>
</section>
{% include footer.html %}