-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (142 loc) · 8.03 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Hello! I'm Chukwudumebi.</title>
<meta charset="utf-8" />
<meta name="description" content="Chukwudumebi Onwuli builds amazing web experiences.">
<meta name='keywords' content="chukwudumebi onwuli, dumebi onwuli, onwuli, dumebi, deeonwuli, frontend developer, nigeria, web developer, web, unilag, student">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Wrapper -->
<div id="wrapper">
<!-- Panel (Banner) -->
<section class="panel banner right">
<div class="content color0 span-3-75">
<h1 class="major">Hello, I'm<br />
Chukwudumebi.</h1>
<p>But everybody calls me <strong>Dumebi</strong>. I'm an undergraduate Computer Engineering student at the University of Lagos.<br><br>
I love building fun things, but I mostly build for the web now. I very much enjoy teaching and I am now trying to <a href="www.medium.com">write</a> as much as I can. <br><br>
To further my self development, I would like to <a href="https://m.facebook.com/WorldBankAfrica/videos/524550378105464?vh=e&d=n&sfns=mo">speak</a> at your next event about something interesting.</p>
<ul class="actions">
<li><a href="#first" class="button primary color1 circle icon solid fa-angle-right">Next</a></li>
</ul>
</div>
</section>
<!-- Panel -->
<section class="panel" id="first">
<section class="panel color2-alt">
<div class="inner columns aligned">
<div class="span-2-75">
<h2 class="major">Check out the fun stuff I'm building</h2>
<p>I've still got <strong>SO MUCH</strong> to learn, but here's a couple of things I enjoyed building. </p>
</div>
<div class="span-3">
<a href="https://deeonwuli.github.io/Color-Picker/" target="_blank"><h4>Colour Picker</h4></a>
<blockquote>
Colour picker is an awesome tool that matches the color in the user's image to the hex code, RGB code, colour family and the closest English name. Stemming from an argument between three friends on the colour of an item (it was yellow, not orange), colour picker gives the colours fun names.<br><br>
Chirag Mehta's awesome javascript library for colour identification <a href="http://chir.ag/projects/ntc/">Name that color (ntc js) </a>.<br><br>
<ul class="actions">
<li><a class="button">HTML5</a></li>
<li><a class="button">CSS3</a></li>
<li><a class="button">Javascript</a></li>
</ul>
Find your colour <strong><a href="https://deeonwuli.github.io/Color-Picker/" target="_blank">here</a></strong>. <br>
View the source code for this project <strong><a href="https://github.com/deeonwuli/Color-Picker" target="_blank">here</a></strong>.
</blockquote>
</div>
<div class="span-3">
<a href="NinjaGame/index.html" target="_blank"><h4>Penguinja</h4></a>
<blockquote>
After many years of training, a penguin ninja is trying to get away from the ninja academy. He faces adversaries in his former comrades and must collect rewards in his bid to get away.<br><br>
Built this game using the super amazing <a href="http://phaser.io/">Phaser.io</a> game development framework. <br>
<ul class="actions">
<li><a class="button">HTML5</a></li>
<li><a class="button">CSS3</a></li>
<li><a class="button">Javascript</a></li>
</ul>
I had an amazing team to help me with this: <br>
Art director: <strong><a href="https://vm.tiktok.com/J1hh1U4" target="_blank">Toyosi Ajiboye</a></strong><br>
Idea guy: <strong>Keneolise Onwuli</strong><br><br>
Help the Penguin escape <strong><a href="NinjaGame/index.html" target="_blank">here</a></strong>. <br>
View the source code for this project <strong><a href="https://github.com/deeonwuli/Portfolio/tree/master/NinjaGame" target="_blank">here</a></strong>.
</blockquote>
</div>
<!--
<div class="span-3">
<a href="https://www.instagram.com/a/r/?effect_id=843312476126156&ch=NzJiMDcyNGI2YTNmOThjM2ExZWNhOTdiYzcwNGM5NGY="><h4>What Gem Are You?</h4></a>
<blockquote>
This effect is a classic "What/Who are you?" instagram filter. It's based on the popular Cartoon Network show "Steven Universe" (I'm a huge fan). The show is made up of a lot of gems and fusions- aliens that protect the earth (sometimes) and in the filter you get to figure out what gem/fusion you are. <br><br>
You start recording and you are looped through a bunch of gems until the perfect one for you is found.<br><br>
Built this using SparkAR Studio and a tiny bit of Javascript.
<ul class="actions">
<li><a class="button">Javascript</a></li>
</ul>
Try out the filter on Instagram <strong><a href="https://www.instagram.com/a/r/?effect_id=843312476126156&ch=NzJiMDcyNGI2YTNmOThjM2ExZWNhOTdiYzcwNGM5NGY=">here</a></strong>. <br>
</blockquote>
</div> -->
</div>
</section>
</section>
<!-- Panel -->
<section class="panel color4-alt">
<div class="inner columns divided">
<div class="span-3-25">
<h2 class="major">Get at me</h2>
<p>I'm nice and I'd like to work with you. :)</p>
<form method="post" action="https://formspree.io/xoqljrjv">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="email" name="_replyto" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send" class="button primary" /></li>
</ul>
</form>
</div>
<div class="span-1-5">
<ul class="icons">
<!--<li><a href="https://twitter.com/deeonwuli" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://instagram.com/deeonwuli" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>-->
<li><a href="https://github.com/deeonwuli" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://medium.com/deeonwuli" class="icon brands fa-medium-m"><span class="label">Medium</span></a></li>
<li><a href="https://codepen.io/deeonwuli" class="icon brands fa-codepen"><span class="label">Codepen</span></a></li>
</ul>
</div>
</div>
</section>
<!-- Copyright -->
<span class="copyright">
©
<script>
document.write(new Date().getFullYear());
</script>
, made with <i class="fa fa-heart heart"></i> by Chukwudumebi
</span>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>