Hugging Face's logo

Spaces:
WebashalarForML
/
anycoder-77f43fa2
Running

App Files Community
anycoder-77f43fa2 / index.html
WebashalarForML's picture
WebashalarForML
Upload folder using huggingface_hub
a85264f verified
raw
history blame contribute delete
28.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A.I. Engineer Portfolio | Cinematic Experience</title>
<!-- External Libraries -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;300;400;700&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
<!-- Tailwind Config for Custom Colors/Fonts -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
void: '#050505',
obsidian: '#0a0a0a',
charcoal: '#1c1c1c',
platinum: '#e5e5e5',
accent: '#ff3333', // Subtle accent for rare elements
},
fontFamily: {
mono: ['"JetBrains Mono"', 'monospace'],
sans: ['"Space Grotesk"', 'sans-serif'],
},
backgroundImage: {
'grid-pattern': "linear-gradient(to right, #1f1f1f 1px, transparent 1px), linear-gradient(to bottom, #1f1f1f 1px, transparent 1px)",
}
}
}
}
</script>
<style>
/* Base Reset & Typography */
body {
background-color: #050505;
color: #e5e5e5;
overflow-x: hidden;
cursor: none; /* Custom cursor */
}
::selection {
background: #333;
color: #fff;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Custom Cursor */
#cursor {
position: fixed;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s, background-color 0.3s;
mix-blend-mode: difference;
}
#cursor.hovered {
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
}
/* Utilities */
.glass-panel {
background: rgba(10, 10, 10, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.text-outline {
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
color: transparent;
transition: all 0.5s ease;
}
.text-outline:hover {
color: #fff;
-webkit-text-stroke: 1px #fff;
}
/* Noise Texture Overlay */
.noise-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 50;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Loading Screen */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.loader-bar {
width: 0%;
height: 2px;
background: #fff;
margin-top: 20px;
transition: width 0.1s;
}
/* 3D Canvas Container */
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0; /* Fade in via JS */
transition: opacity 1.5s ease;
}
</style>
</head>
<body class="font-sans antialiased">
<!-- Loading Screen -->
<div id="loader">
<div class="font-mono text-xs tracking-[0.5em] text-gray-400">INITIALIZING SYSTEM</div>
<div class="loader-bar" id="loader-bar"></div>
</div>
<!-- Noise Overlay -->
<div class="noise-overlay"></div>
<!-- Custom Cursor -->
<div id="cursor"></div>
<!-- 3D Background -->
<div id="canvas-container"></div>
<!-- Navigation -->
<nav class="fixed top-0 left-0 w-full p-6 flex justify-between items-center z-40 mix-blend-difference">
<div class="font-mono text-sm font-bold tracking-widest hover-trigger">AI.ENGINEER</div>
<div class="hidden md:flex gap-8 font-mono text-xs tracking-wider">
<a href="#work" class="hover:text-white transition-colors hover-trigger">WORK</a>
<a href="#research" class="hover:text-white transition-colors hover-trigger">RESEARCH</a>
<a href="#about" class="hover:text-white transition-colors hover-trigger">ABOUT</a>
</div>
<button class="border border-white/20 px-4 py-2 rounded-full font-mono text-xs hover:bg-white hover:text-black transition-all hover-trigger">
CONTACT
</button>
</nav>
<!-- Main Content -->
<main class="relative z-10">
<!-- Hero Section -->
<section class="h-screen w-full flex flex-col justify-center items-center relative px-4">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#050505] pointer-events-none"></div>
<div class="text-center z-10">
<p class="font-mono text-xs md:text-sm text-gray-400 mb-4 tracking-[0.3em] hero-anim opacity-0 translate-y-10">
ARTIFICIAL INTELLIGENCE & RESEARCH
</p>
<h1 class="text-5xl md:text-8xl lg:text-9xl font-bold tracking-tighter leading-none mb-6 hero-anim opacity-0 translate-y-10">
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-600">PRECISION</span>
<span class="block text-outline">ENGINEERING</span>
</h1>
<p class="max-w-xl mx-auto font-light text-gray-400 text-sm md:text-base leading-relaxed hero-anim opacity-0 translate-y-10">
Architecting the future through neural networks and high-performance algorithms.
</p>
</div>
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 hero-anim opacity-0">
<span class="font-mono text-[10px] tracking-widest text-gray-500">SCROLL TO EXPLORE</span>
<div class="w-[1px] h-12 bg-gradient-to-b from-white to-transparent"></div>
</div>
</section>
<!-- KPI Slider Section -->
<section id="kpi-section" class="py-32 px-6 md:px-20 relative">
<div class="absolute top-0 left-0 w-full h-[1px] bg-white/10"></div>
<div class="flex flex-col md:flex-row justify-between items-end mb-20 border-b border-white/10 pb-8">
<h2 class="text-4xl md:text-6xl font-bold">SYSTEM METRICS</h2>
<div class="font-mono text-xs text-gray-500 mt-4 md:mt-0">
REAL-TIME DATA STREAM
</div>
</div>
<!-- KPI Cards Container -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="kpi-card group p-8 border border-white/5 bg-[#0a0a0a] relative overflow-hidden hover-trigger">
<div class="absolute top-0 right-0 p-4 opacity-50 group-hover:opacity-100 transition-opacity">
<i data-lucide="cpu" class="w-6 h-6"></i>
</div>
<div class="font-mono text-xs text-gray-500 mb-2">MODEL ACCURACY</div>
<div class="text-5xl md:text-6xl font-bold font-mono mb-4 counter" data-target="99.8">0</div>
<div class="w-full h-[1px] bg-white/10 mb-4 relative overflow-hidden">
<div class="absolute top-0 left-0 h-full w-1/2 bg-white group-hover:w-full transition-all duration-1000 ease-out"></div>
</div>
<p class="text-sm text-gray-400">Optimized for edge deployment and low-latency inference.</p>
</div>
<!-- Card 2 -->
<div class="kpi-card group p-8 border border-white/5 bg-[#0a0a0a] relative overflow-hidden hover-trigger">
<div class="absolute top-0 right-0 p-4 opacity-50 group-hover:opacity-100 transition-opacity">
<i data-lucide="database" class="w-6 h-6"></i>
</div>
<div class="font-mono text-xs text-gray-500 mb-2">DATA PROCESSED</div>
<div class="text-5xl md:text-6xl font-bold font-mono mb-4 counter" data-target="850">0</div>
<div class="w-full h-[1px] bg-white/10 mb-4 relative overflow-hidden">
<div class="absolute top-0 left-0 h-full w-0 group-hover:w-full transition-all duration-1000 ease-out delay-200"></div>
</div>
<p class="text-sm text-gray-400">Petabytes of structured and unstructured data analyzed.</p>
</div>
<!-- Card 3 -->
<div class="kpi-card group p-8 border border-white/5 bg-[#0a0a0a] relative overflow-hidden hover-trigger">
<div class="absolute top-0 right-0 p-4 opacity-50 group-hover:opacity-100 transition-opacity">
<i data-lucide="zap" class="w-6 h-6"></i>
</div>
<div class="font-mono text-xs text-gray-500 mb-2">INFERENCE TIME</div>
<div class="text-5xl md:text-6xl font-bold font-mono mb-4 counter" data-target="12">0</div>
<div class="text-xs text-gray-500 font-mono mb-4">ms</div>
<div class="w-full h-[1px] bg-white/10 mb-4 relative overflow-hidden">
<div class="absolute top-0 left-0 h-full w-1/3 bg-white group-hover:w-full transition-all duration-1000 ease-out delay-400"></div>
</div>
<p class="text-sm text-gray-400">Achieving sub-15ms response times on consumer hardware.</p>
</div>
</div>
</section>
<!-- Wireframe / Grid Section -->
<section id="work" class="py-32 relative overflow-hidden">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-start mb-16">
<h2 class="text-4xl md:text-6xl font-bold">PROJECTS</h2>
<div class="font-mono text-xs text-gray-500 mt-4 md:mt-0">ARCHIVE: 2023 - 2024</div>
</div>
<!-- Vertical Crop Grid Trigger -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<!-- Left: Text Description -->
<div class="order-2 md:order-1 space-y-8">
<div class="project-trigger group cursor-pointer">
<div class="flex items-center gap-4 mb-2">
<span class="font-mono text-xs text-accent">01</span>
<span class="font-mono text-xs text-gray-500">NEURAL INTERFACE</span>
</div>
<h3 class="text-3xl md:text-5xl font-bold group-hover:text-white transition-colors">Brain-Computer Interface</h3>
<p class="text-gray-400 mt-4 leading-relaxed">
Decoding motor cortex signals in real-time to control robotic prosthetics with millimeter precision.
</p>
</div>
<div class="w-full h-[1px] bg-white/10"></div>
<div class="project-trigger group cursor-pointer">
<div class="flex items-center gap-4 mb-2">
<span class="font-mono text-xs text-accent">02</span>
<span class="font-mono text-xs text-gray-500">GENERATIVE MODEL</span>
</div>
<h3 class="text-3xl md:text-5xl font-bold group-hover:text-white transition-colors">Synthetic Data Fabric</h3>
<p class="text-gray-400 mt-4 leading-relaxed">
Creating infinite, privacy-compliant datasets for training LLMs and Computer Vision models.
</p>
</div>
</div>
<!-- Right: Visual Reveal -->
<div class="order-1 md:order-2 relative h-[600px] w-full border border-white/10 bg-charcoal overflow-hidden group hover-trigger">
<!-- Abstract geometric representation -->
<div class="absolute inset-0 bg-grid-pattern opacity-20"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-64 h-64 border border-white/20 rounded-full animate-[spin_10s_linear_infinite]"></div>
<div class="absolute w-48 h-48 border border-white/10 rotate-45"></div>
<div class="absolute w-32 h-32 bg-white/5 blur-xl rounded-full"></div>
</div>
<div class="absolute bottom-0 left-0 p-8 bg-gradient-to-t from-black to-transparent w-full">
<span class="font-mono text-xs">FIG 1.1: ARCHITECTURE</span>
</div>
</div>
</div>
</div>
</section>
<!-- Accordion Slider / Showcase -->
<section id="research" class="py-32 bg-[#0a0a0a] relative">
<div class="container mx-auto px-6">
<h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">RESEARCH PAPERS</h2>
<div class="max-w-4xl mx-auto space-y-4">
<!-- Paper 1 -->
<div class="research-item group border-b border-white/10 pb-4 cursor-pointer hover:bg-white/5 transition-colors">
<div class="flex justify-between items-center py-6">
<h3 class="text-2xl font-bold">Attention Is All You Need (Redux)</h3>
<i data-lucide="chevron-down" class="w-6 h-6 transform transition-transform duration-300"></i>
</div>
<div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<div class="pb-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2 text-gray-400 text-sm leading-relaxed">
<p class="mb-4">An exploration into self-attention mechanisms in transformer architectures, optimized for sparse computation.</p>
<ul class="list-disc list-inside text-gray-500 font-mono text-xs space-y-1">
<li>ArXiv: 2023.10.24</li>
<li>Latex Source Available</li>
<li>Code: GitHub.com/AI-Eng/Transformer</li>
</ul>
</div>
<div class="bg-white/5 p-4 border border-white/10">
<div class="text-xs font-mono text-gray-500 mb-2">CITATION SCORE</div>
<div class="text-3xl font-bold">142</div>
</div>
</div>
</div>
</div>
<!-- Paper 2 -->
<div class="research-item group border-b border-white/10 pb-4 cursor-pointer hover:bg-white/5 transition-colors">
<div class="flex justify-between items-center py-6">
<h3 class="text-2xl font-bold">Quantum-Classical Hybrid Heuristics</h3>
<i data-lucide="chevron-down" class="w-6 h-6 transform transition-transform duration-300"></i>
</div>
<div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<div class="pb-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2 text-gray-400 text-sm leading-relaxed">
<p class="mb-4">Leveraging variational quantum eigensolvers (VQE) to optimize reinforcement learning policies.</p>
</div>
<div class="bg-white/5 p-4 border border-white/10">
<div class="text-xs font-mono text-gray-500 mb-2">CITATION SCORE</div>
<div class="text-3xl font-bold">89</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-20 border-t border-white/10 bg-void relative overflow-hidden">
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center relative z-10">
<div class="mb-8 md:mb-0 text-center md:text-left">
<h2 class="text-2xl font-bold">READY TO COLLABORATE?</h2>
<p class="text-gray-500 font-mono text-sm mt-2">Open for select research partnerships.</p>
</div>
<div class="flex gap-6">
<a href="#" class="hover:text-white transition-colors hover-trigger"><i data-lucide="github" class="w-6 h-6"></i></a>
<a href="#" class="hover:text-white transition-colors hover-trigger"><i data-lucide="twitter" class="w-6 h-6"></i></a>
<a href="#" class="hover:text-white transition-colors hover-trigger"><i data-lucide="linkedin" class="w-6 h-6"></i></a>
</div>
</div>
<div class="absolute bottom-4 right-6 font-mono text-[10px] text-gray-700">
Built with anycoder
</div>
</footer>
</main>
<script>
// Initialize Icons
lucide.createIcons();
// --- 1. PRELOADER LOGIC ---
const loader = document.getElementById('loader');
const loaderBar = document.getElementById('loader-bar');
const canvasContainer = document.getElementById('canvas-container');
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
// Finish loading
gsap.to(loaderBar, { width: '100%', duration: 0.2, onComplete: () => {
gsap.to(loader, {
yPercent: -100,
duration: 1,
ease: "power4.inOut",
onComplete: () => {
canvasContainer.style.opacity = 1;
initAnimations(); // Start main animations after loader
}
});
}});
}
loaderBar.style.width = `${progress}%`;
}, 100);
// --- 2. THREE.JS BACKGROUND (Data Tunnel Effect) ---
// Combining concepts from multiple pens for a unique look
const scene = new THREE.Scene();
// Fog for depth fading
scene.fog = new THREE.FogExp2(0x050505, 0.002);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 100;
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
canvasContainer.appendChild(renderer.domElement);
// Create Particles (The "Data Tunnel")
const geometry = new THREE.BufferGeometry();
const count = 3000;
const positions = new Float32Array(count * 3);
const colors = new Float32Array(count * 3);
const sizes = new Float32Array(count);
const color1 = new THREE.Color(0xffffff); // White
const color2 = new THREE.Color(0x333333); // Grey
for(let i = 0; i < count; i++) {
// Tunnel shape logic
const angle = Math.random() * Math.PI * 2;
const radius = 20 + Math.random() * 80; // Tunnel width
const z = (Math.random() - 0.5) * 400; // Length
positions[i * 3] = Math.cos(angle) * radius;
positions[i * 3 + 1] = Math.sin(angle) * radius;
positions[i * 3 + 2] = z;
// Mix colors
const mixedColor = Math.random() > 0.5 ? color1 : color2;
colors[i * 3] = mixedColor.r;
colors[i * 3 + 1] = mixedColor.g;
colors[i * 3 + 2] = mixedColor.b;
sizes[i] = Math.random() * 2;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
// Custom Shader Material for particles
const material = new THREE.PointsMaterial({
size: 0.5,
vertexColors: true,
transparent: true,
opacity: 0.8,
blending: THREE.AdditiveBlending
});
const particles = new THREE.Points(geometry, material);
scene.add(particles);
// Add a secondary geometric grid (The "Wireframe" feel)
const gridHelper = new THREE.GridHelper(200, 50, 0x333333, 0x111111);
gridHelper.position.y = -50;
scene.add(gridHelper);
// Animation Loop
let mouseX = 0;
let mouseY = 0;
let targetX = 0;
let targetY = 0;
document.addEventListener('mousemove', (event) => {
mouseX = event.clientX - window.innerWidth / 2;
mouseY = event.clientY - window.innerHeight / 2;
});
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const elapsedTime = clock.getElapsedTime();
targetX = mouseX * 0.001;
targetY = mouseY * 0.001;
// Rotate particles based on mouse
particles.rotation.y += 0.002;
particles.rotation.x += (targetY - particles.rotation.x) * 0.05;
particles.rotation.y += (targetX - particles.rotation.y) * 0.05;
// Move particles towards camera to simulate tunnel
const positions = particles.geometry.attributes.position.array;
for(let i = 0; i < count; i++) {
// Move Z
positions[i * 3 + 2] += 0.5; // Speed
// Reset if too close
if(positions[i * 3 + 2] > 150) {
positions[i * 3 + 2] = -250;
}
}
particles.geometry.attributes.position.needsUpdate = true;
// Subtle grid movement
gridHelper.rotation.y = -mouseX * 0.0002;
renderer.render(scene, camera);
}
animate();
// Handle Resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// --- 3. GSAP SCROLL ANIMATIONS ---
gsap.registerPlugin(ScrollTrigger);
function initAnimations() {
// Hero Animations
const heroTl = gsap.timeline();
heroTl.to('.hero-anim', {
y: 0,
opacity: 1,
duration: 1,
stagger: 0.2,
ease: "power3.out"
});
// KPI Counter Animation
gsap.utils.toArray('.counter').forEach(counter => {
const target = parseFloat(counter.getAttribute('data-target'));
gsap.to(counter, {
innerText: target,
duration: 2,
snap: { innerText: 0.1 },
scrollTrigger: {
trigger: counter,
start: "top 85%",
toggleActions: "play none none reverse"
}
});
});
// Card Stagger Reveal
gsap.from('.kpi-card', {
y: 50,
opacity: 0,
duration: 1,
stagger: 0.2,
scrollTrigger: {
trigger: '#kpi-section',
start: "top 70%"
}
});
// Project Wireframe Reveal
gsap.from('.project-trigger', {
x: -50,
opacity: 0,
duration: 1,
stagger: 0.2,
scrollTrigger: {
trigger: '#work',
start: "top 70%"
}
});
// Research Accordion Logic (Manual JS for accordion effect)
const researchItems = document.querySelectorAll('.research-item');
researchItems.forEach(item => {
const header = item.querySelector('div.flex');
const content = item.querySelector('.max-h-0');
const icon = item.querySelector('i');
header.addEventListener('click', () => {
const isOpen = content.style.maxHeight;
// Close all others
researchItems.forEach(otherItem => {
otherItem.querySelector('.max-h-0').style.maxHeight = null;
otherItem.querySelector('i').style.transform = 'rotate(0deg)';
});
// Toggle current
if (!isOpen) {
content.style.maxHeight = content.scrollHeight + "px";
icon.style.transform = 'rotate(180deg)';
}
});
});
}
// --- 4. CUSTOM CURSOR LOGIC ---
const cursor = document.getElementById('cursor');
const triggers = document.querySelectorAll('.hover-trigger');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
triggers.forEach(trigger => {
trigger.addEventListener('mouseenter', () => {
cursor.classList.add('hovered');
});
trigger.addEventListener('mouseleave', () => {
cursor.classList.remove('hovered');
});
});
</script>
</body>
</html>