-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (166 loc) · 6.56 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
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thulani Nyama</title>
<!-- below is the link of font awesome icon -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen and (max-device-width: 608px)" href="tablet.css">
<link rel="stylesheet" media="screen and (max-device-width: 502px)" href="phone.css">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<meta name="google-site-verification" content="xSXs98rwpiwuOY4ZqTUzbL3kkBr5P6EzdCsAv2CJfZg" />
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/site.webmanifest">
</head>
<body>
<div id="container">
<!-- creating navigation menu -->
<div class="navbar">
<div id="nav">
<ul class="links">
<li><a href="https://thulaninyama.github.io/" class="nvg">Thulani</a></li>
<li><a href="https://thulaninyama.github.io/ThulaniNyama-about/">ABOUT</a></li>
<li><a href="">WORK</a></li>
<li><a href="">SKILL</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<canvas id="canvas1"></canvas>
<script src="script.js"></script>
<!-- creating hamburger icon -->
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<!-- adding social media icons -->
<div id="follow">
<a href="https://www.linkedin.com/in/thulani-nyama-816194198/">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<br>
<a href="https://github.com/ThulaniNyama">
<i class="fa fa-github" aria-hidden="true"></i>
</a><br>
<a href="mailto:[email protected]">
<i class="fa fa-envelope-open-o" aria-hidden="true"></i>
</a><br>
<a href="https://teams.live.com/l/invite/FAAGrY0mZNg2-_XwAI">
<img src="images/icon-teams.png">
</a><br><br>
<a href="https://join.skype.com/invite/KQBFYmpCY7Fz">
<i class="fa fa-skype" aria-hidden="true"></i>
</a><br>
<a href="https://wa.me/+27835166484">
<i class="fa fa-whatsapp" aria-hidden="true"></i><br>
</a>
</div>
<!-- background text -->
<div id="develop">DEVELOP</div>
<div id="web">WEB</div>
<div id="dev">DEVELOPER</div>
<div id="fullstack">Full-Stack</div>
<div id="dev">DEVELOPER</div>
<!-- this box contain some information -->
<div id="box1">
<div id="web2">Data<span id="dev2">Scientist</span></div>
<div id="vl"></div>
<div id="hello">Hello World,</div>
<div id="me">I am <span id="rks">Thulani Nyama, a versitile</span></div>
<div id="fullstackdev">
<div id="text"></div><div id="cursor"></div><span id="webdev22"> Engineer</span>
</div>
</div>
<div id="square1"></div>
<div id="square2"></div>
<!-- creating button -->
<button id="btncontact" onclick="window.location.href='https://www.linkedin.com/in/thulani-nyama-816194198/';">Hire Thulani</button>
<!-- Adding profile image in background -->
<div id="pic">
<img src="ThulaniNyama.png" alt="Thulani">
</div>
</div>
<!-- javascript for functioning of sidebar menu -->
<script>
const slide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navbar');
const navlinks = document.querySelectorAll('.links li');
burger.addEventListener('click', () => {
nav.classList.toggle('navbaract');
navlinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
}
else {
link.style.animation = `navlinkfade 4s ease backwards ${index / 10}s`;
}
});
});
}
slide();
// List of sentences
var _CONTENT = [
"Data",
"AI",
"ML",
"BI"
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 characater added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 100);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
</script>
</body>
</html>