|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Engineer Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #0a192f; |
|
|
color: #ccd6f6; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #0a192f; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #64ffda; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.typing-text { |
|
|
border-right: 2px solid #64ffda; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 1s ease-in-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
background-color: #64ffda; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #64ffda, #a78bfa); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.tech-icon { |
|
|
filter: grayscale(100%); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tech-icon:hover { |
|
|
filter: grayscale(0%); |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.section { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.6s ease-out; |
|
|
} |
|
|
|
|
|
.section.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
|
|
|
<nav class="fixed w-full bg-[#0a192f] bg-opacity-90 z-50 shadow-lg"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<a href="#" class="text-xl font-bold text-[#64ffda]">AI<span class="text-white">Port</span></a> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-center space-x-6"> |
|
|
<a href="#home" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Home</a> |
|
|
<a href="#about" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">About</a> |
|
|
<a href="#skills" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Skills</a> |
|
|
<a href="#projects" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Projects</a> |
|
|
<a href="#contact" class="nav-link text-sm font-medium text-[#ccd6f6] hover:text-[#64ffda] px-3 py-2">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-[#ccd6f6] hover:text-[#64ffda] focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-[#0a192f]"> |
|
|
<div class="px-4 pt-2 pb-3 space-y-1"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">About</a> |
|
|
<a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Skills</a> |
|
|
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Projects</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-[#ccd6f6] hover:text-[#64ffda] hover:bg-[#112240]">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen flex items-center justify-center pt-16 px-4 sm:px-6 lg:px-8" style="background-image: radial-gradient(circle at 25% 50%, rgba(100, 255, 218, 0.1) 0%, transparent 50%);"> |
|
|
<div class="max-w-7xl mx-auto text-center"> |
|
|
<div class="mb-6 fade-in" style="animation-delay: 0.2s;"> |
|
|
<p class="text-[#64ffda] font-mono text-sm md:text-base">Hi, my name is</p> |
|
|
</div> |
|
|
<h1 class="text-4xl sm:text-5xl md:text-7xl font-bold text-white mb-4 fade-in" style="animation-delay: 0.4s;"> |
|
|
<span class="gradient-text">Agnik Bishi</span> |
|
|
</h1> |
|
|
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-[#8892b0] mb-6 fade-in" style="animation-delay: 0.6s;"> |
|
|
<span class="typing-text">Generative AI Engineer</span> |
|
|
</h2> |
|
|
<p class="max-w-2xl mx-auto text-lg text-[#8892b0] mb-10 fade-in" style="animation-delay: 0.8s;"> |
|
|
I specialize in building AI systems that generate creative content, from text to images and beyond. |
|
|
My passion lies in pushing the boundaries of what artificial intelligence can create. |
|
|
</p> |
|
|
<div class="fade-in" style="animation-delay: 1s;"> |
|
|
<a href="#projects" class="inline-flex items-center px-6 py-3 border border-[#64ffda] text-[#64ffda] rounded-md font-mono text-sm hover:bg-[#64ffda1a] transition duration-300 hover:shadow-lg"> |
|
|
View My Work <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 section"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
|
|
<h2 class="text-3xl font-bold text-white mb-6 relative"> |
|
|
<span class="text-[#64ffda] font-mono text-sm md:text-base">01.</span> About Me |
|
|
<span class="absolute left-32 bottom-0 w-48 h-px bg-[#233554]"></span> |
|
|
</h2> |
|
|
<div class="text-[#a8b2d1] mb-6"> |
|
|
<p class="mb-4"> |
|
|
Hello! I'm Agnik, a Generative AI Engineer with over 5 years of experience in designing and implementing cutting-edge AI solutions. |
|
|
My journey into artificial intelligence began during my Computer Science studies at MIT, where I became fascinated by the creative potential of neural networks. |
|
|
</p> |
|
|
<p class="mb-4"> |
|
|
I've worked on diverse projects ranging from text generation models to multimodal AI systems that combine vision and language understanding. At OpenAI, I contributed to the development of large language models, focusing on ethical deployment strategies. |
|
|
</p> |
|
|
<p> |
|
|
When I'm not training models, you can find me writing technical blogs, speaking at AI conferences, or experimenting with new generative architectures in my home lab. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mt-6"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check text-[#64ffda] mr-2"></i> |
|
|
<span class="text-sm text-[#a8b2d1]">Generative Modeling</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check text-[#64ffda] mr-2"></i> |
|
|
<span class="text-sm text-[#a8b2d1]">Natural Language Processing</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check text-[#64ffda] mr-2"></i> |
|
|
<span class="text-sm text-[#a8b2d1]">Computer Vision</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check text-[#64ffda] mr-2"></i> |
|
|
<span class="text-sm text-[#a8b2d1]">AI Ethics</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="w-64 h-64 md:w-80 md:h-80 mx-auto rounded-lg overflow-hidden relative z-10"> |
|
|
<img src="https://images.unsplash.com/photo-1580894732444-8ecded7900cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Alex Chen" class="w-full h-full object-cover grayscale hover:grayscale-0 transition duration-300"> |
|
|
<div class="absolute inset-0 border-4 border-[#64ffda] rounded-lg translate-x-6 translate-y-6 -z-10"></div> |
|
|
</div> |
|
|
<div class="absolute top-0 left-0 w-full h-full bg-[#64ffda] opacity-10 rounded-lg -z-20"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20 px-4 sm:px-6 lg:px-8 section" style="background-color: #112240;"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-white mb-16 text-center relative"> |
|
|
<span class="text-[#64ffda] font-mono text-sm md:text-base">02.</span> My Skills |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-12"> |
|
|
|
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-robot text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">Generative AI</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fab fa-python text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">Python</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-brain text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">TensorFlow</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-project-diagram text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">PyTorch</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-cloud text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">AWS</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-code text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">Transformers</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-eye text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">OpenCV</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-database text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">SQL</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-chart-line text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">Matplotlib</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<i class="fas fa-network-wired text-5xl mb-2"></i> |
|
|
<span class="text-sm text-center">GANs</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-[#0a192f] rounded-lg p-8 border border-[#233554]"> |
|
|
<h3 class="text-xl font-bold text-white mb-6">Technical Expertise</h3> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-[#64ffda] mb-3">AI Development</h4> |
|
|
<ul class="space-y-2 text-[#a8b2d1]"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i> |
|
|
<span>Design and implementation of transformer-based architectures</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i> |
|
|
<span>Training and fine-tuning of LLMs (GPT, BERT, T5 variants)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i> |
|
|
<span>Development of multimodal AI systems</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-[#64ffda] mb-3">Research & Optimization</h4> |
|
|
<ul class="space-y-2 text-[#a8b2d1]"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i> |
|
|
<span>Novel architecture exploration and prototyping</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i> |
|
|
<span>Model compression and distillation techniques</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-caret-right text-[#64ffda] mr-2 mt-1 text-xs"></i> |
|
|
<span>Ethical AI alignment research</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 px-4 sm:px-6 lg:px-8 section"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-white mb-16 relative"> |
|
|
<span class="text-[#64ffda] font-mono text-sm md:text-base">03.</span> Featured Projects |
|
|
<span class="absolute left-48 bottom-0 w-48 h-px bg-[#233554]"></span> |
|
|
</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<i class="fas fa-book text-2xl text-[#64ffda]"></i> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">CreativeGPT</h3> |
|
|
<p class="text-[#a8b2d1] text-sm mb-4"> |
|
|
A fine-tuned language model for creative writing assistance, capable of generating poetry, stories, and screenplays with coherent narrative structure. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Transformers</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">PyTorch</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<i class="fas fa-paint-brush text-2xl text-[#64ffda]"></i> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">ArtGAN</h3> |
|
|
<p class="text-[#a8b2d1] text-sm mb-4"> |
|
|
Generative adversarial network trained to create artwork in various styles, with interactive controls for artists and designers. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">TensorFlow</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">GAN</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<i class="fas fa-music text-2xl text-[#64ffda]"></i> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">MelodyVAE</h3> |
|
|
<p class="text-[#a8b2d1] text-sm mb-4"> |
|
|
Variational autoencoder for music generation, capable of composing original melodies based on style parameters and artistic constraints. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">PyTorch</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">VAE</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<i class="fas fa-comments text-2xl text-[#64ffda]"></i> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">DialogueFlow</h3> |
|
|
<p class="text-[#a8b2d1] text-sm mb-4"> |
|
|
Conversational AI framework with controllable personality traits and domain adaptation capabilities for various applications. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">BERT</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">NLP</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<i class="fas fa-image text-2xl text-[#64ffda]"></i> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">DreamCanvas</h3> |
|
|
<p class="text-[#a8b2d1] text-sm mb-4"> |
|
|
Text-to-image generation tool with fine-grained creative controls and iterative refinement for digital artists and content creators. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Diffusion</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">CLIP</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card bg-[#112240] rounded-lg p-6 hover:shadow-xl transition duration-300"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<i class="fas fa-code text-2xl text-[#64ffda]"></i> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda]"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2">EthosAI</h3> |
|
|
<p class="text-[#a8b2d1] text-sm mb-4"> |
|
|
Framework for detecting and mitigating bias, toxicity, and harmful outputs in generative AI models across multiple modalities. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">Python</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">AI Safety</span> |
|
|
<span class="text-xs text-[#64ffda] font-mono py-1 px-2 bg-[#64ffda1a] rounded">NLP</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 section" style="background-color: #112240;"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold text-white mb-6 relative"> |
|
|
<span class="text-[#64ffda] font-mono text-sm md:text-base">04.</span> Get In Touch |
|
|
</h2> |
|
|
<p class="text-[#a8b2d1] mb-10"> |
|
|
I'm currently looking for new opportunities in generative AI research and development. |
|
|
Whether you have a question, want to collaborate, or just want to say hi, I'll do my best to get back to you! |
|
|
</p> |
|
|
<a href="mailto:agnik@example.com" class="inline-flex items-center px-6 py-3 border border-[#64ffda] text-[#64ffda] rounded-md font-mono text-sm hover:bg-[#64ffda1a] transition duration-300"> |
|
|
Say Hello <i class="fas fa-paper-plane ml-2"></i> |
|
|
</a> |
|
|
|
|
|
<div class="mt-16 flex justify-center space-x-6"> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-[#a8b2d1] hover:text-[#64ffda] transition duration-300 text-xl"> |
|
|
<i class="fab fa-medium-m"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-6 px-4 sm:px-6 lg:px-8 text-center text-sm text-[#a8b2d1]"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<p>Built by Agnik Bishi | Inspired by amazing AI researchers everywhere</p> |
|
|
<p class="mt-2">© 2023 All rights reserved</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const phrases = [ |
|
|
"Generative AI Engineer", |
|
|
"Machine Learning Researcher", |
|
|
"AI Ethicist", |
|
|
"Creative Technologist", |
|
|
"Neural Network Architect" |
|
|
]; |
|
|
|
|
|
let currentPhrase = 0; |
|
|
let currentChar = 0; |
|
|
let typingElement = document.querySelector('.typing-text'); |
|
|
let isDeleting = false; |
|
|
let shouldWait = false; |
|
|
|
|
|
function type() { |
|
|
const currentText = phrases[currentPhrase]; |
|
|
|
|
|
if (isDeleting) { |
|
|
typingElement.textContent = currentText.substring(0, currentChar - 1); |
|
|
currentChar--; |
|
|
} else { |
|
|
typingElement.textContent = currentText.substring(0, currentChar + 1); |
|
|
currentChar++; |
|
|
} |
|
|
|
|
|
if (!isDeleting && currentChar === currentText.length) { |
|
|
shouldWait = true; |
|
|
setTimeout(() => { |
|
|
isDeleting = true; |
|
|
shouldWait = false; |
|
|
}, 1500); |
|
|
} else if (isDeleting && currentChar === 0) { |
|
|
isDeleting = false; |
|
|
currentPhrase = (currentPhrase + 1) % phrases.length; |
|
|
} |
|
|
|
|
|
const typingSpeed = isDeleting ? 15 : shouldWait ? 0 : 40; |
|
|
setTimeout(type, typingSpeed); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(type, 500); |
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.section').forEach(section => { |
|
|
observer.observe(section); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
