Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nabeel Raza - Data Science Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #000; | |
| } | |
| #canvas-container { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| #ui-container { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .ui-element { | |
| pointer-events: auto; | |
| } | |
| .panel { | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .panel:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 35px rgba(255, 255, 255, 0.15); | |
| } | |
| .nav-item { | |
| transition: all 0.3s ease; | |
| } | |
| .nav-item:hover { | |
| transform: scale(1.1); | |
| } | |
| .skill-bar { | |
| height: 10px; | |
| border-radius: 5px; | |
| background: linear-gradient(90deg, #3b82f6, #6366f1); | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 3px solid #3b82f6; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #3b82f6; } | |
| } | |
| .text-primary { | |
| color: #ffffff; | |
| } | |
| .text-secondary { | |
| color: #d1d5db; | |
| } | |
| .bg-primary { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| } | |
| .border-primary { | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="canvas-container"></div> | |
| <div id="ui-container" class="flex flex-col"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center p-6"> | |
| <div class="ui-element"> | |
| <h1 class="text-4xl font-bold text-white drop-shadow-lg">NABEEL RAZA</h1> | |
| </div> | |
| <nav class="flex space-x-6 ui-element"> | |
| <button id="nav-about" class="nav-item text-white font-medium hover:text-blue-300 transition">About</button> | |
| <button id="nav-experience" class="nav-item text-white font-medium hover:text-blue-300 transition">Experience</button> | |
| <button id="nav-projects" class="nav-item text-white font-medium hover:text-blue-300 transition">Projects</button> | |
| <button id="nav-skills" class="nav-item text-white font-medium hover:text-blue-300 transition">Skills</button> | |
| <button id="nav-contact" class="nav-item text-white font-medium hover:text-blue-300 transition">Contact</button> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex items-center justify-center px-10"> | |
| <!-- About Panel (Default) --> | |
| <div id="about-panel" class="panel ui-element w-full max-w-4xl p-10"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-48 h-48 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 overflow-hidden floating mx-auto"> | |
| <img src="WhatsApp Image 2025-01-27 at 7.48.23 PM.jpeg" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="flex-grow"> | |
| <h1 class="text-4xl font-bold text-white mb-2 typewriter">AI & Data Science Engineer</h1> | |
| <p class="text-gray-300 mb-4">Transforming data into intelligent solutions</p> | |
| <div class="h-1 w-20 bg-gradient-to-r from-blue-400 to-purple-500 mb-6"></div> | |
| <p class="text-gray-300 mb-6"> | |
| Passionate AI engineer with expertise in machine learning, computer vision, and natural language processing. | |
| Currently pursuing MSc in Data Science while working on cutting-edge AI projects. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full transition"> | |
| <i class="fas fa-download mr-2"></i> Download CV | |
| </button> | |
| <button class="border border-blue-500 text-blue-500 hover:bg-blue-900 hover:bg-opacity-30 px-6 py-2 rounded-full transition"> | |
| <i class="fas fa-envelope mr-2"></i> Contact Me | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience Panel --> | |
| <div id="experience-panel" class="panel ui-element w-full max-w-4xl p-10 hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-8">Professional Experience</h2> | |
| <div class="space-y-8"> | |
| <!-- Experience 1 --> | |
| <div class="flex gap-6"> | |
| <div class="flex-shrink-0 w-14 h-14 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center"> | |
| <i class="fas fa-briefcase text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white">AI Engineer</h3> | |
| <p class="text-blue-400 mb-1">Antematter • Jun. 2024 – Present</p> | |
| <ul class="text-gray-300 list-disc pl-5 space-y-2"> | |
| <li>Developed a code review agent using OpenAI's API and LangChain's ReAct prompting</li> | |
| <li>Integrated Slither and ItyFuzz for smart contract analysis</li> | |
| <li>Collaborated on Web3 tool for on-chain data and market stats using mixture-of-agent framework</li> | |
| <li>Contributed to IAO platform enabling dynamic creation of AI agents</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Experience 2 --> | |
| <div class="flex gap-6"> | |
| <div class="flex-shrink-0 w-14 h-14 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center"> | |
| <i class="fas fa-briefcase text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white">Data Scientist</h3> | |
| <p class="text-blue-400 mb-1">Spatial Labs Pvt. Ltd. • Feb. 2023 – Jun. 2024</p> | |
| <ul class="text-gray-300 list-disc pl-5 space-y-2"> | |
| <li>Developed hybrid technique combining Learned Noise Prediction and Fourier Transform for image authentication (89% accuracy)</li> | |
| <li>Improved YOLOv8 model efficacy from 67 mAP to 95 mAP for vehicle monitoring</li> | |
| <li>Assessed LLM responses using PairRM in LLM Blender</li> | |
| <li>Implemented Whisper model for offline speech-to-text translation</li> | |
| <li>Created synthetic data generation scripts in Blender</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Experience 3 --> | |
| <div class="flex gap-6"> | |
| <div class="flex-shrink-0 w-14 h-14 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center"> | |
| <i class="fas fa-briefcase text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white">Data Science Intern</h3> | |
| <p class="text-blue-400 mb-1">Spatial Labs Pvt. Ltd. • Sep. 2022 – Feb. 2023</p> | |
| <ul class="text-gray-300 list-disc pl-5 space-y-2"> | |
| <li>Customized UNET model for land cover classification (IoU 0.92)</li> | |
| <li>Adapted YOLOv5 for forest tree damage recognition</li> | |
| <li>Competed in ship detection challenge (mAP 0.86 public leaderboard)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Experience 4 --> | |
| <div class="flex gap-6"> | |
| <div class="flex-shrink-0 w-14 h-14 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center"> | |
| <i class="fas fa-briefcase text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white">Answers Intern</h3> | |
| <p class="text-blue-400 mb-1">Educative Inc. • Jun. 2022 – Aug. 2022</p> | |
| <ul class="text-gray-300 list-disc pl-5 space-y-2"> | |
| <li>Authored 28 technical pieces on AI and computer vision topics</li> | |
| <li>Evaluated 52 technical articles</li> | |
| <li>Covered ViT, Segmentation, Transformers, and Data Augmentation</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Panel --> | |
| <div id="projects-panel" class="panel ui-element w-full max-w-4xl p-10 hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-8">Featured Projects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Project 1 --> | |
| <div class="bg-gray-900 rounded-xl shadow-md overflow-hidden hover:shadow-xl transition border border-gray-800"> | |
| <div class="h-40 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-map-marked-alt text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-white mb-2">TrajectoryQA</h3> | |
| <p class="text-gray-300 mb-4"> | |
| System for responding to inquiries based on trajectory descriptions using Geolife dataset and OpenStreetMap. | |
| Achieved 79.6% accuracy with GPT-2 model. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-900 bg-opacity-30 text-blue-400 text-xs px-3 py-1 rounded-full">DuckDB</span> | |
| <span class="bg-blue-900 bg-opacity-30 text-blue-400 text-xs px-3 py-1 rounded-full">Transformers</span> | |
| <span class="bg-blue-900 bg-opacity-30 text-blue-400 text-xs px-3 py-1 rounded-full">NLP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-gray-900 rounded-xl shadow-md overflow-hidden hover:shadow-xl transition border border-gray-800"> | |
| <div class="h-40 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center"> | |
| <i class="fas fa-envelope text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-white mb-2">Email Lead Generator</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Two-agent system using LangChain and GPT-4 for lead generation and follow-up. | |
| Opener agent creates initial emails, Escalator handles responses. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-900 bg-opacity-30 text-green-400 text-xs px-3 py-1 rounded-full">LangChain</span> | |
| <span class="bg-green-900 bg-opacity-30 text-green-400 text-xs px-3 py-1 rounded-full">GPT-4</span> | |
| <span class="bg-green-900 bg-opacity-30 text-green-400 text-xs px-3 py-1 rounded-full">Automation</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-gray-900 rounded-xl shadow-md overflow-hidden hover:shadow-xl transition border border-gray-800"> | |
| <div class="h-40 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center"> | |
| <i class="fas fa-code text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-white mb-2">Smart Contract Auditor</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Code review agent using OpenAI API and LangChain's ReAct prompting. | |
| Integrated Slither and ItyFuzz for comprehensive analysis. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-purple-900 bg-opacity-30 text-purple-400 text-xs px-3 py-1 rounded-full">Blockchain</span> | |
| <span class="bg-purple-900 bg-opacity-30 text-purple-400 text-xs px-3 py-1 rounded-full">AI</span> | |
| <span class="bg-purple-900 bg-opacity-30 text-purple-400 text-xs px-3 py-1 rounded-full">Security</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="bg-gray-900 rounded-xl shadow-md overflow-hidden hover:shadow-xl transition border border-gray-800"> | |
| <div class="h-40 bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center"> | |
| <i class="fas fa-satellite-dish text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-white mb-2">Satellite Image Authentication</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Hybrid technique combining Learned Noise Prediction and Fourier Transform | |
| for distinguishing authentic satellite images (89% accuracy). | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-yellow-900 bg-opacity-30 text-yellow-400 text-xs px-3 py-1 rounded-full">CV</span> | |
| <span class="bg-yellow-900 bg-opacity-30 text-yellow-400 text-xs px-3 py-1 rounded-full">Stable Diffusion</span> | |
| <span class="bg-yellow-900 bg-opacity-30 text-yellow-400 text-xs px-3 py-1 rounded-full">Forensics</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills Panel --> | |
| <div id="skills-panel" class="panel ui-element w-full max-w-4xl p-10 hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-8">Technical Skills</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white mb-4">Programming & Tools</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Python</span> | |
| <span class="text-gray-400">95%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">PyTorch</span> | |
| <span class="text-gray-400">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">HuggingFace</span> | |
| <span class="text-gray-400">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Docker</span> | |
| <span class="text-gray-400">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white mb-4">Machine Learning</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Computer Vision</span> | |
| <span class="text-gray-400">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">NLP</span> | |
| <span class="text-gray-400">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">LLMs</span> | |
| <span class="text-gray-400">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Generative AI</span> | |
| <span class="text-gray-400">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white mb-4">Data Engineering</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">SQL</span> | |
| <span class="text-gray-400">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">DuckDB</span> | |
| <span class="text-gray-400">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">PySpark</span> | |
| <span class="text-gray-400">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Airflow</span> | |
| <span class="text-gray-400">70%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white mb-4">Web3 & Blockchain</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Smart Contracts</span> | |
| <span class="text-gray-400">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Slither</span> | |
| <span class="text-gray-400">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Solidity</span> | |
| <span class="text-gray-400">70%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-300">Web3.py</span> | |
| <span class="text-gray-400">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-purple-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Panel --> | |
| <div id="contact-panel" class="panel ui-element w-full max-w-4xl p-10 hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-8">Get In Touch</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center"> | |
| <i class="fas fa-envelope text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400">Email</p> | |
| <p class="text-white font-medium">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center"> | |
| <i class="fas fa-phone text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400">Phone</p> | |
| <p class="text-white font-medium">+92-300-4755991</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-blue-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400">Location</p> | |
| <p class="text-white font-medium">Pakistan</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold text-white mb-4">Social Media</h3> | |
| <div class="flex space-x-4"> | |
| <a href="https://linkedin.com/in/nabeelraza-7" target="_blank" class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 hover:bg-opacity-50 flex items-center justify-center transition"> | |
| <i class="fab fa-linkedin-in text-blue-400 text-xl"></i> | |
| </a> | |
| <a href="https://github.com/nabeelraza-7" target="_blank" class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 hover:bg-opacity-50 flex items-center justify-center transition"> | |
| <i class="fab fa-github text-blue-400 text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 hover:bg-opacity-50 flex items-center justify-center transition"> | |
| <i class="fab fa-twitter text-blue-400 text-xl"></i> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 hover:bg-opacity-50 flex items-center justify-center transition"> | |
| <i class="fab fa-kaggle text-blue-400 text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-white mb-4">Send Me a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-gray-300 mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-white"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-300 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-white"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-300 mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-white"></textarea> | |
| </div> | |
| <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition w-full"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="p-6 text-center ui-element"> | |
| <p class="text-white drop-shadow-lg">© 2024 Nabeel Raza. All rights reserved.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Three.js Scene Setup | |
| let scene, camera, renderer, particles; | |
| function initThreeJS() { | |
| // Scene | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x000000); | |
| // Camera | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 30; | |
| // Renderer | |
| renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('canvas-container').appendChild(renderer.domElement); | |
| // Particles | |
| const particleCount = 1500; | |
| const particlesGeometry = new THREE.BufferGeometry(); | |
| const positions = new Float32Array(particleCount * 3); | |
| const sizes = new Float32Array(particleCount); | |
| for (let i = 0; i < particleCount; i++) { | |
| positions[i * 3] = (Math.random() - 0.5) * 500; | |
| positions[i * 3 + 1] = (Math.random() - 0.5) * 500; | |
| positions[i * 3 + 2] = (Math.random() - 0.5) * 500; | |
| sizes[i] = Math.random() * 2; | |
| } | |
| particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); | |
| particlesGeometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); | |
| const particlesMaterial = new THREE.PointsMaterial({ | |
| size: 1, | |
| color: 0xffffff, | |
| transparent: true, | |
| opacity: 0.8, | |
| sizeAttenuation: true, | |
| blending: THREE.AdditiveBlending | |
| }); | |
| particles = new THREE.Points(particlesGeometry, particlesMaterial); | |
| scene.add(particles); | |
| // Add some larger stars | |
| const starGeometry = new THREE.BufferGeometry(); | |
| const starPositions = new Float32Array(100 * 3); | |
| const starSizes = new Float32Array(100); | |
| for (let i = 0; i < 100; i++) { | |
| starPositions[i * 3] = (Math.random() - 0.5) * 1000; | |
| starPositions[i * 3 + 1] = (Math.random() - 0.5) * 1000; | |
| starPositions[i * 3 + 2] = (Math.random() - 0.5) * 1000; | |
| starSizes[i] = 2 + Math.random() * 3; | |
| } | |
| starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); | |
| starGeometry.setAttribute('size', new THREE.BufferAttribute(starSizes, 1)); | |
| const stars = new THREE.Points(starGeometry, new THREE.PointsMaterial({ | |
| size: 1, | |
| color: 0xffffff, | |
| sizeAttenuation: true | |
| })); | |
| scene.add(stars); | |
| // Animation | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| particles.rotation.x += 0.0005; | |
| particles.rotation.y += 0.0005; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| } | |
| // UI Navigation | |
| function initUI() { | |
| const navAbout = document.getElementById('nav-about'); | |
| const navExperience = document.getElementById('nav-experience'); | |
| const navProjects = document.getElementById('nav-projects'); | |
| const navSkills = document.getElementById('nav-skills'); | |
| const navContact = document.getElementById('nav-contact'); | |
| const aboutPanel = document.getElementById('about-panel'); | |
| const experiencePanel = document.getElementById('experience-panel'); | |
| const projectsPanel = document.getElementById('projects-panel'); | |
| const skillsPanel = document.getElementById('skills-panel'); | |
| const contactPanel = document.getElementById('contact-panel'); | |
| function hideAllPanels() { | |
| aboutPanel.classList.add('hidden'); | |
| experiencePanel.classList.add('hidden'); | |
| projectsPanel.classList.add('hidden'); | |
| skillsPanel.classList.add('hidden'); | |
| contactPanel.classList.add('hidden'); | |
| } | |
| navAbout.addEventListener('click', () => { | |
| hideAllPanels(); | |
| aboutPanel.classList.remove('hidden'); | |
| }); | |
| navExperience.addEventListener('click', () => { | |
| hideAllPanels(); | |
| experiencePanel.classList.remove('hidden'); | |
| }); | |
| navProjects.addEventListener('click', () => { | |
| hideAllPanels(); | |
| projectsPanel.classList.remove('hidden'); | |
| }); | |
| navSkills.addEventListener('click', () => { | |
| hideAllPanels(); | |
| skillsPanel.classList.remove('hidden'); | |
| }); | |
| navContact.addEventListener('click', () => { | |
| hideAllPanels(); | |
| contactPanel.classList.remove('hidden'); | |
| }); | |
| } | |
| // Initialize | |
| window.onload = function() { | |
| initThreeJS(); | |
| initUI(); | |
| }; | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=nabeelraza/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |