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 →</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 →</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 →</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 →</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 →</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 →</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 →</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 →</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 →</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 →</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 →</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 →</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 >> 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.