?
S
MarkupThis HTML template provides a sleek, responsive foundation for building a professional portfolio website. Featuring a clean layout, customizable sections for projects, skills, and contact information, it's perfect for developers, designers, and creatives looking to showcase their work online with minimal coding effort.
1===== LANDING PAGE ========
2<div class="min-h-screen bg-slate-900 text-white">
3 <!-- Navbar -->
4 <nav class="fixed z-50 w-full bg-slate-900/30 backdrop-blur-sm">
5 <div class="mx-auto max-w-7xl px-6">
6 <div class="flex h-20 justify-between">
7 <div class="flex items-center">
8 <span class="bg-gradient-to-r from-blue-400 to-teal-400 bg-clip-text text-2xl font-bold text-transparent">CT</span>
9 </div>
10 <div class="hidden items-center space-x-8 md:flex">
11 <a href="#about" class="text-gray-300 transition-colors hover:text-blue-400">About</a>
12 <a href="#expertise" class="text-gray-300 transition-colors hover:text-blue-400">Expertise</a>
13 <a href="#work" class="text-gray-300 transition-colors hover:text-blue-400">Work</a>
14 <a href="/contact" class="rounded-lg bg-blue-500 px-4 py-2 transition-colors hover:bg-blue-600">Contact</a>
15 </div>
16 </div>
17 </div>
18 </nav>
19
20 <!-- Hero Section -->
21 <div class="relative h-screen">
22 <div class="bg-grid-pattern absolute inset-0 opacity-10"></div>
23 <div class="mx-auto max-w-7xl px-6 pt-20">
24 <div class="flex h-[calc(100vh-80px)] items-center">
25 <div class="space-y-8">
26 <div class="space-y-4">
27 <h2 class="font-semibold tracking-wide text-blue-400">CTO & SOFTWARE ENGINEERING CONSULTANT</h2>
28 <h1 class="text-5xl font-bold md:text-7xl">
29 Building Digital
30 <span class="bg-gradient-to-r from-blue-400 to-teal-400 bg-clip-text text-transparent">Excellence</span>
31 </h1>
32 <p class="max-w-2xl text-xl text-gray-300">20+ years of experience transforming complex technical challenges into elegant solutions. Specializing in software architecture, team leadership, and digital transformation.</p>
33 </div>
34
35 <div class="flex space-x-4">
36 <a href="/contact" class="rounded-lg bg-blue-500 px-8 py-3 transition-colors hover:bg-blue-600">Work with me</a>
37 <a href="#work" class="rounded-lg border border-gray-600 px-8 py-3 transition-colors hover:border-blue-400">View Portfolio</a>
38 </div>
39
40 <div class="pt-12">
41 <p class="mb-4 text-gray-400">Trusted by industry leaders</p>
42 <div class="flex space-x-8 opacity-50 transition-opacity hover:opacity-100">
43 <div class="h-8 w-32 rounded bg-gray-700"></div>
44 <div class="h-8 w-32 rounded bg-gray-700"></div>
45 <div class="h-8 w-32 rounded bg-gray-700"></div>
46 </div>
47 </div>
48 </div>
49 </div>
50 </div>
51 </div>
52
53 <!-- Work Section -->
54 <div class="mx-auto max-w-7xl px-6 -mt-20" id="work">
55 <h2 class="mb-12 text-4xl font-bold">Selected Projects</h2>
56
57 <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
58 <!-- Card 1 -->
59 <div class="rounded-lg bg-slate-800/50 p-6 transition hover:bg-slate-800/70">
60 <div class="mb-2 text-blue-400">Enterprise SaaS</div>
61 <h3 class="mb-3 text-xl font-bold">Financial Analytics Platform</h3>
62 <p class="mb-4 text-gray-300">Led architecture and development of a high-performance analytics system processing $50B+ in transactions annually.</p>
63 <div class="flex flex-wrap gap-2">
64 <span class="rounded bg-slate-700 px-2 py-1 text-xs">Node.js</span>
65 <span class="rounded bg-slate-700 px-2 py-1 text-xs">React</span>
66 <span class="rounded bg-slate-700 px-2 py-1 text-xs">AWS</span>
67 </div>
68 </div>
69
70 <!-- Card 2 -->
71 <div class="rounded-lg bg-slate-800/50 p-6 transition hover:bg-slate-800/70">
72 <div class="mb-2 text-blue-400">FinTech</div>
73 <h3 class="mb-3 text-xl font-bold">Investment Management System</h3>
74 <p class="mb-4 text-gray-300">Architected a scalable platform handling portfolio management and real-time market data integration.</p>
75 <div class="flex flex-wrap gap-2">
76 <span class="rounded bg-slate-700 px-2 py-1 text-xs">Python</span>
77 <span class="rounded bg-slate-700 px-2 py-1 text-xs">Vue.js</span>
78 <span class="rounded bg-slate-700 px-2 py-1 text-xs">PostgreSQL</span>
79 </div>
80 </div>
81
82 <!-- Card 3 -->
83 <div class="rounded-lg bg-slate-800/50 p-6 transition hover:bg-slate-800/70">
84 <div class="mb-2 text-blue-400">Healthcare</div>
85 <h3 class="mb-3 text-xl font-bold">Telemedicine Platform</h3>
86 <p class="mb-4 text-gray-300">Built HIPAA-compliant video consultation system serving 100K+ monthly users.</p>
87 <div class="flex flex-wrap gap-2">
88 <span class="rounded bg-slate-700 px-2 py-1 text-xs">TypeScript</span>
89 <span class="rounded bg-slate-700 px-2 py-1 text-xs">WebRTC</span>
90 <span class="rounded bg-slate-700 px-2 py-1 text-xs">MongoDB</span>
91 </div>
92 </div>
93 </div>
94
95 <div class="mt-12 text-center">
96 <p class="mb-4 text-gray-400">Additional projects available upon request under NDA</p>
97 </div>
98 </div>
99</div>
100
101===== CONTACT PAGE ========
102<div class="min-h-screen bg-slate-900 text-white">
103 <!-- Navbar -->
104 <nav class="fixed z-50 w-full bg-slate-900/30 backdrop-blur-sm">
105 <div class="mx-auto max-w-7xl px-6">
106 <div class="flex h-20 justify-between">
107 <div class="flex items-center">
108 <span class="bg-gradient-to-r from-blue-400 to-teal-400 bg-clip-text text-2xl font-bold text-transparent">CT</span>
109 </div>
110 <div class="hidden items-center space-x-8 md:flex">
111 <a href="/" class="text-gray-300 transition-colors hover:text-blue-400">Home</a>
112 <a href="#about" class="text-gray-300 transition-colors hover:text-blue-400">About</a>
113 <a href="#expertise" class="text-gray-300 transition-colors hover:text-blue-400">Expertise</a>
114 <a href="#work" class="text-gray-300 transition-colors hover:text-blue-400">Work</a>
115 </div>
116 </div>
117 </div>
118 </nav>
119
120 <!-- Contact Section -->
121 <div class="relative pt-20">
122 <div class="bg-grid-pattern absolute inset-0 opacity-10"></div>
123 <div class="mx-auto max-w-7xl px-6 py-24">
124 <div class="grid gap-12 lg:grid-cols-2">
125 <!-- Left Column - Contact Info -->
126 <div class="space-y-8">
127 <div class="space-y-4">
128 <h1 class="text-4xl font-bold md:text-5xl">Let's Build Something Amazing Together</h1>
129 <p class="max-w-2xl text-xl text-gray-300">Ready to transform your technical challenges into elegant solutions? Let's discuss how we can collaborate.</p>
130 </div>
131
132 <div class="space-y-6">
133 <div>
134 <h3 class="mb-1 font-semibold text-blue-400">Email</h3>
135 <p class="text-gray-300">hello@example.com</p>
136 </div>
137 <div>
138 <h3 class="mb-1 font-semibold text-blue-400">Location</h3>
139 <p class="text-gray-300">San Francisco Bay Area, CA</p>
140 </div>
141 </div>
142
143 <div class="space-y-4">
144 <h3 class="font-semibold text-blue-400">Connect</h3>
145 <div class="flex space-x-4">
146 <a href="#" class="text-gray-400 hover:text-blue-400">
147 <span class="sr-only">LinkedIn</span>
148 <!-- LinkedIn Icon -->
149 <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
150 </a>
151 <a href="#" class="text-gray-400 hover:text-blue-400">
152 <span class="sr-only">GitHub</span>
153 <!-- GitHub Icon -->
154 <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
155 </a>
156 </div>
157 </div>
158 </div>
159
160 <!-- Right Column - Contact Form -->
161 <div class="rounded-lg bg-slate-800/50 p-8">
162 <form class="space-y-6">
163 <div>
164 <label for="name" class="mb-2 block text-sm font-medium text-gray-300">Name</label>
165 <input type="text" id="name" class="w-full rounded-lg border border-gray-600 bg-slate-800 px-4 py-2.5 text-white focus:border-blue-400 focus:outline-none" required>
166 </div>
167
168 <div>
169 <label for="email" class="mb-2 block text-sm font-medium text-gray-300">Email</label>
170 <input type="email" id="email" class="w-full rounded-lg border border-gray-600 bg-slate-800 px-4 py-2.5 text-white focus:border-blue-400 focus:outline-none" required>
171 </div>
172
173 <div>
174 <label for="message" class="mb-2 block text-sm font-medium text-gray-300">Message</label>
175 <textarea id="message" rows="4" class="w-full rounded-lg border border-gray-600 bg-slate-800 px-4 py-2.5 text-white focus:border-blue-400 focus:outline-none" required></textarea>
176 </div>
177
178 <button type="submit" class="w-full rounded-lg bg-blue-500 px-8 py-3 font-medium text-white transition-colors hover:bg-blue-600">
179 Send Message
180 </button>
181 </form>
182 </div>
183 </div>
184 </div>
185 </div>
186</div>
187
188===== Expertise PAGE ========
189<div class="min-h-screen bg-slate-900 text-white">
190 <!-- Navbar -->
191 <nav class="fixed z-50 w-full bg-slate-900/30 backdrop-blur-sm">
192 <div class="mx-auto max-w-7xl px-6">
193 <div class="flex h-20 justify-between">
194 <div class="flex items-center">
195 <span class="bg-gradient-to-r from-blue-400 to-teal-400 bg-clip-text text-2xl font-bold text-transparent">CT</span>
196 </div>
197 <div class="hidden items-center space-x-8 md:flex">
198 <a href="/" class="text-gray-300 transition-colors hover:text-blue-400">Home</a>
199 <a href="#about" class="text-gray-300 transition-colors hover:text-blue-400">About</a>
200 <a href="#expertise" class="text-gray-300 transition-colors hover:text-blue-400">Expertise</a>
201 <a href="#work" class="text-gray-300 transition-colors hover:text-blue-400">Work</a>
202 </div>
203 </div>
204 </div>
205 </nav>
206
207<!-- Expertise Section -->
208<div class="relative pt-20">
209 <div class="bg-grid-pattern absolute inset-0 opacity-10"></div>
210 <div class="mx-auto max-w-7xl px-6 py-24">
211 <!-- Intro Section -->
212 <div class="mb-20 max-w-3xl">
213 <h1 class="mb-6 text-4xl font-bold md:text-5xl">Technical Expertise & Leadership</h1>
214 <p class="text-xl text-gray-300">Delivering high-impact solutions across multiple domains with a focus on scalability, performance, and business value.</p>
215 </div>
216
217 <!-- Core Competencies -->
218 <div class="mb-20">
219 <h2 class="mb-12 text-3xl font-bold">Core Competencies</h2>
220 <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
221 <div class="rounded-lg bg-slate-800/50 p-6">
222 <div class="mb-4 text-blue-400">
223 <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
224 </div>
225 <h3 class="mb-2 text-xl font-bold">Software Architecture</h3>
226 <p class="text-gray-300">Designing scalable, maintainable systems that align with business objectives and technical constraints.</p>
227 </div>
228
229 <div class="rounded-lg bg-slate-800/50 p-6">
230 <div class="mb-4 text-blue-400">
231 <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
232 </div>
233 <h3 class="mb-2 text-xl font-bold">Technical Leadership</h3>
234 <p class="text-gray-300">Leading high-performing engineering teams and driving technical strategy and execution.</p>
235 </div>
236
237 <div class="rounded-lg bg-slate-800/50 p-6">
238 <div class="mb-4 text-blue-400">
239 <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
240 </div>
241 <h3 class="mb-2 text-xl font-bold">Security & Compliance</h3>
242 <p class="text-gray-300">Implementing robust security measures and ensuring regulatory compliance in software systems.</p>
243 </div>
244 </div>
245 </div>
246
247<!-- Technical Skills -->
248<div class="mb-20">
249 <h2 class="mb-12 text-3xl font-bold">Technical Leadership Areas</h2>
250 <div class="grid gap-8 md:grid-cols-2">
251 <!-- Strategic Focus -->
252 <div class="space-y-6">
253 <h3 class="text-xl font-semibold text-blue-400">Strategic Focus</h3>
254 <div class="space-y-4">
255 <div class="rounded-lg bg-slate-800/50 p-6">
256 <h4 class="mb-2 font-medium">Enterprise Architecture</h4>
257 <p class="text-gray-300">Designing and implementing scalable solutions for complex business challenges</p>
258 </div>
259 <div class="rounded-lg bg-slate-800/50 p-6">
260 <h4 class="mb-2 font-medium">Digital Transformation</h4>
261 <p class="text-gray-300">Leading organizations through technological evolution and modernization</p>
262 </div>
263 <div class="rounded-lg bg-slate-800/50 p-6">
264 <h4 class="mb-2 font-medium">Technology Strategy</h4>
265 <p class="text-gray-300">Aligning technical initiatives with business objectives and market opportunities</p>
266 </div>
267 </div>
268 </div>
269
270 <!-- Technical Domains -->
271 <div class="space-y-6">
272 <h3 class="text-xl font-semibold text-blue-400">Technology Ecosystem</h3>
273 <div class="space-y-4">
274 <div class="rounded-lg bg-slate-800/50 p-4">
275 <h4 class="mb-3 font-medium">Cloud & Infrastructure</h4>
276 <div class="flex flex-wrap gap-2">
277 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">AWS</span>
278 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">Azure</span>
279 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">GCP</span>
280 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">Kubernetes</span>
281 </div>
282 </div>
283 <div class="rounded-lg bg-slate-800/50 p-4">
284 <h4 class="mb-3 font-medium">Enterprise Systems</h4>
285 <div class="flex flex-wrap gap-2">
286 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">Microservices</span>
287 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">Event-Driven</span>
288 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">Distributed Systems</span>
289 </div>
290 </div>
291 <div class="rounded-lg bg-slate-800/50 p-4">
292 <h4 class="mb-3 font-medium">Data & Analytics</h4>
293 <div class="flex flex-wrap gap-2">
294 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">Big Data</span>
295 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">ML/AI</span>
296 <span class="rounded-full bg-slate-700 px-3 py-1 text-sm">Data Lakes</span>
297 </div>
298 </div>
299 </div>
300 </div>
301 </div>
302</div>
303
304 <!-- Experience Highlights -->
305 <div>
306 <h2 class="mb-12 text-3xl font-bold">Experience Highlights</h2>
307 <div class="space-y-8">
308 <div class="rounded-lg bg-slate-800/50 p-8">
309 <div class="mb-4 flex justify-between">
310 <div>
311 <h3 class="text-xl font-bold">Chief Technology Officer</h3>
312 <p class="text-blue-400">FinTech Innovation Corp</p>
313 </div>
314 <span class="text-gray-400">2018 - Present</span>
315 </div>
316 <ul class="list-disc space-y-2 pl-5 text-gray-300">
317 <li>Led digital transformation initiatives resulting in 200% increase in processing capacity</li>
318 <li>Architected cloud-native platform handling $50B+ in annual transactions</li>
319 <li>Built and mentored a team of 40+ engineers across 3 continents</li>
320 </ul>
321 </div>
322
323 <div class="rounded-lg bg-slate-800/50 p-8">
324 <div class="mb-4 flex justify-between">
325 <div>
326 <h3 class="text-xl font-bold">Technical Director</h3>
327 <p class="text-blue-400">Enterprise Solutions Inc</p>
328 </div>
329 <span class="text-gray-400">2015 - 2018</span>
330 </div>
331 <ul class="list-disc space-y-2 pl-5 text-gray-300">
332 <li>Spearheaded development of enterprise-scale microservices architecture</li>
333 <li>Reduced system downtime by 99.9% through infrastructure modernization</li>
334 <li>Implemented CI/CD pipelines reducing deployment time by 80%</li>
335 </ul>
336 </div>
337 </div>
338 </div>
339 </div>
340</div>
341</div>
342
343===== WORK PAGE ========
344<div class="min-h-screen bg-slate-900 text-white">
345 <!-- Navbar -->
346 <nav class="fixed z-50 w-full bg-slate-900/30 backdrop-blur-sm">
347 <div class="mx-auto max-w-7xl px-6">
348 <div class="flex h-20 justify-between">
349 <div class="flex items-center">
350 <span class="bg-gradient-to-r from-blue-400 to-teal-400 bg-clip-text text-2xl font-bold text-transparent">CT</span>
351 </div>
352 <div class="hidden items-center space-x-8 md:flex">
353 <a href="/" class="text-gray-300 transition-colors hover:text-blue-400">Home</a>
354 <a href="#about" class="text-gray-300 transition-colors hover:text-blue-400">About</a>
355 <a href="#expertise" class="text-gray-300 transition-colors hover:text-blue-400">Expertise</a>
356 <a href="#work" class="text-gray-300 transition-colors hover:text-blue-400">Work</a>
357 </div>
358 </div>
359 </div>
360 </nav>
361
362<!-- Work Section -->
363<div class="relative pt-20">
364 <div class="bg-grid-pattern absolute inset-0 opacity-10"></div>
365 <div class="mx-auto max-w-7xl px-6 py-24">
366 <!-- Intro -->
367 <div class="mb-20 max-w-3xl">
368 <h1 class="mb-6 text-4xl font-bold md:text-5xl">Selected Projects</h1>
369 <p class="text-xl text-gray-300">A collection of enterprise solutions and digital transformations that have driven significant business impact.</p>
370 </div>
371
372 <!-- Featured Project -->
373 <div class="mb-24">
374 <div class="overflow-hidden rounded-lg bg-slate-800/50">
375 <div class="grid lg:grid-cols-2">
376 <div class="p-8 lg:p-12">
377 <div class="mb-2 text-blue-400">Featured Project</div>
378 <h2 class="mb-4 text-2xl font-bold">Global Financial Platform</h2>
379 <p class="mb-6 text-gray-300">Led the development of a high-throughput financial processing platform handling $50B+ in annual transactions. Implemented real-time analytics, regulatory compliance, and global scaling capabilities.</p>
380
381 <div class="mb-8 space-y-4">
382 <div>
383 <div class="mb-1 text-sm font-medium text-gray-400">Impact</div>
384 <div class="text-gray-300">200% increase in processing capacity</div>
385 </div>
386 <div>
387 <div class="mb-1 text-sm font-medium text-gray-400">Scale</div>
388 <div class="text-gray-300">10M+ daily transactions</div>
389 </div>
390 </div>
391
392 <div class="flex flex-wrap gap-2">
393 <span class="rounded bg-slate-700 px-3 py-1 text-sm">Node.js</span>
394 <span class="rounded bg-slate-700 px-3 py-1 text-sm">TypeScript</span>
395 <span class="rounded bg-slate-700 px-3 py-1 text-sm">AWS</span>
396 <span class="rounded bg-slate-700 px-3 py-1 text-sm">Kubernetes</span>
397 </div>
398 </div>
399 <div class="bg-slate-700 p-8 lg:p-12">
400 <div class="aspect-video rounded-lg bg-slate-800"></div>
401 </div>
402 </div>
403 </div>
404 </div>
405
406 <!-- Project Grid -->
407 <div class="mb-24">
408 <h2 class="mb-12 text-3xl font-bold">Enterprise Solutions</h2>
409 <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
410 <!-- Project Card 1 -->
411 <div class="group rounded-lg bg-slate-800/50 p-8">
412 <div class="mb-4">
413 <div class="mb-2 text-blue-400">FinTech</div>
414 <h3 class="mb-3 text-xl font-bold">Investment Management System</h3>
415 <p class="mb-4 text-gray-300">Architected a scalable platform handling portfolio management and real-time market data integration.</p>
416 </div>
417 <div class="flex flex-wrap gap-2">
418 <span class="rounded bg-slate-700 px-2 py-1 text-xs">Python</span>
419 <span class="rounded bg-slate-700 px-2 py-1 text-xs">Vue.js</span>
420 <span class="rounded bg-slate-700 px-2 py-1 text-xs">PostgreSQL</span>
421 </div>
422 </div>
423
424 <!-- Project Card 2 -->
425 <div class="group rounded-lg bg-slate-800/50 p-8">
426 <div class="mb-4">
427 <div class="mb-2 text-blue-400">Healthcare</div>
428 <h3 class="mb-3 text-xl font-bold">Telemedicine Platform</h3>
429 <p class="mb-4 text-gray-300">Built HIPAA-compliant video consultation system serving 100K+ monthly users.</p>
430 </div>
431 <div class="flex flex-wrap gap-2">
432 <span class="rounded bg-slate-700 px-2 py-1 text-xs">TypeScript</span>
433 <span class="rounded bg-slate-700 px-2 py-1 text-xs">WebRTC</span>
434 <span class="rounded bg-slate-700 px-2 py-1 text-xs">MongoDB</span>
435 </div>
436 </div>
437
438 <!-- Project Card 3 -->
439 <div class="group rounded-lg bg-slate-800/50 p-8">
440 <div class="mb-4">
441 <div class="mb-2 text-blue-400">E-commerce</div>
442 <h3 class="mb-3 text-xl font-bold">Global Retail Platform</h3>
443 <p class="mb-4 text-gray-300">Developed distributed e-commerce system handling 1M+ daily orders across 20 countries.</p>
444 </div>
445 <div class="flex flex-wrap gap-2">
446 <span class="rounded bg-slate-700 px-2 py-1 text-xs">Go</span>
447 <span class="rounded bg-slate-700 px-2 py-1 text-xs">React</span>
448 <span class="rounded bg-slate-700 px-2 py-1 text-xs">Elasticsearch</span>
449 </div>
450 </div>
451 </div>
452 </div>
453
454 <!-- Case Studies -->
455 <div>
456 <h2 class="mb-12 text-3xl font-bold">Case Studies</h2>
457 <div class="grid gap-8 lg:grid-cols-2">
458 <!-- Case Study 1 -->
459 <div class="rounded-lg bg-slate-800/50 p-8">
460 <div class="mb-6">
461 <div class="mb-2 text-blue-400">Digital Transformation</div>
462 <h3 class="mb-4 text-xl font-bold">Legacy System Modernization</h3>
463 <p class="text-gray-300">Complete modernization of a 15-year-old monolithic system into a microservices architecture.</p>
464 </div>
465 <div class="mb-6 space-y-4">
466 <div class="flex justify-between border-b border-slate-700 pb-2">
467 <span class="text-gray-400">Timeline</span>
468 <span>18 months</span>
469 </div>
470 <div class="flex justify-between border-b border-slate-700 pb-2">
471 <span class="text-gray-400">Cost Reduction</span>
472 <span>65%</span>
473 </div>
474 <div class="flex justify-between border-b border-slate-700 pb-2">
475 <span class="text-gray-400">Performance Gain</span>
476 <span>300%</span>
477 </div>
478 </div>
479 <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300">
480 Read Case Study
481 <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
482 </a>
483 </div>
484
485 <!-- Case Study 2 -->
486 <div class="rounded-lg bg-slate-800/50 p-8">
487 <div class="mb-6">
488 <div class="mb-2 text-blue-400">Cloud Migration</div>
489 <h3 class="mb-4 text-xl font-bold">Zero-Downtime Cloud Migration</h3>
490 <p class="text-gray-300">Successfully migrated mission-critical systems to cloud infrastructure with zero service interruption.</p>
491 </div>
492 <div class="mb-6 space-y-4">
493 <div class="flex justify-between border-b border-slate-700 pb-2">
494 <span class="text-gray-400">Timeline</span>
495 <span>12 months</span>
496 </div>
497 <div class="flex justify-between border-b border-slate-700 pb-2">
498 <span class="text-gray-400">Infrastructure Cost</span>
499 <span>-40%</span>
500 </div>
501 <div class="flex justify-between border-b border-slate-700 pb-2">
502 <span class="text-gray-400">Deployment Speed</span>
503 <span>5x faster</span>
504 </div>
505 </div>
506 <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300">
507 Read Case Study
508 <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
509 </a>
510 </div>
511 </div>
512 </div>
513 </div>
514</div>
515</div>
516
517===== ABOUT PAGE ========
518<div class="min-h-screen bg-slate-900 text-white">
519 <!-- Navbar -->
520 <nav class="fixed z-50 w-full bg-slate-900/30 backdrop-blur-sm">
521 <div class="mx-auto max-w-7xl px-6">
522 <div class="flex h-20 justify-between">
523 <div class="flex items-center">
524 <span class="bg-gradient-to-r from-blue-400 to-teal-400 bg-clip-text text-2xl font-bold text-transparent">CT</span>
525 </div>
526 <div class="hidden items-center space-x-8 md:flex">
527 <a href="/" class="text-gray-300 transition-colors hover:text-blue-400">Home</a>
528 <a href="#about" class="text-gray-300 transition-colors hover:text-blue-400">About</a>
529 <a href="#expertise" class="text-gray-300 transition-colors hover:text-blue-400">Expertise</a>
530 <a href="#work" class="text-gray-300 transition-colors hover:text-blue-400">Work</a>
531 </div>
532 </div>
533 </div>
534 </nav>
535
536<div class="relative pt-20">
537 <div class="bg-grid-pattern absolute inset-0 opacity-10"></div>
538 <div class="mx-auto max-w-7xl px-6 py-24">
539 <!-- Intro Section -->
540 <div class="mb-20 grid gap-12 lg:grid-cols-2 lg:items-center">
541 <div class="space-y-6">
542 <h1 class="text-4xl font-bold md:text-5xl">Bridging Academia & Industry Innovation</h1>
543 <p class="text-xl text-gray-300">Combining rigorous academic research with real-world enterprise solutions to drive technological advancement in AI and software engineering.</p>
544 </div>
545 <div class="grid grid-cols-2 gap-6">
546 <div class="rounded-lg bg-slate-800/50 p-6">
547 <div class="mb-2 text-3xl font-bold text-blue-400">11+</div>
548 <div class="text-gray-300">Years Global Software Experience</div>
549 </div>
550 <div class="rounded-lg bg-slate-800/50 p-6">
551 <div class="mb-2 text-3xl font-bold text-blue-400">50K+</div>
552 <div class="text-gray-300">Monthly Blog Readers</div>
553 </div>
554 <div class="rounded-lg bg-slate-800/50 p-6">
555 <div class="mb-2 text-3xl font-bold text-blue-400">2</div>
556 <div class="text-gray-300">Published Papers</div>
557 </div>
558 <div class="rounded-lg bg-slate-800/50 p-6">
559 <div class="mb-2 text-3xl font-bold text-blue-400">MSc</div>
560 <div class="text-gray-300">Software Engineering</div>
561 </div>
562 </div>
563 </div>
564
565 <!-- Academic & Research -->
566 <div class="mb-20">
567 <h2 class="mb-12 text-3xl font-bold">Academic & Research Work</h2>
568 <div class="grid gap-8 lg:grid-cols-2">
569 <div class="rounded-lg bg-slate-800/50 p-8">
570 <h3 class="mb-4 text-xl font-bold">Academic Background</h3>
571 <div class="space-y-4">
572 <div>
573 <div class="text-blue-400">Master of Science in Software Engineering</div>
574 <div class="text-gray-300">University Name</div>
575 <div class="text-sm text-gray-400">Thesis: [Your Thesis Title]</div>
576 </div>
577 <div>
578 <div class="text-blue-400">Published Research Papers</div>
579 <ul class="mt-2 list-disc space-y-2 pl-4 text-gray-300">
580 <li>[Paper Title 1] - Journal/Conference Name</li>
581 <li>[Paper Title 2] - Journal/Conference Name</li>
582 </ul>
583 </div>
584 </div>
585 </div>
586
587 <div class="rounded-lg bg-slate-800/50 p-8">
588 <h3 class="mb-4 text-xl font-bold">AI Research & Blog</h3>
589 <div class="space-y-4">
590 <p class="text-gray-300">Leading research in AI/LLM applications and sharing insights through one of the major AI blogs in the industry.</p>
591 <div class="space-y-2">
592 <div class="font-medium text-blue-400">Recent Research Focus</div>
593 <ul class="list-disc space-y-2 pl-4 text-gray-300">
594 <li>Large Language Models Architecture & Applications</li>
595 <li>Enterprise AI Integration Patterns</li>
596 <li>Scalable AI Infrastructure</li>
597 </ul>
598 </div>
599 </div>
600 </div>
601 </div>
602 </div>
603
604 <!-- Industry Experience -->
605 <div class="mb-20">
606 <h2 class="mb-12 text-3xl font-bold">Industry Impact</h2>
607 <div class="space-y-8">
608 <div class="rounded-lg bg-slate-800/50 p-8">
609 <div class="mb-6 flex flex-wrap items-start justify-between gap-4">
610 <div>
611 <h3 class="text-xl font-bold">Global Technical Leadership</h3>
612 <p class="text-blue-400">Enterprise Software Architecture & AI Integration</p>
613 </div>
614 <span class="rounded-full bg-slate-700 px-4 py-1 text-sm">2012 - Present</span>
615 </div>
616 <div class="space-y-4">
617 <p class="text-gray-300">Led digital transformation initiatives and architectural decisions for Fortune 500 companies across finance, healthcare, and technology sectors.</p>
618 <div class="grid gap-6 md:grid-cols-3">
619 <div>
620 <div class="mb-1 text-sm font-medium text-gray-400">Industries Served</div>
621 <div class="text-gray-300">FinTech, Healthcare, Enterprise SaaS</div>
622 </div>
623 <div>
624 <div class="mb-1 text-sm font-medium text-gray-400">Team Leadership</div>
625 <div class="text-gray-300">40+ Engineers Globally</div>
626 </div>
627 <div>
628 <div class="mb-1 text-sm font-medium text-gray-400">Project Scale</div>
629 <div class="text-gray-300">$100M+ Portfolios</div>
630 </div>
631 </div>
632 </div>
633 </div>
634 </div>
635 </div>
636
637 <!-- Speaking & Community -->
638 <div>
639 <h2 class="mb-12 text-3xl font-bold">Speaking & Community</h2>
640 <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
641 <div class="rounded-lg bg-slate-800/50 p-6">
642 <div class="mb-4 text-blue-400">
643 <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
644 </div>
645 <h3 class="mb-2 text-xl font-bold">Technical Blog</h3>
646 <p class="text-gray-300">Regular publications on AI, software architecture, and enterprise technology.</p>
647 </div>
648
649 <div class="rounded-lg bg-slate-800/50 p-6">
650 <div class="mb-4 text-blue-400">
651 <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
652 </div>
653 <h3 class="mb-2 text-xl font-bold">Conference Speaker</h3>
654 <p class="text-gray-300">Regular speaker at major tech conferences on AI and enterprise architecture.</p>
655 </div>
656
657 <div class="rounded-lg bg-slate-800/50 p-6">
658 <div class="mb-4 text-blue-400">
659 <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
660 </div>
661 <h3 class="mb-2 text-xl font-bold">Community Leader</h3>
662 <p class="text-gray-300">Active contributor to open-source and technical communities.</p>
663 </div>
664 </div>
665 </div>
666 </div>
667</div>
668</div>
669Created on 12/25/2024