myproject / index.html
Atulpradhan's picture
Add 2 files
fffa4b6 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CEO of DeepSeek | Visionary Leader</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=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
overflow-x: hidden;
}
.gradient-text {
background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.glow-card {
box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
transition: all 0.3s ease;
}
.glow-card:hover {
box-shadow: 0 0 25px rgba(56, 189, 248, 0.5);
transform: translateY(-5px);
}
.ai-particle {
position: absolute;
background: rgba(56, 189, 248, 0.6);
border-radius: 50%;
pointer-events: none;
}
.timeline-item::before {
content: '';
position: absolute;
left: -38px;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: #38bdf8;
border: 3px solid #0f172a;
}
.typewriter {
overflow: hidden;
border-right: .15em solid #38bdf8;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #38bdf8 }
}
</style>
</head>
<body class="min-h-screen">
<!-- Floating AI Particles -->
<div id="particles-container"></div>
<!-- Main Container -->
<div class="container mx-auto px-4 py-12 max-w-6xl">
<!-- Header Section -->
<header class="flex flex-col md:flex-row items-center justify-between mb-16">
<div class="md:w-1/2 mb-8 md:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-4 gradient-text">DeepSeek CEO</h1>
<h2 class="text-xl md:text-2xl font-medium text-slate-300 mb-6 typewriter">Pioneering the Future of AI</h2>
<p class="text-slate-400 mb-8 leading-relaxed">
Visionary leader at the helm of DeepSeek, driving innovation in artificial intelligence and machine learning.
Committed to developing ethical, transformative AI solutions that benefit humanity.
</p>
<div class="flex space-x-4">
<a href="#" class="px-6 py-3 bg-sky-500 hover:bg-sky-600 rounded-full font-medium transition-all flex items-center">
<i class="fas fa-envelope mr-2"></i> Contact
</a>
<a href="#" class="px-6 py-3 border border-sky-500 text-sky-400 hover:bg-sky-900/30 rounded-full font-medium transition-all flex items-center">
<i class="fab fa-linkedin-in mr-2"></i> LinkedIn
</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-sky-500/30 relative glow-card">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
alt="CEO Portrait"
class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-6 -right-6 bg-slate-800 px-4 py-2 rounded-lg border border-slate-700 shadow-lg">
<span class="text-sky-400 font-bold">AI Innovator</span>
</div>
</div>
</div>
</header>
<!-- Stats Section -->
<section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="text-slate-400 text-sm mb-2">Years in AI</h3>
<p class="text-3xl font-bold text-sky-400">15+</p>
</div>
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="text-slate-400 text-sm mb-2">Patents</h3>
<p class="text-3xl font-bold text-sky-400">42</p>
</div>
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="text-slate-400 text-sm mb-2">Team Size</h3>
<p class="text-3xl font-bold text-sky-400">500+</p>
</div>
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="text-slate-400 text-sm mb-2">AI Models</h3>
<p class="text-3xl font-bold text-sky-400">28</p>
</div>
</section>
<!-- About Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 gradient-text text-center">Leadership Philosophy</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-slate-800/50 p-8 rounded-xl glow-card">
<div class="text-sky-400 text-4xl mb-4">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-xl font-bold mb-3">Ethical AI Development</h3>
<p class="text-slate-400">
Championing responsible AI that prioritizes transparency, fairness, and accountability.
Implementing rigorous ethical frameworks to ensure AI benefits all of humanity.
</p>
</div>
<div class="bg-slate-800/50 p-8 rounded-xl glow-card">
<div class="text-sky-400 text-4xl mb-4">
<i class="fas fa-users"></i>
</div>
<h3 class="text-xl font-bold mb-3">Team Empowerment</h3>
<p class="text-slate-400">
Fostering a culture of innovation where brilliant minds collaborate to push boundaries.
Believing that the best ideas emerge from diverse, empowered teams.
</p>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 gradient-text text-center">Career Journey</h2>
<div class="relative">
<div class="absolute left-8 md:left-1/2 h-full w-0.5 bg-slate-700"></div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Left Side Items -->
<div class="md:mr-auto md:pr-16 md:text-right">
<div class="relative pl-12 md:pl-0 md:pr-12 timeline-item mb-8">
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="font-bold text-lg text-sky-400 mb-2">PhD in Computer Science</h3>
<p class="text-sm text-slate-400 mb-2">Stanford University | 2005-2009</p>
<p class="text-slate-300">Specialized in neural networks and early AI architectures</p>
</div>
</div>
<div class="relative pl-12 md:pl-0 md:pr-12 timeline-item mb-8">
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="font-bold text-lg text-sky-400 mb-2">AI Research Scientist</h3>
<p class="text-sm text-slate-400 mb-2">Google Brain | 2010-2014</p>
<p class="text-slate-300">Led breakthrough research in deep learning applications</p>
</div>
</div>
</div>
<!-- Right Side Items -->
<div class="md:ml-auto md:pl-16">
<div class="relative pl-12 timeline-item mb-8">
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="font-bold text-lg text-sky-400 mb-2">Chief AI Officer</h3>
<p class="text-sm text-slate-400 mb-2">OpenAI | 2015-2018</p>
<p class="text-slate-300">Directed strategic AI initiatives and ethical guidelines</p>
</div>
</div>
<div class="relative pl-12 timeline-item">
<div class="bg-slate-800/50 p-6 rounded-xl glow-card">
<h3 class="font-bold text-lg text-sky-400 mb-2">Founder & CEO</h3>
<p class="text-sm text-slate-400 mb-2">DeepSeek | 2019-Present</p>
<p class="text-slate-300">Building the next generation of transformative AI technologies</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Keynote Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 gradient-text text-center">Recent Keynote</h2>
<div class="bg-slate-800/50 rounded-xl overflow-hidden glow-card">
<div class="aspect-w-16 aspect-h-9">
<div class="w-full h-64 md:h-96 bg-slate-700 flex items-center justify-center">
<div class="text-center p-8">
<i class="fas fa-play-circle text-6xl text-sky-400 mb-4 opacity-70"></i>
<h3 class="text-xl font-bold mb-2">"The Next Decade of AI"</h3>
<p class="text-slate-400">Global AI Summit 2023</p>
</div>
</div>
</div>
<div class="p-6">
<p class="text-slate-300 mb-4">
In this groundbreaking talk, our CEO outlines the roadmap for AI development over the next decade,
emphasizing the importance of human-AI collaboration and the ethical imperatives facing our industry.
</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-slate-700 rounded-full text-sm text-sky-400">#AIEthics</span>
<span class="px-3 py-1 bg-slate-700 rounded-full text-sm text-sky-400">#FutureTech</span>
<span class="px-3 py-1 bg-slate-700 rounded-full text-sm text-sky-400">#Innovation</span>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section>
<h2 class="text-3xl font-bold mb-8 gradient-text text-center">Get In Touch</h2>
<div class="bg-slate-800/50 p-8 rounded-xl glow-card max-w-2xl mx-auto">
<form>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div>
<label for="name" class="block text-slate-400 mb-2">Name</label>
<input type="text" id="name" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-sky-500">
</div>
<div>
<label for="email" class="block text-slate-400 mb-2">Email</label>
<input type="email" id="email" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-sky-500">
</div>
</div>
<div class="mb-6">
<label for="subject" class="block text-slate-400 mb-2">Subject</label>
<input type="text" id="subject" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-sky-500">
</div>
<div class="mb-6">
<label for="message" class="block text-slate-400 mb-2">Message</label>
<textarea id="message" rows="4" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-sky-500"></textarea>
</div>
<button type="submit" class="w-full bg-sky-500 hover:bg-sky-600 text-white font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center">
<i class="fas fa-paper-plane mr-2"></i> Send Message
</button>
</form>
</div>
</section>
</div>
<!-- Footer -->
<footer class="bg-slate-900/50 py-8 mt-16">
<div class="container mx-auto px-4 text-center">
<div class="flex justify-center space-x-6 mb-6">
<a href="#" class="text-slate-400 hover:text-sky-400 transition-all">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-slate-400 hover:text-sky-400 transition-all">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="#" class="text-slate-400 hover:text-sky-400 transition-all">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="text-slate-400 hover:text-sky-400 transition-all">
<i class="fab fa-medium text-xl"></i>
</a>
</div>
<p class="text-slate-500 text-sm">
© 2023 DeepSeek Technologies. All rights reserved.
</p>
</div>
</footer>
<script>
// Create floating AI particles
function createParticles() {
const container = document.getElementById('particles-container');
const particleCount = 20;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('ai-particle');
// Random size between 2px and 6px
const size = Math.random() * 4 + 2;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Random position
particle.style.left = `${Math.random() * 100}vw`;
particle.style.top = `${Math.random() * 100}vh`;
// Random animation
const duration = Math.random() * 20 + 10;
particle.style.animation = `float ${duration}s linear infinite`;
// Add to container
container.appendChild(particle);
// Animate particle
animateParticle(particle);
}
}
function animateParticle(particle) {
let x = parseFloat(particle.style.left);
let y = parseFloat(particle.style.top);
let xSpeed = (Math.random() - 0.5) * 0.2;
let ySpeed = (Math.random() - 0.5) * 0.2;
function move() {
x += xSpeed;
y += ySpeed;
// Bounce off edges
if (x <= 0 || x >= 100) xSpeed *= -1;
if (y <= 0 || y >= 100) ySpeed *= -1;
particle.style.left = `${x}vw`;
particle.style.top = `${y}vh`;
requestAnimationFrame(move);
}
move();
}
// Initialize particles when page loads
window.addEventListener('load', createParticles);
// Add animation to timeline items when they come into view
const timelineItems = document.querySelectorAll('.timeline-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
timelineItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(20px)';
item.style.transition = 'all 0.6s ease';
observer.observe(item);
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Atulpradhan/myproject" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>