PageSourceSearch

https://farhanprofile.netlify.app/

html farhanprofile.netlify.app collected 2026-10-03 10:43:28 UTC 41,380 bytes, 690 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=fc24660e-2507-455d-bfba-8405e543598b
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Farhan Khan | Cyber-Terminal Portfolio</title>
10    
10<script src="https://cdn.tailwindcss.com"></script>
10
11    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
12    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
13
14    <style>
15        /* Optional: Smooth scrolling for the navigation links */
16        html {
17            scroll-behavior: smooth;
18        }
19        /* Custom font for a code feel */
20        .font-code {
21            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
22        }
23
24        /* --- New Cyber-Blue/Magenta Global Styling --- */
25        :root {
26            --neon-blue: #00f0ff;    /* Cyan/Electric Blue */
27            --neon-magenta: #ff00ff; /* Fuchsia/Magenta */
28            --dark-bg: #03041A;      /* Very Dark Blue-Black */
29            --mid-bg: #101235;       /* Darker Blue-Gray */
30        }
31
32        .text-neon { color: var(--neon-blue); }
33        .bg-dark-grid { background-color: var(--dark-bg); }
34        .border-neon { border-color: var(--neon-blue); }
35        .text-neon-magenta { color: var(--neon-magenta); }
36
37        /* Neon Glow Utility (using blue for the main glow) */
38        .shadow-neon {
39            box-shadow: 0 0 8px var(--neon-blue), 0 0 15px var(--neon-blue);
40        }
41        .text-shadow-neon {
42            text-shadow: 0 0 4px var(--neon-blue), 0 0 10px rgba(0, 240, 255, 0.6);
43        }
44        .hover\:shadow-neon-lg:hover {
45            box-shadow: 0 0 12px var(--neon-blue), 0 0 30px var(--neon-blue);
46        }
47
48        /* Grid Background for Hero Section */
49        .hero-bg-grid {
50            background-color: var(--dark-bg);
51            /* Grid lines color */
52            background-image: linear-gradient(0deg, transparent 24%, rgba(0, 240, 255, 0.08) 25%, rgba(0, 240, 255, 0.08) 26%, transparent 27%, transparent 74%, rgba(0, 240, 255, 0.08) 75%, rgba(0, 240, 255, 0.08) 76%, transparent 77%, transparent),
53                              linear-gradient(90deg, transparent 24%, rgba(0, 240, 255, 0.08) 25%, rgba(0, 240, 255, 0.08) 26%, transparent 27%, transparent 74%, rgba(0, 240, 255, 0.08) 75%, rgba(0, 240, 255, 0.08) 76%, transparent 77%, transparent);
54            background-size: 50px 50px;
55        }
56
57        /* Typing Cursor Style */
58        .typing-cursor {
59            display: inline-block;
60            animation: blink 0.7s infinite;
61            visibility: visible;
62            color: var(--neon-blue);
63            text-shadow: 0 0 3px var(--neon-blue);
64        }
65        @keyframes blink {
66            50% { opacity: 0; }
67        }
68
69        /* Glitch/Hacker Text Effect for Main Name (using blue and magenta) */
70        .hacker-text {
71            animation: glitch 1.5s infinite;
72        }
73        @keyframes glitch {
74            0% { transform: translate(0, 0); text-shadow: 2px 0 var(--neon-blue), -2px 0 var(--neon-magenta); }
75            25% { transform: translate(-1px, 1px); text-shadow: -1px 0 var(--neon-blue), 1px 0 var(--neon-magenta); }
76            50% { transform: translate(1px, -1px); text-shadow: 3px 0 var(--neon-blue), -3px 0 var(--neon-magenta); }
77            75% { transform: translate(-1px, 0); text-shadow: -1px 0 var(--neon-blue), 1px 0 var(--neon-magenta); }
78            100% { transform: translate(0, 0); text-shadow: 2px 0 var(--neon-blue), -2px 0 var(--neon-magenta); }
79        }
80
81        /* --- PRELOADER STYLES --- */
82        #preloader {
83            position: fixed;
84            top: 0;
85            left: 0;
86            width: 100%;
87            height: 100%;
88            background: var(--dark-bg);
89            z-index: 9999;
90            display: flex;
91            flex-direction: column;
92            justify-content: center;
93            align-items: flex-start;
94            padding-left: 10vw;
95            transition: opacity 0.5s ease;
96        }
97
98        .preloader-line {
99            color: var(--neon-blue);
100            font-size: 1.1rem;
101            text-shadow: 0 0 2px rgba(0, 240, 255, 0.5);
102            margin-bottom: 5px;
103            opacity: 0;
104            animation: bootup 0.1s forwards;
105        }
106
107        @keyframes bootup {
108            to { opacity: 1; }
109        }
110
111        /* Delay the appearance of each line */
112        .preloader-line:nth-child(1) { animation-delay: 0.2s; }
113        .preloader-line:nth-child(2) { animation-delay: 0.4s; }
114        .preloader-line:nth-child(3) { animation-delay: 0.6s; }
115        .preloader-line:nth-child(4) { animation-delay: 0.8s; }
116        .preloader-line:nth-child(5) { animation-delay: 1.2s; }
117        .preloader-line:nth-child(6) { animation-delay: 1.8s; }
118
119        /* Final welcome message styling */
120        .preloader-line:nth-child(7) {
121            animation-delay: 2.2s;
122            font-size: 2.5rem;
123            margin-top: 1.5rem;
124            color: var(--neon-magenta); /* Use magenta for the final emphasis */
125            text-shadow: 0 0 5px var(--neon-magenta), 0 0 15px var(--neon-magenta);
126        }
127
128        /* Loading Dots for the final line */
129        .preloader-dots::after {
130            content: '';
131            animation: dots 2s steps(4, end) infinite;
132        }
133        @keyframes dots {
134            0%, 20% { content: '.'; }
135            40% { content: '..'; }
136            60% { content: '...'; }
137            80%, 100% { content: '....'; }
138        }
139
140        /* Optional: Hide scrollbar during preload */
141        .no-scroll {
142            overflow: hidden;
143        }
144
145        /* Project Card Image Styling */
146        .project-image {
147            position: relative;
148            height: 170px; /* Adjust height as needed */
149            width: 100%;
150            overflow: hidden;
151            border-bottom: 2px solid var(--neon-blue);
152        }
153
154        .project-image img {
155            width: 100%;
156            height: 100%;
157            object-fit:contain; /* Ensures the image covers the area without distortion */
158            object-position: center;
159            transition: transform 0.3s ease;
160        }
161
162        /* Centered Project Name */
163        .project-name-centered {
164            background: rgba(0, 0, 0, 0.7); /* Semi-transparent background for readability */
165            color: var(--neon-blue);
166            padding: 5px 10px;
167            font-size: 1.2rem;
168            font-weight: bold;
169            text-transform: uppercase;
170            text-shadow: 0 0 4px var(--neon-magenta);
171            border-radius: 3px;
172        }
173        .sent-message {
174            display: none;
175            color: #ffffff;
176            background: #059652;
177            text-align: center;
178            padding: 15px;
179            margin-bottom: 24px;
180            font-weight: 600;
181        }
182    </style>
183</head>
184<body class="bg-dark-grid text-gray-100 font-code no-scroll">
185
186    <div id="preloader">
187        <p class="preloader-line">SYSTEM_BOOTUP: INITIATED...</p>
188        <p class="preloader-line">LOADING CORE MODULES... [STATUS: OK]</p>
189        <p class="preloader-line">ACCESSING USER DATA: FARHAN KHAN</p>
190        <p class="preloader-line">PERFORMING SECURITY CHECK... [PASSED]</p>
191        <p class="preloader-line">ESTABLISHING VIRTUAL CONNECTION...</p>
192        <p class="preloader-line">RENDERING PORTFOLIO INTERFACE<span class="preloader-dots"></span></p>
193        <p class="preloader-line text-neon-magenta">WELCOME, DEVELOPER</p>
194    </div>
195
196    <header class="sticky top-0 z-50 bg-black shadow-lg border-b border-neon">
197        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
198            <a href="#" class="text-2xl font-bold text-neon text-shadow-neon hover:text-cyan-400 transition duration-300 font-code">
199                [Farhan_Khan] $
200            </a>
201
202            <div class="hidden md:flex space-x-8">
203                <a href="#hero" class="text-gray-400 hover:text-neon transition duration-300">HOME</a>
204                <a href="#skills" class="text-gray-400 hover:text-neon transition duration-300">SKILLS</a>
205                <a href="#projects" class="text-gray-400 hover:text-neon transition duration-300">PROJECTS</a>
206                <a href="#contact" class="text-gray-400 hover:text-neon transition duration-300">CONTACT</a>
207            </div>
208
209            <button class="md:hidden text-gray-400 hover:text-neon focus:outline-none">
210                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
211            </button>
212        </nav>
213    </header>
214
215    <main>
216
217        <section id="hero" class="py-20 md:py-32 hero-bg-grid border-b border-gray-700">
218            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between">
219
220                <div class="md:w-1/2 text-center md:text-left mb-10 md:mb-0" data-aos="fade-right">
221                    <p class="text-lg text-neon font-semibold uppercase tracking-wider">// STATUS: ONLINE.SYSTEM_ACTIVE</p>
222                    <h1 class="text-5xl md:text-6xl font-extrabold leading-tight text-gray-50 mt-2 font-code hacker-text">
223                        Farhan Khan
224                    </h1>
225                    <h2 class="text-2xl md:text-3xl text-gray-400 mt-4 font-light">
226                        > Role: <span id="typing-text" class="font-medium text-neon text-shadow-neon"></span><span class="typing-cursor">█</span>
227                    </h2>
228                    <p class="text-gray-500 mt-6 max-w-lg mx-auto md:mx-0 font-code">
229                        // COMMIT MESSAGE: Dedicated to elegant, performant, and scalable web solutions using modern frontend and CMS technologies.
230                    </p>
231                    <div class="mt-8 flex justify-center md:justify-start space-x-4">
232                        <a href="#projects" class="px-6 py-3 bg-neon text-neon font-semibold rounded-lg shadow-neon hover:shadow-neon-lg transition duration-300 transform hover:scale-105 border-2 border-neon">
233                            VIEW WORK (EXECUTE)
234                        </a>
235                        <a href="#contact" class="px-6 py-3 border-2 border-neon text-neon font-semibold rounded-lg hover:bg-mid-bg hover:shadow-neon transition duration-300 transform hover:scale-105">
236                            GET IN TOUCH
237                        </a>
238                    </div>
239                </div>
240
241                <div class="md:w-1/3" data-aos="fade-left">
242                    <div class="w-64 h-64 md:w-80 md:h-80 mx-auto bg-mid-bg border-4 border-neon shadow-neon rounded-full flex items-center justify-center overflow-hidden">
243                        <img src="/Images/Farhanimg.png" alt="Farhan Khan's Professional Avatar" class="object-cover h-full w-full opacity-70 hover:opacity-100 transition duration-500">
244                    </div>
245                </div>
246            </div>
247        </section>
248
249        <section id="skills" class="py-16 md:py-24 bg-mid-bg border-b border-gray-700">
250            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
251                <h2 class="text-4xl font-extrabold text-neon text-shadow-neon" data-aos="fade-up">Core Skills: [Loaded]</h2>
252                <p class="mt-4 text-xl text-gray-400 font-code" data-aos="fade-up" data-aos-delay="200">// MODULES.list()</p>
253
254                <div class="mt-12 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-8">
255                    
256                    <div class="p-6 bg-dark-grid border border-neon rounded-xl shadow-lg hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1" data-aos="flip-up" data-aos-delay="100">
257                        <div class="text-4xl text-orange-500 mb-3"><i class="fab fa-html5"></i> / <i class="fab fa-css3-alt"></i></div>
258                        <h3 class="text-lg font-semibold text-neon-magenta">HTML/CSS</h3>
259                        <p class="text-sm text-gray-400 mt-1 font-code">Markup.render()</p>
260                    </div>
261
262                    <div class="p-6 bg-dark-grid border border-neon rounded-xl shadow-lg hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1" data-aos="flip-up" data-aos-delay="200">
263                        <div class="text-4xl text-yellow-400 mb-3"><i class="fab fa-js"></i></div>
264                        <h3 class="text-lg font-semibold text-neon">JavaScript</h3>
265                        <p class="text-sm text-gray-400 mt-1 font-code">Logic.execute()</p>
266                    </div>
267
268                    <div class="p-6 bg-dark-grid border border-neon rounded-xl shadow-lg hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1" data-aos="flip-up" data-aos-delay="300">
269                        <div class="text-4xl text-purple-500 mb-3"><i class="fab fa-bootstrap"></i></div>
270                        <h3 class="text-lg font-semibold text-neon-magenta">Bootstrap</h3>
271                        <p class="text-sm text-gray-400 mt-1 font-code">Framework()</p>
272                    </div>
273
274                    <div class="p-6 bg-dark-grid border border-neon rounded-xl shadow-lg hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1" data-aos="flip-up" data-aos-delay="400">
275                        <div class="text-4xl text-blue-500 mb-3"><i class="fab fa-wordpress"></i></div>
276                        <h3 class="text-lg font-semibold text-neon">WordPress</h3>
277                        <p class="text-sm text-gray-400 mt-1 font-code">CMS.Deploy()</p>
278                    </div>
279
280                    <div class="p-6 bg-dark-grid border border-neon rounded-xl shadow-lg hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1" data-aos="flip-up" data-aos-delay="500">
281                        <div class="text-4xl text-red-500 mb-3"><i class="fas fa-palette"></i></div> 
282                        <h3 class="text-lg font-semibold text-neon-magenta">Elementor</h3>
283                        <p class="text-sm text-gray-400 mt-1 font-code">Design.Kit()</p>
284                    </div>
285
286                    <div class="p-6 bg-dark-grid border border-neon rounded-xl shadow-lg hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1" data-aos="flip-up" data-aos-delay="600">
287                        <div class="text-4xl text-green-400 mb-3"><i class="fab fa-shopify"></i></div>
288                        <h3 class="text-lg font-bold text-neon">Shopify</h3>
289                        <p class="text-sm text-gray-400 mt-1 font-code">Ecom.Service()</p>
290                    </div>
291                    
292                    <div class="p-6 bg-dark-grid border border-neon rounded-xl shadow-lg hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1" data-aos="flip-up" data-aos-delay="700">
293                        <div class="text-4xl text-blue-300 mb-3"><i class="fas fa-edit"></i></div>
294                        <h3 class="text-lg font-semibold text-neon-magenta">WP-Editor</h3>
295                        <p class="text-sm text-gray-400 mt-1 font-code">Code.Tweak()</p>
296                    </div>
297                </div>
298            </div>
299        </section>
300
301        <section id="projects" class="py-16 md:py-24 bg-dark-grid border-b border-gray-700">
302            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
303                <h2 class="text-4xl font-extrabold text-neon text-shadow-neon" data-aos="zoom-in-up">Project Log: Latest Missions</h2>
304                <p class="mt-4 text-xl text-gray-400 font-code" data-aos="zoom-in-up" data-aos-delay="200">// FETCHING 9 RESULTS FROM DATABASE... (Click 'LIVE' to view)</p>
305
306                <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
307                    <!-- Project 1 -->
308                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon" data-aos="fade-up">
309                        <div class="project-image">
310                            <img src="/Images/Veerimg.png" alt="Veer Punjab Food">
311                            
312                        </div>
313                        <div class="p-6 text-left">
314                            <div class="project-name-centered">VEER_PUNJAB_FOOD</div>
315                            <p class="mt-2 text-gray-400 text-sm">// Modern WordPress design using Elementor. Focused on dynamic menu and booking system.</p>
316                            <div class="mt-4 flex flex-wrap gap-2">
317                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
318                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
319                            </div>
320                            <div class="mt-5 flex space-x-4">
321                                <a href="https://veerpunjabrestaurant.com/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
322                            </div>
323                        </div>
324                    </div>
325
326                    <!-- Project 2 -->
327                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon-magenta" data-aos="fade-up" data-aos-delay="100">
328                        <div class="project-image">
329                            <img src="/Images/cosmeticpic.png" alt="Cosmetico Plasty">
330                            
331                        </div>
332                        <div class="p-6 text-left">
333                            <div class="project-name-centered">COSMETICO_PLASTY</div>
334                            <p class="mt-2 text-gray-400 text-sm">// High-end medical landing pages with advanced forms. Built for professional look and feel.</p>
335                            <div class="mt-4 flex flex-wrap gap-2">
336                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
337                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
338                            </div>
339                            <div class="mt-5 flex space-x-4">
340                                <a href="https://cosmeticoplasty.com/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
341                            </div>
342                        </div>
343                    </div>
344
345                    <!-- Project 3 -->
346                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon" data-aos="fade-up" data-aos-delay="200">
347                        <div class="project-image">
348                            <img src="/Images/pm-aesthetics.png" alt="PM Aesthetics AU">
349                            
350                        </div>
351                        <div class="p-6 text-left">
352                            <div class="project-name-centered">PM_AESTHETICS_AU</div>
353                            <p class="mt-2 text-gray-400 text-sm">// Detailed service pages and location optimization using Elementor.</p>
354                            <div class="mt-4 flex flex-wrap gap-2">
355                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
356                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
357                            </div>
358                            <div class="mt-5 flex space-x-4">
359                                <a href="https://www.pmaesthetics.com.au/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
360                            </div>
361                        </div>
362                    </div>
363
364                    <!-- Project 4 -->
365                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon-magenta" data-aos="fade-up" data-aos-delay="300">
366                        <div class="project-image">
367                            <img src="/Images/qatadapic.png" alt="Qatada Ecommerce">
368                            
369                        </div>
370                        <div class="p-6 text-left">
371                            <div class="project-name-centered">QATADA_ECOMMERCE</div>
372                            <p class="mt-2 text-gray-400 text-sm">// Complete Shopify setup, theme customization, and product organization for an online store.</p>
373                            <div class="mt-4 flex flex-wrap gap-2">
374                                <span class="bg-gray-700 text-green-400 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">SHOPIFY</span>
375                                <span class="bg-gray-700 text-pink-400 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">LIQUID</span>
376                            </div>
377                            <div class="mt-5 flex space-x-4">
378                                <a href="https://www.qatada.pk/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
379                            </div>
380                        </div>
381                    </div>
382
383                    <!-- Project 5 -->
384                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon" data-aos="fade-up" data-aos-delay="400">
385                        <div class="project-image">
386                            <img src="/Images/Ultratech.png" alt="Ultratech Store">
387                        </div>
388                        <div class="p-6 text-left">
389                            <div class="project-name-centered">ULTRATECH_STORE</div>
390                            <p class="mt-2 text-gray-400 text-sm">// Optimized Shopify interface for electronic goods. Focus on load speed and user funnel.</p>
391                            <div class="mt-4 flex flex-wrap gap-2">
392                                <span class="bg-gray-700 text-green-400 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">SHOPIFY</span>
393                                <span class="bg-gray-700 text-pink-400 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">E-COMMERCE</span>
394                            </div>
395                            <div class="mt-5 flex space-x-4">
396                                <a href="https://ultratech.pk/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
397                            </div>
398                        </div>
399                    </div>
400
401                    <!-- Project 6 -->
402                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon-magenta" data-aos="fade-up" data-aos-delay="500">
403                        <div class="project-image">
404                            <img src="/Images/carrecovery.png" alt="Recovery Abu Dhabi">
405                            
406                        </div>
407                        <div class="p-6 text-left">
408                            <div class="project-name-centered">RECOVERY_ABUDHABI</div>
409                            <p class="mt-2 text-gray-400 text-sm">// Simple, high-conversion Elementor landing page for lead generation.</p>
410                            <div class="mt-4 flex flex-wrap gap-2">
411                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
412                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
413                            </div>
414                            <div class="mt-5 flex space-x-4">
415                                <a href="https://carrecoveryabudhabi.ae/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
416                            </div>
417                        </div>
418                    </div>
419
420                    <!-- Project 7 -->
421                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon" data-aos="fade-up" data-aos-delay="600">
422                        <div class="project-image">
423                            <img src="/Images/orthocenter.png" alt="Orthocenter PK">
424                            
425                        </div>
426                        <div class="p-6 text-left">
427                            <div class="project-name-centered">ORTHOCENTER_PK</div>
428                            <p class="mt-2 text-gray-400 text-sm">// Complex, multi-page WordPress site. Used Elementor for detailed layouts.</p>
429                            <div class="mt-4 flex flex-wrap gap-2">
430                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
431                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
432                            </div>
433                            <div class="mt-5 flex space-x-4">
434                                <a href="https://orthocenter.pk/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
435                            </div>
436                        </div>
437                    </div>
438
439                    <!-- Project 8 -->
440                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon-magenta" data-aos="fade-up" data-aos-delay="700">
441                        <div class="project-image">
442                            <img src="/Images/Navicosoft.png" alt="Navicosoft.COM">
443                            
444                        </div>
445                        <div class="p-6 text-left">
446                            <div class="project-name-centered">NAVICOSOFT_COM</div>
447                            <p class="mt-2 text-gray-400 text-sm">// Corporate-level website design. Contribution via Elementor implementation.</p>
448                            <div class="mt-4 flex flex-wrap gap-2">
449                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
450                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
451                            </div>
452                            <div class="mt-5 flex space-x-4">
453                                <a href="https://www.navicosoft.com/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
454                            </div>
455                        </div>
456                    </div>
457
458                    <!-- Project 9 -->
459                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon" data-aos="fade-up" data-aos-delay="800">
460                        <div class="project-image">
461                            <img src="/Images/Navicosoft-au.png" alt="Navicosoft AU">
462                            
463                        </div>
464                        <div class="p-6 text-left">
465                            <div class="project-name-centered">NAVICOSOFT_AU</div>
466                            <p class="mt-2 text-gray-400 text-sm">// Regional clone/version of the corporate site. Elementor usage for responsive design.</p>
467                            <div class="mt-4 flex flex-wrap gap-2">
468                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
469                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
470                            </div>
471                            <div class="mt-5 flex space-x-4">
472                                <a href="https://www.navicosoft.com.au/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
473                            </div>
474                        </div>
475                    </div>
476
477
478                       <!-- Project 8 -->
479                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon-magenta" data-aos="fade-up" data-aos-delay="700">
480                        <div class="project-image">
481                            <img src="/Images/Lab.png" alt="Navicosoft.COM">
482                            
483                        </div>
484                        <div class="p-6 text-left">
485                            <div class="project-name-centered">Alnasar Lab</div>
486                            <p class="mt-2 text-gray-400 text-sm">// Deliver precise, advanced diagnostic services. Contribution via Elementor implementation.</p>
487                            <div class="mt-4 flex flex-wrap gap-2">
488                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
489                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
490                            </div>
491                            <div class="mt-5 flex space-x-4">
492                                <a href="https://alnasarlab.com/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
493                            </div>
494                        </div>
495                    </div>
496
497
498                      <!-- Project 8 -->
499                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon-magenta" data-aos="fade-up" data-aos-delay="700">
500                        <div class="project-image">
501                            <img src="/Images/Slimmers.png" alt="Slimmers">
502                            
503                        </div>
504                        <div class="p-6 text-left">
505                            <div class="project-name-centered">Slimmers</div>
506                            <p class="mt-2 text-gray-400 text-sm">// Promote sustainable, non-invasive weight loss solutions. Contribution via Elementor implementation.</p>
507                            <div class="mt-4 flex flex-wrap gap-2">
508                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
509                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
510                            </div>
511                            <div class="mt-5 flex space-x-4">
512                                <a href="https://www.slimmers.com.pk/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
513                            </div>
514                        </div>
515                    </div>  
516
517
518
519
520                    <div class="bg-mid-bg rounded-xl shadow-lg overflow-hidden hover:shadow-neon-lg transition duration-300 transform hover:-translate-y-1 border border-neon" data-aos="fade-up" data-aos-delay="800">
521                        <div class="project-image">
522                            <img src="/Images/Epro.png" alt="Epro-cleaning">
523                            
524                        </div>
525                        <div class="p-6 text-left">
526                            <div class="project-name-centered">Epro-cleaning</div>
527                            <p class="mt-2 text-gray-400 text-sm">// Promote professional, eco-friendly cleaning services.Elementor usage for responsive design.</p>
528                            <div class="mt-4 flex flex-wrap gap-2">
529                                <span class="bg-gray-700 text-yellow-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">WORDPRESS</span>
530                                <span class="bg-gray-700 text-red-500 text-xs font-medium px-2.5 py-0.5 rounded-sm font-code">ELEMENTOR</span>
531                            </div>
532                            <div class="mt-5 flex space-x-4">
533                                <a href="https://www.eproclean.com.au/" target="_blank" class="text-neon hover:text-cyan-400 font-medium transition duration-300 font-code border-b border-neon">LIVE &rarr;</a>
534                            </div>
535                        </div>
536                    </div>
537
538                    
539
540
541
542                </div>
543
544                <div class="mt-12">
545                    <a href="#contact" class="px-8 py-3 text-lg font-semibold border-2 border-neon text-neon rounded-sm shadow-neon hover:bg-neon hover:text-neon transition duration-300 font-code">
546                        DEPLOY MORE &gt;&gt;
547                    </a>
548                </div>
549            </div>
550        </section>
551
552        <section id="contact" class="py-16 md:py-24 bg-mid-bg" data-aos="fade-in">
553            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
554                <div class="text-center" data-aos="fade-up">
555                    <h2 class="text-4xl font-extrabold text-neon text-shadow-neon">SEND_MESSAGE( )</h2>
556                    <p class="mt-4 text-xl text-gray-400 font-code">// Initializing secure connection for collaboration.</p>
557                </div>
558
559                <form id="connectform" method="POST" class="mt-12 space-y-6" data-aos="zoom-in">
560                    <div>
561                        <label for="name" class="block text-sm font-code text-neon">Name:</label>
562                        <input type="text" name="name" id="name" required placeholder="Enter Your Name" class="mt-1 block w-full px-4 py-3 border-2 border-neon rounded-none shadow-sm bg-dark-gri
562d text-gray-50 placeholder-gray-600 focus:ring-neon focus:border-neon transition duration-200">
563                    </div>
564                    <div>
565                        <label for="email" class="block text-sm font-code text-neon">Email:</label>
566                        <input type="email" name="email" id="email" required placeholder="Enter Your Email Address" class="mt-1 block w-full px-4 py-3 border-2 border-neon rounded-none shadow-sm bg-dark-grid text-gray-50 placeholder-gray-600 focus:ring-neon focus:border-neon transition duration-200">
567                    </div>
568                    <div>
569                        <label for="message" class="block text-sm font-code text-neon">String message:</label>
570                        <textarea id="message" name="message" rows="4" required placeholder="Your message/command here..." class="mt-1 block w-full px-4 py-3 border-2 border-neon rounded-none shadow-sm bg-dark-grid text-gray-50 placeholder-gray-600 focus:ring-neon focus:border-neon transition duration-200"></textarea>
571                    </div>
572                    <div>
573                        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-sm shadow-neon text-lg font-medium text-white bg-neon hover:bg-cyan-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neon transition duration-300 font-code">
574                            SUBMIT (TRUE)
575                        </button>
576                        <div class="error-message"></div>
577                        <div id="showmessge" class="sent-message">Your message has been sent. Thank you!</div>
578                    </div>
579                </form>
580            </div>
581        </section>
582
583    </main>
584
585    <footer class="bg-dark-grid border-t-2 border-neon shadow-neon">
586        <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 text-center font-code">
587            <p class="text-neon text-sm">> LOG: Footer initialized. Status: OK. Time: 2025</p>
588            <div class="mt-4 flex justify-center space-x-6" data-aos="fade-up">
589                <a href="https://www.linkedin.com/in/farhan-khan-64396824b/" class="text-gray-500 hover:text-neon transition duration-300">[linkedin]</a>
590                <a href="https://github.com/Farhan-05/" class="text-gray-500 hover:text-neon transition duration-300">[github]</a>
591                <a href="[email protected]" class="text-gray-500 hover:text-neon transition duration-300">[email]</a>
592            </div>
593            <p class="mt-4 text-xs text-gray-600">Interface Version: Cyber-2.0</p>
594        </div>
595    </footer>
596
597    
597<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
597
598    
598<script>
599        // Initialize AOS
600        AOS.init({
601            duration: 1000,
602            once: true,
603            disable: 'mobile'
604        });
605    </script>
605
606
607    
607<script>
608        // Preloader and Typing Animation Logic
609        window.addEventListener('load', function() {
610            const preloader = document.getElementById('preloader');
611            const body = document.body;
612
613            // Wait for 3.5 seconds before fading out.
614            const totalLoadTime = 3500;
615
616            setTimeout(function() {
617                // Fades out the preloader
618                preloader.style.opacity = '0';
619
620                // Wait for the fade-out transition, then remove it
621                setTimeout(function() {
622                    preloader.style.display = 'none';
623                    body.classList.remove('no-scroll'); // Re-enable scrolling
624
625                    // Start the typing animation once the page is fully loaded and visible
626                    initTypingAnimation();
627                }, 500); // Matches the CSS transition duration
628            }, totalLoadTime);
629        });
630
631        // Function to initialize the typing animation
632        function initTypingAnimation() {
633            const typingTextElement = document.getElementById('typing-text');
634            // Updated roles for Farhan Khan
635            const words = ["Frontend Developer", "WordPress Developer", "Shopify Specialist"]; 
636            let wordIndex = 0;
637            let charIndex = 0;
638            let isDeleting = false;
639
640            function type() {
641                const currentWord = words[wordIndex];
642
643                if (isDeleting) {
644                    typingTextElement.textContent = currentWord.substring(0, charIndex - 1);
645                    charIndex--;
646                } else {
647                    typingTextElement.textContent = currentWord.substring(0, charIndex + 1);
648                    charIndex++;
649                }
650
651                let typeSpeed = isDeleting ? 75 : 150;
652
653                if (!isDeleting && charIndex === currentWord.length) {
654                    typeSpeed = 1500;
655                    isDeleting = true;
656                }
657                else if (isDeleting && charIndex === 0) {
658                    isDeleting = false;
659                    wordIndex = (wordIndex + 1) % words.length;
660                    typeSpeed = 500;
661                }
662
663                setTimeout(type, typeSpeed);
664            }
665
666            // Start the typing sequence
667            type();
668        }
669    </script>
669
670    
670<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
vendor: 1 bytes, line 670
670
671<script>
672  (function () {
673    emailjs.init("d2gYZnZmjYxKg9oDl"); // Replace with your Public Key
674  })();
675
676  document.getElementById('connectform').addEventListener('submit', function (event) {
677    event.preventDefault();
678
679    emailjs.sendForm('service_l66avl8', 'template_q039huu', this)
680      .then(() => {
681        // alert('✅ Message sent successfully!');
682        document.getElementById("showmessge").style.display = "block";
683        document.getElementById('connectform').reset();
684      }, (error) => {
685        alert('❌ Failed to send message. Error: ' + JSON.stringify(error));
686      });
687  });
688</script>
688
689</body>
690</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.