Hyder313/deepsite-project
0
1 2<!DOCTYPE html>3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Data Analyst Portfolio</title>8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">9 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">10 <style>11 .tab-content {12 display: none;13 }14 .tab-content.active {15 display: block;16 animation: fadeIn 0.5s;17 }18 @keyframes fadeIn {19 from { opacity: 0; }20 to { opacity: 1; }21 }22 </style>23</head>24<body class="bg-gray-900 min-h-screen">25<div class="container mx-auto px-4 py-12">26 <div class="text-center mb-12">27 <h1 class="text-4xl font-bold text-white mb-4">As a Data Analyst</h1>28 <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>29 </div>30 31 <div class="max-w-4xl mx-auto">32 <div class="flex justify-center mb-8">33 <div class="relative">34 <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full blur-md opacity-30"></div>35 <div class="flex relative bg-gray-800 rounded-full p-1 shadow-xl">36 <button class="tab-btn px-8 py-3 text-lg font-semibold text-white rounded-full active" style="background: linear-gradient(to right, #2563eb, #7c3aed)" data-tab="certifications">37 <i class="fas fa-certificate mr-2"></i>Certifications38 </button>39 <button class="tab-btn px-8 py-3 text-lg font-semibold text-gray-300 hover:text-white rounded-full" data-tab="projects">40 <i class="fas fa-project-diagram mr-2"></i>Projects41 </button>42 <button class="tab-btn px-8 py-3 text-lg font-semibold text-gray-300 hover:text-white rounded-full" data-tab="experience">43 <i class="fas fa-briefcase mr-2"></i>Experience44 </button>45 </div>46</div>47 </div>48 <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;">49<div class="bg-gray-800 rounded-xl shadow-md overflow-hidden p-8">50 <h2 class="text-2xl font-semibold text-white mb-4">Certifications</h2>51 <ul class="space-y-4">52 <li class="flex items-start">53 <div class="bg-blue-500 rounded-full p-1 mr-4 mt-1">54 <i class="fas fa-check text-white text-xs"></i>55 </div>56 <div>57 <h3 class="font-medium text-white">Google Data Analytics Professional Certificate</h3>58 <p class="text-gray-400 text-sm">Issued 2023 - Covering data cleaning, analysis, visualization, and R programming</p>59 </div>60 </li>61 <li class="flex items-start">62 <div class="bg-blue-500 rounded-full p-1 mr-4 mt-1">63 <i class="fas fa-check text-white text-xs"></i>64 </div>65 <div>66 <h3 class="font-medium text-white">Microsoft Certified: Data Analyst Associate</h3>67 <p class="text-gray-400 text-sm">Issued 2022 - Power BI, DAX, and advanced analytics</p>68 </div>69 </li>70 <li class="flex items-start">71 <div class="bg-blue-500 rounded-full p-1 mr-4 mt-1">72 <i class="fas fa-check text-white text-xs"></i>73 </div>74 <div>75 <h3 class="font-medium text-white">SQL for Data Science</h3>76 <p class="text-gray-400 text-sm">Issued 2021 - Advanced querying and optimization techniques</p>77 </div>78 </li>79 </ul>80 </div>81 <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;">82 <h2 class="text-2xl font-semibold text-white mb-4">Projects</h2>83 <div class="grid md:grid-cols-2 gap-6">84 <div class="border border-gray-700 rounded-lg p-4">85 <h3 class="font-medium text-white mb-2">Sales Performance Analysis</h3>86 <p class="text-gray-400 text-sm mb-3">Analyzed 2 years of sales data to identify trends and improve forecasting accuracy by 23%.</p>87 <div class="flex flex-wrap gap-2">88 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">SQL</span>89 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Excel</span>90 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Power BI</span>91 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Databricks</span>92 </div>93 </div>94 <div class="border border-gray-700 rounded-lg p-4">95 <h3 class="font-medium text-white mb-2">Customer Segmentation</h3>96 <p class="text-gray-400 text-sm mb-3">Used clustering techniques to segment customer base into 5 distinct groups for targeted marketing.</p>97 <div class="flex flex-wrap gap-2">98 <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Python</span>99 <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">scikit-learn</span>100 </div>101 </div>102 </div>103 </div>104 <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;">105 <h2 class="text-2xl font-semibold text-white mb-8">Work Experience</h2>106 107 <div class="flex">108 <div class="flex flex-col items-center mr-8">109 <div class="w-0.5 h-full bg-blue-500 relative">110 <div class="absolute -left-2 w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-300" style="top: 20%"></div>111 <div class="absolute -left-2 w-4 h-4 rounded-full bg-blue-500 border-4 border-blue-300" style="top: 80%"></div>112 </div>113 </div>114 115 <div class="w-full space-y-16">116 <div id="experience-1" class="scroll-mt-20">117 <a href="#experience-1" class="group block">118 <div class="flex items-center">119 <div class="w-8 h-0.5 bg-blue-500"></div>120 <div class="ml-4">121 <h3 class="text-xl font-semibold text-white group-hover:text-blue-400 transition-colors">Senior Data Analyst</h3>122 <p class="text-gray-400 text-sm">March 2022 - Present | AnalyticsCorp</p>123 </div>124 </div>125 </a>126 <div class="mt-4 ml-8 pl-4 border-l-2 border-blue-500">127 <ul class="text-gray-300 space-y-2 list-disc list-inside">128 <li>Led cross-functional analytics projects improving customer retention by 18%</li>129 <li>Developed automated reporting dashboards saving 20+ hours per week</li>130 <li>Mentored junior analysts in SQL and data visualization best practices</li>131 </ul>132 </div>133 </div>134 135 <div id="experience-2" class="scroll-mt-20">136 <a href="#experience-2" class="group block">137 <div class="flex items-center">138 <div class="w-8 h-0.5 bg-blue-500"></div>139 <div class="ml-4">140 <h3 class="text-xl font-semibold text-white group-hover:text-blue-400 transition-colors">Data Analyst</h3>141 <p class="text-gray-400 text-sm">August 2020 - February 2022 | TechSolutions Inc.</p>142 </div>143 </div>144 </a>145 <div class="mt-4 ml-8 pl-4 border-l-2 border-blue-500">146 <ul class="text-gray-300 space-y-2 list-disc list-inside">147 <li>Built predictive models for sales forecasting with 92% accuracy</li>148 <li>Implemented data quality controls reducing reporting errors by 35%</li>149 <li>Created executive dashboards used for quarterly business reviews</li>150 </ul>151 </div>152 </div>153 </div>154 </div>155 </div>156 </div>157 </div>158 <script>159 document.addEventListener('DOMContentLoaded', function() {160 const tabs = document.querySelectorAll('.tab-btn');161 const tabContents = document.querySelectorAll('.tab-content');162 163 tabs.forEach(tab => {164 tab.addEventListener('click', function() {165 // Remove active class from all tabs and reset styles166 tabs.forEach(t => {167 t.classList.remove('active', 'text-white');168 t.classList.add('text-gray-300');169 t.style.background = 'transparent';170 });171 172 // Add active class to clicked tab173 this.classList.add('active', 'text-white');174 this.classList.remove('text-gray-300');175 this.style.background = 'linear-gradient(to right, #2563eb, #7c3aed)';176 177 // Hide all tab contents178 tabContents.forEach(content => {179 content.classList.remove('active');180 content.style.display = 'none';181 });182 183 // Show selected tab content184 const tabId = this.getAttribute('data-tab');185 document.getElementById(tabId).classList.add('active');186 document.getElementById(tabId).style.display = 'block';187 });188 });189 });190 </script>191<style>192 .tab-btn.active {193 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);194 }195</style>196</body>197</html>