-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
315 lines (273 loc) · 23.6 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
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
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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>Portfolio</title>
<link rel="stylesheet" href="tailwind.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body class="bg-gradient-to-tl from-gray-900 to-black text-white font-poppins pb-12 h-100vh">
<!-- NAV BAR -->
<header class="sticky top-0 z-50">
<nav class="bg-gray-900 bg-opacity-50 backdrop-filter backdrop-blur-lg py-6">
<div class="px-8 md:px-14 lg:px-24 w-full">
<div class="flex justify-between items-center">
<!-- <div class="flex items-center space-x-36"> -->
<div class="flex items-center text-lg">
<a href="#">
Themba
</a>
</div>
<!-- </div> -->
<div class="flex items-center hidden md:flex space-x-12 items-center">
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</div>
<div class="hidden md:flex space-x-12 items-center">
<a href="pdf/Resume.pdf" target="_blank"><button class="bg-transparent hover:bg-yellow-500 text-yellow-500 py-1 px-4 border border-yellow-500 hover:bg-opacity-10 rounded-lg">Resume
</button></a>
</div>
<div class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
</div>
</div>
</nav>
</header>
<div id="butter">
<!-- HERO SECTION -->
<div class="container mt-2 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-24 w-full">
<div class="flex flex-wrap md:flex-nowrap">
<div class="flex justify-between items-center">
<div class="flex flex-wrap lg:ml-10 justify-center md:justify-start max-w-xl mt-0 md:my-36 ">
<div>
<!-- <a class="effect-shine pt-14 pb-2 hover:text-white"> -->
<pre><p class="flex shining pt-5 text-1/2xl text-gray-500 md:text-1/2xl lg:text-1/2xl text-center md:text-left"><svg class="h-5 w-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /> <line x1="12" y1="9" x2="12" y2="13" /> <line x1="12" y1="17" x2="12.01" y2="17" /></svg> SITE UNDER CONSTUCTION</p></pre>
<!-- </a> -->
<h1 class="text-2xl md:text-2xl lg:text-32xl text-center md:text-left">Hi my name is</h1>
<h1 class="text-5xl md:text-5xl lg:text-6xl text-center md:text-left text-yellow-500">Themba Ngobeni.</h1>
<h1 class="pt-5 text-2xl text-gray-500 md:text-2xl lg:text-2xl text-center md:text-left">This is my official portfolio website</h1>
<h1 class="pt-5 text-2xl text-gray-500 md:text-2xl lg:text-2xl text-center md:text-left">
<div class="text">
<p class="text-white text-2xl md:text-2xl lg:text-32xl text-center md:text-left">I am interested in</p>
<p>
<span class="word green">Ai_and_ML.</span>
<span class="word green">Web_Design.</span>
<span class="word green">UI/UX_Design.</span>
<span class="word green">Graphic_Design.</span>
</p>
</div>
</h1>
</div>
<div class="pt-16 my-auto">
<button class="bg-transparent shadow-lg h-10 w-32 hover:bg-yellow-500 text-yellow-400 hover:text-white border border-yellow-500 hover:border-transparent rounded-full">
<a href="#work">
My Work
</a>
</button>
</div>
</div>
<div class="text-gray-900 flex flex-col divide-gray-900 divide-y divide-y text-7xl super-size hover-none">
<div>DES</div>
<div>IGN</div>
</div>
</div>
</div>
</div>
<!-- My Work -->
<div class="container mt-64 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-24 w-full">
<section class="w-full">
<h2 id="work" class="text-4xl font-semibold">Some Things I’ve Built</h2>
<div class="grid grid-cols-1 md:grid-cols-3 lg: grid-cols-1 gap-6 mt-6">
<div class="bg-gray-900 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<div class="flex items-center px-10 mt-4">
<a href="https://github.com/ThembaTman0/Brain-Tumor-Segmentation" target="_blank" class="flex justify-between items-center mx-auto">
<svg class="h-8 w-8 text-white text-yellow-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>
</a>
</div>
<div class="px-6 py-4">
<div class="text-center font-semibold text-xl mb-2 text-white hover:text-yellow-500 transform transition duration-200 hover:scale-105">Brain-Tumor-Segmentation</div>
<p class=" text-white text-base">
The purpose of the project is to develop an automated supervised learning tumor diagnosis system that indicates whether a given brain MRI image represents a patient with tumor.
</p>
</div>
<div class="flex justify-between items-center mx-auto px-10 pb-4 pt-4">
<span class="inline-block mx-auto py-1 text-sm text-gray-400 mb-2">python</span>
</div>
</div>
<div class="bg-gray-900 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<div class="flex items-center px-10 mt-4">
<a href="https://github.com/ThembaTman0/Counting-Primes-using-TCP-Internet-Protocol" target="_blank" class="flex justify-between items-center mx-auto">
<svg class="h-8 w-8 text-white text-yellow-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>
</a>
</div>
<div class="px-6 py-4">
<div class="text-center font-semibold text-xl mb-2 hover:text-yellow-500 transform transition duration-200 hover:scale-105">Counting Prime Numbers</div>
<p class=" text-white text-base">
This project calculates how many prime numberstherearebetween 1 and 1000000 by using a Transmission Control Protocol (TCP) for client server systems.
</p>
</div>
<div class="flex justify-between items-center mx-auto px-10 pb-4 pt-4 ">
<span class="inline-block mx-auto py-1 text-sm text-gray-400 mb-2">python</span>
</div>
</div>
<div class="bg-gray-900 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<div class="flex items-center px-10 mt-4">
<a href="https://github.com/ThembaTman0/SATELLITE-IMAGE-CLASSIFICATION" target="_blank" class="flex justify-between items-center mx-auto">
<svg class="h-8 w-8 text-white text-yellow-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>
</a>
</div>
<div class="px-6 py-4">
<div class="text-center font-semibold text-xl mb-2 hover:text-yellow-500 transform transition duration-200 hover:scale-105">Satellite Image Classification</div>
<p class=" text-white text-base">
The main objective is to create an efficient, and reliable autonomous classification models using features extraction method to calssify satellite images.
</p>
</div>
<div class="flex justify-between items-center mx-auto px-10 pb-4 pt-4">
<span class="inline-block mx-auto py-1 text-sm text-gray-400 mb-2">python</span>
<!-- <span class="text-sm text-gray-400">python</span>
<span class="text-sm text-gray-400">python</span> -->
</div>
</div>
<div class="bg-gray-900 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<div class="flex items-center px-10 mt-4">
<a href="https://github.com/ThembaTman0/Python-Projects" target="_blank" class="flex justify-between items-center mx-auto">
<svg class="h-8 w-8 text-white text-yellow-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>
</a>
</div>
<div class="px-6 py-4">
<div class="text-center font-semibold text-xl mb-2 text-white hover:text-yellow-500 transform transition duration-200 hover:scale-105">WEB SCRAPPING PROJECTS</div>
<p class=" text-white text-base">
An Automated method is used to extract large amounts of data from websites. This code is mainly used for extracts the websites HTML code ,tables,image .etc
</p>
</div>
<div class="flex justify-between items-center mx-auto px-10 pb-4 pt-4">
<span class="inline-block mx-auto py-1 text-sm text-gray-400 mb-2">python</span>
</div>
</div>
<div class="bg-gray-900 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<div class="flex items-center mb:px-2 lg:px-10 mt-4">
<a href="https://github.com/ThembaTman0/Chat-Web-App" target="_blank" class="flex justify-between items-center mx-auto">
<svg class="h-8 w-8 text-white text-yellow-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>
</a>
</div>
<div class="px-6 py-4">
<div class="text-center font-semibold text-xl mb-2 text-white hover:text-yellow-500 transform transition duration-200 hover:scale-105">Chat-Web-App</div>
<p class=" text-white text-base">
A messaging Web Application or platform that enables users to instant message and connect with each other through their mobile devices.
</p>
</div>
<div class="flex justify-between items-center lg:mx-auto px-10 pb-4 pt-4 md:space-x-2 pt-4">
<span class="inline-block py-1 text-sm text-gray-400 mb-2">HTML</span>
<span class="inline-block py-1 text-sm text-gray-400 mb-2">CSS</span>
<span class="inline-block py-1 text-sm text-gray-400 mb-2">PHP</span>
<span class="inline-block py-1 text-sm text-gray-400 mb-2">MySQL</span>
<span class="inline-block py-1 text-sm text-gray-400 mb-2">JavaScript</span>
</div>
</div>
<div class="bg-gray-900 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<div class="flex items-center px-10 mt-4">
<a href="https://github.com/ThembaTman0/Games" target="_blank" class="flex justify-between items-center mx-auto">
<svg class="h-8 w-8 text-white text-yellow-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>
</a>
</div>
<div class="px-6 py-4">
<div class="text-center font-semibold text-xl mb-2 text-white hover:text-yellow-500 transform transition duration-200 hover:scale-105">Sudoku Solver</div>
<p class=" text-white text-base">
This is a sudoku solve that uses backtracking algorithm and PyAutoGUI to solve the sudoku puzzel in websites such as Sudoku.com or nytimes sudoku.
</p>
</div>
<div class="flex justify-between items-center mx-auto px-10 pb-4 pt-4">
<span class="inline-block mx-auto py-1 text-sm text-gray-400 mb-2">python</span>
</div>
</div>
</div>
</section>
</div>
<!-- About me -->
<div class="container mt-64 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-24 w-full">
<section class="w-full">
<h2 id="about" class="text-4xl font-semibold">About Me</h2>
<p class="">
<!-- Hi, my name is Themba Ngobeni. I am a Computer Science graduate from Wits university. I am interested in Graphic Design, UI/UX Design, and AI and ML -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
<!-- SKILES -->
<div class="container mt-64 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-24 w-full">
<section class="w-full">
<h2 id="skills" class="text-4xl font-semibold">Skills</h2>
<p class="my-12">Technologies I am familia with:</p>
<div class=" grid overflow-hidden grid-cols-4 grid-rows-3 gap-10 pt-14 pb-8 text-7xl lg:mx-auto">
<i class="devicon-css3-plain-wordmark"></i>
<i class="devicon-html5-plain-wordmark"></i>
<i class="devicon-java-plain-wordmark"></i>
<i class="devicon-javascript-plain"></i>
<i class="devicon-jupyter-plain-wordmark"></i>
<i class="devicon-ubuntu-plain-wordmark"></i>
<i class="devicon-mysql-plain-wordmark"></i>
<i class="devicon-php-plain"></i>
<i class="devicon-python-plain"></i>
<i class="devicon-tensorflow-original-wordmark"></i>
<i class="devicon-vscode-plain"></i>
<i class="devicon-tailwindcss-original-wordmark"></i>
</div>
</section>
</div>
<!-- Contacts -->
<div class="container mt-64 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-24 w-full">
<section class="w-full ">
<h2 id="contact" class="text-4xl font-semibold text-center pb-10">Get In Touch</h2>
<div class="flex justify-center items-center py-6 space-x-9 max-w-3xl rounded bg-gray-900 bg-opacity-60 backdrop-filter backdrop-blur-lg overflow-hidden shadow-lg">
<div class="">
<p class="text-center">Interested in working together? We should queue up a chat.</p>
</div>
<div class="">
<button class="bg-transparent shadow-lg h-10 w-32 hover:bg-yellow-500 text-yellow-400 hover:text-white border border-yellow-500 hover:border-transparent rounded-full">
<a href="mailto:thembatman0@gmail.com">
Let's chat
</a>
</button>
</div>
</div>
<!-- SOCIALS -->
<div class="flex justify-center items-center space-x-12 pt-14 pb-8">
<a href="https://www.linkedin.com/in/themba-ngobeni-6a163b164/" target="_blank">
<svg class="h-6 w-6 text-white transform transition duration-300 hover:text-yellow-400 hover:scale-125" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /> <rect x="2" y="9" width="4" height="12" /> <circle cx="4" cy="4" r="2" /></svg>
</a>
<a href="https://github.com/ThembaTman0" target="_blank">
<svg class="h-6 w-6 text-white transform transition duration-300 hover:text-yellow-400 hover:scale-125" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M9 19c-4.286 1.35-4.286-2.55-6-3m12 5v-3.5c0-1 .099-1.405-.5-2 2.791-.3 5.5-1.366 5.5-6.04a4.567 4.567 0 0 0 -1.333 -3.21 4.192 4.192 0 00-.08-3.227s-1.05-.3-3.476 1.267a12.334 12.334 0 0 0 -6.222 0C6.462 2.723 5.413 3.023 5.413 3.023a4.192 4.192 0 0 0 -.08 3.227A4.566 4.566 0 004 9.486c0 4.64 2.709 5.68 5.5 6.014-.591.589-.56 1.183-.5 2V21" /></svg>
</a>
<a href="mailto:thembatman0@gmail.com" target="_blank">
<svg class="h-8 w-6 text-white transform transition duration-300 hover:text-yellow-400 hover:scale-125" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /> <polyline points="22,6 12,13 2,6" /></svg>
</a>
<a href="https://codepen.io/thembatman0" target="_blank">
<svg class="h-8 w-8 text-white text-white transform transition duration-300 hover:text-yellow-400 hover:scale-125" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" /> <line x1="12" y1="22" x2="12" y2="15.5" /> <polyline points="22 8.5 12 15.5 2 8.5" /> <polyline points="2 15.5 12 8.5 22 15.5" /> <line x1="12" y1="2" x2="12" y2="8.5" /></svg>
</a>
</div>
<div class="flex justify-center items-center space-x-12 pt-4 pb-2">
<a href="https://github.com/ThembaTman0/Portfolio" target="_blank" class="effect-shine pt-14 pb-2 hover:text-white">
<p class="text-xs ">Designed & Built by Themba Ngobeni</p>
</a>
</div>
</section>
</div>
</div>
</body>
<!-- <script src="butter.js"></script>
<script>
butter.init({cancelOnTouch: true});
</script> -->
<script src="text.js"></script>
</html>