-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
283 lines (203 loc) · 15.1 KB
/
home.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
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
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home – Enoch Appathurai</title>
<meta name="author" content="@doctor_enoch">
<meta name="keywords" content="not, jeff, free, enoch, appathurai, code, design, web, ui, ux, app, mobile, portfolio, about, contact, melbourne, freelance">
<meta name="description" content="This is my awesome project">
<meta name="robots" content="index, follow, noarchive">
<meta name="base" content="http://nochy.me">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<!--[if ie]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="imagetoolbar" content="false" />
<![endif]-->
<link rel="shortcut icon" href="img/logo.png">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="http://tachyons.io/css/tachyons.min.css">
<script src="https://cdn.rawgit.com/cferdinandi/smooth-scroll/master/dist/js/smooth-scroll.min.js"></script>
<style>
.h-full { height: 100vh; }
.target-hide {
top: -500%;
transition: top 1.5s;
}
.target-hide:target {
top: 0;
transition: top 1s;
}
</style>
</head>
<body class="w-100 bg-white">
<nav class="dt w-100 border-box pa3 ph2 ph5-ns mb3 fixed top-0 left-0 bg-white-60">
<a class="ph3 dtc v-mid mid-gray link dim w-25 tl mb0" href="index.html" title="Home">
<img src="img/logo.png" class="dib w3 br-100" alt="Elephant Logo">
</a>
<div class="dtc v-mid w-25 tr">
<a data-scroll class="link dim dark-gray f6 f5-ns dn dib-ns mr3 mr4-ns" href="#" title="Home">Home</a>
<a data-scroll class="link dim dark-gray f6 f5-ns dn dib-ns mr3 mr4-ns" href="#about" title="About">About</a>
<a data-scroll class="link dim dark-gray f6 f5-ns dn dib-ns mr3 mr4-ns" href="#portfolio" title="Portfolio">Portfolio</a>
<a data-scroll class="link dim dark-gray f6 f5-ns dn dib-ns" href="#contact" title="Contact">Contact</a>
<a class="link dim dark-gray f2 db dn-ns pr3" href="#mobile-nav" title="Open Nav">+</a>
</div>
</nav>
<header class="pv6 tc">
<img src="img/hero.jpg" class="mb3 w-100 measure-ns">
<p class="sans-serif measure center tc tl-ns"><strong>Enoch Appathurai</strong> — Designer in Melbourne VIC</p>
</header>
<section id="about" class="pv6">
<h1 class="monospace f3 f2-ns lh-solid tc">About</h1>
<p class="serif f5 i dark-gray lh-copy tc">Hello, and welcome!</p>
<div class="ph2 measure-ns center mv5">
<div class="mb5">
<h2 class="sans-serif f4 f3-ns ttu tracked lh-title">Purpose</h2>
<p class="lh-copy serif dark-gray">When I was young(er), I used to dread doing work. Amidst all this, my parents kept on saying the same thing. “Don’t do [insert task here] just because you have to, do it out of love!” Throughout the years, this has stuck with me. Through my faith, and throughout my life, I have learnt that everything I do is out of love. I show my love by serving, and by doing so to the best of my abilities. I serve up my services, I serve up my creativity, I serve up my time, I serve up my talent, and all of this so that I can say that I’ve loved. Because for me, <strong><em>it’s love that counts.</em></strong></p>
</div>
<div class="pb5">
<h2 class="sans-serif f4 f3-ns ttu tracked lh-title">Process</h2>
<p class="lh-copy serif dark-gray">It’s very important for me to have a clear plan of action. In most projects, this is what my process look like:</p>
<ul class="lh-copy serif dark-gray">
<li><strong>Brief</strong>: This one’s all about the client, their goals, and their vision. Finding out what they want, what they need, who their audience is, and what I need to do. What is the problem?</li>
<li><strong>Research</strong>: In the Research stage, I focus on the end consumer: What do they do? What do they need? What problem exists? What solutions might work and does the client provide this?</li>
<li><strong>Ideate</strong>: This is the “sketching” phase, the part where quality <em>and</em> quantity coexist. Many good designs, iterating on each other to improve the quality. We’re trying to find solutions and how to implement them.</li>
<li><strong>Conceptualise</strong>: The “prototyping” phase where the ideas in the previous stage combine with the research that has been done to make a experience and interface that meets the needs of the client, and, more importantly, of the user. We settle on a final design… everything from now on is just to better the solutions, to refine them. This is the part where we test the major concepts and make sure that the workflow works. If something doesn’t work, we start again, because the process isn’t linear.</li>
<li><strong>Refine</strong>: Here, I switch things up. My skills as a front-end web designer come into play and I code up the design. We build a MVP (Minimum Viable Product) and make slight tweaks in the design. Some testing may be done, but these are small things: colours, alignment, etc.</li>
<li><strong>Present</strong>: Here, I present the final design, and explain why decisions were made. I explain where we go from here, how I’m going to transfer the code to the client. Oh, and I get paid!</li>
<li><strong>Aftermath</strong>: By this time, the client should have all the key requirements. Any extra “help” I give is given and charged for. Win, and win!</li>
</ul>
</div>
<div class="">
<h2 class="sans-serif f4 f3-ns ttu tracked lh-title">Experience and Education</h2>
<p class="lh-copy serif dark-gray">Being educated in some of the highest-achieving schools in Melbourne, the base of my knowledge is solid and vast. On top of that, I have practised web-design/development as well as app design for a number of years, improving my skills. With all this, and my experience in organisations such as <a href="http://SvGgaming.gg">Savage Gaming</a>, I am able to make products that are designed with the user and the content in mind.</p>
</div>
</div>
</section>
<section id="portfolio" class="pv6">
<h1 class="monospace f3 f2-ns lh-solid tc">Portfolio</h1>
<p class="serif f5 i dark-gray lh-copy tc">Check me out!</p>
<div class="mv5 tc">
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Graphic</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2777861/image.jpeg" class="w-100 db" alt="hello world.">
<div class="pa3">
<a href="http://dribbble.com/shots/2777861-hello-world" class="link dim lh-title">hello world.</a>
<small class="gray db pv2">Debut shot on Dribbble. <a href="http://dribbble.com/shots/2777861-hello-world" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Web, Code</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2781347/rsz_1screen_shot_2016-06-16_at_82745_pm.png" class="w-100 db" alt="Haroon Bakhsh">
<div class="pa3">
<a href="http://dribbble.com/shots/2781347-Haroon-Bakhsh-WIP" class="link dim lh-title">Haroon Bakhsh Site</a>
<small class="gray db pv2">One pager made for a client. <a href="http://dribbble.com/shots/2781347-Haroon-Bakhsh-WIP" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">App, UI, UX</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2785409/image.jpeg" class="w-100 db" alt="Codinator - Coding, on the iPad">
<div class="pa3">
<a href="http://dribbble.com/shots/2785409-Codinator-Coding-on-the-iPad" class="link dim lh-title">Codinator - Coding, on the iPad</a>
<small class="gray db pv2">The final production of Codinator - an app which lets you [...] <a href="http://dribbble.com/shots/2785409-Codinator-Coding-on-the-iPad" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Logo</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2785455/image.jpeg" class="w-100 db" alt="Elephant">
<div class="pa3">
<a href="http://dribbble.com/shots/2785455-Elephant" class="link dim lh-title">Elephant</a>
<small class="gray db pv2">My personal logo. <a href="http://dribbble.com/shots/2785455-Elephant" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Web</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2813851/img_4283.png" class="w-100 db" alt="
DARE - IāNDUSTōRY Launch Concept">
<div class="pa3">
<a href="http://dribbble.com/shots/2813851-DARE-I-NDUST-RY-Launch-Concept" class="link dim lh-title">
DARE - IāNDUSTōRY Launch Concept</a>
<small class="gray db pv2">The #DAREWITHME campaign must be familiar and [...] <a href="http://dribbble.com/shots/2813851-DARE-I-NDUST-RY-Launch-Concept" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Web, App, Article</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2816008/img_4300.png" class="w-100 db" alt="Article Page">
<div class="pa3">
<a href="http://dribbble.com/shots/2816008-Article-Page" class="link dim lh-title">Article Page</a>
<small class="gray db pv2">This is an article page made using only the finest of [...] <a href="http://dribbble.com/shots/2816008-Article-Page" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Web, Portfolio</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2829634/img_4417.jpg" class="w-100 db" alt="Website Refresh">
<div class="pa3">
<a href="https://dribbble.com/shots/2829634-Website-Refresh" class="link dim lh-title">Website Refresh</a>
<small class="gray db pv2">The minimal site you're looking at right now! <a href="https://dribbble.com/shots/2829634-Website-Refresh" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Graphic, Poster, Logo</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2840550/img_4446.png" class="w-100 db" alt="Switch To Happy">
<div class="pa3">
<a href="https://dribbble.com/shots/2840550-Switch-To-Happy" class="link dim lh-title">Switch To Happy</a>
<small class="gray db pv2">Work done for school promoting a switch to using Gross National Happiness [...] <a href="https://dribbble.com/shots/2840550-Switch-To-Happy" class="link black">Read More»</a></small>
</div>
</article>
<article class="dib v-top bg-white center mw5 ba b--black-10 mv3 mr3-ns">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Web, App, Article</h1>
</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/947742/screenshots/2864521/article.png" class="w-100 db" alt="Article [Part 2]">
<div class="pa3">
<a href="https://dribbble.com/shots/2864521-Article-Part-2" class="link dim lh-title">Article [Part 2]</a>
<small class="gray db pv2">Back again with another article! <a href="https://dribbble.com/shots/2864521-Article-Part-2" class="link black">Read More»</a></small>
</div>
</article>
<div>
</section>
<footer id="contact" class="bg-black white dt w-100 h-full mt6">
<div class="dtc v-mid">
<h1 class="monospace f3 f2-ns lh-solid tc">Contact</h1>
<p class="serif f5 i light-gray lh-copy tc">Let's connect! Hit me up on any of these platforms!</p>
<ul class="list pl0 mb4 tc">
<li class="mr3 mr4-ns dib">
<a href="http://twitter.com/enociz" class="f2 link white icon ion-social-twitter"></a>
</li>
<li class="mr3 mr4-ns dib">
<a href="http://github.com/enociz" class="f2 link white icon ion-social-github"></a>
</li>
<li class="mr3 mr4-ns dib">
<a href="http://dribbble.com/enociz" class="f2 link white icon ion-social-dribbble"></a>
</li>
<li class="mr3 mr4-ns dib">
<a href="skype:enociz" class="f2 link white icon ion-social-skype"></a>
</li>
<li class="dib">
<a href="mailto:[email protected]" class="f2 link white icon ion-email"></a>
</li>
</ul>
</div>
</footer>
<script>
smoothScroll.init();
</script>
<script async src='https://pepper.swat.io/embed.js?eyJwb3NpdGlvbiI6InJpZ2h0IiwiY29sb3IiOiIxMTExMTEiLCJjdXN0b21Db2xvciI6dHJ1ZSwiaWNvbiI6ImxpZmVzYXZlciIsInByb25vdW4iOiJtZSIsImxhbmd1YWdlIjoiZW4iLCJicmFuZGVkIjp0cnVlLCJpbnRyb1RleHQiOiJFbm9jaCBsaXZlcyBpbiBNZWxib3VybmUsIHdoaWNoIGlzIGF0IFVUQysxMS4gU28sIHBsZWFzZSBiZSB2YXJ5IHRoYXQgeW91ciBjb250YWN0IG1heSB0YWtlIHNvbWUgdGltZSB0byBwcm9jZXNzLiIsImNoYW5uZWxzIjpbWyJ0d2l0dGVyIiwiZW5vY2l6Iiwic29jaWFsIl0sWyJpbnN0YWdyYW0iLCJlbm9jaXpfIiwic29jaWFsIl0sWyJza3lwZSIsImVub2NpeiIsInNvY2lhbCJdLFsiZmFjZWJvb2siLCJlbm9jaXoiLCJzb2NpYWwiXSxbIm1lc3NlbmdlciIsImVub2NpeiIsInNvY2lhbCJdLFsicHJvZHVjdGh1bnQiLCJub3RqZWZmZnJlZSIsInNvY2lhbCJdLFsidmltZW8iLCJlbm9jaXoiLCJzb2NpYWwiXSxbInNvdW5kY2xvdWQiLCJlbjBjaXoiLCJzb2NpYWwiXSxbImdpdGh1YiIsImh0dHA6Ly9naXRodWIuY29tL2Vub2NpeiIsInNvY2lhbCJdLFsic25hcGNoYXQiLCJlbm9jaXoiLCJzb2NpYWwiXSxbIm1lZGl1bSIsImVub2NpeiIsInNvY2lhbCJdLFsid2Vic2l0ZSIsImh0dHA6Ly9lbm9jaXoubWUiLCJjbGFzc2ljIl0sWyJlbWFpbCIsImVub2NoYXBwYXRodXJhaUBnbWFpbC5jb20iLCJjbGFzc2ljIl0sWyJwaG9uZSIsIis2MTQ2OTEwODIzNiIsImNsYXNzaWMiXV19'></script>
<!-- This site is copyrighted under Australian law by Jeff Free -->
</body>
</html>