Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Analyst Portfolio | Data Insights Pro</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📊</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1e40af', | |
| secondary: '#3b82f6', | |
| accent: '#60a5fa', | |
| dark: '#0f172a', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); | |
| } | |
| .skill-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .skill-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .project-card { | |
| transition: all 0.3s ease; | |
| } | |
| .project-card:hover { | |
| transform: scale(1.02); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light text-dark"> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">DS</span> | |
| </div> | |
| <h1 class="text-2xl font-bold text-primary">Data Insights Pro</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#about" class="font-medium hover:text-secondary transition-colors">About</a> | |
| <a href="#skills" class="font-medium hover:text-secondary transition-colors">Skills</a> | |
| <a href="#projects" class="font-medium hover:text-secondary transition-colors">Projects</a> | |
| <a href="#experience" class="font-medium hover:text-secondary transition-colors">Experience</a> | |
| <a href="#contact" class="font-medium hover:text-secondary transition-colors">Contact</a> | |
| </nav> | |
| <button id="mobile-menu-button" class="md:hidden text-primary"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#about" class="font-medium hover:text-secondary transition-colors">About</a> | |
| <a href="#skills" class="font-medium hover:text-secondary transition-colors">Skills</a> | |
| <a href="#projects" class="font-medium hover:text-secondary transition-colors">Projects</a> | |
| <a href="#experience" class="font-medium hover:text-secondary transition-colors">Experience</a> | |
| <a href="#contact" class="font-medium hover:text-secondary transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white pt-32 pb-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Data Analyst Portfolio</h1> | |
| <p class="text-xl mb-6">Transforming complex data into actionable insights</p> | |
| <div class="flex space-x-4"> | |
| <a href="#projects" class="bg-white text-primary px-6 py-3 rounded-lg font-bold hover:bg-accent transition-colors">View Projects</a> | |
| <a href="#contact" class="border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:text-primary transition-colors">Contact Me</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
| <div class="w-56 h-56 md:w-72 md:h-72 rounded-full bg-white bg-opacity-30 flex items-center justify-center"> | |
| <i data-feather="bar-chart-2" class="w-32 h-32 md:w-40 md:h-40"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">About Me</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> | |
| <div class="w-48 h-48 rounded-full bg-gray-200 border-4 border-secondary flex items-center justify-center"> | |
| <i data-feather="user" class="w-24 h-24 text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <h3 class="text-2xl font-semibold mb-4">Data Science Major</h3> | |
| <p class="text-lg mb-6">I'm a passionate data analyst with expertise in statistical modeling, data visualization, and business intelligence. With a strong foundation in mathematics and programming, I transform raw data into meaningful insights that drive strategic decision-making.</p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="map-pin" class="w-5 h-5 mr-2 text-secondary"></i> | |
| <span>San Francisco, CA</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="briefcase" class="w-5 h-5 mr-2 text-secondary"></i> | |
| <span>Looking for Data Analyst Position</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="mail" class="w-5 h-5 mr-2 text-secondary"></i> | |
| <span>analyst@example.com</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-5 h-5 mr-2 text-secondary"></i> | |
| <span>2+ Years Experience</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Technical Skills</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="code" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Python</h3> | |
| <p class="text-center text-gray-600">Pandas, NumPy, Scikit-learn, Matplotlib</p> | |
| </div> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="database" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">SQL</h3> | |
| <p class="text-center text-gray-600">PostgreSQL, MySQL, Query Optimization</p> | |
| </div> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="pie-chart" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Tableau</h3> | |
| <p class="text-center text-gray-600">Data Visualization & Dashboard Creation</p> | |
| </div> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="bar-chart" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Power BI</h3> | |
| <p class="text-center text-gray-600">Business Intelligence & Analytics</p> | |
| </div> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="trending-up" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Statistics</h3> | |
| <p class="text-center text-gray-600">Regression, Hypothesis Testing, Probability</p> | |
| </div> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="box" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Machine Learning</h3> | |
| <p class="text-center text-gray-600">Classification, Clustering, Forecasting</p> | |
| </div> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="file-text" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">R</h3> | |
| <p class="text-center text-gray-600">Data Analysis, Statistical Modeling</p> | |
| </div> | |
| <div class="skill-card bg-white p-6 rounded-xl shadow-md flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i data-feather="cloud" class="w-8 h-8 text-secondary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Big Data</h3> | |
| <p class="text-center text-gray-600">Hadoop, Spark, Data Warehousing</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Featured Projects</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="project-card bg-gray-50 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i data-feather="trending-up" class="w-16 h-16 text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2">Customer Churn Prediction</h3> | |
| <p class="text-gray-600 mb-4">Built a machine learning model to predict customer churn with 87% accuracy using Python and scikit-learn.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Python</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Machine Learning</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Classification</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Project | |
| </a> | |
| <a href="#" class="text-gray-600 font-medium flex items-center"> | |
| <i data-feather="github" class="w-4 h-4 mr-1"></i> GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card bg-gray-50 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i data-feather="bar-chart-2" class="w-16 h-16 text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2">Sales Dashboard</h3> | |
| <p class="text-gray-600 mb-4">Designed an interactive Tableau dashboard to visualize sales trends and KPIs for executive decision-making.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Tableau</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Data Visualization</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Business Intelligence</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Dashboard | |
| </a> | |
| <a href="#" class="text-gray-600 font-medium flex items-center"> | |
| <i data-feather="github" class="w-4 h-4 mr-1"></i> GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card bg-gray-50 rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i data-feather="database" class="w-16 h-16 text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl mb-2">Web Analytics Pipeline</h3> | |
| <p class="text-gray-600 mb-4">Developed an automated ETL pipeline to process and analyze web traffic data using Apache Spark.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Apache Spark</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">ETL</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Big Data</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-secondary font-medium flex items-center"> | |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Project | |
| </a> | |
| <a href="#" class="text-gray-600 font-medium flex items-center"> | |
| <i data-feather="github" class="w-4 h-4 mr-1"></i> GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Professional Experience</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="relative pl-8 pb-12 border-l-2 border-secondary"> | |
| <div class="mb-10 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-secondary border-4 border-white"></div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="font-bold text-xl mb-1">Data Analyst Intern</h3> | |
| <div class="flex items-center text-secondary mb-3"> | |
| <i data-feather="briefcase" class="w-4 h-4 mr-2"></i> | |
| <span>Insights Analytics Inc.</span> | |
| <span class="mx-2">•</span> | |
| <span>Jan 2022 - Present</span> | |
| </div> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> | |
| <li>Conducted statistical analysis on customer behavior data to identify market trends</li> | |
| <li>Created interactive dashboards reducing reporting time by 40%</li> | |
| <li>Improved data processing pipeline efficiency by optimizing SQL queries</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mb-10 relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-secondary border-4 border-white"></div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="font-bold text-xl mb-1">Junior Data Scientist</h3> | |
| <div class="flex items-center text-secondary mb-3"> | |
| <i data-feather="briefcase" class="w-4 h-4 mr-2"></i> | |
| <span>DataForge Solutions</span> | |
| <span class="mx-2">•</span> | |
| <span>Jun 2021 - Dec 2021</span> | |
| </div> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> | |
| <li>Developed predictive models for inventory management with 92% accuracy</li> | |
| <li>Collaborated with cross-functional teams to deliver data-driven insights</li> | |
| <li>Automated data cleaning processes saving 15 hours weekly</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -left-10 w-6 h-6 rounded-full bg-secondary border-4 border-white"></div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="font-bold text-xl mb-1">Research Assistant</h3> | |
| <div class="flex items-center text-secondary mb-3"> | |
| <i data-feather="briefcase" class="w-4 h-4 mr-2"></i> | |
| <span>University Data Lab</span> | |
| <span class="mx-2">•</span> | |
| <span>Sep 2020 - May 2021</span> | |
| </div> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> | |
| <li>Analyzed large datasets for academic research projects</li> | |
| <li>Visualized complex research findings for publication</li> | |
| <li>Mentored undergraduate students in data analysis techniques</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Get In Touch</h2> | |
| <div class="max-w-3xl mx-auto bg-gray-50 rounded-xl shadow-md p-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-bold text-xl mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="mail" class="w-6 h-6 mr-4 text-secondary"></i> | |
| <span>analyst@example.com</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="linkedin" class="w-6 h-6 mr-4 text-secondary"></i> | |
| <span>linkedin.com/in/data-analyst</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="github" class="w-6 h-6 mr-4 text-secondary"></i> | |
| <span>github.com/data-analyst</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="phone" class="w-6 h-6 mr-4 text-secondary"></i> | |
| <span>+1 (555) 123-4567</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl mb-4">Send a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <input type="text" placeholder="Your Name" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary"> | |
| </div> | |
| <div> | |
| <input type="email" placeholder="Your Email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary"> | |
| </div> | |
| <div> | |
| <textarea placeholder="Your Message" rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-secondary text-white py-3 rounded-lg font-bold hover:bg-primary transition-colors">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-10 bg-dark text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="flex justify-center space-x-6 mb-6"> | |
| <a href="#" class="hover:text-secondary transition-colors"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="hover:text-secondary transition-colors"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="hover:text-secondary transition-colors"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="hover:text-secondary transition-colors"> | |
| <i data-feather="mail"></i> | |
| </a> | |
| </div> | |
| <p class="mb-2">© 2023 Data Insights Pro. All rights reserved.</p> | |
| <p class="text-gray-400">Transforming data into actionable insights</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| // Feather icons initialization | |
| feather.replace(); | |
| // Simple animation for skill cards | |
| const skillCards = document.querySelectorAll('.skill-card'); | |
| skillCards.forEach((card, index) => { | |
| setTimeout(() => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| setTimeout(() => { | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, 100); | |
| }, index * 100); | |
| }); | |
| // Project card animations | |
| const projectCards = document.querySelectorAll('.project-card'); | |
| projectCards.forEach((card, index) => { | |
| setTimeout(() => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| setTimeout(() => { | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, 100); | |
| }, index * 150); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |