Hyder313/deepsite-project
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Data Engineer Portfolio</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">8 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">9</head>10<body class="bg-gray-900 min-h-screen">11<div class="container mx-auto px-4 py-12">12 <div class="text-center mb-12">13 <h1 class="text-4xl font-bold text-white mb-4">As a Data Engineer</h1>14 <a href="index.html" class="text-blue-400 hover:text-blue-300"><i class="fas fa-arrow-left mr-2"></i>Back to Home</a>15 </div>16 17 <div class="max-w-4xl mx-auto">18 <div class="flex justify-center mb-8">19 <div class="relative">20 <div class="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-500 rounded-full blur-md opacity-30"></div>21 <div class="flex relative bg-gray-800 rounded-full p-1 shadow-xl">22 <button class="tab-btn px-8 py-3 text-lg font-semibold text-white rounded-full active" style="background: linear-gradient(to right, #10b981, #3b82f6)" data-tab="certifications">23 <i class="fas fa-certificate mr-2"></i>Certifications24 </button>25 <button class="tab-btn px-8 py-3 text-lg font-semibold text-gray-300 hover:text-white rounded-full" data-tab="projects">26 <i class="fas fa-project-diagram mr-2"></i>Projects27 </button>28 <button class="tab-btn px-8 py-3 text-lg font-semibold text-gray-300 hover:text-white rounded-full" data-tab="experience">29 <i class="fas fa-briefcase mr-2"></i>Experience30 </button>31 </div>32 </div>33 </div>34 <div id="certifications" class="tab-content active bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-xl overflow-hidden p-8 border border-gray-700 transform hover:scale-[1.005] transition-transform duration-300" style="display: block;">35<div class="bg-gray-800 rounded-xl shadow-md overflow-hidden p-8">36 <h2 class="text-2xl font-semibold text-white mb-4">Certifications</h2>37 <ul class="space-y-4">38 <li class="flex items-start">39 <div class="bg-green-500 rounded-full p-1 mr-4 mt-1">40 <i class="fas fa-check text-white text-xs"></i>41 </div>42 <div>43 <h3 class="font-medium text-white">Google Cloud Professional Data Engineer</h3>44 <p class="text-gray-400 text-sm">Issued 2023 - Designing and building data processing systems on GCP</p>45 </div>46 </li>47 <li class="flex items-start">48 <div class="bg-green-500 rounded-full p-1 mr-4 mt-1">49 <i class="fas fa-check text-white text-xs"></i>50 </div>51 <div>52 <h3 class="font-medium text-white">Databricks Certified Data Engineer Associate</h3>53 <p class="text-gray-400 text-sm">Issued 2022 - Spark, Delta Lake, and data engineering best practices</p>54 </div>55 </li>56 <li class="flex items-start">57 <div class="bg-green-500 rounded-full p-1 mr-4 mt-1">58 <i class="fas fa-check text-white text-xs"></i>59 </div>60 <div>61 <h3 class="font-medium text-white">AWS Certified Data Analytics - Specialty</h3>62 <p class="text-gray-400 text-sm">Issued 2021 - Data lakes, ETL pipelines, and analytics services</p>63 </div>64 </li>65 </ul>66 </div>67 </div>68 <div id="projects" class="tab-content bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-xl overflow-hidden p-8 border border-gray-700 transform hover:scale-[1.005] transition-transform duration-300" style="display: none;">69<h2 class="text-2xl font-semibold text-white mb-4">Projects</h2>70 <div class="grid md:grid-cols-2 gap-6">71 <div class="border border-gray-700 rounded-lg p-4">72 <h3 class="font-medium text-white mb-2">ETL Pipeline for Retail Data</h3>73 <p class="text-gray-400 text-sm mb-3">Built a scalable pipeline processing 10TB of daily transaction data with Airflow and Spark.</p>74 <div class="flex flex-wrap gap-2">75 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Apache Airflow</span>76 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Spark</span>77 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Databricks</span>78 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Snowflake</span>79 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Docker</span>80 </div>81 </div>82 <div class="border border-gray-700 rounded-lg p-4">83 <h3 class="font-medium text-white mb-2">Real-time Analytics Platform</h3>84 <p class="text-gray-400 text-sm mb-3">Implemented a Kafka-based streaming solution reducing data latency from hours to seconds.</p>85 <div class="flex flex-wrap gap-2">86 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Kafka</span>87 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Flink</span>88 </div>89 </div>90 </div>91 </div>92 <div id="experience" class="tab-content bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-xl overflow-hidden p-8 border border-gray-700 transform hover:scale-[1.005] transition-transform duration-300" style="display: none;">93 <h2 class="text-2xl font-semibold text-white mb-8">Work Experience</h2>94 95 <div class="flex">96 <div class="flex flex-col items-center mr-8">97 <div class="w-0.5 h-full bg-green-500 relative">98 <div class="absolute -left-2 w-4 h-4 rounded-full bg-green-500 border-4 border-green-300" style="top: 20%"></div>99 <div class="absolute -left-2 w-4 h-4 rounded-full bg-green-500 border-4 border-green-300" style="top: 80%"></div>100 </div>101 </div>102 103 <div class="w-full space-y-16">104 <div id="experience-1" class="scroll-mt-20">105 <a href="#experience-1" class="group block">106 <div class="flex items-center">107 <div class="w-8 h-0.5 bg-green-500"></div>108 <div class="ml-4">109 <h3 class="text-xl font-semibold text-white group-hover:text-green-400 transition-colors">Data Engineer</h3>110 <p class="text-gray-400 text-sm">March 2022 - Present | DataFlow Inc.</p>111 </div>112 </div>113 </a>114 <div class="mt-4 ml-8 pl-4 border-l-2 border-green-500">115 <ul class="text-gray-300 space-y-2 list-disc list-inside">116 <li>Designed and implemented scalable data pipelines handling 100M+ daily records</li>117 <li>Optimized ETL workflows reducing processing time by 65%</li>118 <li>Mentored junior engineers in data engineering best practices</li>119 </ul>120 </div>121 </div>122 123 <div id="experience-2" class="scroll-mt-20">124 <a href="#experience-2" class="group block">125 <div class="flex items-center">126 <div class="w-8 h-0.5 bg-green-500"></div>127 <div class="ml-4">128 <h3 class="text-xl font-semibold text-white group-hover:text-green-400 transition-colors">Data Engineering Intern</h3>129 <p class="text-gray-400 text-sm">June 2021 - August 2021 | TechCorp</p>130 </div>131 </div>132 </a>133 <div class="mt-4 ml-8 pl-4 border-l-2 border-green-500">134 <ul class="text-gray-300 space-y-2 list-disc list-inside">135 <li>Assisted in migrating legacy ETL processes to cloud-native solutions</li>136 <li>Implemented data quality checks improving accuracy by 25%</li>137 </ul>138 </div>139 </div>140 </div>141 </div>142 </div>143 </div>144</div>145 </div>146 <script>147 document.addEventListener('DOMContentLoaded', function() {148 const tabs = document.querySelectorAll('.tab-btn');149 const tabContents = document.querySelectorAll('.tab-content');150 151 tabs.forEach(tab => {152 tab.addEventListener('click', function() {153 // Remove active class from all tabs and reset styles154 tabs.forEach(t => {155 t.classList.remove('active', 'text-white');156 t.classList.add('text-gray-300');157 t.style.background = 'transparent';158 });159 160 // Add active class to clicked tab161 this.classList.add('active', 'text-white');162 this.classList.remove('text-gray-300');163 this.style.background = 'linear-gradient(to right, #10b981, #3b82f6)';164 165 // Hide all tab contents166 tabContents.forEach(content => {167 content.classList.remove('active');168 content.style.display = 'none';169 });170 171 // Show selected tab content172 const tabId = this.getAttribute('data-tab');173 document.getElementById(tabId).classList.add('active');174 document.getElementById(tabId).style.display = 'block';175 });176 });177 });178 </script>179 <style>180 .tab-btn.active {181 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);182 }183 </style>184</body>185</html>186