this is great! can you change the color schema to black and white or grey scaled and add a blog section?
7bffc23
verified
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Alchemy | Scientist Portfolio</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: 'rgb(23, 23, 23)', | |
| secondary: 'rgb(107, 114, 128)', | |
| accent: 'rgb(243, 244, 246)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased text-gray-800"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Hero Section --> | |
| <section class="min-h-[80vh] flex items-center"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 text-primary"> | |
| Transforming Data <span class="text-secondary">Into Insights</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-600"> | |
| Data Scientist & Software Engineer bridging research and technology | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#projects" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-md transition"> | |
| View Projects | |
| </a> | |
| <a href="#contact" class="border border-primary text-primary hover:bg-primary/10 px-6 py-3 rounded-lg shadow-md transition"> | |
| Contact Me | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Data Science" class="rounded-xl shadow-2xl"> | |
| <div class="absolute -bottom-6 -left-6 bg-secondary p-4 rounded-xl shadow-lg"> | |
| <i data-feather="award" class="w-10 h-10 text-primary"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-primary">About Me</h2> | |
| <div class="h-1 w-24 bg-secondary mb-8"></div> | |
| <div class="prose-xl text-gray-700"> | |
| <p> | |
| I'm a passionate data scientist and software engineer with expertise in machine learning, statistical modeling, and full-stack development. | |
| I bridge the gap between cutting-edge research and practical software solutions. | |
| </p> | |
| <p> | |
| My academic background in computer science and applied mathematics fuels my ability to tackle complex problems | |
| with both theoretical rigor and engineering pragmatism. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mt-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-primary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary/10 p-3 rounded-full mr-4"> | |
| <i data-feather="layers" class="w-6 h-6 text-primary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Research</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Published papers on deep learning architectures and NLP applications in peer-reviewed journals. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-primary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary/10 p-3 rounded-full mr-4"> | |
| <i data-feather="code" class="w-6 h-6 text-primary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Development</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Built scalable machine learning pipelines and full-stack applications for enterprise clients. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-t-4 border-primary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary/10 p-3 rounded-full mr-4"> | |
| <i data-feather="book" class="w-6 h-6 text-primary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Education</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| PhD in Computer Science with focus on machine learning and natural language processing. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-20 bg-primary/5"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-primary">Experience</h2> | |
| <div class="h-1 w-24 bg-secondary mb-8"></div> | |
| <div class="space-y-8"> | |
| <!-- Experience Item 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-secondary"> | |
| <div class="flex flex-col md:flex-row justify-between mb-2"> | |
| <h3 class="font-bold text-xl">Senior Data Scientist</h3> | |
| <span class="text-primary font-medium">2020 - Present</span> | |
| </div> | |
| <p class="text-gray-500 mb-4">Tech Solutions Inc.</p> | |
| <ul class="list-disc list-inside space-y-2 text-gray-700"> | |
| <li>Led development of ML models improving customer retention by 32%</li> | |
| <li>Designed and implemented real-time anomaly detection system</li> | |
| <li>Mentored junior team members on best practices in ML engineering</li> | |
| </ul> | |
| </div> | |
| <!-- Experience Item 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-secondary"> | |
| <div class="flex flex-col md:flex-row justify-between mb-2"> | |
| <h3 class="font-bold text-xl">Machine Learning Engineer</h3> | |
| <span class="text-primary font-medium">2017 - 2020</span> | |
| </div> | |
| <p class="text-gray-500 mb-4">InnovateAI</p> | |
| <ul class="list-disc list-inside space-y-2 text-gray-700"> | |
| <li>Developed NLP models for automated document processing</li> | |
| <li>Optimized model performance leading to 4x inference speed improvement</li> | |
| <li>Published research on transformer architectures for low-resource languages</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-primary">Research & Projects</h2> | |
| <div class="h-1 w-24 bg-secondary mb-8"></div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden group"> | |
| <img src="http://static.photos/technology/640x360/23" alt="Project 1" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-primary/10 p-2 rounded-full mr-3"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4 text-primary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Deep Learning for NLP</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Novel architecture for sentiment analysis achieving state-of-the-art results on benchmark datasets. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Python</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">PyTorch</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">NLP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden group"> | |
| <img src="http://static.photos/abstract/640x360/15" alt="Project 2" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-primary/10 p-2 rounded-full mr-3"> | |
| <i data-feather="database" class="w-4 h-4 text-primary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Analytics Dashboard</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Interactive dashboard for real-time business metrics visualization with anomaly detection. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">JavaScript</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">D3.js</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Flask</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden group"> | |
| <img src="http://static.photos/science/640x360/37" alt="Project 3" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-primary/10 p-2 rounded-full mr-3"> | |
| <i data-feather="cpu" class="w-4 h-4 text-primary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Federated Learning</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Privacy-preserving ML framework for healthcare applications using federated learning techniques. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">TensorFlow</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Keras</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Healthcare</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden group"> | |
| <img src="http://static.photos/minimal/640x360/19" alt="Project 4" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-primary/10 p-2 rounded-full mr-3"> | |
| <i data-feather="box" class="w-4 h-4 text-primary"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">ML Ops Pipeline</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Automated machine learning pipeline with CI/CD integration for production model deployment. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">AWS</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Docker</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">MLflow</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-md transition flex items-center mx-auto"> | |
| <i data-feather="github" class="mr-2"></i> View All Projects on GitHub | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="py-20 bg-primary/5"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-primary">Education</h2> | |
| <div class="h-1 w-24 bg-secondary mb-8"></div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-primary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-2 rounded-full text-white mr-4"> | |
| <i data-feather="award"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">PhD in Computer Science</h3> | |
| <p class="text-gray-500">Stanford University</p> | |
| <p class="text-gray-400 text-sm">2014 - 2018</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| Dissertation: "Advances in Deep Learning for Natural Language Understanding" | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-primary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-2 rounded-full text-white mr-4"> | |
| <i data-feather="book-open"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">MS in Applied Mathematics</h3> | |
| <p class="text-gray-500">MIT</p> | |
| <p class="text-gray-400 text-sm">2012 - 2014</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| Research in probabilistic graphical models and optimization algorithms | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Publications Section --> | |
| <section id="publications" class="py-20"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-primary">Publications</h2> | |
| <div class="h-1 w-24 bg-secondary mb-8"></div> | |
| <div class="space-y-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg">Transformer Architectures for Low-Resource Languages</h3> | |
| <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">2022</span> | |
| </div> | |
| <p class="text-gray-500 mb-2">Neural Information Processing Systems (NeurIPS)</p> | |
| <p class="text-gray-700"> | |
| Proposed a novel transformer variant improving performance on underrepresented languages by 17% compared to baseline models. | |
| </p> | |
| <div class="flex gap-4 mt-4"> | |
| <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-1"></i> PDF | |
| </a> | |
| <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center"> | |
| <i data-feather="github" class="w-4 h-4 mr-1"></i> Code | |
| </a> | |
| <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center"> | |
| <i data-feather="link" class="w-4 h-4 mr-1"></i> DOI | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg">Federated Learning for Healthcare Applications</h3> | |
| <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">2021</span> | |
| </div> | |
| <p class="text-gray-500 mb-2">Journal of Machine Learning Research (JMLR)</p> | |
| <p class="text-gray-700"> | |
| Introduced privacy-preserving techniques for medical data analysis while maintaining model performance comparable to centralized approaches. | |
| </p> | |
| <div class="flex gap-4 mt-4"> | |
| <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-1"></i> PDF | |
| </a> | |
| <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center"> | |
| <i data-feather="github" class="w-4 h-4 mr-1"></i> Code | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="py-20 bg-accent"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-primary">Latest Writings</h2> | |
| <div class="h-1 w-24 bg-secondary mb-8"></div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Blog Post 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden group"> | |
| <img src="http://static.photos/black/640x360/10" alt="Blog Post 1" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <p class="text-sm text-secondary mb-2">May 15, 2023 • 8 min read</p> | |
| <h3 class="font-bold text-xl mb-4 text-primary">Explainable AI in Modern Data Science</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Exploring techniques to make complex machine learning models more interpretable and transparent. | |
| </p> | |
| <a href="#" class="text-primary hover:underline font-medium">Read More →</a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden group"> | |
| <img src="http://static.photos/minimal/640x360/20" alt="Blog Post 2" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <p class="text-sm text-secondary mb-2">April 2, 2023 • 12 min read</p> | |
| <h3 class="font-bold text-xl mb-4 text-primary">The Math Behind Neural Networks</h3> | |
| <p class="text-gray-600 mb-4"> | |
| A deep dive into the mathematical foundations powering modern deep learning architectures. | |
| </p> | |
| <a href="#" class="text-primary hover:underline font-medium">Read More →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="bg-primary hover:bg-gray-800 text-white px-6 py-3 rounded-lg shadow-md transition inline-block"> | |
| View All Blog Posts | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-accent"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-2 text-primary">Get In Touch</h2> | |
| <div class="h-1 w-24 bg-secondary mb-8"></div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-primary p-3 rounded-full text-white mr-4"> | |
| <i data-feather="mail"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Email</p> | |
| <p class="text-gray-700">researcher@dataalchemy.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-primary p-3 rounded-full text-white mr-4"> | |
| <i data-feather="map-pin"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Location</p> | |
| <p class="text-gray-700">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-primary p-3 rounded-full text-white mr-4"> | |
| <i data-feather="linkedin"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">LinkedIn</p> | |
| <p class="text-gray-700">linkedin.com/in/data-scientist</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <form class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-primary focus:border-primary"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg shadow-md transition flex items-center justify-center"> | |
| <i data-feather="send" class="mr-2"></i> Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |