Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Scientist Portfolio | John Doe</title> | |
| <meta name="description" content="Professional portfolio of John Doe, Data Scientist specializing in machine learning and data visualization"> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></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; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 6px; | |
| top: 32px; | |
| height: calc(100% - 32px); | |
| width: 2px; | |
| background: #e5e7eb; | |
| } | |
| .dark .timeline-item:not(:last-child)::after { | |
| background: #374151; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300"> | |
| <!-- Navigation --> | |
| <header class="fixed w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md z-50 shadow-sm"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold gradient-text">John Doe</a> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#about" class="font-medium hover:text-blue-500 dark:hover:text-purple-400 transition">About</a> | |
| <a href="#projects" class="font-medium hover:text-blue-500 dark:hover:text-purple-400 transition">Projects</a> | |
| <a href="#skills" class="font-medium hover:text-blue-500 dark:hover:text-purple-400 transition">Skills</a> | |
| <a href="#experience" class="font-medium hover:text-blue-500 dark:hover:text-purple-400 transition">Experience</a> | |
| <a href="#contact" class="font-medium hover:text-blue-500 dark:hover:text-purple-400 transition">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="dark:hidden"></i> | |
| </button> | |
| <button class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center pt-20" id="hero"> | |
| <div class="container mx-auto px-6 py-20"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| <span class="gradient-text">John Doe</span> | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-gray-600 dark:text-gray-300"> | |
| Data Scientist | Machine Learning Engineer | |
| </h2> | |
| <p class="text-lg md:text-xl mb-8 text-gray-500 dark:text-gray-400 max-w-lg"> | |
| Transforming complex data into actionable insights through machine learning and advanced analytics. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition shadow-lg"> | |
| Contact Me | |
| </a> | |
| <a href="#" class="px-6 py-3 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 font-medium rounded-lg transition"> | |
| Download CV | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white dark:border-gray-800 shadow-xl"> | |
| <img src="http://static.photos/people/640x640/1" alt="John Doe" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 p-3 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm font-medium">Available</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-gray-50 dark:bg-gray-800" id="about"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">About Me</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <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 overflow-hidden border-4 border-white dark:border-gray-800 shadow-lg"> | |
| <img src="http://static.photos/people/640x640/1" alt="John Doe" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <p class="text-lg mb-6 text-gray-600 dark:text-gray-300"> | |
| I'm a passionate data scientist with 5+ years of experience in building machine learning models and data-driven solutions. My expertise lies in predictive analytics, natural language processing, and data visualization. | |
| </p> | |
| <p class="text-lg mb-6 text-gray-600 dark:text-gray-300"> | |
| I hold a Master's degree in Data Science from Stanford University and have worked with Fortune 500 companies to solve complex business problems using data. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="map-pin" class="mr-2 text-blue-500"></i> | |
| <span>San Francisco, CA</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="briefcase" class="mr-2 text-blue-500"></i> | |
| <span>Available for freelance</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="mr-2 text-blue-500"></i> | |
| <span>10+ projects completed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section class="py-20" id="projects"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Featured Projects</h2> | |
| <p class="text-center text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto"> | |
| Here are some of my recent data science projects that showcase my skills and expertise. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Sentiment Analysis API</h3> | |
| <span class="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">NLP</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4"> | |
| A scalable API for real-time sentiment analysis of customer reviews using BERT and FastAPI. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Python</span> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">TensorFlow</span> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">FastAPI</span> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> Code | |
| </a> | |
| <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 flex items-center"> | |
| <i data-feather="external-link" class="mr-1"></i> Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/2" alt="Project 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Fraud Detection System</h3> | |
| <span class="text-xs px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">ML</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4"> | |
| Anomaly detection system for financial transactions using Isolation Forest and XGBoost. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Python</span> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Scikit-learn</span> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Flask</span> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> Code | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/3" alt="Project 3" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">COVID-19 Dashboard</h3> | |
| <span class="text-xs px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">Viz</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4"> | |
| Interactive dashboard visualizing COVID-19 trends and predictions using Plotly and Dash. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Python</span> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Plotly</span> | |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">Dash</span> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 flex items-center"> | |
| <i data-feather="github" class="mr-1"></i> Code | |
| </a> | |
| <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 flex items-center"> | |
| <i data-feather="external-link" class="mr-1"></i> Live Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"> | |
| <i data-feather="github" class="mr-2"></i> View All Projects on GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="py-20 bg-gray-50 dark:bg-gray-800" id="skills"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Skills & Tools</h2> | |
| <p class="text-center text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto"> | |
| My technical toolkit for solving data challenges and building intelligent systems. | |
| </p> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <!-- Programming Languages --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-sm"> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="code" class="mr-2 text-blue-500"></i> Languages | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> | |
| Python | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> | |
| R | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> | |
| SQL | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> | |
| JavaScript | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- ML/DL --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-sm"> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="cpu" class="mr-2 text-purple-500"></i> ML/DL | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div> | |
| TensorFlow | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div> | |
| PyTorch | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div> | |
| Scikit-learn | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div> | |
| Keras | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Data Processing --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-sm"> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="database" class="mr-2 text-green-500"></i> Data Tools | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| Pandas | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| NumPy | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| Spark | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| Dask | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Visualization --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-sm"> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="bar-chart-2" class="mr-2 text-yellow-500"></i> Visualization | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> | |
| Matplotlib | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> | |
| Seaborn | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> | |
| Plotly | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> | |
| Tableau | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Deployment --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-sm"> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="cloud" class="mr-2 text-red-500"></i> Deployment | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div> | |
| Docker | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div> | |
| AWS | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div> | |
| GCP | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div> | |
| Flask | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section class="py-20" id="experience"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Experience & Education</h2> | |
| <p class="text-center text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto"> | |
| My professional journey and academic background in data science. | |
| </p> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="space-y-8"> | |
| <!-- Work Experience --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6 flex items-center"> | |
| <i data-feather="briefcase" class="mr-2 text-blue-500"></i> Work Experience | |
| </h3> | |
| <div class="space-y-8"> | |
| <!-- Experience 1 --> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-3 h-3 rounded-full bg-blue-500"></div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-lg">Senior Data Scientist</h4> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">2020 - Present</span> | |
| </div> | |
| <h5 class="font-medium text-blue-500 dark:text-blue-400 mb-2">TechCorp Inc.</h5> | |
| <p class="text-gray-600 dark:text-gray-400"> | |
| Led a team of data scientists to develop ML models for customer segmentation and churn prediction. Implemented NLP solutions for automated customer support. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Experience 2 --> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-3 h-3 rounded-full bg-blue-500"></div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-lg">Data Scientist</h4> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">2018 - 2020</span> | |
| </div> | |
| <h5 class="font-medium text-blue-500 dark:text-blue-400 mb-2">AnalyticsPro</h5> | |
| <p class="text-gray-600 dark:text-gray-400"> | |
| Developed predictive models for sales forecasting and inventory optimization. Created interactive dashboards for business intelligence. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Education --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6 flex items-center"> | |
| <i data-feather="book" class="mr-2 text-purple-500"></i> Education | |
| </h3> | |
| <div class="space-y-8"> | |
| <!-- Education 1 --> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-3 h-3 rounded-full bg-purple-500"></div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-lg">MSc in Data Science</h4> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">2016 - 2018</span> | |
| </div> | |
| <h5 class="font-medium text-purple-500 dark:text-purple-400 mb-2">Stanford University</h5> | |
| <p class="text-gray-600 dark:text-gray-400"> | |
| Specialized in Machine Learning and Big Data Analytics. Thesis on "Deep Learning for Time Series Forecasting". | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Education 2 --> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-3 h-3 rounded-full bg-purple-500"></div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-lg">BSc in Computer Science</h4> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">2012 - 2016</span> | |
| </div> | |
| <h5 class="font-medium text-purple-500 dark:text-purple-400 mb-2">MIT</h5> | |
| <p class="text-gray-600 dark:text-gray-400"> | |
| Minor in Statistics. Graduated with honors. Research assistant in AI lab. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-20 bg-gray-50 dark:bg-gray-800" id="contact"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-4">Get In Touch</h2> | |
| <p class="text-center text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto"> | |
| Have a project in mind or want to discuss potential opportunities? Feel free to reach out! | |
| </p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-sm"> | |
| <h3 class="text-xl font-bold mb-6">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="mail" class="text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-medium">Email</h4> | |
| <a href="mailto:[email protected]" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">[email protected]</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="phone" class="text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-medium">Phone</h4> | |
| <a href="tel:+1234567890" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">+1 (234) 567-890</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="map-pin" class="text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-medium">Location</h4> | |
| <p class="text-gray-600 dark:text-gray-400">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-bold mb-4">Connect With Me</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-600 flex items-center justify-center hover:bg-blue-100 dark:hover:bg-blue-900 transition"> | |
| <i data-feather="linkedin" class="text-blue-500"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-600 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-500 transition"> | |
| <i data-feather="github" class="text-gray-800 dark:text-gray-300"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-600 flex items-center justify-center hover:bg-blue-100 dark:hover:bg-blue-900 transition"> | |
| <i data-feather="twitter" class="text-blue-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-sm"> | |
| <h3 class="text-xl font-bold mb-6">Send Me a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition shadow-lg"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 bg-gray-100 dark:bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col items-center"> | |
| <a href="#" class="text-2xl font-bold gradient-text mb-6">John Doe</a> | |
| <div class="flex space-x-6 mb-6"> | |
| <a href="#" class="text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-300 transition"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-400 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-red-500 transition"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-500 text-center max-w-md"> | |
| © 2023 John Doe. All rights reserved. Crafted with passion for data and design. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| // Check for saved theme preference or use system preference | |
| const savedTheme = localStorage.getItem('theme') || | |
| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); | |
| html.classList.add(savedTheme); | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| const theme = html.classList.contains('dark') ? 'dark' : 'light'; | |
| localStorage.setItem('theme', theme); | |
| }); | |
| // Mobile menu toggle (placeholder - would need additional HTML/CSS) | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| // Implement mobile menu toggle logic here | |
| console.log('Mobile menu clicked'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| const headerHeight = document.querySelector('header').offsetHeight; | |
| const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight; | |
| window.scrollTo({ | |
| top: targetPosition, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |